Frontend Developer Course

Lesson 1 • Introduction to the Command Line

Covers file navigation, process management, and shell scripting basics. Prepares students to run build tools and package managers introduced later.

Lesson 2 • Version Control with Git

Teaches commits, branches, and remote repositories. Connects to team workflows used throughout all subsequent project-based chapters.

Lesson 3 • Setting Up the Dev Environment

Installs and configures a code editor, browser dev tools, and version control. Ensures every student works in a consistent, professional toolchain.

Lesson 1 • Text and Inline Elements

Covers headings, paragraphs, spans, and inline formatting tags. Reinforces the distinction between semantic meaning and visual presentation.

Lesson 2 • Links, Images, and Media

Teaches anchor tags, image attributes, and embedded media elements. Builds skills for creating navigable, media-rich pages used in later CSS chapters.

Lesson 3 • Semantic HTML5 Elements

Introduces header, nav, main, article, section, and footer. Demonstrates how semantic markup improves accessibility and search engine optimization.

Lesson 4 • HTML Document Anatomy

Explains doctype, head, and body sections and their roles. Grounds students in the document object model before any styling or scripting is introduced.

Lesson 1 • Typography and Colour

Teaches font properties, web fonts, and colour models including hex, RGB, and HSL. Connects visual design principles to CSS implementation.

Lesson 2 • Responsive Design and Media Queries

Applies breakpoints, fluid units, and mobile-first strategy to adapt layouts. Prepares students to deliver cross-device experiences in all future projects.

Lesson 3 • Flexbox Layout

Introduces the flex container and item model for one-dimensional layouts. Students build navigation bars and card grids used in the capstone project.

Lesson 4 • CSS Syntax and Selectors

Explains rules, declarations, and the full selector spectrum. Establishes specificity and cascade rules that govern every styling decision in this chapter.

Lesson 5 • CSS Grid Layout

Covers grid tracks, areas, and placement for two-dimensional layouts. Extends flexbox skills to handle complex page structures efficiently.

Lesson 1 • Error Handling and Debugging

Introduces try/catch, console methods, and browser debugger tools. Builds systematic debugging habits essential for all advanced JavaScript work.

Lesson 2 • Control Flow and Loops

Teaches if/else, switch, for, while, and do-while constructs. Enables students to write decision-making and iterative logic for real-world problems.

Lesson 3 • Functions and Scope

Explains function declarations, expressions, arrow functions, and closure. Scope mastery prevents the variable-access bugs common in DOM scripting.

Lesson 4 • Arrays and Objects

Covers array methods, object literals, and destructuring. Prepares students to manipulate the data structures returned by APIs in Chapter 5.

Lesson 1 • Modifying DOM Elements

Teaches textContent, innerHTML, classList, and style manipulation. Students dynamically update page content in response to data and user actions.

Lesson 2 • Forms and User Input Handling

Covers form submission events, input validation, and preventing default behaviour. Connects HTML form knowledge from Chapter 2 to JavaScript-driven UX.

Lesson 3 • Querying and Traversing the DOM

Covers querySelector, getElementById, and parent/child traversal methods. Establishes the selection skills needed before any DOM modification is attempted.

Lesson 4 • Event Handling

Explains addEventListener, event objects, and propagation phases. Enables students to wire up interactive behaviours to any element on the page.

Lesson 1 • Async/Await Syntax

Rewrites promise chains using async functions and await expressions. Produces cleaner, more maintainable async code used in all subsequent projects.

Lesson 2 • Asynchronous Programming Concepts

Explains the event loop, call stack, and task queue. Provides the mental model required to reason about timing in all async JavaScript code.

Lesson 3 • Fetching Data from REST APIs

Uses the Fetch API to make GET and POST requests and parse JSON responses. Connects async skills to real data sources powering modern web apps.

Lesson 4 • Promises and Chaining

Covers promise creation, .then(), .catch(), and .finally() chaining. Replaces callback-based patterns with readable, composable async workflows.

Lesson 1 • Linting, Formatting, and Code Quality

Sets up a linter and formatter to enforce consistent code style automatically. Integrates quality gates into the development workflow before code is committed.

Lesson 2 • JavaScript Modules

Explains ES module syntax, named and default exports, and import paths. Enables code splitting and reuse patterns required by modern frameworks.

Lesson 3 • Package Management with npm

Covers npm init, installing packages, and managing package.json and lock files. Establishes dependency management skills used in every tooling workflow.

Lesson 4 • Bundlers and Build Tools

Configures a module bundler to transpile, bundle, and optimise assets. Produces production-ready builds with code splitting and tree shaking enabled.

Lesson 1 • Global State and Context API

Uses React Context to share state across the component tree without prop drilling. Prepares students for third-party state management libraries covered in supplementary chapters.

Lesson 2 • React Core Concepts

Introduces JSX, the virtual DOM, and the component model. Establishes the mental shift from imperative DOM scripting to declarative UI composition.

Lesson 3 • Building and Deploying a React App

Optimises a React app for production and deploys it to a static hosting platform. Completes the full development lifecycle from local code to live URL.

Lesson 4 • State Management with Hooks

Covers useState, useReducer, and lifting state up. Enables students to build dynamic, data-driven components that re-render correctly on state changes.

Lesson 5 • Side Effects with useEffect

Explains the effect lifecycle, dependency arrays, and cleanup functions. Connects async API fetching from Chapter 6 to the React component lifecycle.