CSS: Styling Websites

What you will learn

• Style elements precisely.
• Understand spacing and dimensions.
• Make content pleasantly readable.
• Arrange elements in a single direction.
• Build two-dimensional layouts.
• Support different viewports.
• Design reusable interfaces.
• Implement a design completely.
• Make websites lively and dynamic through keyframe animations, transformations, and visual filters.
• Make websites accessible to all users and keep CSS structures maintainable.
• Organize CSS files scaleably, optimize load times, and apply best practices for large projects.
• Apply all learned CSS knowledge in a complete, professional, responsive, and accessible web application.

Course content

1. Chapter 1 Styling Basics

   Style elements precisely.

   1. Linking a Stylesheet
   2. Selectors and Classes
   3. Colors and Backgrounds
   4. Inheritance
   5. Debugging Cascade and Specificity
   6. First Consistent Content Card
   7. Selector Fill-in-the-Blank
   8. Specificity Challenge

2. Chapter 2 Box Model and Sizing

   Understand spacing and dimensions.

   1. Content, Padding, Border, Margin
   2. Box Sizing
   3. Absolute and Relative Units
   4. Width, Max-Width, and Overflow
   5. Debugging Spacing Errors
   6. Preparing a Clean Page Grid
   7. Units Fill-in-the-Blank
   8. Box Model Challenge

3. Chapter 3 Typography and Hierarchy

   Make content pleasantly readable.

   1. Fonts and Fallbacks
   2. Font Size and Line Height
   3. Text Width and Alignment
   4. Heading Scale
   5. Contrast and Link States
   6. Design a Small Editorial Page
   7. Typography Fill-in-the-Blank
   8. Readability Challenge

4. Chapter 4 Flexbox

   Arrange elements in a single direction.

   1. Flex Container and Axes
   2. Alignment and Spacing
   3. Growth and Shrinking
   4. Wrapping
   5. Fix Broken Navigation
   6. Responsive Toolbar and Card Row
   7. Flexbox Fill-in-the-Blank
   8. Flexbox Layout Challenge

5. Chapter 5 Grid

   Build two-dimensional layouts.

   1. Columns and Rows
   2. fr, gap, and minmax
   3. Placing Items
   4. Automatic Card Grids
   5. Nested Layouts
   6. Design a Product Overview
   7. Grid Fill-in-the-Blank
   8. Grid Master Challenge

6. Chapter 6 Responsive Websites

   Support different viewports.

   1. Mobile First
   2. Media Queries
   3. Flexible Images
   4. Fluid Typography
   5. Debugging Small and Large Views
   6. Refactor Detail Page to be Responsive
   7. Media Query Fill-in-the-Blank
   8. Responsive Challenge

7. Chapter 7 Components and States

   Design reusable interfaces.

   1. CSS Variables as Tokens
   2. Buttons and Forms
   3. Hover, Focus, and Active States
   4. Positioning and Layers
   5. Transition Plus Reduced Motion
   6. Build a Small Component Set
   7. States Fill-in-the-Blank
   8. Component Challenge

8. Chapter 8 Finalizing the Website

   Implement a design completely.

   1. Defining Design Goals and Tokens
   2. Header and Hero
   3. Content and Product Sections
   4. Footer and Forms
   5. Checking Mobile, Focus, and Overflow
   6. Presenting the Finished Website
   7. Project Fill-in-the-Blank
   8. Final Challenge

9. Chapter 9 Animations and Visual Effects

   Make websites lively and dynamic through keyframe animations, transformations, and visual filters.

   1. 2D and 3D Transformations
   2. Transitions and Timing Functions
   3. @keyframes and Animation Timelines
   4. Visual Filters and Backdrop Effects
   5. Debugging Choppy Animations and Performance
   6. Interactive Hero Banner with Animations
   7. Animation Fill-in-the-Blank
   8. Effect Master Challenge

10. Chapter 10 Accessibility and Clean Code

    Make websites accessible to all users and keep CSS structures maintainable.

    1. Accessible Focus Indicators
    2. Color Contrast and Readability
    3. Screen-reader-only Content
    4. Reduced Motion and User Preferences
    5. Debugging Accessibility Errors in CSS
    6. Accessible Form Design
    7. A11y and Clean Code Fill-in-the-Blank
    8. Inclusive UI Component Challenge

11. Chapter 11 Performance and CSS Architecture

    Organize CSS files scaleably, optimize load times, and apply best practices for large projects.

    1. Modular Structure and @import
    2. BEM Naming Convention
    3. CSS File Size and Rendering Blocks
    4. Reducing Unused Code and Specificity Debt
    5. Debugging Architecture Errors and High Specificity
    6. Structured Design System Foundation
    7. Architecture and BEM Fill-in-the-Blank
    8. Legacy CSS Refactoring Challenge

12. Chapter 12 Capstone Project and Outlook

    Apply all learned CSS knowledge in a complete, professional, responsive, and accessible web application.

    1. Capstone Planning and Semantic Layout
    2. Design Tokens and Global Architecture
    3. Complex Grid and Flexbox Dashboard
    4. Interactive Components with States and Animations
    5. Fixing Responsive Bugs and Layout Crashes
    6. Implementing a Complete Responsive Web App
    7. Capstone Fill-in-the-Blank on Best Practices
    8. Final CSS Master Challenge

How each lesson works

No hour-long videos. Each lesson is a short loop you complete yourself, until the idea sits.

1. Read

   A short explanation and one clear task. Just enough to get going.

2. Write

   You type the code yourself, in a real editor right in the browser.

3. Run

   Run it and see what your program actually does, straight away.

4. Check

   Check tells you whether the task is solved, and what is missing if not.

Good to know

• Nothing to install: editor, output and checks run in your browser tab.
• Start as a guest without an account; your progress stays on this device.
• A free Ostrae account syncs progress and settings across devices and unlocks the MICA coach.

More courses

• C# Fundamentals
• HTML: Structuring Websites
• JavaScript
• Python Fundamentals and Automation
• Git, GitHub and Hosting
• Design for Developers
• GSAP Animations