CSS Tips
2h 3mIntermediate2022-11-09
Authors
Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
Course details
CSS has lots of magical corners that can save you tremendous time. Come find them! In this course, web designer and developer Morten Rand-Hendriksen shows you how to address specific challenges with a bite-sized approach that lets you find what you need quickly. Morten covers topics such as containers, typography, layout, and more. In each video, he teaches a technique that you can apply in your web styling, something concise and quick that can make your complicated projects simpler.
Skills covered
CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off
Concepts
0. Introduction
- 01 - Supercharge your CSS
- 02 - Exercise files
- 03 - Using GitHub Codespaces with this course
1. Working With CSS
- 04 - Should I normalize or reset my CSS
- 05 - Write better CSS with stylelint
2. Container Tips
- 06 - The vw unit is a bit of a mixed blessing
- 07 - Consistent sizing with box-sizing - border-box
- 08 - Logical box properties instead of top, right, bottom, left
- 09 - Writing modes
- 10 - Horizontal and vertical alignment in any container
- 11 - Maintain aspect ratio in containers and images
- 12 - How the clear property works
- 13 - Move over clearfix - Clearing with flow-root
3. Typography
- 14 - px, em, and rem units explained
- 15 - Set natural line lengths with the ch unit
- 16 - Responsive sizing with min(), max(), and clamp()
- 17 - Add a drop cap to your text
- 18 - Truncate text length and number of lines of text
- 19 - Style text selection and highlighting
- 20 - Making sense of the line-height property
4. Custom Properties
- 21 - Custom properties with default values
- 22 - Nesting custom properties to create functions
- 23 - Create light or dark mode with custom properties
- 24 - Sidebar - hsla() colors are just better
5. Layout
- 25 - Should you use grid, flex, or float
- 26 - Add gaps and gutters to grid and flex
- 27 - Pseudo-elements are true grid and flex items
- 28 - Putting things on top of one another using grid
- 29 - Fixed and sticky elements
Conclusion
- 30 - Thanks