Designing a web page or an app is much similar to designing a card or a poster. The only exception is that it utilizes code instead of pen and paper or a software program like Figma or Illustrator, yet it carries the same designing concepts nonetheless.

When you’re designing a page in general, you’ll start with the layout. You need to organize your page into different sections. For the web page the sections would be: The header, the uppermost part of the page, where the name of the page is included along with the main menu. Also there will be the footer, which is the end part of the page where the address, contact info and/or the social media links are added. And then you’ll have the middle section of the page where all the main info in the form of text, images and/or videos are included.

The next step is to include the contents into each section accordingly. So you’ll want to add your text whether in the form of paragraphs, tables, lists or forms. You’ll also want to include your images, icons and buttons. And finally you’ll want to include videos if available to render the web site more interesting.

The following step would be decorating all the mentioned content and sections. You can use different fonts, sizes and colors to make all the components stand out to the viewers along with outlining your content by adding further borders and paddings to your sections and items.

Also you’ll need to add more functionality to your website. This can occur by invoking different features written in other languages such as JavaScript or PHP within your HTML code. Such commonly used features are mainly ready made code written within the different libraries of those other languages. You can use such invoked features to communicate better with the server or the browser or to efficiently run other programs within your webpage for better interaction. This is simply what HTML APIs are all about.

You can also add further interaction to your HTML webpage by adding more JavaScript language code to it. This can be done either by including it within the same document or in a separate JavaScript file linked to your main HTML document.

And You can add further decoration to your HTML webpage by adding more CSS code to it, whether within the same HTML file, or in a separate CSS file also linked to the main HTML document.

Generally your HTML code is written in the form of command phrases called elements. These phrases contain a start and an end tag, which carry the main commands such as <p> for paragraphs or <img> for images. They also contain the attributes that further describe the command specifics, such as size and color, located right after the start tag and are separated by spaces. You can also embed different elements or command phrases within each other for a more detailed web page.

Also don’t forget that the HTML code is divided into 2 main sections, the head section where all the meta tags are included and the body section where all the other tags are included. The head section is written first and it includes all the information about the HTML document you’re writing. Then the body section follows and contains all the main code for the web page you’re designing.

So finally, a simple version of your HTML code should look similar to this:

Hope I got you more interested in learning more about HTML and about coding in general and how it can easily relate to the interesting field of design. Thank you for reading my article!