How to create a responsive website using html5 and css

0
4355

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 :

  1. Before working on responsive website first of all lets create a basic design template .
  2. 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 .
  3. CSS folder will contain the style.css file which we will be using in our website development to add some styling effect .
  4. So you will have the following content in your responsive folder as shown below :
  5. responsive website

  6. Open your index.html file with any of the text editor and write the following code :
  7. <!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>
    

  8. Here are the screenshots for the code :
  9. how to create responsive website
    how to create a responsive website in html and css
    learn to create a responsive website

  10. Now to add some styling effects just create a style.css file in css folder and write the following code in it :
  11. 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;
    
    }
    
    
    
    

  12. Screenshots for the style.css file are given below :
  13. website development
    responsive website
    website development
    developing responsive website
    html css
    Css and HTML5

  14. Hence, when you run your index.html file you will have following output :
  15. Output
    html5 and css output

  16. To make your website responsive you will have to add the media queries in your css file .
  17. The syntax is given below :
  18. //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.
    }
    

  19. So now when you shrink the page you will have the following output :
  20. responsive

  21. Now just perform slight changes in the css as shown below :
  22. website
    responsive website
    v18

  23. After adding media screen for the tablet the output window will have following look out :
  24. v19
    v20
    v21

  25. Hence, we have successfully learnt how to create a responsive website using html5 and css .

LEAVE A REPLY

Please enter your comment!
Please enter your name here