HTML and CSS For Absolute Beginners | 2024 Crash Course

-- Today marks my annual frontend development crash course where you learn some HTML, CSS and a tiny bit of JavaScript to create a simple project. This should be a great introduction for beginners who are interested in learning HTML and CSS here in 2024.

Project files:

The Figma layout:

The UI/UX crash course video referenced:

0:00 - Intro
2:45 - Layout Overview
4:07 - Installing Visual Studio Code
4:40 - Writing the HTML
37:51 - Writing Mobile First CSS
1:13:16 - Writing some JavaScript
1:24:48 - Finishing the CSS
1:37:00 - Responsive CSS with Media Queries
1:56:55 - Final Project

Let's get started!

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

Subscribe for NEW VIDEOS!

^-Chat with me and others

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

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

[dannycabrera]

As a senior developer, I’m very impressed with your front end coding. I have reviewed junior dev code that has less understanding of mobile-first development. It’s important to also set your markup up in a way to make it easier to get the layout changes you need. Which you did a great job doing.

One thing you mentioned was the order of the style properties not mattering. This is mostly true. But the browser does apply them top to bottom. So you could essentially override something that was previously applied higher in the list. Something to note if you are debugging or get unexpected results. Great job Gary!

[sethaaron]

New year new me. I am definitely going to finish this course after I finish the 2021 crash course!

[caqib]

You make it so effin easy for absolute beginners, hats off

[siko.]

i just finished the figma design course! thank you!

[garislit]

Thank you so much. You saved my decision, i was strungling to how implementing to html css

[pterosaurcannotFLY]

Great Course! The quality just improves every year. I learn a lot from 2023 and 2024 crash course! Thank you!

[ahmadsafdar]

Thanks for the video. I started using sell the trend app and learned a lot, but your videos help me too.

[therealist]

Your 2023 course is really what made me understand HTML & CSS properly

[DesignCourse]

What's up everyone?! Who's becoming a frontend dev in 2024?

[caqib]

Do you have any extension installed that gives you code suggestions (the ones in grey color)????

[tagored]

Amazzing tutorial. THanks so much for this video. super helpful for beginners like me. You are a great 'Teacher'.

[leki]

Hi Gary I hope you would read this, I just wanna ask what should be the scope of the 'main' tag, why you didn't include the picture of the cat there, ? Because I read online before that the order must be <header>, <main>, <footer> inside the body and all html elements should be in those 3. Awesome tutorials btw! 🤙

[DeignFilx]

we been learing alot, please tell us about the design and development challanges we might face in the industry there's a lot you need tell us man.

[franciscajara]

Please, calm that anxiety hitting desk reflex

[shubhamrathod]

Please make full series on Figma to HTML, CSS

[CouchBit]

Been putting off css for at least 1.5 years, bc i couldn't nest elements and i felt like sass was just way too much for learning purposes. Thank god the css gods decided to give us native nesting

[_edwardsx]

What extension do you use in that auto suggest code? May I know? Thank you.

[rizqofathur]

IMO the mic sound in the video is a bit noisy

[hotwings]

Probably could've done things in an easier way, especially having to reset things I feel it was unnecessary.

[afrobased]

i love your videos n i have learnt alot but the responsive part with javascript