Track overview

CSS Foundations

This track introduces absolute beginners to CSS in small, calm steps so they can understand styling, spacing, layout, and simple responsive thinking before moving deeper into JavaScript.

Starter Public preview available Certificate track

Access and prerequisites

Membership: Starter

Prerequisites:

  • HTML Foundations

Student readiness

Public visitors can preview the lesson structure here. Protected lesson playback, progress, and certificates require a student account.

Lessons in this track

Ordered intentionally for beginners

14 min

What CSS Is

Start the CSS Foundations track with a calm explanation of what CSS is, what job it has on a page, and how it differs from HTML structure.

Public preview lesson

Preview lesson
14 min

Connecting CSS to HTML

Learn how a CSS file connects to an HTML page so styling feels attached, intentional, and easier to manage.

Public preview lesson

Preview lesson
15 min

Selectors and Simple Rules

Learn how CSS selects page parts and applies simple rules without making the styling process feel mysterious.

Protected student lesson

Preview lesson
15 min

Colors, Fonts, and Text Styling

Use beginner-friendly CSS to change colors, font choices, and readable text presentation.

Protected student lesson

Preview lesson
14 min

Backgrounds and Borders

Learn how backgrounds and borders help separate page areas and make layouts easier to understand visually.

Protected student lesson

Preview lesson
15 min

Margin, Padding, and Spacing

Learn the difference between margin and padding so spacing stops feeling random and starts feeling controllable.

Protected student lesson

Preview lesson
15 min

Classes and Reusable Styles

Use CSS classes to repeat styling on purpose instead of rewriting the same visual rule over and over.

Protected student lesson

Preview lesson
15 min

Width, Height, and Display Basics

Learn how size and display settings affect the way boxes and sections behave on a page.

Protected student lesson

Preview lesson
16 min

Layout Basics with Flexbox

Use Flexbox in a calm, beginner-safe way to arrange rows, columns, and spacing without jumping into complex layout theory.

Protected student lesson

Preview lesson
15 min

Responsive Basics and Mobile Thinking

Understand how pages should adapt to smaller screens so responsive design feels practical instead of abstract.

Protected student lesson

Preview lesson
17 min

Style Your First Full Web Page

Finish the track by styling one simple web page with the text, spacing, classes, and layout ideas you already know.

Protected student lesson

Preview lesson