Skip to main content

HTML and CSS Tutorial on Scrimba

Quick answer: If you want real pages in the browser (not endless video) and zero cost to start: this free ~5.7-hour beginner track has you build and deploy five projects with 75+ in-lesson challenges. You edit code inside each scrim—Scrimba’s interactive format—so layout and selectors stick.

Last reviewed: March 2026.

We may earn a commission if you join Scrimba through our links; recommendations stay independent.

HTML and CSS Tutorial

Free

This course will teach you HTML and CSS through building and deploying five awesome projects. It is also fully interactive, with over 75 coding challenges. There are no prerequisites, so it is suitabl

Duration: 5.7 hrsLevel: Beginner6 modules
View on Scrimba (opens in a new tab)

About This Course​

This course will teach you HTML and CSS through building and deploying five awesome projects. It is also fully interactive, with over 75 coding challenges. There are no prerequisites, so it is suitable for absolute beginners.

This Beginner-level course covers 5.7 hrs of content across 80 interactive screencasts. It is available for free — no subscription required.

  • Duration: 5.7 hrs
  • Level: Beginner
  • Access: Free (no subscription required)
  • Modules: 6
  • Total Lessons: 80

What Makes This Course Distinctive​

You work through five full projects, from a first deployed site through a Google-style page, a digital business card, a space-themed page, and a birthday site, then a solo hometown homepage. Each module mixes short screencasts with challenges so you edit HTML and CSS inside Scrimba instead of only watching. That matters because every frontend job expects you to ship layout and styling, and muscle memory comes from typing selectors and properties yourself. The course repeats structure, typography, spacing, and deployment so you finish with several pages you can show in interviews or applications. Flexbox and Grid deep dives live in later Scrimba courses; here the focus is solid foundations and real pages. Beginners who tried passive tutorials and forgot syntax get a clear path. People who already build components daily with frameworks may want to skip to Grid, Flexbox, or Tailwind instead.

Module Breakdown​

ModuleDurationLessons
Build & Deploy Your First Website74 min14
Build a Google.com clone82 min19
Build a Digital Business Card72 min18
Build a Space Exploration Site44 min9
Build a Birthday GIFt Site99 min20
Solo Project: Hometown Homepage8 min0

What you'll build​

  • Build & deploy your first website
  • A Google.com–style page
  • A digital business card
  • A space exploration site
  • A birthday gift site
  • Solo project: hometown homepage

These hands-on projects reinforce what you learn and give you portfolio-ready work to show employers.

Prerequisites​

No prior programming experience is required. A web browser and willingness to learn are all you need.

Who Is This Course For?​

  • Best for: Career changers, students, and self-taught beginners who want their first real websites and a habit of coding along.
  • Not ideal if: You already ship styled UIs with React or another framework daily and only need Grid, Flexbox, or utility CSS.

Part of These Learning Paths​

Choose This If​

  • You want structured HTML and CSS practice with multiple deployable projects and many small challenges.
  • You tried reading docs or long video playlists but never finished pages. This course keeps you inside the browser editor so you apply every concept.
  • You need baseline markup and styling for a frontend or fullstack path, freelancing, or job applications where interviewers expect to see real sites.

Practice & Learn More​

Start HTML and CSS Tutorial for Free (opens in a new tab)

Related Guides

Docs

All Courses

→
Docs

Learning Paths

→
Blog

Best Free Courses

→

Ready to Upgrade Your Learning?

Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.

Claim 20% Off Scrimba Pro (opens in a new tab)
Last updated on