CSS Masterclass - Tutorial & Course for Beginners
Chris Courses Chris Courses
160K subscribers
103,094 views
0

 Published On Jul 29, 2021

Get the rest of the course along with interactive exercises at: https://chriscourses.com/courses/css/...

🔗 Links
Figma: https://www.figma.com/file/LJ8KC40jSP...
Chris Courses (follow with detailed descriptions, code snippets, links, and code challenges): https://chriscourses.com/courses/css/...

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.

There is without a doubt more to be learned, even after these five hours, but everything you learn here will be more than enough to get you started. If you'd like to continue your learning journey with me, be sure to sign up for extended course updates over here on my CSS course landing page: https://chriscourses.com/css-course.

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

show more

Share/Embed