Every lesson, in one place

Foundations

1. How HTML works
2. Document structure
3. Elements and attributes
4. Comments and whitespace
5. Files and paths
6. Page metadata

Text

1. Headings and paragraphs
2. Text with meaning
3. Showing code
4. Quotes and citations
5. Lists
6. Characters and entities

Links and media

1. Links
2. Images
3. Responsive images
4. Figures and captions
5. Audio and video
6. Embeds and graphics
7. Milestone: a restaurant menu

Structure

1. Page layout
2. Navigation menus
3. Div, span, class and id
4. Global attributes
5. Tables
6. Built-in interactive elements

Forms

1. Forms
2. Input types
3. Choices and longer answers
4. Form validation
5. Autofill and mobile keyboards
6. Buttons or links
7. Milestone: an event sign-up form

Quality

1. Accessibility
2. Keyboard and focus
3. Search and sharing
4. Structured data
5. Debugging HTML

Connecting

1. Connecting CSS and JavaScript
2. Fast-loading HTML
3. Project: profile page

Foundations

1. How CSS works
2. Selectors
3. The cascade and specificity
4. Inheritance
5. Units
6. Colors
7. Custom properties (variables)

The box

1. The box model
2. Sizing
3. Spacing
4. Borders and outline
5. Backgrounds and gradients
6. Shadows
7. Overflow and scrolling

Text

1. Fonts
2. Web fonts
3. Text styling
4. Links and lists
5. Milestone: a product card

Layout

1. Display and normal flow
2. Position
3. Stacking and z-index
4. Flexbox
5. Flex alignment
6. Grid
7. Grid layouts

Responsive

1. Media queries
2. Container queries
3. Fluid sizing
4. Images in CSS
5. Milestone: a responsive landing page

Motion and effects

1. Transitions
2. Animations
3. Transforms
4. Filters and effects

Modern CSS

1. States and :has()
2. Pseudo-elements
3. Nesting, layers and @supports

Build and fix

1. Debugging CSS
2. Project: style your profile page

Foundations

1. How JavaScript works
2. The console
3. Variables
4. Values and types
5. Operators
6. Working with text

Logic

1. Making decisions
2. Loops
3. Functions
4. Scope
5. Errors

Data

1. Arrays
2. Array methods
3. Objects
4. Sets and Maps
5. JSON
6. Patterns with regular expressions
7. Numbers and dates

The page

1. Finding elements
2. Changing content
3. Classes and styles
4. Creating elements
5. Events
6. Forms
7. Event delegation
8. Milestone: a quiz

Waiting for things

1. Timers
2. Promises
3. async and await
4. Fetching data

Organising code

1. Modules
2. Classes
3. Storage
4. Keeping the page in sync
5. Milestone: a to-do app

Quality

1. Debugging JavaScript
2. Accessible interactivity
3. Showing user text safely
4. Reading AI-generated code

Project

1. Project: bring your profile to life

Foundations

1. How databases work
2. Your first query
3. Filtering rows
4. Sorting and limiting
5. Calculations and column names

Filtering well

1. Combining conditions
2. Lists and ranges
3. Searching text
4. Missing values
5. Text and date functions

Summarising

1. Counting and totals
2. Grouping rows
3. Filtering groups
4. Milestone: a bakery sales report

Combining tables

1. Keys and relationships
2. Joining tables
3. Keeping unmatched rows
4. Three tables and self-joins
5. Milestone: a bird-sightings leaderboard

Changing data

1. Adding rows
2. Changing and removing rows
3. Transactions

Designing tables

1. Creating tables
2. Rules for your data
3. Designing good tables
4. Indexes and speed

Going further

1. Queries inside queries
2. Naming steps with WITH
3. If-then with CASE
4. Ranking and running totals
5. Saved queries with views

Quality

1. SQL injection and safe parameters
2. Debugging queries
3. Reading AI-written SQL
4. Milestone: design your own database

Foundations

1. Saving your work with Git
2. Your first repository
3. Staging and committing
4. Writing good commit messages
5. Looking back: log and diff

Undoing safely

1. Undoing changes before you commit
2. Fixing commits: amend and revert
3. Going back in time with reset
4. Ignoring files
5. Milestone: track your profile page

Branches

1. Branches
2. Merging
3. Merge conflicts
4. Milestone: fix a conflict on the bakery site

Working with GitHub

1. Remotes and GitHub
2. Push, pull and fetch
3. Pull requests
4. Keeping secrets out of your repo

Quality

1. Reading AI-suggested Git commands
2. When Git says no

Publishing

