Mastering the Latest Features in CSS

Intermediate

44 Lessons

Certificate of Completion

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

48 Playgrounds

This course includes

48 Playgrounds

Course Overview

Mastering CSS is a fundamental requirement for any front-end or full stack developer. It is a complex field, and browser compatibility is often a challenge. The CSS Working Group periodically updates the CSS specifications to add more functionality, making styling web documents easier and creating exciting learner experiences. In this course, you’ll cover several new properties and selectors in layout and responsive design. Next, you’ll learn about the :has() selector and container queries and their use c...Show More

TAKEAWAY SKILLS

Web Development

Ui Design

What You'll Learn

Hands-on experience creating responsive layouts using recent additions to CSS

In-depth knowledge of the latest element selectors in CSS

In-depth knowledge of the latest properties added to CSS

An understanding of the key upcoming features in CSS

What You'll Learn

Hands-on experience creating responsive layouts using recent additions to CSS

Course Content

Getting Started

Introduction to the Course

What You’ve Missed in CSS

New and Enhanced Properties

New and Extended Selectors Improvements for Element Styling New and Updated Properties for Layout and Scroll Behavior Modern Responsive Design Features A Paradigm-Shift for CSS Organization Challenge: Newsletter Subscription Form Solution: Newsletter Subscription Form Quiz: What You’ve Missed in CSS

Using the :has() Selector for Scaling Reusable Components

Overview of What’s New with the :has() Selector An Introduction to the :has() Selector Limitations of the :has() Selector Using the :has() Selector for Proactive Component Styling Alternate Grid Layouts for a Hero Component Change Grid Layout Using Quantity Queries Safely Using the :has() Selector Today Challenge: Button Design Variations Solution: Button Design Variations Quiz: Using the :has() Selector for Scaling Reusable Components

Practical Uses of Container Queries

Container Queries vs. Viewport Media Queries Defining Container Queries Upgrading a Card Component Container Queries and Fluid Typography Shipping Resilient Components Coordinating the Visibility of Component Parts Using Named Containers for Targeted Queries Improving Accessibility with Container Queries Support and Future of Container Queries Challenge: Making a Button Responsive Solution: Making a Button Responsive Quiz: Practical Uses of Container Queries

Responsive CSS Layout without Media Queries

Overview of Responsive Design Responsive Spacing Gap and Layout Spacing Responsive Sizing Responsive Layouts with Grid and Flexbox Reducing Risk of Layout Overflow Responsive Containers Review of Responsive Techniques Challenge: Adding Responsiveness Using Flexbox Solution: Adding Responsiveness Using Flexbox Quiz: Responsive CSS Layout without Media Queries

Conclusion

1 Lesson

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

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

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

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

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Looking for something else?

FOR TEAMS

Interested in this course for your business or team?

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