CSS Responsive Web Design

The responsive web design is a way to make a web page render well on all types of screen sizes and devices such as laptops, desktops, smartphones, tablets, etc. Any website which is created using the responsive web design (RWD) can automatically adjust the layout and the appearance according to the environment in which it is viewed.

Nowadays, the responsive layout becomes the most important function of any website because more than half of the internet traffic comes from mobile phones. Suppose you have visited a site on your phone and that website has only a desktop version. So, you have to scroll sideways, again and again, to read or see something. This makes a bad user experience and also you do not want to visit that website again. Because of these reasons, the websites adapt to the RSW approach.

Creating a responsive web page

Nowadays, there are devices of multiple screen sizes are available. It is necessary to create web pages that can adapt to every screen size and easy to access. So that the user does not have to scroll sideways to check the overflowed content.

Generally, the CSS layout can be made using HTML elements and CSS layout modules such as flexbox, grids, floats, box-model, etc. To create any web page, we have to first design a layout. Then, by keeping that layout in mind we have to start implementing it.

Here are the steps to create a responsive website is given below:

Step 1: Create a header using the <div> element.

Step 2: Then we have created a row using the .row class. This row is divided into three sections which can be done using .col-* class.

• The first section is a menu that is created using list element <ul> and the menu items are created using <li> element.
• The second section is a description which is consists of a heading and a paragraph. The heading is created using <h1> element and paragraph is created using <p> element.
• The third section consists of the facilities that we offer. In this section, all the content is placed within the heading (<h1>.....<h6>) element.

Step 3: The last section is the footer which is created using the <div> element along with the class .footer. All the CSS properties for the footer are set inside the .footer class.

Note: When you open the web page on devices of different screen size then the layout of the web page also change according to them based on the screen size of the device.

Live Example

Conclusion

CSS Responsive Web Design makes our web page look good on all screen sizes using HTML and CSS only.