Menu
Coddy logo textTech
START LEARNING
flag En iconEnglishdown icon
html iconPart of the HTML JourneyPopularJourney

Learn CSS

A free, interactive CSS course. You style real HTML on every lesson - selectors, the box model, colors, fonts, flexbox, grid, responsive design - with a live preview as you type and a free certificate when you finish. Part of the wider HTML journey, so the markup context CSS needs is right there.

START LEARNING(it's free)
View syllabusStyling with CSS playground

281,604+ codders enrolled

119 lessons104 challenges583 quiz questions

  • Beginner friendly
  • sparkles iconAI-assisted coding help
  • hint iconHands-on interactive lessons
  • volume On iconAudio narration on every lesson
  • quiz iconQuizzes to test your knowledge
  • certificate iconFree certificate of completion

Syllabus

2 sections3 projects119 lessons104 challenges583 quiz questions

This section is part of the HTML Journey. The full syllabus has more sections - click any preview below to view it on the Journey page.

  1. Section 1Fundamentals60 lessons
  2. Section 2

    Styling with CSS

    Start sectionStartExpandCollapse    Bring your web pages to life with colors, layouts, and styles76 lessons100 challenges419 questions3 projects

    Introduction

    5 lessons540

    Adding CSS

    4 lessons725

    Basic Selectors

    7 lessons1247

    Text Fundamentals

    8 lessons1450

    Colors and Backgrounds

    5 lessons834

    Cafe Menu

    Project3 lessons1

    Box Model Part 1

    6 lessons943

    Box Model Part 2

    5 lessons834

    Flex Box

    6 lessons943

    Login Form

    Project4 lessons1

    Layout Techniques

    7 lessons1151

    Responsive Design Basics

    6 lessons1052

    Tonga Webpage

    Project6 lessons1

    Final Challenges

    4 lessons4
  3. Section 3

    CSS Mastery

    Start sectionStartExpandCollapse    Take you css skills to the next level!43 lessons40 challenges164 questions

    Selector Mastery – Combination

    6 lessons539

    Interactive Pseudo-Classes

    5 lessons431

    Structural pseudo-classes

    5 lessons432

    Dropdown Menu Project

    4 lessons4

    Visual effects

    5 lessons536

    Landing Page

    5 lessons5

    Build with CSS Grid

    4 lessons426

    Flavor Fiesta website

    4 lessons4

    Final Challenges

    5 lessons5
  4. Section 4Practical Frontend35 lessons
  5. Section 5JavaScript in Action27 lessons
View the full HTML Journey syllabus
What you get
Everything you'll use to learn to code

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
CONTINUE
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

Why learn CSS with Coddy

  • Write CSS in your browser and watch the page restyle live. No build step, no editor setup. Every change to a selector or property shows up instantly so you see what each rule actually does.
  • Core CSS: selectors and specificity, the box model, positioning, flexbox, CSS grid, transitions, media queries, and responsive design. The CSS every front-end developer needs day-to-day.
  • AI hints help you debug the things that always trip people up - specificity surprises, layout overflows, weird flexbox behavior - without spoiling the fix, so CSS becomes intuitive instead of magical.
  • Free CSS certificate when you finish the section. Pairs naturally with the HTML and JavaScript courses for a full front-end foundation.

Frequently asked questions about learning CSS

What is CSS?

CSS (Cascading Style Sheets) is the language that controls how HTML pages look - colors, fonts, spacing, layout, animations, responsive behavior across screen sizes. HTML defines what's on the page; CSS defines how it's presented.

Is CSS hard to learn?

Basic CSS - selectors, colors, fonts, the box model - is easy to pick up in a few hours. The harder parts come later: specificity rules, flexbox and grid layouts, and making things look right on every screen size. The course introduces them in small steps with a live preview, so you see exactly what each rule does.

Should I learn HTML before CSS?

Yes. HTML defines the structure of a page; CSS styles it. Without HTML you have nothing to style. This CSS section is part of the HTML journey for that reason - the HTML fundamentals section comes first, then you spend the bulk of the journey styling it.

What is the difference between CSS, Flexbox, and Grid?

Flexbox and Grid are layout modules inside CSS - they're not separate technologies, they're CSS features. Flexbox is best for one-dimensional layouts (a row of cards, a navbar). Grid is best for two-dimensional layouts (a whole page, a complex card layout). Most real sites use both, and the course covers when to reach for each.

Can I learn CSS online for free?

Yes. The interactive CSS section is free - full lessons, coding exercises, a live preview, and a certificate. Everything runs in the browser so you don't need to install any editor or tooling to start.

Do I get a certificate after the CSS course?

Yes. Finishing the CSS section gives you a free certificate of completion. A verifiable proof point you can add to your resume or share on LinkedIn alongside HTML and JavaScript certificates as part of a front-end portfolio.
Coddy programming languages illustration

Learn Styling with CSS with Coddy

GET STARTED