Web Coding Course

Lesson 1 • Version Control with Git Basics

Teaches init, add, commit, and push workflows for tracking code changes. Ensures students can save and recover work from the start.

Lesson 2 • Setting Up Your Code Editor

Installs and configures a modern code editor with essential extensions. Directly enables efficient coding throughout the course.

Lesson 3 • File Systems and Project Structure

Explains folder hierarchies, file naming conventions, and relative vs. absolute paths. Prevents broken links and disorganised projects.

Lesson 4 • Using the Browser Developer Tools

Introduces the Elements, Console, and Network panels for inspecting live pages. Builds debugging habits used in every later chapter.

Lesson 1 • HTML Forms and Input Types

Builds forms with labels, inputs, selects, textareas, and submit buttons. Lays the groundwork for user data collection covered in later chapters.

Lesson 2 • Links, Images, and Media

Explains anchor tags, image attributes, and embedded media elements. Connects pages and assets into a cohesive browsable document.

Lesson 3 • Lists, Tables, and Data Structures

Teaches ordered, unordered, and definition lists plus accessible table markup. Prepares students to present structured data correctly.

Lesson 4 • HTML Document Anatomy

Breaks down DOCTYPE, head, and body sections and their required metadata. Establishes the skeleton every HTML file in the course will follow.

Lesson 5 • Semantic HTML5 Elements

Introduces header, nav, main, article, section, aside, and footer elements. Improves accessibility and search engine interpretation of page content.

Lesson 1 • The CSS Box Model

Explains content, padding, border, and margin layers and box-sizing behaviour. Resolves the most common layout confusion beginners encounter.

Lesson 2 • CSS Syntax and Selectors

Covers rule sets, declarations, class, ID, and element selectors. Establishes the targeting mechanism for all styling work ahead.

Lesson 3 • Backgrounds, Borders, and Shadows

Applies background images, gradients, border styles, and box shadows. Adds visual depth and polish to page components.

Lesson 4 • Colours, Typography, and Units

Teaches hex, RGB, and HSL colour values plus font properties and CSS units. Enables consistent visual design decisions across a project.

Lesson 1 • Positioning and Z-Index

Covers absolute, fixed, and sticky positioning plus stacking context. Enables overlays, sticky headers, and modal dialogs.

Lesson 2 • Responsive Design and Media Queries

Applies breakpoints and fluid units to adapt layouts across screen sizes. Produces mobile-first designs that work on any device.

Lesson 3 • CSS Grid Fundamentals

Defines grid templates, rows, columns, and gap properties for two-dimensional layouts. Enables complex page structures unachievable with Flexbox alone.

Lesson 4 • Display Modes and Normal Flow

Reviews block, inline, and inline-block display values and document flow. Provides the baseline needed to understand when Flexbox or Grid is required.

Lesson 1 • Loops and Iteration

Teaches for, while, and for...of loops for repeating operations over data. Prepares students to process arrays and collections efficiently.

Lesson 2 • Variables, Data Types, and Operators

Introduces let, const, primitive types, and arithmetic and comparison operators. Establishes the data-handling foundation for all JavaScript code.

Lesson 3 • Arrays and Objects

Covers array methods and object literals for storing and manipulating structured data. Directly supports DOM manipulation and API data handling in later chapters.

Lesson 4 • Functions and Scope

Defines function declarations, expressions, arrow functions, and variable scope. Enables reusable, modular code blocks throughout a project.

Lesson 1 • Event Delegation and Propagation

Explains bubbling, capturing, and delegation patterns for efficient event handling. Prevents memory leaks and simplifies dynamic list interactions.

Lesson 2 • Selecting and Traversing the DOM

Uses querySelector, getElementById, and parent/child traversal methods. Enables precise targeting of any element on a live page.

Lesson 3 • Creating and Removing DOM Nodes

Builds new elements with createElement and inserts or removes them dynamically. Enables list rendering, modal creation, and dynamic UI patterns.

Lesson 4 • Modifying Elements and Content

Changes text, HTML, attributes, and CSS classes on selected elements. Produces visible page updates without reloading the browser.

Lesson 1 • Promises and Chaining

Creates and chains Promises using .then() and .catch() for sequential async tasks. Replaces nested callbacks with readable, linear code.

Lesson 2 • Rendering API Data to the DOM

Maps fetched JSON arrays to dynamically generated HTML elements. Completes the full data-fetch-to-display pipeline in a working project.

Lesson 3 • Fetching Data with the Fetch API

Sends GET and POST requests to REST APIs and parses JSON responses. Enables real-time data display from external services.

Lesson 4 • Async/Await Syntax

Rewrites Promise chains using async functions and await expressions. Produces cleaner, synchronous-looking code for complex async workflows.

Lesson 1 • Implementing JavaScript Features

Adds DOM manipulation, event handling, and API integration to the project. Transforms the static shell into a fully interactive application.

Lesson 2 • Deploying to a Live Host

Publishes the finished project to a static hosting platform using Git-based deployment. Produces a shareable URL for portfolio and job applications.

Lesson 3 • Testing and Debugging the Application

Uses DevTools, console logging, and manual test cases to find and fix bugs. Ensures the app works correctly before deployment.

Lesson 4 • Building the HTML and CSS Foundation

Constructs semantic markup and responsive layout for the application shell. Applies all prior HTML and CSS skills in a unified codebase.