From First HTML Tag to Production-Ready Full-Stack

Key topics to cover

• How the web works: request/response, browsers, DevTools
• HTML: semantic structure, forms, accessibility basics
• CSS: layout (Flexbox, Grid), typography, spacing systems
• Responsive design: mobile-first thinking, breakpoints
• Tailwind CSS: utility-first workflow, reusable patterns
• JavaScript fundamentals: types, functions, scope, arrays, objects
• DOM & events, basic API calls with fetch

What you should be able to do after this stage

• You understand how the web works (HTTP, browsers, dev tools).
• You can design and build responsive pages from a Figma/Dribbble design.
• You are comfortable with JS fundamentals and DOM manipulation.

Core technologies

Suggested projects for this stage

• Personal landing page + About section
• 1–2 marketing/landing pages from real designs
• Interactive JS projects (TO-DO, quiz, small game)

Key topics to cover

• React fundamentals: components, props, state
• Hooks: useState, useEffect, custom hooks
• Lists, forms, controlled inputs, debouncing
• Next.js App Router: layouts, nested routes, metadata
• Server vs Client components — where to place what
• Dynamic routes, search params, basic SEO concepts
• UI libraries & design systems (shadcn/ui, icons, theming)
• Intro to TypeScript in React/Next.js

What you should be able to do after this stage

• You can structure a real frontend codebase (folders, components, hooks).
• You can build reusable UI components with good UX.
• You understand data fetching, routing, and basic performance optimisations.

Core technologies

Suggested projects for this stage

• Portfolio v2 (React → Next.js migration)
• Tutorials / Blog UI with filtering and search
• Dashboard UI: cards, charts (using any chart lib), tables

Key topics to cover

• Node.js fundamentals & async programming on server
• Express: routing, middleware, error handling
• Request lifecycle, logging and debugging
• MongoDB basics: documents, collections, CRUD
• Mongoose models, schemas, validation, populate
• Authentication: JWT, refresh tokens basics, password hashing (bcrypt)
• Security basics: rate limiting, helmet, input sanitisation
• API versioning & folder structure (controllers / services / routes)

What you should be able to do after this stage

• You can design API endpoints for real products (auth, CRUD, filters).
• You understand how to structure a backend project with controllers/services/models.
• You can secure APIs with validation, auth and basic best practices.

Core technologies

Suggested projects for this stage

• Auth API: signup, login, forgot password (email flow can be stubbed)
• Notes / Tasks API with user-based access
• Blog API: posts, categories, comments, likes

Key topics to cover

• Connecting Next.js apps to your own API or direct DB (via server components / routes)
• Protected routes, middleware, role-based access (admin vs user)
• File uploads (images, documents) and storage options
• Pagination, filtering, sorting at scale
• Handling errors & UX around loading states and failures
• Environment variables, configuration and secrets management

What you should be able to do after this stage

• You can build full products: frontend + backend + DB + deployment.
• You know how to design a basic data model and API around a problem.
• You have 2–3 strong portfolio projects you can confidently talk about.

Core technologies

Suggested projects for this stage

• Full-stack Blog / Learning Platform (with your tutorials & resources)
• Mini-SaaS: simple subscription/feature-based product (even if payment is mocked initially)
• Internal dashboard: analytics for your own site/projects

Key topics to cover

• Git workflows: feature branches, PRs, code reviews
• Basic testing: unit tests (Jest), component tests (React Testing Library)
• Performance: Lighthouse, Core Web Vitals, image optimisation, caching basics
• Logging & monitoring mindset (even if small scale)
• CI/CD introduction with simple pipelines (GitHub Actions, etc.)
• Handling configuration per environment (dev/stage/prod)

What you should be able to do after this stage

• You understand what makes a codebase maintainable long-term.
• You can debug, profile and improve slow parts of your app.
• You are comfortable working in a team workflow (PRs, reviews, branches).

Core technologies

Suggested projects for this stage

• Refactor one of your old projects: improve structure, add tests, add analytics/logging
• Implement CI for at least one repo (lint + basic tests on every push)