Design the Web: Using Counters and Resets in CSS
Offered By: LinkedIn Learning
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
- CSS calc() overview
- Applying calc() in a layout example
- Challenge: Creating a type scale
- Solution: Creating a type scale
- 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
- 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
- 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
- Next steps
Taught by
Chris Converse
Related Courses
Mobile Web DevelopmentGoogle 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