How to create a responsive website using html5 and css

0
3410

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. Here are the screenshots for the code :
  8. how to create responsive website
    how to create a responsive website in html and css
    learn to create a responsive website

  9. Now to add some styling effects just create a style.css file in css folder and write the following code in it :
  10. Screenshots for the style.css file are given below :
  11. website development
    responsive website
    website development
    developing responsive website
    html css
    Css and HTML5

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

  14. To make your website responsive you will have to add the media queries in your css file .
  15. The syntax is given below :
  16. So now when you shrink the page you will have the following output :
  17. responsive

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

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

  22. 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