Full Stack Web Dev Course

Lesson 1 • Version Control with Git

Teaches Git fundamentals and remote repository workflows. Enables collaborative coding and safe iteration throughout the entire course.

Lesson 2 • Command Line Essentials

Builds fluency with file system navigation, process management, and scripting basics. Underpins efficient use of build tools and servers introduced later.

Lesson 3 • Setting Up Your Dev Environment

Installs and configures code editors, terminal emulators, and version managers. Ensures every student has a reproducible, professional-grade workspace.

Lesson 1 • Semantic Elements and Landmarks

Covers header, nav, main, article, section, aside, and footer elements. Improves accessibility and search engine indexing of student projects.

Lesson 2 • Tables, Lists, and Embedded Content

Covers data tables, ordered and unordered lists, and iframe embedding. Completes the HTML toolkit needed before CSS layout is introduced.

Lesson 3 • Forms, Inputs, and Validation

Teaches all input types, labels, fieldsets, and native browser validation. Prepares students for back-end form handling covered in later chapters.

Lesson 1 • CSS Selectors and the Cascade

Explains specificity, inheritance, and the cascade algorithm. Prevents styling bugs that arise from misunderstood rule precedence.

Lesson 2 • CSS Grid Layout

Covers two-dimensional grid templates, areas, and auto-placement. Equips students to build complex page layouts without external frameworks.

Lesson 3 • Responsive Design and Media Queries

Applies mobile-first methodology, breakpoints, and fluid units. Ensures all student projects render correctly across device sizes.

Lesson 4 • Flexbox Layout

Teaches one-dimensional alignment with flex containers and items. Enables students to build navigation bars, card rows, and centred layouts.

Lesson 1 • Asynchronous JavaScript

Explains the event loop, callbacks, Promises, and async/await. Directly enables the API calls and database queries introduced in later chapters.

Lesson 2 • Arrays, Objects, and Destructuring

Covers array methods, object manipulation, and ES6 destructuring syntax. Prepares students for data handling in both front-end and back-end contexts.

Lesson 3 • Control Flow and Functions

Teaches conditionals, loops, and function declarations through arrow functions. Enables students to write reusable, logic-driven code blocks.

Lesson 4 • DOM Manipulation and Events

Teaches querying, modifying, and creating DOM nodes and handling browser events. Bridges static HTML/CSS pages into interactive applications.

Lesson 1 • React Router and Navigation

Implements client-side routing with React Router. Enables multi-page application structure required for the capstone project.

Lesson 2 • React Core Concepts

Introduces JSX, components, and the virtual DOM. Establishes the mental model needed before hooks and state are introduced.

Lesson 3 • Fetching Data and API Integration

Combines useEffect with fetch and Axios to consume REST APIs. Connects front-end components to the back-end services built later.

Lesson 4 • State and Lifecycle with Hooks

Covers useState, useEffect, and custom hooks for managing component state and side effects. Enables dynamic, data-driven UI behaviour.

Lesson 1 • RESTful API Design Principles

Applies REST constraints to resource naming, HTTP verbs, and status codes. Produces APIs that are predictable and easy for front-end clients to consume.

Lesson 2 • Middleware and Request Processing

Explains the middleware pipeline, body parsing, and error handling. Enables clean, reusable request processing across all API routes.

Lesson 3 • Node.js Runtime and Module System

Covers the Node event loop, CommonJS modules, and the npm ecosystem. Establishes the server-side runtime foundation for all back-end work.

Lesson 4 • Input Validation and Error Handling

Implements schema-based validation and structured error responses. Hardens the API before database integration and authentication are added.

Lesson 1 • Database Security and Performance

Covers parameterized queries, connection pooling, and indexing strategies. Prevents SQL injection and ensures the API scales under load.

Lesson 2 • ORM Integration with Node.js

Applies an ORM to define models, associations, and migrations. Connects the Express API to a relational database with minimal raw SQL.

Lesson 3 • NoSQL with Document Databases

Introduces document storage, collections, and flexible schemas. Equips students to choose the right database type for different data shapes.

Lesson 4 • Relational Database Fundamentals

Covers tables, primary keys, foreign keys, and normalisation. Provides the data modelling vocabulary used throughout SQL and ORM work.

Lesson 1 • Web Application Security Essentials

Addresses OWASP top threats including XSS, CSRF, and injection attacks. Hardens the application to meet baseline production security standards.

Lesson 2 • Containerisation with Docker

Packages the app and database into Docker containers and composes multi-service stacks. Ensures consistent behaviour from local dev to production.

Lesson 3 • Cloud Deployment and CI/CD Pipelines

Deploys the containerised full-stack app to a cloud provider and automates builds with a CI/CD pipeline. Students have a live URL for their portfolio.

Lesson 4 • Authentication with JWT

Builds registration, login, and token refresh flows using JSON Web Tokens. Secures all protected API routes before deployment.