EthicsComputerCourses
Join training
  1. Tutorials
  2. CSS Tutorial

CSS Tutorial

Style and lay out responsive websites with modern CSS: Flexbox, Grid, container queries and more.

40 free lessons Beginner to Intermediate Covers CSS as supported by current browsers (Baseline)

Start the first lesson

Getting Started

  1. 1CSS Introduction
  2. 2CSS Syntax & Adding CSS
  3. 3CSS Selectors
  4. 4Combinators & Pseudo-classes
  5. 5Cascade, Specificity & Inheritance
  6. 6Cascade Layers

Values, Colour & Text

  1. 7CSS Colours
  2. 8Units & Sizing Functions
  3. 9Custom Properties (Variables)
  4. 10Backgrounds & Gradients
  5. 11Borders, Radius & Shadows
  6. 12Styling Text
  7. 13Fonts & Web Fonts
  8. 14Styling Lists & Tables

Box Model & Layout

  1. 15The Box Model
  2. 16Display & Visibility
  3. 17Sizing, Aspect Ratio & Overflow
  4. 18Positioning
  5. 19Logical Properties
  6. 20Flexbox Basics
  7. 21Flexbox Items
  8. 22CSS Grid Basics
  9. 23Grid Placement & Areas
  10. 24Subgrid

Responsive Design

  1. 25Responsive Design & Media Queries
  2. 26Container Queries

Modern Selectors & Theming

  1. 27:has(), :is() and :where()
  2. 28CSS Nesting
  3. 29Dark Mode & Theming

Effects & Motion

  1. 30Transitions
  2. 31Keyframe Animations
  3. 32Transforms
  4. 33Filters & Blend Modes
  5. 34Scroll Snap & Scroll Effects
  6. 35View Transitions
  7. 36Anchor Positioning

UI Components

  1. 37Navigation Bars (coming soon)
  2. 38Buttons (coming soon)
  3. 39Dropdowns & Tooltips (coming soon)
  4. 40Image Gallery (coming soon)
  5. 41Multi-column Layout (coming soon)

Going Further

  1. 42Styling Forms
  2. 43Organising CSS
  3. 44Best Practices & Performance
  4. 45Project: Responsive Landing Page

Learn CSS with a mentor

Free lessons get you started. Our Full Stack Web Development training adds real projects and code reviews from working developers.

  • Project-based learning
  • Mentor code reviews
  • Free counselling call
Get course details +91 90532 10052