Video Thumbnail

The Complete Advanced Guide to CSS

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.

Beginner

102 Lessons

10h

Certificate of Completion

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.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

131 Playgrounds
Video Thumbnail

This course includes

131 Playgrounds

Course Overview

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 Fu...Show More

Course Content

1.

Introduction

Get familiar with CSS basics, practical exercises, and community support for mastering skills.
2.

Getting started with CSS

Look at the fundamentals of CSS, including rules, selectors, declarations, and comments.
3.

Oh My Selectors!

Work your way through mastering CSS selectors, from basic types to advanced pseudo-classes and elements.
4.

CSS Fundamentals Everyone Should Know

Grasp the fundamentals of default browser styles, cascade, inheritance, order, and specificity in CSS.
5.

Colors, colors, colors!

Solve problems in CSS color usage with color names, RGB, RGBA, HEX, and practical tools.
6.

We all Need Units

10 Lessons

Follow the process of using various CSS units for precise, responsive web design.
7.

Typography in CSS

5 Lessons

Piece together the parts of effective font usage in CSS, enhancing design readability.
8.

The Box Model

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

3 Lessons

Get started with CSS challenges to master text formatting, margin, padding, and borders.
10.

Getting creative with Backgrounds

5 Lessons

Break apart various properties and techniques for creative CSS background images.
12.

Making Sense of CSS Gradients

4 Lessons

Explore creating CSS gradients, understanding linear gradients, their background image function, and gradient transitions.
14.

Project: Build a Sign Up Page for a Startup

6 Lessons

Practice using CSS to create an effective sign-up page with proper structure and styling.
16.

{New} A Detailed Look at CSS Variables ( a.k.a Custom Properties )

7 Lessons

Discover the logic behind CSS variables, their applications, syntax, best practices, and browser support.
17.

{New} CSS Variables Real World Applications

3 Lessons

Master the steps to efficiently use CSS variables in component design, theming, and dynamic styling.
19.

Final Words

4 Lessons

Solve problems in real-world CSS applications, career advancement, feedback engagement, and further connections.

Course Author

Part of the Front-end Developer Learning Path


Path Cover

Become a Front-end Developer

Go from complete beginner to creating interactive websites using HTML, CSS, and JavaScript.
Explore Path

4 Modules

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Adaptive Learning

Explain with AI

AI Code Mentor

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath