CSS Masterclass - Tutorial & Course for Beginners

🔗 Links

When I first started developing websites, I struggled with the most basic of tasks... Centering a div? It honestly seemed impossible at the time. Back when flexbox wasn't even a thing, I came up with a solution of using a position absolute element with a top of 50%, translated back upwards by another 50% value. Although I came up with something that worked, getting to that point took me literal days. How much easier my life would've been if I just had the answers presented to me (like anything in life, lol!).

I know firsthand how freaking frustrating CSS can be to get working, it was only after working as a frontend developer full-time for the past 10 years when I realized: I know CSS (I know kung fu). That's where this course comes in.

This course contains nearly every little bit of CSS information I have stored in my head (at least everything that I can fit into a five hour video). From the bare basics, answering questions like: "What is CSS?" To installing a CSS framework like TailwindCSS and putting it to use, I'll show you everything I do to develop professional grade client websites that go for upwards of $20,000.

Otherwise, enjoy the vid ya'll, put a ton of effort into this one!

0:00 Intro to CSS
2:23 Project Overview
4:07 Project Setup and Initial Markup
12:54 Background Color
21:33 Removing Browser Defaults
24:46 Display Block, Inline-Block, Inline, and None
32:46 Flexbox in Action
56:15 Margin and Padding in Action
1:23:45 Typography and Font Styling
1:53:55 Position Relative, Z-Index, and Object-Fit
2:14:25 Max-Width Containers
2:36:38 Position Absolute
2:48:37 Containers for Desktop Screens
2:57:41 Media Queries
3:14:02 Intro to TailwindCSS
3:24:53 Tailwind Breakpoints
3:41:18 Em and Rem Units Animated
3:44:09 Tailwind Spacing in Action
3:58:21 CSS Overlays with Opacity
4:11:05 Tailwind Background Gradients
4:23:02 The Stats Section

[leonh]

It's interesting. I'm new to web developement and have watched some tutorials. The way you "structure" your html/css is completely different to other tutorials. In the other tutorials, they rarely use multiple classes for one html tag. But they put in more lines inside the classes in the css file. So as I'm new I don't know what's the better practice (also not after googling a bit). But I can imagine on bigger and more complex websites it could become a problem of readibilty of the code when you use let's say 10 classes for one html tag. Can you explain, why do you use the classes like you do? And why do the other people (that I watched the tutorials from) do it differently?

[branchyapple]

I didn't even watch this, but I already liked the video because i appreciate this video. And that you added timestamps. Thanks a lot man, going to check this video when needed :)

[yoy]

I am new to web development, watched some tutorials and yours is the easiest to understand for me. your tutorials deserved a lot more views

[andresdavid]

This video is amazing. You've definitely gained a customer.

[mateusgraciano]

man i was having a bad time trying to learn css, positioning/flexbox, this way of writing inline css code in html is far more readable and easier to visualize things thxx!!

[mradchemseddine]

Thanks for making this public Chris ❤️. Your courses are millions times better than the paid crap on Udemy.

[yeboahmartin]

You're a powerful teacher. I watched this tutorial without feeling tired. Thank you for your good work

[John-mjkk]

I love how you started right out with classes just like Tailwind CSS. Made it so much better overall. Great tutorial!

[asaniri]

TYSM for sitting for 5 hours and teaching me the perfect things i need to learn

[testpurpose]

I have seen other css tutorials from pros . But you are at next level in explaining .

[brok]

thats even a better html tutorial, then everything i watched until now according to web development
Great Job!!! 🔥

[andrewvillalon]

The way you present and explain your video is significantly unique compare to other tutorials

[fedctsj]

This an amazing course, a wonderful explanation, I finally understand how to make a navbar ...thx soo much.

[Techno]

Really well made and easy to follow, helped me finally understand how flexbox / positioning in general and mobile compatibility works. Thanks for making this!

[WritingQueen_]

I’m confused why u added a tag for style instead of making a file for style. So it doesn’t get confusing.

[xcixneptune]

good tutorial but the too much classes in the style tag(I was expecting another separate file for the css codes) was making it hard for me to catch up and you kept on writing some classes and later deleted them...

[abhishekdhiman]

Great course brother . I hope you will continue making amazing courses like this. Honestly learned a lot from this . Thank you for making such an amazing course.

[guilhermefigueiredo]

That's what I was looking for! You're amazing, bro!

[alijaafari]

Great intro to css, Also nice haircut in the middle of the process

[doctorjcw]

Thanks, been tryn to find a good break down for what css is