Build a Responsive, Mobile First Website - HTML5 & CSS3

In this project we will build a responsive single page photography website using a mobile first approach with just HTML5 and CSS3. This is a project suitable for everyone including beginners.

Code:

Some Prerequisite Videos:

💖 Become a Patron: Show support & get perks!

Website & Udemy Courses

Follow Traversy Media:

The Developer Hangout: Public Discord Server

[PeriMoritz]

I had the same problem with emmet and the <main> tag until I researched and found that typing "mn" instead of "main" is the shorthand for the html5 main tag. I hope that helps. Thanks for your awesome tutorial btw.

[kevinzhang]

again, very well explained in the simple term ... very easy to understand. I got up @ 6:00 and killed one 1 hour to complete this while 2 kids are still sleeping ... now ... back to reality: awake them up .. prepare the breakfast and drop them to school ... then 1h drive for my daily full-time job ... :-)

[andreacraig]

I am extremely excited I tripped on this tutorial! Currently taking a class and my professor is great but sometimes his tutorials are all over the place. REALLY hard to follow. Your flow was easy to follow and understand! Thank you!

[CloseStudios]

This channel is the reason I didn't quit learning web dev.

[damirplicanic]

Thanks Traversy Media, not only for this video, but many others.
My goal is to become full-stack, cause I guess I can't make enough money being Philosophy/Sociology - teacher/professor, but also it is not all in the money. it is about leraning new things, and making something new, and something I can use for my personal use.
I can see you are quit good at "knowledge transfer", so everyone can understand.

Damir

[hector_ojeda_bustos]

The scrolll effect you can do it, with only css:
html { scroll-behavior: smooth; }

[Baelstrax]

Thank you, I took 8 months to buy myself a laptop, the sacrifice is worth it, I got through the whole video. Your videos are without a doubt valuable. Again, thank you.

[Fabyfakid]

Ive gone through the tutorials but still felt stuck, really needed stuff like this where you see everything come together

[timothyshores]

I've stumbled upon some of your more advanced tutorials. Thank you for creating the simple beginner friendly tutorials as well. I like how you started off with a brief overview of Emmet in VS Code.

[kurostaheri-golvrzi]

Brad is a gift to this world directly from Heaven. We're incredibly lucky to have him.

[jamesequanimity]

I love how you tell us what every line of codes are for and because of that you make learning much more easier. Thank you so much :)

[kno]

You make learning fun. Keep up the good work!
p.s please make more videos making websites from scratch.

[LatNWarrior]

I was webmaster certified before I retired and have learned a lot form your videos; Thank you for your shared knowledge. I am very much interested in CSS grid design. I would really like to see a project with just HTML & CSS without any flexbox. I am very interested in doing it all with CSS; NO Flexbox!

[MaximilianBerkmann]

Not sure if you already knew that since you released that video but Emmet allows you to also write the content of the tag you're "short-handing" like h2{Our work} which would produce: <h2>Our work</h2>.

[tevolutionYT]

I never learned more from a single video!! This is the reason I love youtube <3

[anamamer]

what an amazing coincidence. just thought of learning mobile first responsive design. typed in traversy media mobile first knowing full well that only grid css mobile first videos are present but would u look at this. 6 hours since upload. Nice gonna watch it. Also thanks to you i have become very very good at web designing. once i get a job and have my own bank account i'll definitely become a patron. thank you very much for sharing your knowledge with us

[BadalKumar-piud]

Whenever I need some kind of help related to web development, Brad is the first word that comes in my mind.
Brad Traversy - Name is enough !!

[freelancermahi]

Sir I'm from Bangladesh. Really i understand all of your tutorials is easily. thank you so much.

[ashishkpkpkp]

This channel will remain forever in my subscription list...

[patcrossart]

Lean and relevant, Traversy Media leads the viewer in an easy to follow and logical progression from the beginning to the end. I appreciate that kind of tutorial because it's just like watching over his shoulder as he works and narrates each step he takes. Also, it helps that he stays on tract (rather than diverting into elaborations that too often distract and confuse like rabbit trails). Well done. Thank you!