css-modules-and-new-features

Stage#1 CSS Modules And Some CSS New Features 🎨

Module Overview 🌟

In this module, students will delve into advanced CSS topics, exploring the latest features and techniques in CSS. This includes understanding the CSS Modules approach, container and style queries, CSS nesting, new viewport units, advanced selectors, and more. By mastering these concepts, students will be able to create more dynamic, responsive, and efficient web designs.

Learning Objectives 📚

Students will:

• Understand and apply the CSS Modules Approach.
• Explore Container Queries and Style Queries.
• Utilize CSS Nesting for more structured stylesheets.
• Learn about New Viewport Units and their use in responsive design.
• Implement the :has() Selector and understand the nth-of Syntax.
• Create Popovers and understand Anchor Positioning.
• Use CSS color-mix() and Trigonometric Functions in CSS.

Approximate Module Completion Time ⏱️

• **~ 4 hours**

Theory 📖

Students should review the following resources:

1. CSS Modules Overview - ~ 30 minutes
2. Understanding CSS Modules - ~ 30 minutes
3. Guide to Container Queries - ~ 25 minutes
4. Introduction to Style Queries - ~ 20 minutes
5. CSS Nesting Rules - 10 minutes
6. Exploring New Viewport Units - 10 minutes
7. Using Selector :has() - ~ 20 minutes
8. nth-of Syntax Explained - ~ 25 minutes
9. Popover Attribute- 10 minutes
10. Anchor Positioning - 30 minutes
11. Mixing Colors with CSS color-mix() - ~ 15 minutes
12. Trigonometric Functions in CSS- ~ 15 minutes

Practice 💻

• Complete the test "[St1]CSS Modules And Some CSS New Features" in the RS APP > Auto Test.