How to create a responsive website using html5 and css

0
3685

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

  7. how to create a responsive website in html and css

    learn to create a responsive website

  8. Now to add some styling effects just create a style.css file in css folder and write the following code in it :
  9. Screenshots for the style.css file are given below :

  10. responsive website

    website development

    developing responsive website

    html css

    Css and HTML5

  11. Hence, when you run your index.html file you will have following output :

  12. html5 and css output

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

  16. Now just perform slight changes in the css as shown below :

  17. responsive website

    v18

  18. After adding media screen for the tablet the output window will have following look out :

  19. v20

    v21

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