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
DataCamp Ad

AI Engineer - Learn how to integrate AI into software applications

Learn More → Boot.dev Ad

The Fastest Way to Become a Backend Developer Online

Learn More →

Overview

Build a Learning Habit
Download Class Central's free printable study calendar
Download for Free
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.