Mina's Web Dev Course

00

Getting ready~1 day

Set up your machine

Get your tools installed and accounts created. You're on a Mac, so we'll do it the way most developers do — with Homebrew, which turns the whole thing into a few one-line commands instead of a dozen downloads. Do it properly once and you never think about it again.

First — what is Homebrew?

Homebrew is a package manager for macOS — think of it as an app store for developer tools that you drive from the terminal. Instead of finding a website, downloading an installer, and clicking through it for every single tool, you type one line — brew install git — and it's done. It also keeps everything up to date at once with brew upgrade. Almost every Mac developer uses it; it's the tidiest way to install everything below. (On Windows instead? Grab each tool from its download page, or use winget.)

Do this

Install HomebrewOpen the Terminal app (press ⌘-Space, type "Terminal", hit Enter). Paste this in and follow the prompts:$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"When it finishes it may print two lines to add Homebrew to your PATH — copy-paste and run them. Then check it works:$ brew --version
Install VS CodeYour code editor.$ brew install --cask visual-studio-code
Install GitVersion control — you'll learn it properly in Module 3.$ brew install gitCheck it with git --version.
Install Node.jsThe JavaScript runtime you'll use everywhere — and what powers the Claude Code CLI below.$ brew install nodeCheck it with node -v — it should print a version number.
Install the Claude Code CLINow that Node is installed, add Claude Code — your AI pair programmer (much more in the AI section). It installs through Node's package manager:$ npm install -g @anthropic-ai/claude-codeThen run claude inside any project folder to start it. More at claude.com/claude-code.
Create a GitHub accountSign up at github.com. This is where all your code and projects will live.
Meet the browser DevToolsRight-click any web page → Inspect. Poke around the Elements and Console tabs. You'll basically live in here from now on.

Done when

In the terminal, brew --version, git --version and node -v all print version numbers, VS Code opens, running claude starts Claude Code, and your GitHub account exists.

AI

Your pair programmerread early · use throughout

Learning with Claude

You have a Claude subscription — so you already have a patient tutor, a code reviewer, and a tireless pair programmer available any time. Used well, it makes this whole roadmap faster and a lot less lonely. Used badly, it quietly stops you from actually learning. Here's how to get the good version.

What it can do for you (basically everything)

Explain anything, in plain words. Paste an error, a file, or one confusing line and ask "what does this do?" or "why is this red?". No question is too basic — that's the whole point.
Be your always-on tutor. Ask it to teach a concept before you write code: "explain the box model like I'm new," "what's the real difference between props and state?"
Review your code. After a project: "review this for security, performance, and readability issues." Then read what it found — that's where a lot of the learning is.
Get you unstuck. Share the error and the relevant file and it walks you through the cause, not just a patch.
Do the boring parts. Boilerplate, scaffolding, repetitive edits — so your energy goes to the interesting bits.
Work across your whole project — that's Claude Code. In your terminal or VS Code, Claude Code can read every file, run commands, use git, and edit across many files at once. It's an agent that lives in your codebase, not just a chat window.

Do this

