Advanced CSS For Web Developers

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Course Introduction

Lecture 2: CSS Basics & developer tools

Lecture 3: CSS Values & units

Lecture 4: CSS selectors & pseudo-selectors

Lecture 5: Introduction to Media Queries & breakpoints

Lecture 6: Custom CSS properties

Chapter 2: Typography

Lecture 1: Typography Introduction, Font classifications, and Font stack

Lecture 2: Font weights, font styles, and font units

Lecture 3: Font MIME types

Lecture 4: Web fonts

Lecture 5: Add Web fonts to a project

Lecture 6: Add a locally hosted font to your project

Lecture 7: What are Variable fonts?

Lecture 8: Variable font demos

Lecture 9: Can I Use Variable Fonts, and Developer Tools for Variable Fonts

Lecture 10: Variable Font axes

Lecture 11: Adding a Variable font to your project

Lecture 12: Variable Font Resources

Lecture 13: Adding dimensions to text

Lecture 14: Text clipping

Lecture 15: Text transformations

Lecture 16: Text transitions and animations

Lecture 17: Responsive Text

Chapter 3: Content (Formatting Visual Data)

Lecture 1: Basic List Styles

Lecture 2: Advanced List Styles

Lecture 3: Definition Lists

Lecture 4: Multiple Definition Lists

Lecture 5: Pure CSS Accordions

Lecture 6: Blockquotes and Pullquotes

Lecture 7: Pure CSS Slider

Lecture 8: CSS Slider with dots

Lecture 9: Simple Tables

Lecture 10: Advanced Tables

Lecture 11: Responsive Tables

Lecture 12: HTML Forms input types and attributes

Lecture 13: CSS Form Validation

Lecture 14: Responsive Forms

Chapter 4: Graphics (Images & Colors)

Lecture 1: Advanced CSS colors

Lecture 2: CSS Backgrounds

Lecture 3: CSS gradients

Lecture 4: Multiple Backgrounds

Lecture 5: CSS Borders

Lecture 6: CSS Border Images

Lecture 7: Image Filters

Lecture 8: Responsive Images

Chapter 5: Layout

Lecture 1: Content-box vs. Border-box

Lecture 2: Floats Positioning

Lecture 3: Box Model Layout

Lecture 4: Clearfix

Lecture 5: Flexbox Parent Element

Lecture 6: Flexbox Horizontal and Vertical Positioning

Lecture 7: Flexbox Children

Lecture 8: Flexbox Webpage Layout

Lecture 9: Flexbox Learning Resources

Lecture 10: Grid Parent Element

Lecture 11: Grid Children

Lecture 12: Grid Webpage Layout

Lecture 13: Grid Learning Resource

Lecture 14: Grid Schedule Examples

Chapter 6: Transitions and Animations

Lecture 1: Basic Transitions _ Timing Functions

Lecture 2: Transition steps

Lecture 3: Multiple, asynchronous transitions

Lecture 4: 2D Transforms

Lecture 5: 3D Transforms

Lecture 6: Transform – origin _ Perspective

Lecture 7: 3D Cards

Lecture 8: 3D Image Carousel

Lecture 9: 3D Cube

Lecture 10: Basic Animations

Lecture 11: Individual Animation Rules

Lecture 12: Sprite Animations

Lecture 13: SVG Animations

Chapter 7: Practical Application

Lecture 1: Introduction

Lecture 2: Setup CSS files and folder structure

Lecture 3: Off-canvas Navigation HTML

Lecture 4: Style Navigation Tabs

Lecture 5: Style the off-canvas Navigation icon

Lecture 6: Finish styling the off-canvas menu

Lecture 7: Code the header HTML

Lecture 8: Code the Hero section HTML

Lecture 9: Code Course Sections HTML

Lecture 10: Code the footer HTML

Lecture 11: Setup base html CSS rules

Lecture 12: Declare CSS variables for color

Lecture 13: Declare CSS variables for font sizes

Lecture 14: Setup base CSS font sizes

Lecture 15: Finish CSS typography rules

Lecture 16: Create Hyperlink and Button rules

Lecture 17: Use text-clipping on the titles

Lecture 18: Style the header with flexbox

Lecture 19: Add a Screen-Reader-Text rule

Lecture 20: Finish the top-bar with responsive styling

Lecture 21: Add a background image to the hero