YoVDO

Design the Web: Using Counters and Resets in CSS

Offered By: LinkedIn Learning

Tags

Computer Science Courses Sass Courses Web Design Courses Typography Courses Responsive Design Courses Media Queries Courses Grid Systems Courses

Course Description

Overview

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

Related Courses

Mobile Web Development
Google via Udacity
iDESWEB, Introducción al desarrollo web
Miríadax
Information Design
University of California, San Diego via Coursera
Advanced Styling with Responsive Design
University of Michigan via Coursera
Front-End Web UI Frameworks and Tools
The Hong Kong University of Science and Technology via Coursera