Open Claude Code and try itYou installed it in Module 0. Run claude inside one of your project folders and ask it to explain a file. (Prefer a browser? claude.ai has the same models in a chat window, and there's a VS Code extension too.)
Use it as a tutor, not an autopilotNext time you're stuck, ask it to explain the concept and let you try first — before you ask for finished code.
Have it review your own projectsAfter each project, ask for a security / performance / clarity review and learn from the notes. It quietly teaches you what "good" looks like.
Read every diff before you accept itWhen Claude edits your files, read the changed lines. Understanding the change is the point — never merge code you can't explain.
Right-size the modelUse a fast, lightweight model for small edits and questions; save the most powerful one for real architecture or hard bugs. In Claude Code you switch with /model. It's quicker and kinder to your usage limits.

Watch out for — where AI trips up

It skims over security. It'll happily write code with missing auth checks, unvalidated input, secrets hardcoded in files, or SQL-injection holes — and won't mention them unless you ask. Get in the habit of asking: "is this safe?"
It has performance blind spots. Code that's fine on 10 rows can crawl on 10,000 — N+1 database queries, nested loops, loading everything into memory. It looks correct because it is correct — just slow.
It quietly drops things. While editing a file it can remove a check, a case, or an edge-handling branch and never say so — and won't reintroduce it later either. This is exactly why you read the diff.
It over-engineers. Ask for a button and get a plugin system, three new dependencies, and layers of abstraction you don't need. Push back: "give me the simplest version that works."
It's confidently wrong sometimes. It can invent functions, APIs, or config options that don't exist. Cross-check against the real docs — the MDN / official-docs habit from Module 1 pays off here.
Slow, expensive overkill. Pointing the heaviest model at a one-line typo fix is slow and burns your limits for no benefit. Match the tool to the size of the job.
The learning trap. If you paste in code you can't explain, you didn't learn — you assembled. Early on especially, prefer "explain it so I can write it" over "just write it."

Why fundamentals still matter

The goal isn't to out-type the AI — you never will. It's to become the person who can tell when the AI is wrong: who spots the security hole, the slow query, the missing check, the needless complexity. AI is the fastest way to move; the fundamentals in these modules are how you steer. Learn both and you're dangerous in the best way.

Done when

Claude Code is set up, you've used it to explain something and to review a project — and you can look at AI-written code and say what it does and whether you'd trust it.

01

Structure & styling2–3 weeks

HTML & CSS, properly

Not just "make a div pink" — real structure and layout skills. Everything here builds toward one goal: your own CV / homepage, live on the internet by the end of week 3.

Study these

Semantic HTML — header, nav, main, section, article, footer. Not div for everything.
Forms — inputs, labels, and validation attributes.
Accessibility basics — alt text, proper heading hierarchy, lists and tables.
The box model (margin / border / padding / content) — this trips everyone up at first.
Flexbox for 1D layouts (navbars, a row of cards) and Grid for 2D layouts (page layouts, galleries).
Responsive design — media queries, mobile-first thinking, and CSS variables.

Build it in stages — your CV / homepage

Structure first — HTML only, no stylingHeader with your name and title, an "about me" section, a work / skills list, and a contact section with a form. Get the semantic HTML right before touching CSS.
Style it with CSSLay it out with flexbox / grid. Decent typography, a simple colour scheme, and spacing that doesn't feel cramped.
Make it responsiveTest at phone width, fix anything that breaks. This is where media queries get used for real.
Deploy it to GitHub PagesPush the project to a GitHub repo. In repo Settings → Pages, point at the main branch. Your site goes live at https://<username>.github.io/<repo>/. The free github.io URL is plenty — a custom domain can come later.
Bonus — a CSS Grid photo galleryOptional. Same page or a separate one. Good extra Grid practice once the CV site is live.

Done when

Your CV site is live at a real github.io URL, looks good on both phone and desktop, and you'd be happy to put the link on LinkedIn as "currently learning to code — here's my site."

What to look at

freeCodeCamp: Responsive Web Design — structured, free, with exercises. Your main track for this module.
MDN Web Docs — the reference you'll come back to forever.
Flexbox Froggy & Grid Garden — genuinely useful games for muscle memory.
Kevin Powell on YouTube — the best CSS explainer out there.
GitHub Pages quickstart — official deploy guide.

02

The programming part3–4 weeks

JavaScript

The real foundation. Jumping to React without solid JS is the #1 way people get stuck and give up — so don't rush this one.

Study these

Variables, data types, operators.
Functions (including arrow functions) and scope.
Control flow — if / else and loops.
Arrays & objects, and the common methods — map, filter, reduce, forEach.
DOM manipulation & events — before React, so you understand what React is abstracting away.
Async JS — promises, async/await, and fetch for calling APIs.
Basic error handling — try / catch.

Build these (vanilla JS, no framework)

A to-do list appAdd, complete, and delete items — full CRUD in the browser using DOM manipulation. Remember this one; you'll rebuild it in React later.
A quiz app with score trackingQuestions, answers, a running score, and a result screen at the end.
A weather app using a free public APIType a city, fetch live weather, show it. This is your first real practice with fetch + async.

Done when

You can build a small interactive app from a blank file without a tutorial open — and you can explain what async/await and .map() actually do in your own words.

What to look at

JavaScript.info — thorough, free, well-organised. Your main track.
freeCodeCamp: JavaScript Algorithms & Data Structures
Eloquent JavaScript — free book, great for more depth once the basics click.
JavaScript30 by Wes Bos — 30 small vanilla-JS projects, free.

03

Version control3–5 days

Git & GitHub

A small module, but non-negotiable — every single job uses this.

Study these

The core loop — git init, add, commit, push, pull.
Branches and merging.
Pull requests — get used to the workflow even when working solo.
Writing a decent .gitignore and README.

Do this

Push everything you've built so far to GitHubAll your Module 1 & 2 projects, each in its own repo, with proper commit messages.
Write a README for each projectWhat it is, a screenshot, how to run it, a link to the live version if there is one.
Practise the branch → PR → merge flow onceMake a branch, change something, open a pull request against your own repo, merge it. This is exactly how teams work.

Done when

Your GitHub profile shows several repos with real commit history and readable READMEs, and you can create a branch, open a PR, and merge it without looking anything up.

What to look at

GitHub Skills — interactive, official.
Learn Git Branching — visual and interactive; makes branches finally click.

04

Interactive UIs4 weeks

React

Now you build interactive UIs the way most modern front-ends are built.

Study these

JSX, components, and props.
State with useState, side effects with useEffect.
Conditional rendering, and rendering lists with keys.
Forms and controlled inputs.
Fetching data from APIs inside React.
Client-side routing with React Router.
Component composition — breaking a UI into reusable pieces.

Build these

Rebuild the to-do app from Module 2 — in ReactThe best way to feel the difference between vanilla JS and React. Same app, completely different approach.
A recipe or movie search appUse a public API like TMDB or Spoonacular. Search, list results, view details.
A small multi-page app with React RouterE.g. a mini e-commerce product listing + cart (no backend yet). Practise routing and sharing state across pages.

Done when

You can start a new React app, break a design into components, wire up state and an API call, and add a second page with routing — comfortably, without copying from a tutorial.

What to look at

react.dev — the official docs; genuinely excellent for beginners now.
Scrimba: Learn React — interactive; the free tier is solid.
freeCodeCamp: Front End Development Libraries

The one rule

No copying tutorial code without understanding each line. Type it out, break it on purpose, then fix it. That's where the learning actually happens.

05

Typed JavaScript1–2 weeks

TypeScript basics

Worth adding once React feels comfortable — most real-world React / Node jobs use TypeScript.

Study these

Basic types and interfaces.
Typing function parameters and return values.
Typing React props and state.
Just enough generics to read other people's code — you don't need to master these yet.

Do this

Convert one of your React apps to TypeScriptPick a Module 4 project and add types to it. Fixing the errors TypeScript surfaces is the whole lesson.

Done when

You can add types to props, state, and functions without fear, and a red squiggle in your editor feels helpful rather than scary.

What to look at

TypeScript Handbook — official and concise.
Total TypeScript free tutorials — beginner-friendly.

06

The backend3 weeks

Node + Express

Now you build the other half — the backend that serves data to a front-end.

Study these

Node basics — npm and package.json.
Express — routing, middleware, and the request / response cycle.
REST conventions — GET / POST / PUT / DELETE and status codes.
Environment variables (.env).
Auth concepts — sessions vs JWT (just conceptually for now).
Error-handling middleware.

Build this

A REST API for your recipe / movie appBuild the backend that serves the data your Module 4 front-end needs. Start with hardcoded / in-memory data — the real database comes in the next module.
Wire your React app up to your own APISwap the public API for the one you just built. This is the first time front-end and back-end are both yours.

Done when

You have an Express API with GET / POST / PUT / DELETE routes returning sensible status codes, and your React app reads and writes data through it.

What to look at

Express official docs — short and actually readable.
The Odin Project — NodeJS course — free, project-heavy, perfect for this stage.

07

Databases2–3 weeks

SQL + Prisma

Learn plain SQL first — Prisma makes far more sense once you get what it's abstracting away.

Study these

Plain SQL — SELECT, WHERE, JOIN, INSERT, UPDATE.
Relational modelling — one-to-many and many-to-many.
Prisma — schema definition, migrations, and Prisma Client queries.

Do this

Get comfortable writing raw SQLWork through SQLBolt until JOINs stop feeling mysterious.
Set up a PostgreSQL databaseLocally, or via a free hosted option — Railway, Supabase, or Neon.
Connect your Express API to it with PrismaDefine a schema, run a migration, and replace the hardcoded data from Module 6 with real database queries.

Done when

Your API's data lives in a real PostgreSQL database, managed through Prisma — data survives a server restart, and you can model a one-to-many relationship on your own.

What to look at

SQLBolt — free, interactive SQL exercises.
Prisma official docs — a very good "getting started" guide.

08

Put it all together3–4 weeks

Capstone project

Combine everything into one real, deployed full-stack app. This is the project you'll talk about in interviews.

The stack

React front-end + Express / Prisma / PostgreSQL back-end, with basic auth (signup & login).

Do this

Pick an idea you actually care aboutMotivation matters more than the idea. Some options: a personal blog / CMS, a bookmark or link manager, a simple expense tracker, or a mini job-application tracker.
Build the full stackReact front-end, Express + Prisma + PostgreSQL back-end, and signup / login auth tying it together.
Deploy the front-endShip it to Vercel or Netlify.
Deploy the back-end + databaseShip those to Railway or Render.
Write a great READMELive link at the top, screenshots, the stack, and a short "what I learned building this."

Done when

Anyone can visit a real URL (not localhost), sign up, log in, and use your app end-to-end. Having something live to point at changes everything — for confidence and for job applications.

09

Landing the jobongoing

Portfolio & job prep

You've got real projects now. This is about presenting them well and getting in front of people.

Do this

Clean up your GitHubGood READMEs, pinned repos, and a consistent commit history.
Build a simple portfolio siteThis is itself a great extra React project — and the home for links to everything you've built.
Polish your resume & LinkedInBuild them around the projects you shipped, not just a list of technologies.
Practise explaining your capstone in detailAt junior level, interviewers dig into one project far more than they quiz algorithms. Know yours inside out.
Consider freelance gigs or open sourceSmall real-world experience counts, and gives you more to talk about.
Start applyingAim for junior / entry-level roles once you've got 2–3 solid projects live.

Done when

You have a tidy GitHub, a portfolio site linking 2–3 live projects, a resume built around them, and you're sending applications. This one never really "finishes" — keep iterating.

From a bit of HTML to shipping full-stack apps.

Set up your machine

Learning with Claude

HTML & CSS, properly

JavaScript

Git & GitHub

React

TypeScript basics

Node + Express

SQL + Prisma

Capstone project

Portfolio & job prep

Read this whenever you feel stuck