The 2023 Frontend Development Crash Course - Learn HTML & CSS

Codepen demo:

Project files:

Figma design document:

A few of the things you will learn in this video:
- Basic HTML & CSS Anatomy
- Structuring HTML
- CSS Flexbox & the CSS Grid
- CSS Transitions & Animations
- And much more..

0:00 - Intro
0:38 - HTML & CSS Anatomy
5:49 - The Code Editor
7:47 - Getting Started with HTML
12:51 - HTML Navbar
28:45 - HTML Hero Section
50:16 - CSS Font Size 62.5%
54:32 - CSS Navbar
1:20:18 - CSS Hero (Left Column)
1:40:20 - CSS Hero (Right Column)
1:54:30 - CSS Animations
2:08:40 - Final Thoughts

Let's get started!

#frontend #html #css

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[actandrepeat]

A browser's root font size is 16 px by default. When setting font-size to 62.5% in the CSS stylesheet the root font size changes to 10 px, because 16 * 62.5 / 100 = 10. 1 REM is now equal to 10 pixels which makes converting values from Figma way easier. So 45 px is now 4.5 REM as opposed to 45 / 16 = 2.8125 REM.

[brunon]

1:29:15 You can split your windows easily with the shortcuts: "Windows Key + Left Arrow Key" and "Windows Key + Right Arrow Key"

[kjellandrew]

I really appreciate how you keep your mistakes in the video. It shows how to troubleshoot some of the silly things we do. And is encouraging that it happens to everyone.

[syndg]

Amazing! Was waiting for this since you released the design one! Thanks for the amazing content! ❤️

[cyanbeam]

Thank you for taking the time to do this crash course. You've explained things so well boosted my competence with web design. I'm excited to make many more.

[magoxxii]

Last year i watch your last crash course and now i watched this one and everything make so much more sense. Thanks for keeping doing this videos!

[crwz]

Wow, I'm from Brazil and I loved discovering your channel, bring more videos like this please, they are extremely helpful! thanks.

[billyfarris]

Love the video!! you have a great way of explaining things with ease.. i learned alot and will be looking into your other videos

[ArindamMukherjee-it]

Thanks Gary, this helped me a lot. I am new to learning HTML and CSS and seeing you coding, inspires me learning. Thanks for helping people like us.

[jerrycompanjen]

Nice! Was gonna start your course last night and was about to do your old crash course from last year... So this is great timing!

[mdashrafulalam]

The way you explained the HTML layout with red boxes was amazing. Thanks a lot.

[henrythomas]

Great video! Some key points were highlighted that I hadn't heard anyone else discuss. Thank you!

[Chorcai]

Fantastic crash course, it really showed you a bit of everything for you to look into more, however my only nit pick would be the wrong image was used for the products! Looking forward to more of your videos for 2023!

[Ceinsight]

10:48 correction internal css :D! thanks so much for making this awesome tutorial, i've done your other one yesterday. love your tutorials great explanation!

[dumbulovich]

Hey mate, I dont usually comment on people's tutorials but you are amazing at teaching, and should be awarded. Thanks

[TalonOfficialCanada]

always love watching your videos. I always learn something new and understand a bit more every time I watch them. By far the best crash courses I've found. This one is a bit more for someone who has already dipped their toes in the coding waters I feel, but it was really nice to be able to watch this and really not be confused at any time during the course. I must be learning something 😎

[kcwitch]

I love how you dissect the page in forming the layout. I learnt something there

[lonleybeer]

This course was fanatically done, I'm not that great with the keyframes so this really did help alot

[StormeSpace]

This is the first modern html css video on youtube, Your a Game Chager
I appreciate if you do another html css course
THANKS

[photoinshot]

Excellent video, with detailed explanations and very engaging, thanks!