Tutorial How to Create Responsive Web Design

Tutorial on how to make a responsive web design — In this article, TWD will briefly explain how to create a responsive website layout, namely a layout that can adjust its appearance even though it is opened on various screen sizes (mobile phones, tablets and PCs).

This article is a continuation of the responsive web discussion, previously we were acquainted with responsive web, then after that we discussed in full what the benefits and uses of responsive web are for your business, then in this article we learn how to make responsive web design itself.

Purpose of This Article

In this paper we will try to create a responsive web layout, starting with a 3 column layout, then when opened at a certain size (1080px) it will become 2 columns, and then on a 780px screen down it will be 1 column.

You can see the changes in the image below:

responsive web design

First Create HTML Script
First we will start by creating the HTML structure, consisting of 3 main classes, and because we will create 3 columns, we will divide the .main class into 3 classes, namely .left, .middle and .right, each class will be given a certain size. and given the float property to form a column.

class header
main class (consisting of “.left”, “.middle” and “.right” classes
class footer

For the header section…

For the Left column…

For the middle column…

For the right column…

For the footer…

For the head section of HTML, don’t forget to tag the meta viewport, the tag is like this:

Insert meta viewport in head tag
Setting Layout With CSS
We have completed the HTML structure, but the layout has not yet been formed. So next we add CSS code to form a layout consisting of 3 columns, the css code snippet is as follows.

}
In the css code above, the column width is no longer specified, all divs are made width: auto which means they are made to fill the width of the screen, finally a layout with only one column is formed.

That’s a simple way to make responsive layouts, we only explain the basic principles to make it easy to understand, so the layout is made very simple. For serious projects you can develop again with other elements.

For the next elements such as responsive menus, responsive videos, and others, we may discuss them in subsequent articles.

If you are interested in trying and making your own you can see the full script below.

DEMO | DOWNLOAD SCRIPT

After this tutorial, I hope it helps you understand how to make responsive layouts so that your website can be opened on various screen sizes.