Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

CSS Tips

via LinkedIn Learning

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Learn how to address specific challenges and combinations in CSS, along with techniques you can apply in your web styling.

Syllabus

Introduction
  • Supercharge your CSS
  • Exercise files
  • Using GitHub Codespaces with this course
1. Working With CSS
  • Should I normalize or reset my CSS?
  • Write better CSS with stylelint
2. Container Tips
  • 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
3. Typography
  • 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
4. Custom Properties
  • 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
5. Layout
  • 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
Conclusion
  • Thanks

Taught by

Morten Rand-Hendriksen

Reviews

4.9 rating at LinkedIn Learning based on 100 ratings

Start your review of CSS Tips

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.