←All towers

Raahaao Code: HTML & CSS

Build and style real web pages, from your first tag to a published site.

9+ hours of lessons · 2 projects · €35

Helps you prepare for: IT Specialist – HTML and CSS (Certiport)

Or get it in a monthly plan from €3.46 a week (billed €15 monthly) →

Log in to start

You need an account to open any lessons. Without one you can browse the towers and prices.

Pay in

What you'll learn, floor by floor

  1. 1

    First page (Beginner)

    • How a web page works
    • Text, headings and links
    • Images, lists and tables
  2. 2

    Structure (Beginner)

    • Forms that work
    • Semantic layout
    • Accessibility basics
  3. 3

    Style (Intermediate)

    • Selectors and the cascade
    • The box model and spacing
    • Colour, type and contrast
  4. 4

    Layout (Intermediate)

    • Flexbox
    • Grid
    • Responsive design
  5. 5

    Pro (Job-ready)

    • Design tokens and dark mode
    • Animation and motion
    • SEO, meta tags and sharing
    • Performance and publishing

The two rooftop projects

Portfolio site

Build a small personal portfolio site: a header with navigation, an about section, a grid of project cards and a contact form. You will use proper landmark elements, labelled form fields and CSS custom properties, and make the cards reflow from one column on a phone to a multi-column grid on wider screens.

  • A header with a nav that links to #about, #projects and #contact.
  • Uses header, nav, main and footer landmarks, with exactly one h1.
  • A projects section with at least 3 article cards, each with an h3 and an image that has alt text.
  • A contact form where every input has a matching label, with a required email field of type email.
  • Colours and spacing come from CSS custom properties defined on :root.
  • The cards sit in one column on narrow screens and in a multi-column grid at 700px and wider.
  • Links and buttons have a visible :focus-visible style.
  • The page has a title and a meta description.

Product landing page

Build a landing page for a made-up smart water bottle called Ripple. It needs a hero with a call-to-action, a grid of features, three pricing plans and an FAQ built from details and summary.

  • A hero section with an h1, a short tagline and a call-to-action link styled as a button.
  • A features section laid out with CSS grid, holding at least 3 feature items.
  • A pricing section with 3 plans, each showing a price.
  • An FAQ with at least 3 questions using details and summary.
  • Dark mode follows prefers-color-scheme and can be toggled with a button that sets data-theme on the html element.
  • Animations are turned off under prefers-reduced-motion.
  • Body text colour has a contrast of at least 4.5:1 against the background.
  • Open Graph title and description tags are present.

Questions

Do I need to install anything?

No. Everything runs in your browser. For the projects you can also work on your own computer and upload your files.

Can I skip what I already know?

Yes. Once you own a tower, each floor has a skip test: score 8 out of 10 and that floor opens.

What is the refund policy?

Refunds within 5 days of purchase. After 5 days, no refunds or returns.

Do I keep access?

Yes. A tower you buy is yours, with no subscription.

Refund policy

The towers

JavaScript · Python · SQL · C++ · Node.js · Python for Data · Flask · Logic & Problem Solving · Algorithms & Data Structures · Java · Machine Learning · Building with AI