Path 10 · Programming
Programming and Web Development
Think like a programmer, then build and publish a simple web page with HTML, CSS and JavaScript.
By the end you will be able to
- Describe algorithms with pseudocode and flowcharts.
- Write structured HTML and styled CSS.
- Write simple JavaScript that responds to events.
- Publish a personal web page.
Before you start
- Recommended first: Internet and Communication
Module 37: Programming logic
The thinking behind all programs: step-by-step recipes called algorithms, the building blocks of variables, conditions, loops and functions, and how to find and fix mistakes.
- Algorithms, sequencing, pseudocode and flowcharts
Learn to describe any job as a clear list of steps, write it in plain pseudocode and draw it as a flowchart, before a single line of real code is needed.
25 min · beginner
- Variables, data types, conditions, loops and functions
Meet the four building blocks found in almost every program: variables that hold values, conditions that choose, loops that repeat and functions that package a job, first in pseudocode and then in JavaScript.
30 min · beginner
- Errors and debugging
Learn the difference between syntax errors, runtime errors and logic errors, how to read an error message calmly, and a repeatable method for finding and fixing a bug.
25 min · beginner
Module 38: HTML
How web pages are built from HTML: elements, tags and attributes, headings, links, images, lists, tables, forms and the semantic structure that makes pages usable by everyone.
- HTML structure: elements, tags, attributes, headings, links and images
Write a complete web page by hand: the document skeleton, headings, paragraphs, links, images and lists, and see the result instantly in a live editor.
30 min · beginner
- Tables, forms, semantic structure and accessibility
Build tables for data and forms that people can fill in, use semantic elements to give a page meaning, and apply the basic habits that make pages accessible.
30 min · elementary
Module 39: CSS
How CSS styles a page: selectors and properties, colour and type, the box model, Flexbox and Grid layout, and responsive design with hover and focus states.
- CSS basics: selectors, colours and typography
Style an HTML page with CSS rules: pick elements with selectors, set colours and fonts, and see a plain page transform into a designed one.
30 min · beginner
- The box model, Flexbox and Grid
Understand that every element is a box with content, padding, border and margin, then arrange boxes in a row or a grid with Flexbox and CSS Grid.
30 min · elementary
- Responsive design, media queries, hover and focus states
Make a page adapt to phones, tablets and large screens with media queries, and add hover and focus styles that stay usable for keyboard and mouse users.
30 min · elementary
Module 40: JavaScript fundamentals
The core of JavaScript for beginners: variables, conditions, loops, functions, arrays and objects, then how scripts change a web page, react to clicks, check form input and report errors in the browser tools.
- JavaScript basics: variables, conditions, loops, functions, arrays and objects
Write and read real JavaScript: store values in variables, make decisions with if, repeat work with loops, package code in functions and keep collections in arrays and objects.
35 min · elementary
- The DOM and events
Learn how the browser turns HTML into a tree that JavaScript can change, and use events such as clicks to make a page respond to the person using it.
35 min · elementary
- Validation, error handling and browser developer tools
Check what people type into a form, handle failures with try/catch, and use the browser's developer tools to find out why a page is not behaving.
35 min · elementary
Module 41: Building and publishing a website
Set up a tidy project folder with a code editor, test it locally, track changes with Git, then build a small personal web page and publish it safely on a free static host.
- Project structure, code editors, local testing and Git
Organise a website project into folders, choose a code editor, test pages on your own computer and use Git to save snapshots of your work and back it up on GitHub.
35 min · elementary · Ubuntu/Linux · Windows
- Final project: build and publish a personal web page
Build a small, accessible personal page from scratch, check it, and publish it on a free static host with a public address, while keeping your private details safe.
45 min · intermediate