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: Variables and Fluid Layouts

via LinkedIn Learning

Write review
Coursera Ad

Learn AI, Data Science & Business — Earn Certificates That Get You Hired

Learn More → Simplilearn Ad

Master Agentic AI, GANs, Fine-Tuning & LLM Apps

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One plan covers every Professional Certificate on Coursera.
Unlock All Certificates
Learn how to leverage recent advances in CSS to more efficiently build sites with a single design that adapts readily to different screens and environments.

Syllabus

Introduction
  • The evolution of responsive design
  • What you should know
1. Learn CSS calc()
  • CSS calc() overview
  • Applying calc() in a layout example
  • Challenge: Creating a type scale
  • Solution: Creating a type scale
2. Learn CSS Custom Properties
  • CSS custom properties overview
  • Configure CSS custom properties
  • CSS custom properties and inheritance
  • CSS custom properties and Sass variables
  • Using Sass variables
  • Challenge: Add custom properties to type scale
  • Solution: Add custom properties to type scale
3. Create Layouts
  • Mark up a simple four-column grid system
  • Create a starting CSS for the grid system
  • Add media queries to your grid system
  • Rewrite CSS to integrate calc() and custom properties
  • Rewrite CSS to integrate gaps between grid cells
  • Make the layout formula even more flexible
  • Challenge: Media query integration
  • Solution: Media query integration
4. Refactor a Web Page
  • Project: Use calc() and custom properties
  • Step 1: Apply the grid layout
  • Step 2: Add custom properties to grid layout
  • Step 3: Apply a type scale and custom properties
Conclusion
  • Next steps

Taught by

Jen Kramer

Reviews

4.5 rating at LinkedIn Learning based on 28 ratings

Start your review of CSS: Variables and Fluid Layouts

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.