Learn how to address specific challenges and combinations in CSS, along with techniques you can apply in your web styling.
Overview
Syllabus
Introduction
- Supercharge your CSS
- Exercise files
- Should I normalize or reset my CSS?
- Write better CSS with stylelint
- The vw unit is a bit of a mixed blessing
- Consistent sizing with box-sizing: border-box
- Logical box properties instead of top, right, bottom, left
- Writing modes
- Horizontal and vertical alignment in any container
- Maintain aspect ratio in containers and images
- How the clear property works
- Move over clearfix: Clearing with flow-root
- px, em, and rem units explained
- Set natural line lengths with the ch unit
- Responsive sizing with min(), max(), and clamp()
- Add a drop cap to your text
- Truncate text length and number of lines of text
- Style text selection and highlighting
- Making sense of the line-height property
- Custom properties with default values
- Nesting custom properties to create functions
- Create light or dark mode with custom properties
- Sidebar: hsla() colors are just better
- Should you use grid, flex, or float?
- Add gaps and gutters to grid and flex
- Pseudo-elements are true grid and flex items
- Putting things on top of one another using grid
- Fixed and sticky elements
- Thanks
Taught by
Morten Rand-Hendriksen
