Learnr

Learn HTML and CSS

Build and style real web pages that look right on every screen.

or browse all courses.

Free to start. Built from a single prompt. No credit card.

HTML and CSS are the foundation of every web page. HTML is a markup language that describes structure and meaning: headings, paragraphs, links, images, lists and forms. CSS is the styling language that controls color, typography, spacing and layout, from a simple centered column to a responsive grid. Neither is a programming language in the usual sense, which makes them an approachable first step into building for the web. A beginner starts by writing a single page by hand and inspecting it in browser developer tools. Learnr builds you a personalized HTML and CSS course from one prompt with short, interactive lessons.

How to learn HTML and CSS, step by step

  1. Write a full page by hand. Create index.html in a text editor with doctype, head and body, add headings, paragraphs, links and an image, and open it in your browser. Hand-writing the boilerplate once makes every later page easier to understand.
  2. Use semantic elements from the start. Choose tags for meaning: header, nav, main, article, section, footer, button and label. Semantic markup helps screen readers, search engines and your own CSS, and keeps you from wrapping everything in divs.
  3. Learn the box model and the cascade. Understand content, padding, border and margin, and set box-sizing: border-box. Learn how specificity and source order decide which rule wins, then use developer tools to inspect any style that surprises you.
  4. Master flexbox, then grid. Use flexbox for one-dimensional rows and columns, like a nav bar or centered card, and grid for two-dimensional page layouts. Free practice games like Flexbox Froggy and Grid Garden make the properties memorable.
  5. Design for small screens first. Add the viewport meta tag, start with a single-column layout, and add media queries to expand at wider screens. Use rem units and max-width so text and images scale instead of overflowing.
  6. Clone real pages and publish them. Rebuild the layout of a site you like, then a personal portfolio, and publish to a free static host. A few minutes of Learnr practice daily keeps selectors and layout properties fresh.

What you'll learn

  • Write well-structured pages with semantic HTML elements
  • Explain and control the CSS box model and specificity
  • Build layouts with flexbox and CSS grid
  • Make pages responsive with media queries and fluid units
  • Create accessible forms, images and navigation

What's inside your HTML and CSS course

A sample path Learnr builds for HTML and CSS. Your real course adapts to your goal and level.

  • 1. How browsers turn HTML and CSS into pages
  • 2. HTML structure, text, links and images
  • 3. CSS selectors, the cascade and the box model
  • 4. Layout with flexbox and grid
  • 5. Responsive design and typography
  • 6. Forms, accessibility and publishing your page

How long does it take to learn HTML and CSS?

The basics of HTML and CSS take about 2 to 4 weeks at 5 hours a week. Building responsive layouts confidently with flexbox and grid usually takes 2 to 3 months of making real pages. Polished, accessible design is a skill that keeps improving with every project.

What you need before you start

Nothing beyond basic computer skills. You need a text editor such as Visual Studio Code and a modern web browser, both free.

Common mistakes to avoid

  • Building layouts with fixed pixel widths that break on phones. Use flexible units, max-width and media queries, and test at narrow widths as you go.
  • Using divs for everything, including buttons and headings. Use the matching semantic element so pages are accessible and easier to style.
  • Fighting the cascade with !important. Inspect the element, understand which rule is winning and why, and adjust specificity or order instead.

How Learnr builds your course

Type your topic

Tell Learnr you want to learn HTML and CSS, or get as specific as you like.

Get a personalized course

Learnr instantly builds a full HTML and CSS course tailored to your goal and skill level.

Learn and level up

Move through bite-sized lessons and interactive practice, earning XP and keeping your streak.

HTML and CSS questions, answered

Are HTML and CSS programming languages?

Not in the usual sense. HTML is a markup language and CSS is a style sheet language; neither has the loops and logic of JavaScript. They are still essential skills for building any website.

Should I learn HTML and CSS before JavaScript?

Yes, usually. JavaScript on the web mostly changes HTML and CSS, so knowing how pages are structured and styled makes JavaScript lessons far more concrete.

How long does it take to learn HTML and CSS?

You can build a simple page in a few days and the core skills in a few weeks. Comfortable responsive layout work typically takes a couple of months of regular practice.

Explore more courses

More programming and tech courses

See all programming and tech courses

Ready to learn HTML and CSS?

Start your free, personalized HTML and CSS course in seconds. .