CSS Basics & developer tools

Course Introduction

CSS selectors & pseudo-selectors

CSS Values & units

Custom CSS properties

Introduction to Media Queries & breakpoints

Typography Introduction, Font classifications, and Font stack

Font MIME types

Web fonts

Add Web fonts to a project

What are Variable fonts

Add a locally hosted font to your project

Variable font demos

Can I Use Variable Fonts, and Developer Tools for Variable Fonts

Variable Font axes

Variable Font Resources

Adding a Variable font to your project

Text clipping

Text transformations

Adding dimensions to text

Responsive Text

Text transitions and animations

Basic List Styles

Definition Lists

Advanced List Styles

Multiple Definition Lists

Blockquotes and Pullquotes

Pure CSS Accordions

CSS Slider with dots

Pure CSS Slider

Simple Tables

HTML Forms input types and attributes

Responsive Tables

Advanced Tables

CSS Form Validation

Responsive Forms

Advanced CSS colors

CSS Backgrounds

CSS gradients

Multiple Backgrounds

CSS Borders

CSS Border Images

Image Filters

Responsive Images

Content-box vs. Border-box

Box Model Layout

Clearfix

Floats Positioning

Flexbox Horizontal and Vertical Positioning

Flexbox Parent Element

Flexbox Children

Flexbox Webpage Layout

Flexbox Learning Resources

Grid Parent Element

Grid Webpage Layout

Grid Children

Grid Learning Resource

Grid Schedule Examples

Transition steps

Multiple, asynchronous transitions

Basic Transitions Timing Functions

D Transforms

Transform - origin Perspective

D Cards

D Transforms

D Cube

Basic Animations

D Image Carousel

Individual Animation Rules

Sprite Animations

SVG Animations

Introduction

Setup CSS files and folder structure

Off-canvas Navigation HTML

Style Navigation Tabs

Finish styling the off-canvas menu

Style the off-canvas Navigation icon

Code the header HTML

Code the footer HTML

Code Course Sections HTML

Setup base html CSS rules

Declare CSS variables for font sizes

Setup base CSS font sizes

Declare CSS variables for color

Code the Hero section HTML

Create Hyperlink and Button rules

Finish CSS typography rules

Use text-clipping on the titles

Finish the top-bar with responsive styling

Style the header with flexbox

Add a Screen-Reader-Text rule

Add a background image to the hero

Finish styling hero titles

Animate the About image

Style About section content

Skew the background image

Add an image border and image filters

Style the course section grid with CSS Grid

Animate the hero titles

Style the section cards

Review what we made

Dealing with fallbacks for older browsers

Style the footer

Next Steps in your CSS Journey