In this tutorial today we will learn how to create a responsive website using html5 and css .
- So to learn how to create a responsive website using html5 and css follow the steps given below :
- Before working on responsive website first of all lets create a basic design template .
- First of all create a new folder for example say responsive, inside that folder create some other folders like css, images and also create a new index.html file .
- CSS folder will contain the style.css file which we will be using in our website development to add some styling effect .
- So you will have the following content in your responsive folder as shown below :
- Open your index.html file with any of the text editor and write the following code :
- Here are the screenshots for the code :
- Now to add some styling effects just create a style.css file in css folder and write the following code in it :
- Screenshots for the style.css file are given below :
- Hence, when you run your index.html file you will have following output :
- To make your website responsive you will have to add the media queries in your css file .
- The syntax is given below :
- So now when you shrink the page you will have the following output :
- Now just perform slight changes in the css as shown below :
- After adding media screen for the tablet the output window will have following look out :
- Hence, we have successfully learnt how to create a responsive website using html5 and css .
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Responsive Design</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div id="wrapper"> <div id="logo"><!-- Logo start---> <h1>Logo</h1> </div> <!-- Logo ends---> <div id="header"> <!-- This is the header---> <ul> <li> <a href="#" class="active" >Home</a></li> <li> <a href="#" >About</a></li> <li> <a href="#" >Services</a></li> <li> <a href="#" >Product</a></li> </ul> </div> <!-- This is end of header---> <div id="slider"> <img src="images/v1.jpg" width="425%;"/> </div> <div id="contentarea"> <div id="leftside"> <div class="thumb"> <h2>Hotel</h2> <p>Hi how are you</p> </div> <div class="thumb"> <h2>Restaurent</h2> <p>Hi how are you</p> </div> <div class="thumb"> <h2>Bar</h2> <p>Hi how are you</p> </div> <div class="thumb"> <h2>Club</h2> <p>Hi how are you</p> </div> </div> <div id="rightside"> <h2>Links</h2> <ul> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> </ul> </div> <br clear="all" /> <!--which remove the floating properties --> </div> <div id="footer"> &Copyright eduonixlearning solution.com </div> </div> </body> </html>
body{ margin:0; padding:0; font-family:Arial,Helvitica Sanf serif; } *{ padding:0; margin:0; } #wrapper{ border:solid 1px; max-width:1100px; margin:auto; } #logo{ border:0px solid; width:20%; float:left; padding-left:30px; font-style:italic; } #header{ clear:both; width:100%; background:#292929; height:42px; margin-top:100px; float:left; } #header ul{ list-style:none; } #header ul li a{ text-decoration:none; color:#fff; float:left; padding:0px 40px; height:42px; line-height:42px; text-align:center; } #header ul li a:hover{ background:#f20068; } #header ul li a.active{ background:#f20068; which ever tab active that has that color } #slider{ clear:both; float:left; width:100%; } #slider img{ width:100%; } #contentarea{ border:1px solid; clear:both; float:left; margin-top:20px; width:100%; } #contentarea #leftside{ float:left; width:70%; border:0px solid; } #contentarea #leftside .thumb{ width:45%; margin-left:30px; margin-bottom:30px; float:left; min-height:200px; border:0px solid #ccc; } #contentarea #leftside .thumb h2{ background:#f20068; width:100%; color:white; text-align:center; } #contentarea #rightside{ width:26%; float:right; border:0px solid #ccc; margin-right:20px; } #contentarea #rightside h2{ background:#f20068; width:100%; color:white; text-align:center; } #contentarea #rightside ul{ list-style:none; } #contentarea #rightside ul li { border-bottom:1px dotted #ccc; height:55px; line-height:35px; padding-left:10px; } #contentarea #rightside ul li a{ text-decoration:none; color:#333; } #contentarea #rightside ul li a:hover{ color:#f20068; } #footer{ clear:both; float:left; width:100%; height:30px; line-height:30px; color:#fff; background:#333; text-align:center; color:red; } @media screen and (max-width:720px){ #logo{ border:1px solid; text-align:center; width:100%; float:left; padding-left:30px; font-style:italic; } #header{ clear:both; width:100%; background:#292929; height:200px; margin-top:30px; float:left; } #header ul{ list-style:none; } #header ul li a{ float:none; display:block; text-decoration:none; color:#fff; float:left; padding:0px 40px; height:42px; line-height:42px; text-align:center; } #header ul li a:hover{ background:#f20068; } #header ul li a.active{ background:#f20068; which ever tab active that has that color } #slider{ clear:both; float:left; width:100%; } #slider img{ width:100%; } #contentarea{ border:1px solid; clear:both; float:left; margin-top:20px; width:100%; } #contentarea #leftside{ float: none; width:100%; border:0px solid; } #contentarea #leftside .thumb{ width:90%; margin-left:30px; margin-bottom:30px; float: none; min-height:200px; border:0px solid #ccc; } #contentarea #leftside .thumb h2{ background:#f20068; width:100%; color:white; text-align:center; } #contentarea #rightside{ width:90%; float:none; border:0px solid #ccc; margin-right:20px; margin-left:35px; } #contentarea #rightside h2{ background:#f20068; width:100%; color:white; text-align:center; } #contentarea #rightside ul{ list-style:none; } #contentarea #rightside ul li { border-bottom:1px dotted #ccc; height:55px; line-height:35px; padding-left:10px; } #contentarea #rightside ul li a{ text-decoration:none; color:#333; } #contentarea #rightside ul li a:hover{ color:#f20068; } #footer{ clear:both; float:left; width:100%; height:30px; line-height:30px; color:#fff; background:#333; text-align:center; color:red; }
//This is for the tablet. // Syntax to add the media queries: @media screen and (max-width:720px;){ //Add your css here. } //For the mobile you have to add the media queries: @media screen and (max-width:420px;){ //Add your css here. }