Core Topics

• HTML5 document structure: DOCTYPE, head, body, meta tags
• Semantic elements: header, nav, main, article, section, aside, footer
• Text content: headings, paragraphs, lists, links, emphasis
• Forms: input types, labels, form validation attributes, textarea, select
• Multimedia: images (alt text, srcset), audio, video, iframe
• Accessibility basics: ARIA roles, landmark regions, keyboard navigation

Tools & Tech

Learning Outcomes

• Write fully semantic, accessible HTML5 pages that screen readers and search engine crawlers can understand correctly.

Core Topics

• CSS selectors, specificity, cascade, and inheritance
• Box model: padding, margin, border, box-sizing
• Flexbox: flex-direction, justify-content, align-items, flex-wrap
• CSS Grid: grid-template-columns, areas, auto-fit/auto-fill
• Responsive design: media queries, mobile-first methodology
• Tailwind CSS utility classes: spacing, typography, colour, layout
• CSS custom properties (variables) and dark mode strategies
• Animations: transitions, @keyframes, transform, animation shorthand

Tools & Tech

Learning Outcomes

• Build a fully responsive, multi-section landing page using CSS Grid, Flexbox, and Tailwind utilities that works across mobile, tablet, and desktop.

Core Topics

• JavaScript fundamentals: variables, data types, operators, control flow
• Functions: declarations, expressions, arrow functions, closures
• Arrays and objects: methods, destructuring, spread/rest operators
• DOM manipulation: querySelector, createElement, event listeners
• Asynchronous JS: setTimeout, Promises, async/await, try/catch
• Fetch API: GET and POST requests, JSON parsing, error handling
• Local Storage: reading, writing, and removing data

Tools & Tech

Learning Outcomes

• Add dynamic interactivity to web pages using DOM events, Fetch API calls to public APIs, and Local Storage persistence — no framework needed.

Core Topics

• Why frameworks: component reusability, virtual DOM, declarative UI
• Vite project setup: file structure, JSX syntax, hot module reload
• Functional components, props, and component composition
• useState for local state, useEffect for side effects
• React Router: Link, NavLink, useNavigate, dynamic routes
• Fetching API data in useEffect with loading and error states
• Deploying a React app to Vercel in under 5 minutes

Tools & Tech

Learning Outcomes

• Build a multi-page React SPA that fetches data from a public API, manages local state, and is deployed to a live Vercel URL.

Core Topics

• How the web works: HTTP request-response cycle, DNS, TCP/IP basics
• Node.js runtime: module system, file system, built-in modules
• Express app setup: routes, controllers, middleware, error handling
• Building CRUD REST API endpoints: Create, Read, Update, Delete
• Environment variables with dotenv and config management
• SQL database (MySQL / SQLite): tables, CRUD queries, JOIN operations
• NoSQL database (MongoDB): documents, collections, basic queries
• Connecting both SQL and MongoDB to an Express app

Tools & Tech

Learning Outcomes

• Build an Express REST API that performs CRUD operations on both a SQL and a NoSQL database, consumable from your React frontend.

Core Topics

• Git workflow: init, add, commit, push, pull, merge, rebase
• GitHub: repositories, branches, pull requests, code review
• Web security basics: SQL injection, XSS, CSRF — how they work and how to prevent
• HTTP security headers with Helmet.js
• CORS configuration and when you need it
• Deploying Node/Express backend to Railway
• Connecting frontend (Vercel) to backend (Railway) in production
• Environment variable management in cloud deployments

Tools & Tech

Learning Outcomes

• Configure a secure Express API with Helmet, deploy it to Railway, and connect it to a Vercel-hosted React frontend with proper environment variable separation.

Core Topics

• Capstone project planning: user stories, wireframes, API design
• End-to-end feature implementation with mentor reviews
• Writing a professional README: project description, setup, live link
• Building a personal portfolio site linking all projects
• Resume tips: how to present a full stack project on a one-page resume
• LinkedIn profile optimisation for web developer roles

Tools & Tech

Learning Outcomes

• Ship a deployed full stack capstone project with a live URL and GitHub repo — the anchor piece of your developer portfolio.