SitePoint-Unleashing the Power of CSS-01.png

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 cases. Finally, you’ll learn to create responsive layouts without media queries. Throughout the course, you’ll discuss each new feature’s browser compatibility.

After completing this course, you’ll have the practical knowledge to create responsive layouts and engaging user experiences with a few lines of code. You can write less code to do more, utilizing several new properties and selectors efficiently. This skill set will help you create great user experiences.

Mastering the Latest Features in CSS

Which margin property pair substitutes for the logical property `margin-block`?

Which margin property pair substitutes for the logical property <code>margin-block</code>?

What does the `::marker` pseudo-element do?

What does the <code>::marker</code> pseudo-element do?

Adjusts the contrast of text and background colors

Defines the color used for indicating user input validation

What does the `accent-color` property do?

What does the <code>accent-color</code> property do?

Where is the `gap` property used to add space between elements?

Where is the <code>gap</code> property used to add space between elements?

Minimum value, ideal value, and maximum value

Which are the values that the `clamp()` function accepts?

Which are the values that the <code>clamp()</code> function accepts?

`@media (width <= 320px and width <= 768px) {}`

`@media (width <= 320px) and (width <= 768px) {}`

What is the most appropriate way to rewrite the `@media (min-width: 320px) and (max-width: 768px) {}` query using comparison operators?

What is the most appropriate way to rewrite the <code>@media (min-width: 320px) and (max-width: 768px) {}</code> query using comparison operators?

Which at-rule is used to check whether certain CSS feature is supported?

Which at-rule is used to check whether certain CSS feature is supported?

Test your understanding of the new properties and selectors of CSS.

Getting Started

What You’ve Missed in CSS

Using the :has() Selector for Scaling Reusable Components

Practical Uses of Container Queries

Responsive CSS Layout without Media Queries

Conclusion

Quiz: What You’ve Missed in CSS