</>Code Temper

Beginner · Free · In your browser

Learn HTML & CSS

Build meaningful pages, then develop accessible interactions, tables, validated forms, and layouts that remain useful on small screens. Finish with a portfolio and a complete course landing page.

20 lessons6 modules3.6 hours of practice4 challenges
Start the HTML & CSS course →

No installation. Your code runs right in the browser. No previous experience required. A little curiosity is enough.

What you will be able to do

Course outline

Module 1

Content with meaning

Build structure, connected content, and labeled controls.

  1. Build your first pageThe building blocks · 6 min
  2. Connect the dotsLinks & lists · 6 min
  3. Make your page welcomingSemantic HTML & forms · 7 min
Module 2

A deliberate visual style

Understand selectors, the box model, and readable typography.

  1. A splash of styleYour first CSS · 8 min
  2. Give every box a boundaryThe box model & sizing · 8 min
  3. Style the right thingSelectors, inheritance & typography · 8 min
Module 3

Layouts that adapt

Arrange content with flexbox, grid, and media queries.

  1. Put things in their placeFlexbox layouts · 8 min
  2. Build a two-dimensional layoutCSS grid · 9 min
  3. Make room for every screenResponsive design & media queries · 10 min
Module 4

A complete little website

Add accessible content, shared design values, and a portfolio.

  1. Give content a clear meaningImages, navigation & accessible names · 9 min
  2. A small design systemCSS custom properties · 9 min
  3. Project: your first responsive portfolioFinal project · semantic responsive page · 20 min
Module 5

Interfaces people can operate

Use native disclosures, meaningful tables, clear form constraints, and visible focus.

  1. Reveal more with native HTMLdetails & summary · 10 min
  2. Make a table explain its datacaption, headers & scope · 11 min
  3. Describe a form’s input rulesNative form constraints · 12 min
  4. Keep keyboard focus visible:focus-visible & interaction states · 12 min
Module 6

Responsive systems & a second project

Use fluid type, named layouts, overflow debugging, and a complete course page.

  1. Let typography grow within limitsclamp & viewport units · 12 min
  2. Give a layout named regionsGrid template areas · 13 min
  3. Debug a card that escapes the screenSizing & overflow diagnosis · 14 min
  4. Project: a complete course landing pageCapstone · accessible responsive content · 26 min

Ready for your first line?

Every lesson is short, hands-on, and checked automatically.

Start learning HTML & CSS →