1. Publishing with GitHub Pages
2. Deploying from Git to your host
3. Custom domains and safe updates
4. Milestone: publish your site and ship an update

Foundations

1. How AI assistants work
2. When AI helps and when it doesn't
3. How a chat remembers

Asking well

1. Saying what you want
2. Giving it your code
3. Setting limits
4. Showing an example
5. Asking in small steps
6. Asking it to explain

Checking the answer

1. Reading and testing every line
2. Spotting made-up features
3. Checking for accessibility gaps
4. When the answer misses the point
5. Milestone: build the bird club events page

Fixing with AI

1. Sharing errors the right way
2. Asking for the smallest fix
3. Saving with Git before AI changes things
4. Milestone: debug the bakery menu with AI

Safety

1. Keeping secrets out of chats
2. Unsafe suggestions to refuse
3. Licences and copied code

AI on your own site

1. How a site talks to an AI service
2. Keeping the key on the server
3. Milestone: plan, ask, check and ship a profile feature

Foundations

1. How a server works
2. Requests and responses
3. URLs and routes
4. GET, POST and the other methods
5. Status codes
6. Headers

Your first server

1. Your first Express server
2. Sending HTML pages
3. Serving static files
4. Route parameters
5. Query strings
6. Not found and error pages
7. Project: the bakery site server

Data and APIs

1. Sending JSON
2. Reading form data
3. Checking what people send
4. Using a database
5. Designing API routes
6. Calling your API from a page
7. Project: a menu API

Users and safety

1. Cookies
2. Sessions and logging in
3. Storing passwords safely
4. Protecting private pages
5. Keeping secrets out of code
6. SQL injection and unsafe HTML
7. Rate limits
8. Project: a members area

Going live

1. Middleware
2. Logging and debugging
3. Caching
4. CORS
5. Hosting a server
6. Project: launch-ready server

Foundations

1. What accessibility means
2. How screen readers work
3. Accessible names
4. Real elements, real meaning
5. Headings and landmarks

Content

1. Alt text for images
2. Link text that makes sense
3. Colour and contrast
4. Zoom and text size
5. Page language and titles
6. Project: an accessible bakery page

Keyboard

1. Using a page with a keyboard
2. Visible focus
3. Tab order
4. Skip links
5. Keyboard traps
6. Project: a keyboard-friendly booking page

Forms

1. Labels for every field
2. Required fields
3. Error messages people can find
4. Grouping related fields
5. Autocomplete and input types
6. Project: an accessible sign-up form

Interactive parts

1. Buttons and links
2. ARIA, carefully
3. Announcing changes
4. Dialogs
5. Show and hide menus
6. Motion and animation
7. Project: audit and fix a page

Foundations

1. Why write tests
2. Your first test
3. expect and matchers
4. Reading a failing test
5. Arrange, act, assert

Writing good tests

1. Edge cases
2. Testing errors
3. Testing objects and arrays
4. One thing per test
5. Test names that explain
6. Project: test a price calculator

Beyond the basics

1. Setup and teardown
2. Mocks and fakes
3. Testing timers and dates
4. Async tests
5. Testing code that fetches
6. Project: test the booking rules

Testing pages

1. Testing the page
2. Clicks and typing
3. Testing forms
4. Finding elements like a user
5. Snapshot tests
6. Project: test a to-do list

Working habits

1. Writing the test first
2. Fixing bugs with a test
3. Coverage
4. Testing code an AI wrote
5. Project: a test suite you trust

Foundations

1. Why speed matters
2. How a page loads
3. Reading a waterfall
4. The three numbers that matter
5. Measuring fairly

Images

1. Smaller image files
2. Modern image formats
3. Responsive images
4. Lazy loading
5. Images that don't jump
6. Speeding up the biggest image
7. Project: a faster bakery home page

CSS, fonts and scripts

1. Render-blocking CSS
2. Critical CSS
3. Fonts without the wait
4. defer and async
5. Third-party scripts
6. Shipping less JavaScript
7. Long tasks and slow taps
8. Project: a quick bird club page

Network and caching

1. Fewer, smaller requests
2. Compression
3. Browser caching
4. File names that change
5. Preconnect and preload

Working habits

1. Layout shift beyond images
2. A performance budget
3. Checking AI speed advice
4. Project: speed up the bike shop

Tools

• Playground
• Explain my HTML
• How HTML becomes a page

Reference

• Every HTML element
• Every CSS property
• Everyday JavaScript
• Every SQL keyword
• Every Git command
• AI review checklist
• Every server term
• Accessibility checklist
• Every testing term
• Every performance term

About PlainFinch

• About
• Contact
• Privacy
• Terms of use
• Accessibility