Frontend

CSS — Styling the Web

Turn plain HTML into beautiful, responsive pages — colours, layout, Flexbox, Grid and animation. The styling layer for every stack.

46 lessons11 chaptersStart: What is CSS? →

1CSS Basics

What is CSS?30 min Three Ways to Add CSS35 min CSS Syntax & Comments30 min CSS Selectors40 min CSS Units: px, %, em, rem, vw/vh35 min

2Colors & Backgrounds

CSS Colors30 min CSS Backgrounds40 min CSS Gradients30 min

3The Box Model

The Box Model40 min Margins & Padding35 min Borders & Rounded Corners30 min Width, Height & box-sizing35 min Outline & Opacity25 min

4Text & Fonts

Styling Text35 min Fonts35 min Web Fonts & Icons30 min

5Styling Components

Links & Navigation Bars40 min Styling Lists25 min Styling Tables30 min Styling Forms & Buttons40 min

6Display & Positioning

The display Property35 min Positioning & Z-index40 min Overflow25 min Float & Clear25 min Centering Things in CSS30 min

7Flexbox & Grid

Flexbox Basics45 min Flex Items & Responsive Flex35 min CSS Grid Basics45 min Grid Placement & Areas35 min Project: A Complete Page Layout60 min

8Responsive Design

Responsive Web Design35 min Media Queries40 min Responsive Images & Video30 min CSS Frameworks (Overview)25 min

9Advanced Selectors & the Cascade

Combinators & Attribute Selectors35 min Pseudo-classes & Pseudo-elements40 min The Cascade, Inheritance & Specificity35 min

10Effects & Modern CSS

Shadows25 min Transitions30 min Transforms30 min Keyframe Animations35 min CSS Variables (Custom Properties)30 min Modern CSS: calc(), clamp() & Filters30 min

11Projects

Project: Style Your Profile Page90 min Project: Responsive Landing Page150 min Capstone: Styled Multi-Page Website210 min