Website Building Course

Lesson 1 • Choosing a Code Editor

Compares popular code editors and configures a productive workspace. Ensures students write and preview code efficiently from day one.

Lesson 2 • How the Internet Works

Covers DNS, IP addresses, and HTTP request-response cycles. Grounds all later hosting and deployment decisions in real network behaviour.

Lesson 3 • Web File and Folder Structure

Defines standard project directory layouts and file naming conventions. Prepares students to organise every project built throughout the course.

Lesson 1 • Semantic Layout Elements

Introduces header, nav, main, article, section, aside, and footer tags. Reinforces how semantic structure improves accessibility and SEO.

Lesson 2 • Links, Images, and Media

Teaches anchor tags, image embedding, and native audio and video elements. Connects media handling to accessibility and performance considerations.

Lesson 3 • HTML Document Anatomy

Breaks down the doctype, head, and body sections of an HTML file. Establishes the required scaffolding every page in the course will use.

Lesson 4 • HTML Forms and Inputs

Builds accessible forms using labels, inputs, selects, and buttons. Prepares students for user data collection covered in later chapters.

Lesson 1 • Flexbox Layout

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

Lesson 2 • CSS Grid Layout

Introduces two-dimensional grid tracks, areas, and placement. Equips students to design complex page layouts without relying on frameworks.

Lesson 3 • CSS Syntax and Selectors

Explains rules, declarations, specificity, and the cascade. Gives students precise control over which styles apply to which elements.

Lesson 4 • CSS Transitions and Animations

Creates smooth state changes and keyframe animations using pure CSS. Adds professional polish to interactive elements built throughout the course.

Lesson 5 • Responsive Design with Media Queries

Applies breakpoints and fluid units to adapt layouts across screen sizes. Directly enables the mobile-first sites built in subsequent chapters.

Lesson 1 • Events and User Interaction

Attaches event listeners to handle clicks, inputs, and keyboard actions. Drives the interactive components developed throughout the course.

Lesson 2 • DOM Manipulation

Selects, creates, modifies, and removes HTML elements via JavaScript. Connects scripting directly to the HTML structure built in Chapter 2.

Lesson 3 • Fetching Data from APIs

Uses the Fetch API and async/await to retrieve and display external data. Prepares students for dynamic content features in advanced chapters.

Lesson 4 • JavaScript Syntax Fundamentals

Covers variables, data types, operators, and control flow. Provides the language foundation required for every script written in this course.

Lesson 1 • Contact Form and Footer

Implements a validated contact form and a multi-column footer layout. Connects HTML form knowledge with basic JavaScript validation logic.

Lesson 2 • Creating Core Page Sections

Builds hero, features, testimonials, and call-to-action sections. Reinforces Grid and Flexbox layout skills in a realistic page context.

Lesson 3 • Building the Navigation and Header

Constructs a responsive navigation bar with logo, links, and a mobile menu. Applies Flexbox and JavaScript toggle patterns from earlier chapters.

Lesson 4 • Project Planning and Wireframing

Defines site goals, user flows, and low-fidelity wireframes before coding. Establishes a professional planning habit used in every subsequent project.

Lesson 1 • Image and Media Optimisation

Compresses, resizes, and converts images to modern formats for faster delivery. Directly reduces the largest contributor to page weight on most sites.

Lesson 2 • Caching and Content Delivery

Configures browser caching headers and explains CDN distribution. Ensures repeat visitors and global users experience fast load times.

Lesson 3 • CSS and JavaScript Optimisation

Minifies, defers, and tree-shakes CSS and JS assets to reduce render-blocking. Applies directly to the static site built in Chapter 5.

Lesson 1 • Structured Data and Rich Results

Adds JSON-LD schema markup to enable rich snippets in search results. Extends the HTML knowledge from Chapter 2 with machine-readable metadata.

Lesson 2 • On-Page SEO Fundamentals

Optimises title tags, meta descriptions, headings, and keyword placement. Builds on the semantic HTML from Chapter 2 to maximise search relevance.

Lesson 3 • Link Building and Site Authority

Explains internal linking strategy and the role of external backlinks. Connects site architecture decisions to long-term search ranking outcomes.

Lesson 4 • SEO Monitoring and Reporting

Sets up search console tools and tracks ranking, impressions, and clicks. Gives students a repeatable workflow for ongoing SEO improvement.

Lesson 1 • Deploying with Git and CI/CD

Pushes code to remote repositories and automates deployment pipelines. Introduces professional release workflows used in team environments.

Lesson 2 • SSL Certificates and HTTPS

Installs and renews SSL certificates to secure all site traffic. Directly improves both user trust and the SEO signals covered in Chapter 7.

Lesson 3 • Hosting Options and Selection

Compares shared, VPS, managed, and static hosting platforms by cost and capability. Equips students to match hosting type to project requirements.

Lesson 4 • Ongoing Maintenance and Monitoring

Sets up uptime monitoring, backup schedules, and update routines. Ensures sites remain secure, fast, and functional after launch.