AI-powered learning
Save this course
The Complete Advanced Guide to CSS
Gain insights into advanced CSS concepts, delve into responsive design, explore animations, learn practical projects, and discover powerful tools. Perfect for backend engineers and budding developers.
4.6
102 Lessons
10h
Updated 4 months ago
Join 2.9 million developers at
Join 2.9 million developers at
Learning Roadmap
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.
Trusted by 2.9 million developers working at companies
A
Anthony Walker
@_webarchitect_
E
Evan Dunbar
ML Engineer
S
Software Developer
Carlos Matias La Borde
S
Souvik Kundu
Front-end Developer
V
Vinay Krishnaiah
Software Developer
Built for 10x Developers
No Passive Learning
Learn by building with project-based lessons and in-browser code editor
Personalized Roadmaps
The platform adapts to your strengths & skills gaps as you go
Future-proof Your Career
Get hands-on with in-demand skills
AI Code Mentor
Write better code with AI feedback, smart debugging, and "Ask AI"
MAANG+ Interview Prep
AI Mock Interviews simulate every technical loop at top companies
Free Resources
