Web Applications Workshop: HTML, CSS, JavaScript, and PWAs

Learn how HTML defines the structure and content of a webpage, and explore the standard HTML document structure together with common elements for headings, paragraphs, links, images and lists.

Explore the purpose of the HTML head element and learn how metadata, character encoding, viewport settings, page titles and linked resources provide important data about a webpage.

Begin the Anna’s Kitchen project by creating a correctly structured HTML document, configuring the essential document metadata and linking the accompanying stylesheet.

Learn how to present tabular data using HTML tables and work with rows, cells, headings, captions and structural elements to organise data clearly.

Learn how HTML forms collect user data and explore common form elements and controls used for text input, selections, dates, numbers and form submission.

Extend the Anna’s Kitchen website by creating a structured restaurant menu and a customer booking form using the HTML techniques covered so far.

Explore how semantic HTML elements such as header, nav, main, section, article, aside and footer describe the purpose and structure of different areas of a webpage.

Learn how the div element provides a generic container for grouping related HTML elements so they can be styled, positioned or arranged as a single unit.

Learn how to add images, audio, video and embedded content to a webpage, and work with elements and attributes used to control how this content is presented.

Reorganise the Anna’s Kitchen website using semantic HTML, add navigation and incorporate the supplied images and location content into the existing webpage.

Explore how CSS controls the appearance and layout of HTML elements and learn the basic structure of CSS rules, selectors, properties and values.

Build on basic element, class and ID selectors by using grouped and relationship-based selectors to target HTML elements more precisely.

Learn how CSS specificity determines which declaration takes precedence when multiple selectors match the same element, and examine how different selector types affect priority.

Use pseudo-classes to style elements according to their state or position, and explore how pseudo-elements provide additional control over specific parts of an element.

Explore absolute and relative CSS units and learn how different measurement units are used to control dimensions, spacing, text sizes and webpage layouts.

Learn how every HTML element is represented as a box consisting of content, padding, border and margin, and explore how these areas affect sizing and spacing.

Apply the supplied Anna’s Kitchen color palette and styling requirements to transform the existing HTML structure into a consistent visual design.

Explore the CSS positioning system and learn how static, relative, absolute, fixed and sticky positioning provide greater control over where elements appear on a webpage.

Learn how CSS Flexbox creates one-dimensional layouts and use flex containers and flex items to arrange, align, space and wrap elements horizontally or vertically.

Learn how CSS Grid creates two-dimensional layouts using rows and columns, and explore grid containers, tracks, gaps and named areas for controlling page structure.

Organise the Anna’s Kitchen navigation, main content and image captions using CSS positioning, Flexbox and CSS Grid to create a more effective desktop layout.

Explore why responsive web design is important and how modern websites adapt their layout and content to different devices and available screen sizes.

Learn how the viewport affects webpage presentation and use breakpoints and CSS media queries to change layouts and styling when the available screen space changes.

Build a responsive webpage from the ground up and apply flexible sizing, layout techniques and responsive design principles to create a page that adapts to changing screen widths.

Build the Anna’s Kitchen layout using a mobile-first approach so that the website remains usable across mobile phones, tablets and desktop screens.

Discover how JavaScript adds behaviour and interactivity to webpages and how it works alongside HTML and CSS as one of the core technologies of modern web development.

Explore how browsers represent HTML and CSS as the DOM and CSSOM, and see how these object models allow JavaScript to access and manipulate webpage content and styling.

Explore what JavaScript is, where it runs and how it is used to create dynamic web applications that respond to users, manipulate content and communicate with servers.

Learn the fundamental syntax used to construct JavaScript programs, including statements, code blocks, comments, identifiers and the conventions used to organise readable code.

Learn how let and const store values and explore the assignment, arithmetic, comparison and other operators used to perform calculations and work with data.

Explore JavaScript’s primitive data types, including numbers, strings, booleans, undefined, null, BigInt and Symbol, and understand how different values are represented.

Learn how to manipulate text in JavaScript using string concatenation and common string properties and methods for examining, extracting, transforming and replacing text.

Explore the three fundamental flow-control structures and use conditional statements and loops to control decisions, repetition and the order in which JavaScript statements execute.

Learn how functions organise code into reusable units, work with parameters and return values, and explore how variable scope determines where values can be accessed.

Learn how object literals group related data and behavior into a single structure using properties and methods, and practise accessing and updating object members.

Explore how JavaScript classes provide reusable blueprints for creating multiple objects with shared properties and methods, and compare this approach with creating individual object literals.

Learn how arrays store collections of values and practise creating arrays, accessing and changing elements, adding and removing values, and processing array contents using loops.

Learn how JavaScript responds to user interaction using event listeners and event-handling functions for actions such as clicks, input, selections, form submissions and keyboard events.

Use JavaScript to access elements in the Document Object Model, read their content and modify webpage elements dynamically while the page is running.

Complete the JavaScript for the Anna’s Kitchen ordering prototype so customers can select menu items, choose collection or delivery, calculate totals, validate checkout and receive an order confirmation.

Explore how Progressive Web Apps extend conventional web applications with capabilities such as installation, offline support, background operation and closer integration with the operating system.

Learn how a web app manifest uses JSON to define how an installed Progressive Web App is presented, including its name, icons, start page, scope and display mode.

Explore how service workers operate separately from the main web application, intercept network requests and work with cache storage to support different caching strategies and offline functionality.

Create a service worker for the Anna’s Kitchen application and examine how installation, caching and request handling work together to provide cached resources and offline support.

Add a web app manifest and service worker to the Anna’s Kitchen website so the application can provide installable PWA metadata, cache key resources and continue to display core content when the network connection is unavailable.