Building a Responsive Website Layout using HTML and CSS

by

Posted on 21 January 2017

Most of the modern day Websites use responsive web designs, now you must be thinking what responsive actually means, a responsive website can adapt different screen sizes and can adjust their design and layout accordingly.

In this tutorial, we will learn how to make a responsive website design using HTML and CSS but first, we will learn how a basic website layout looks like, see the below image.

Basic Website Layout

 The above-shown layout is a simple website layout we will first build the above layout and then we will convert it into a responsive one. The HTML frame for the layout is shown below

<!DOCTYPE html>
<html>
<head><title>Responsive</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div class="header-wrap">
        <div class="header">
            <!--header-->
        </div>
    </div>
    <div class="main-wrap">
        <div class="main-container">
            <div class="main" class="flt-left">
                <!--main-->
            </div>
            <div class="sidebar" class="flt-right">
                <!--sidebar-->
            </div>
            <div class="clear"></div>
        </div>    
    </div>
    <div class="footer-wrap">
        <div class="footer">
            <!--footer-->
        </div>
    </div>
</body>
</html>

Now let's do the designing part and give our boring HTML some colours.So lets make a CSS file named style.css and type the below code in it

body{
    margin:0;
    padding:0;
}
.flt-left{
    float:left;
}
.flt-right{
    float:right;
}
.clear{
    clear:both;
}
.header-wrap{
    width:100%;
}
.header{
    padding:20px 0 20px 0;
    background: lightcoral;
    max-width:1000px;
    margin:auto;
    color:white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}
.main-wrap{
    width:100%;
    margin:0;
}
.main-container{
    max-width:1000px;
    margin:auto;
    color:white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}
.main{
    width:73%;
    background:lightgreen;
    margin:0;
}
.sidebar{
    width:20%;
    background: lightsalmon;
    margin:0;
}
.footer-wrap{
	width:100%;
	margin:0;
	padding:0;
}
.footer{
	padding:20px 0 20px 0;
    background: lightcoral;
    max-width:1000px;
    margin:auto;
    color:white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}

Now we have successfully built our layout but it is still not responsive so we will make it responsive, make a new CSS file named response.css and type the below code in it

@media screen and (max-width: 700px){
	body{
		margin:0;
		padding:0
	}
	p{
		padding:0;
		margin:0;
	}
	.header{
		margin:auto;
		width:100%;
	}
	.main{
		float:none;
		margin:auto;
		width:100%;
		padding:20px 0 20px 0;
	}
	.sidebar{
		float:none;
		margin:auto;
		width:100%;
		padding:20px 0 20px 0;
	}
	
}

Now we have successfully built a responsive layout, the above layout will automatically adapt different screen sizes.

Responsive layout using css

 Thank you for reading.

Tweet your queries and feedback to @PsychoCodes or leave a message on our Facebook page. You can also comment your questions below.

Also, don't forget to subscribe to our Newsletter.

If you like this article, then please share it and help us grow.


If You Love this article, You Should Consider:

  • Like us on Facebook
  • Follow us on Instagram
  • Follow us on Twitter
  • Subscribe to our Newsletter.
  • Let us know your suggestions and queries in the comments below.

Thank you for your Love and Support

Share your thoughts

Search
Adverstisement
Adverstisement