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
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.
Thank you for reading.
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.
0 comments: