LEARNING OBJECTIVES
Write valid CSS rules using selectors, declarations, multiple properties, and comments
Apply cascade, inheritance, order, and specificity to resolve conflicting styles
Use CSS units (em, rem, %, vh/vw, vmin/vmax) to size type and layouts responsively
Build layouts with the box model using padding, borders, margins, and box-sizing
Create layered backgrounds with images, positioning, repeat, shorthand, and gradients
Implement layouts with Flexbox and CSS Grid, including grid areas and alignment
Use CSS variables with var() and calc() to theme components and troubleshoot common gotchas
1.
Introduction
Introduction
Get familiar with CSS basics, practical exercises, and community support for mastering skills.
2.
Getting started with CSS
Getting started with CSS
Look at the fundamentals of CSS, including rules, selectors, declarations, and comments.
3.
Oh My Selectors!
Oh My Selectors!
4 Lessons
4 Lessons
Work your way through mastering CSS selectors, from basic types to advanced pseudo-classes and elements.
4.
CSS Fundamentals Everyone Should Know
CSS Fundamentals Everyone Should Know
3 Lessons
3 Lessons
Grasp the fundamentals of default browser styles, cascade, inheritance, order, and specificity in CSS.
5.
Colors, colors, colors!
Colors, colors, colors!
2 Lessons
2 Lessons
Solve problems in CSS color usage with color names, RGB, RGBA, HEX, and practical tools.
6.
We all Need Units
We all Need Units
10 Lessons
10 Lessons
Follow the process of using various CSS units for precise, responsive web design.
7.
Typography in CSS
Typography in CSS
5 Lessons
5 Lessons
Piece together the parts of effective font usage in CSS, enhancing design readability.
8.
The Box Model
The Box Model
6 Lessons
6 Lessons
Get familiar with the CSS box model's structure, including content, padding, borders, and margins.
9.
Challenge: Hands-on Practice with Texts, Margin, Padding and Borders
Challenge: Hands-on Practice with Texts, Margin, Padding and Borders
3 Lessons
3 Lessons
Get started with CSS challenges to master text formatting, margin, padding, and borders.
10.
Getting creative with Backgrounds
Getting creative with Backgrounds
5 Lessons
5 Lessons
Break apart various properties and techniques for creative CSS background images.
11.
Project: Build a Movie Order Page
Project: Build a Movie Order Page
9 Lessons
9 Lessons
Apply your skills to build a movie order page with effective CSS styling techniques.
12.
Making Sense of CSS Gradients
Making Sense of CSS Gradients
4 Lessons
4 Lessons
Explore creating CSS gradients, understanding linear gradients, their background image function, and gradient transitions.
13.
Hands-on Practice with Gradients
Hands-on Practice with Gradients
6 Lessons
6 Lessons
Tackle coding national flags with CSS gradients to reinforce practical application skills.
14.
Project: Build a Sign Up Page for a Startup
Project: Build a Sign Up Page for a Startup
6 Lessons
6 Lessons
Practice using CSS to create an effective sign-up page with proper structure and styling.
15.
{New} Teach Me Positioning Like I'm Five
{New} Teach Me Positioning Like I'm Five
7 Lessons
7 Lessons
Learn how to use CSS positioning, pseudo-elements, and box-shadow for creative web design.
16.
{New} A Detailed Look at CSS Variables ( a.k.a Custom Properties )
{New} A Detailed Look at CSS Variables ( a.k.a Custom Properties )
7 Lessons
7 Lessons
Discover the logic behind CSS variables, their applications, syntax, best practices, and browser support.
17.
{New} CSS Variables Real World Applications
{New} CSS Variables Real World Applications
3 Lessons
3 Lessons
Master the steps to efficiently use CSS variables in component design, theming, and dynamic styling.
18.
{New} Long Live the CSS Grid
{New} Long Live the CSS Grid
10 Lessons
10 Lessons
Apply your skills to create responsive and dynamic web layouts using CSS Grid and Flexbox.
19.
Final Words
Final Words
4 Lessons
4 Lessons
Solve problems in real-world CSS applications, career advancement, feedback engagement, and further connections.
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Complete more lessons to unlock your certificate
Developed by MAANG Engineers
ABOUT THIS COURSE
My Goal is to take you from a beginner (or intermediate) CSS user to becoming one of the best CSS devs you know! 👉🏻 COURSE CONTENT? 1. A detailed look at CSS Fundamentals 2. Practical SVG for today 3. A Sane Guide to Responsive Design 4. Creating sleek Interfaces with CSS Animations and Transitions 5. Writing Maintainable CSS and tips for CSS at Scale 6. Learn the CSS Grid by Building ... wait for it! 😉 7. Get a Private slack Invite where you can ask me anything 8. Gain a Solid Understanding of CSS Fundamentals 9. Build Practical Projects 10. Flexbox, Variables, Gradients, Backgrounds, Responsive Images, Handy pro tools, and many more! 👉🏻 WHAT ARE THE REQUIREMENTS? The course assumes no previous knowledge of CSS 👉🏻 WHAT'S THE TARGET AUDIENCE? 1. Backend Engineers looking to level up their frontend design skills 2. Budding developers looking to create beautiful applications 3. Generally, engineers who want to stand out by truly understanding the internals of CSS Ready to upgrade?
ABOUT THE AUTHOR
Ohans Emmanuel
I'm a frontend engineer, a technical author with 5+ books published, a Udemy instructor, and an avid reader. Since 2017, I've blogged extensively with my blogs garnering well over 4 million views.
Built for 10x Developers
FOR TEAMS
Interested in this course for your business or team?
Unlock this course (and 1,000+ more) for your entire org with DevPath