Learn step by step

Small lessons.
Useful momentum.

Use these tutorial outlines to understand what to learn first, what to practise next, and when to move on. Each one is designed as a clear starting point—not a promise of instant mastery.

Start here

Core tutorials for new builders.

Open a tutorial to see its suggested sequence. Pair it with the notes page when you need a compact reference.

Markup · Beginner

HTML

Learn how content, headings, links, forms, and page structure work together.

See the sequence

Document structure → semantic elements → links and media → forms → accessible page landmarks.

Styling · Beginner

CSS

Make layouts readable, responsive, and consistent across screen sizes.

See the sequence

Selectors → box model → typography → Flexbox and Grid → responsive layouts → focused states.

Programming · Beginner

JavaScript

Add useful browser behaviour with a strong foundation in programming basics.

See the sequence

Values and variables → conditions → functions → arrays and objects → DOM events → small interface features.

Programming · Beginner

Python

Build confidence by writing short programs that solve clear, manageable tasks.

See the sequence

Syntax → data types → control flow → functions → modules → reading and writing files.

Data · Foundation

SQL

Understand tables and queries so you can ask questions of structured data.

See the sequence

Tables and rows → SELECT → filtering → ordering → joins → aggregations → practical query habits.

Frontend · Next step

React concepts

Explore components and state after you are comfortable with JavaScript fundamentals.

See the sequence

Components → props → state → events → rendering lists → component boundaries and accessible interactions.

Quick reference

Two tiny examples to unpack.

Read code slowly. Change one part, predict the result, then run it in your own editor.

HTML with useful structure

A heading tells readers what the page is about, while a paragraph carries the supporting idea.

<main>
  <h1>My first project</h1>
  <p>A small page with a clear purpose.</p>
</main>

JavaScript with one action

A function groups one piece of behaviour so it can run when an event happens.

const button = document.querySelector('button');

button.addEventListener('click', () => {
  button.textContent = 'Nice work!';
});

Keep a note beside every new concept.

Use the notes and guides page for compact study references.

Explore notes