Build An HTML5 Website With A Responsive Layout

Share it with your friends Like

Thanks! Share it with your friends!

Close

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
https://www.youtube.com/watch?v=UB1O30fR-EE

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

COURSES & MORE INFO:
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia

NEW DISCORD CHAT SERVER:
https://discord.gg/traversymedia

Comments

Limit Hold'em says:

14:25 Is it a good practice to put h1 tags in different places on the page instead of using at once at the top level?

maxirater says:

This video saved my bacon. I had a job making a website and trying to get templates work was impossible. The code in this video bought me a new computer.

ahmed echch says:

Thank you so much brad (y)

Nenad Savkovic says:

Hey man! Thanks for the awesome tutorial! Although I'm a seasoned backend (Python) developer, I found this video to be extremely helpful for going through the "frontend" basics, vanilla (no framework)-style. Your way of coding and teaching is much needed these days… One question, that Discord chat server link has expired, or you removed it? I would be really glad to join the group…that is, if there's still one.

Pavel TPG says:

You are a saviour. Very well explained.

Pu Nk says:

Sir, Could you guide me as to where i can find places where i can write code for the prescribed design (already existing)…Sort of like challenges or tasks you could say just so that i get enough practice
Simply put, they show me the output and i do the front-end coding

Nino Ramos says:

I'm so amazed that you can type out hex colors by memory. I would always refer to a site lol.

Denise Barr says:

Thank you so much for this!

Greg Williams says:

That was awesome thanks for taking the time to post. Good Job !

kenneth patigayon says:

I am working on your tutorial step by step bur during the css code I have an issue about the font it wont change to Helvetica font need help:) im also using atom

Unique says:

Thank you very much. Keep up the good work.

Jotham Dockie says:

very very very helpful thank you for sharing

immafriedredgodzilla says:

Superb tutorial ! I really love your approach on building this website. Its so ordered and tidy

JC_ says:

I have a little problem with that CSS thing

AARON MENDEZ says:

Thank you very much for these video help me a lot
and you explain very well

cjorata says:

Newbie in CSS/html5 here. No flaming intended, but isnt taboo working with fixed sizes (px) in a responsive/liquid layout ? Thank you

Paul Elksnis says:

I've been tinkering (and stumbling) for many years and have always been impatient to get straight into complicated, shiny coding. Watching you build this simply and responsive website has really helped me understand why I have been having trouble controlling where I position elements on a page!!! It has also made me realise that a bigger problem I have is actually deciding on what content to include! Thanks for a great lesson!

Michael Paradise says:

Maybe I don't get something, I'm a beginner, but I couldn't help but notice that you use wrapper (container) multiple times, so I have a question: isn't just better to use it once and put all that stuff inside this wrapper?.. I mean, to me it seems logical, same way as : a*x+b*x+c*x+d*x.. = x*( a+b+c+d..)
Or am I missing something?

shaneh408 says:

can anyone help! the content from style.css is not being added to overall design when i open it up on my browser?

cadentcrown says:

how do i put logo in the place of acme heading. should i include it as a background in css or in html as img tag

Write a comment