Build An HTML5 Website With A Responsive Layout

By | 14th August 2017
Build An HTML5 Website With A Responsive Layout

In this video we will build a clean coded responsive mobile friendly HTML5 website for a fictional web design company. We will go over semantic HTML tags like header and footer as well as the basics of HTML and CSS. This is a great project for beginners.

CODE DOWNLOAD:
http://www.traversymedia.com/downloads/acme_website.zip

SUGGESTED VIDEO: HTML Crash Course For Absolute Beginners

SPONSORS:
DevMountain Bootcamp – https://goo.gl/6q0dEa

2017 WEB DEV GUIDE:

SUPPORT THIS CHANNEL WITH A CUP OF COFFEE PER MONTH:
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia
Video Rating: / 5

20 thoughts on “Build An HTML5 Website With A Responsive Layout

  1. James Smith

    Thanks for a great tutorial, Brad. Your style of html first then style component by component make more sense to me that anything I have seen. You use the classic building block approach to teaching which has served me well in many endeavors. Thanks so much for the quality guidance and example.

    Reply
  2. roaringleo57

    Wow I really love this tutorial.  I am using Visual Studio 2013 to follow along with the tutorial.  Visual Studio supports everything being used here directly. The main page I named Default.aspx and then created a stylesheet.css. Also Visual Studio has amazing intelli sense so everything being typed here just shows up. You can press the next letter to accept the key word or select it from the list; this is going very fast.

    Reply
  3. Viktor Amundsen

    +Traversy Media my footer doesn't work? when i type the background-color in it also makes the images orange? Plzz help me!

    Reply
  4. Patricio Contreras

    Brad, your tutorials are the kind of sticking around and not just passing by to the next one. They are very fiendly and humble. I have learned a great deal of complex concepts by means of your peacful, practical, effective and thorough method. Thanks a million for serving this much

    Reply
  5. Leslie García

    Awesome tutorial, to the point and well explained, thank you very much!

    Reply
  6. Program ming

    This is probably a dumb question but, why are you using the section tags and not any other tags? What is really the importance of the section tag semantically?

    Reply
  7. Chop the Falcon

    I'm trying to use atom but I'm having trouble getting started, nothing is color coded and the snippets aren't working etc etc

    Reply
  8. Rija kashyap

    Hi… Great video. It helped me a lot. All I couldn't do is setting the background image. Idk why, I tried so many times..

    Reply
  9. jyoti choudhury

    26.49

    header a{
    color: #ffffff;
    text-decoration: none;
    text-align: right; //I had to put this to bring the buttons to the right
    text-transform: uppercase;
    font-size: 16px;

    }

    Reply
  10. alihassan hassan

    wonderfull.Due to this video my media quries problem are solved

    Reply
  11. anicka cihlova

    Amazing video, the best I´ve seen for creating websites! Helped me a lot. Thank u very much :))!!!

    Reply
  12. Roronoa Zoro

    I have a problem, my header doesnt adjust to the page it only appear in the container, someone help pls

    Reply
  13. Manish Newa

    Thank you for this video. It was very helpful for me to learn css layout properties

    Reply

Leave a Reply