Cutting-Edge CSS

Cutting-Edge CSS

25mIntermediate2021-12-15

Authors

Morten Rand-Hendriksen

Morten Rand-Hendriksen

Senior Staff Instructor, Speaker, Web Designer, and Software Developer

Course details

CSS evolves rapidly, and it can be difficult to stay on top of the most recent modules, features, and best practices. In this course, Morten Rand-Hendriksen aims to fill this gap by riding the bleeding edge of CSS to showcase what’s new, what’s possible, and how to use cutting edge CSS in a safe way in production. To do this, Morten uses one of the least-cutting edge methods possible, paper. But by cutting away as much distraction as possible, Morten helps you visualize how CSS code relates to the actual browser output, which is key to mastering CSS.

Skills covered

Responsive Web DesignCSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off

Concepts

Introduction

  • Cutting-edge CSS
  • Exercise files

Core Principles

  • What are logical properties
  • Position explained
  • Why margins collapse

Selectors

  • Counting with CSS
  • Container queries
  • The difference between - is and - where

Layout

  • How the clamp() function works
  • Beyond viewport width
  • Flex vs. grid - Content out or layout in
  • Making sense of grid-auto-flow

Conclusion

  • Next steps