HTML describes what is on a page: headings, paragraphs, links, images, forms. It is not a programming language, and that is why it is the gentlest place to start. You write something, refresh the browser, and see it.

• Document structure: head, body, headings, lists
• Links, images and forms
• Semantic tags like header, nav, main, article, which help screen readers and search engines

<article class="card">
  <h2>My first page</h2>
  <p>Hello, web!</p>
</article>

Finish before moving on: a one-page personal profile with a photo, a list of hobbies and a contact form.

CSS controls color, spacing, type and layout. Learn the box model first (content, padding, border, margin). Then learn Flexbox and Grid, which handle almost every layout you will meet.

• Selectors, specificity and the cascade
• Flexbox for rows and columns, Grid for two-dimensional layouts
• Media queries for phones, tablets and desktops
• Custom properties (variables) for themes and dark mode

.card {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
}
/* two columns once there is room */
@media (min-width: 48rem) {
  .card { grid-template-columns: 1fr 1fr; }
}

Finish before moving on: rebuild a landing page you admire, and make it work on a phone.

This is where you start programming. JavaScript runs in the browser and reacts to clicks, typing and data. Spend real time here, because everything after it leans on these ideas.

• Variables, functions, arrays, objects, loops and conditions
• The DOM: selecting elements and changing them
• Events, and fetch for calling APIs
• Promises and async/await
• Modern syntax: modules, destructuring, arrow functions

const btn = document.querySelector("#load");

btn.addEventListener("click", async () => {
  const res = await fetch("/api/posts");
  const posts = await res.json();
  console.log(posts.length);
});

Finish before moving on: a to-do app and a weather widget that calls a public API.

Node lets you run JavaScript outside the browser. You can read files, build command-line tools and write servers, all in a language you already know. That makes it the easiest bridge into backend work.

• npm, package.json and installing packages
• The file system and process modules
• Building an API with Express or Fastify
• Environment variables and error handling

const express = require("express");
const app = express();

app.get("/api/hello", (req, res) => {
  res.json({ message: "Hello from Node" });
});

app.listen(3000);

Finish before moving on: a small REST API for notes with create, read, update and delete routes.

Learning a second language teaches you which ideas are universal. Python reads almost like plain English, and it is strong for automation, scripting, data work, AI and web backends.

• Syntax, lists, dictionaries, functions and classes
• Virtual environments and pip
• Web backends with Flask, FastAPI or Django
• Scripting: scraping, file automation, working with CSV and JSON

from fastapi import FastAPI

app = FastAPI()

@app.get("/api/hello")
def hello():
    return {"message": "Hello from Python"}

Finish before moving on: rebuild your notes API in Python, then compare it with the Node version.

A real application needs to store data, know who the user is and keep that data safe. This level turns demos into products.

• Databases: SQL (PostgreSQL, MySQL) and NoSQL (MongoDB)
• Schema design, relationships and indexes
• Authentication: sessions, JWT, password hashing
• REST principles, validation and pagination
• Security basics: SQL injection, XSS, CSRF, rate limiting

SELECT users.name, COUNT(notes.id) AS total
FROM users
JOIN notes ON notes.user_id = users.id
GROUP BY users.name;

Finish before moving on: a blog platform with sign-up, login, and posts that belong to each user.

The last level is the set of tools around the code. None of it is glamorous, but all of it is expected on a real team.

• Git and GitHub: branches, pull requests, resolving conflicts
• Testing: unit tests, integration tests, Jest or pytest
• Frameworks: React, Vue or Svelte on the front end; TypeScript for safer JavaScript
• Deployment: hosting, domains, HTTPS, environment config
• Docker and CI/CD: packaging your app and automating checks
• Performance and accessibility: fast pages that work for everyone

Finish: deploy your blog platform with tests, a CI pipeline and a live URL you can put on your CV.