Advanced Web Development Course

Lesson 1 • JavaScript ES6+ Core Syntax

Covers destructuring, spread/rest, optional chaining, and nullish coalescing. Ensures fluency in modern JS before tackling async and framework topics.

Lesson 2 • Modules and Toolchain Basics

Introduces ES modules, npm ecosystem, and build tool configuration. Sets up the development environment used in all subsequent chapters.

Lesson 3 • Semantic HTML5 and Accessibility

Covers semantic elements, ARIA roles, and document outlining for accessible UIs. Establishes markup quality standards used throughout the course.

Lesson 1 • Flexbox for Component Layouts

Covers flex container properties, alignment axes, and flex-grow/shrink maths. Complements Grid by handling one-dimensional component-level layouts.

Lesson 2 • CSS Animations and Transitions

Covers keyframe animations, transition timing, and the Web Animations API. Provides motion design skills applied in UI component chapters.

Lesson 3 • Design Tokens and Theming Systems

Teaches token-based design systems, dark mode, and multi-brand theming via CSS variables. Establishes scalable styling architecture for large projects.

Lesson 4 • CSS Grid Mastery

Teaches explicit and implicit grid, named areas, and subgrid for complex layouts. Directly enables the multi-column and dashboard UIs built later in the course.

Lesson 1 • Prototypes and Object-Oriented JS

Covers prototype chain, class syntax sugar, mixins, and composition over inheritance. Prepares students for framework component models and library design.

Lesson 2 • Memory Management and Performance

Explains garbage collection, memory leaks, and profiling with browser DevTools. Directly improves application reliability and runtime efficiency.

Lesson 3 • Iterators, Generators, and Observables

Covers iterable protocol, generator functions, and reactive stream basics. Enables advanced data-flow patterns used in state management and streaming APIs.

Lesson 4 • Closures, Scope, and Execution Context

Explains call stack, lexical scope, and closure mechanics with practical examples. Underpins understanding of module patterns and framework internals covered later.

Lesson 1 • Reactivity and State Management

Covers reactive primitives, derived state, and side-effect management. Enables students to build dynamic UIs that respond correctly to data changes.

Lesson 2 • Client-Side Routing

Implements route definitions, dynamic segments, nested routes, and navigation guards. Connects multiple views into a cohesive single-page application.

Lesson 3 • Component Testing Strategies

Covers unit testing components, mocking dependencies, and snapshot testing. Integrates quality assurance into the development workflow from the start.

Lesson 4 • Component Architecture Fundamentals

Teaches component composition, props, slots, and unidirectional data flow. Establishes the mental model for all framework-specific patterns in this chapter.

Lesson 1 • Caching and Data Synchronisation

Covers server-state libraries, stale-while-revalidate, and optimistic updates. Reduces redundant network requests and improves perceived performance.

Lesson 2 • Real-Time Data with WebSockets

Implements WebSocket connections, event-driven messaging, and reconnection logic. Enables live features like notifications, chat, and collaborative editing.

Lesson 3 • Fetch API and HTTP Client Libraries

Teaches Fetch API, interceptors, retry logic, and request cancellation. Builds robust data-fetching utilities used across all application layers.

Lesson 4 • RESTful API Design Principles

Covers resource modelling, HTTP verbs, status codes, and versioning strategies. Provides the vocabulary and conventions for consuming and designing APIs.

Lesson 1 • Node.js Runtime and Core Modules

Explains the Node.js event loop, streams, and core modules like fs, path, and http. Establishes server-side JS fundamentals before introducing frameworks.

Lesson 2 • Building REST APIs with Express

Covers routing, middleware chaining, error handling, and request validation. Produces a functional API server that integrates with the frontend built earlier.

Lesson 3 • API Security and Rate Limiting

Covers CORS, helmet headers, rate limiting, and input sanitisation for API hardening. Directly addresses OWASP top risks in server-side applications.

Lesson 4 • Authentication and Authorisation

Implements JWT, session-based auth, OAuth flows, and role-based access control. Secures API endpoints against unauthorised access and token misuse.

Lesson 1 • Critical Rendering Path Optimisation

Covers render-blocking resources, preload, preconnect, and font loading strategies. Directly improves Largest Contentful Paint and First Contentful Paint scores.

Lesson 2 • Image and Asset Optimisation

Covers modern image formats, responsive images, lazy loading, and CDN delivery. Reduces largest payload contributors to page weight.

Lesson 3 • JavaScript Bundle Optimisation

Teaches code splitting, tree shaking, dynamic imports, and bundle analysis. Reduces initial JS payload and improves Time to Interactive.

Lesson 4 • Measuring Performance with DevTools

Uses Lighthouse, Performance panel, and network throttling to establish baselines. Measurement-first approach ensures optimisations target real bottlenecks.

Lesson 1 • Version Control and Branching Strategies

Covers Git workflows, trunk-based development, and pull request conventions. Establishes collaboration practices that CI/CD pipelines depend on.

Lesson 2 • Containerisation with Docker

Builds Docker images, writes multi-stage Dockerfiles, and manages containers. Produces portable, reproducible application environments for any deployment target.

Lesson 3 • Cloud Deployment and Hosting

Deploys static sites, Node.js APIs, and containers to cloud platforms. Covers environment variables, secrets management, and zero-downtime deployments.

Lesson 4 • Monitoring and Observability

Implements logging, error tracking, uptime monitoring, and alerting for production apps. Closes the feedback loop between deployment and performance improvement.