Coursera Plus Annual is 40% Off — Ends July 13.

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

LinkedIn Learning

CSS Toolkit: Tips and Techniques for Layout and Styling

via LinkedIn Learning

Write review
Simplilearn Ad

Pass the PMP® Exam on Your First Try — Expert-Led Training

Learn More → Boot.dev Ad

The Most Addictive Python and SQL Courses

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One plan covers every Professional Certificate on Coursera.
Unlock All Certificates
Explore advanced CSS techniques for creating flexible, responsive, and visually engaging web designs with practical tips on layout, typography, custom properties, and more.

Syllabus

Introduction
  • CSS power techniques
  • What you should know
  • Using GitHub Codespaces with this course
1. Working with CSS
  • Should you use normalize, reset, or another approach?
  • Writing better CSS with stylelint
2. Working with Containers
  • The vw unit and the classic scrollbar problem
  • Consistent sizing with box-sizing: border-box
  • Using logical box properties vs. top, right, bottom, left
  • Changing writing mode
  • Align elements horizontally and vertically in any container
  • Centering psuedo-elements with absolute positioning
  • Maintaining aspect ratio in containers and images
  • Using float and clear in modern CSS
  • Wrap text around custom shapes with shape-outside
3. Typography and Text Effects
  • Understanding px, em, and rem units
  • Setting optimal line lengths with the ch unit
  • Responsive sizing with min(), max(), and clamp()
  • Making sense of the line-height property
  • Balancing text wrapping for better readability
  • Truncating text length and number of lines of text
  • Style text selection and highlighting
  • Filling text with a gradient or image
4. Colors and Custom Properties
  • Using fallback values with custom properties
  • Nesting custom properties to create functions
  • Creating light or dark mode with custom properties
  • Why hsla() colors are just better
5. Layout and Positioning
  • Should you use grid, flex, or flow?
  • Adding gaps and gutters to grid and flex
  • Pseudo-elements are true grid and flex items
  • Stacking elements using grid
  • Nesting grid items with subgrid
  • Adding fixed and sticky elements
Conclusion
  • Next steps

Taught by

Morten Rand-Hendriksen

Reviews

4.9 rating at LinkedIn Learning based on 9 ratings

Start your review of CSS Toolkit: Tips and Techniques for Layout and Styling

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.