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

LinkedIn Learning

Design the Web: Using Counters and Resets in CSS

via LinkedIn Learning

Go to class Write review
Pragmatic Institute Ad

AI Product Expert Certification - Master Generative AI Skills

Learn More → Coursera Ad

Save 43% on 1 Year of Coursera Plus

Learn More →

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
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

Chris Converse

Reviews

4.6 rating at LinkedIn Learning based on 39 ratings

Start your review of Design the Web: Using Counters and Resets in CSS

Go to class

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.