What does the Web Design and Development area cover in SQA Higher Computing Science?

It is an optional section of the question paper (Section 3, you sit either it or Database Design and Development) and an optional assignment task. It covers analysing a website's purpose and functional requirements and designing it with a site structure diagram, wireframes and a low-fidelity prototype; building pages with HTML (the structural elements header, nav, section and footer, plus links, images, lists, tables and forms); styling with CSS (element, class and id selectors, appearance and positioning, internal, external and inline styles, and a horizontal navigation bar); adding interactivity with JavaScript (events, functions and the DOM); and testing and evaluation.

What is the difference between HTML, CSS and JavaScript?

The three work together but have separate jobs. HTML describes the structure and content of a page using elements such as headings, paragraphs, links, images, lists, tables and forms. CSS controls the appearance and layout, such as colours, fonts, spacing and positioning, through rules with selectors. JavaScript adds behaviour: it runs in the browser, responds to events such as clicks, and changes the page through the DOM while it is open. Keeping their roles distinct is a common exam point.

What are the main CSS selectors at Higher?

There are three. An element selector targets all elements of a type, such as h1, and has no prefix. A class selector starts with a dot, such as .highlight, and targets any element given that class, so it is reusable across many elements. An id selector starts with a hash, such as #header, and targets the single element with that unique id. CSS can be attached inline, internally in a page's head, or externally in a shared linked stylesheet, with external preferred for multi-page sites.

How does JavaScript change a web page?

JavaScript responds to events (such as onclick when a button is clicked or onmouseover when the pointer moves over an element) by running a function. To change the page it uses the DOM, the browser's model of the page: document.getElementById finds an element by its id, and setting that element's innerHTML changes the content displayed inside it. This updates the page instantly without a reload. The id used in the JavaScript must exactly match the id in the HTML.

How is a website tested and evaluated at Higher?

Testing checks the site against its functional requirements: clicking every link to confirm it loads the correct page, submitting forms with valid and invalid input, and triggering each JavaScript event to confirm the page responds correctly. Usability testing checks the site is easy to use, and compatibility testing checks it works across different browsers and screen sizes. The evaluation then judges the site for fitness for purpose (does it meet its requirements?) and usability, recorded in a test plan with expected and actual results.

ScotlandComputer Science

SQA Higher Computing Science Area Web Design and Development: a complete overview of analysis and design, HTML, CSS, JavaScript and testing

A deep-dive SQA Higher Computing Science guide to the Web Design and Development area. Covers web analysis and design (site structure diagrams, wireframes and prototypes), HTML structure and forms, CSS selectors and styling including a navigation bar, JavaScript events and the DOM, and testing and evaluation.

Generated by Claude Opus 4.816 min readHigherUpdated 2026-06-16

Reviewed by: AI editorial process; not yet individually human-reviewed

Jump to a section

What Web Design and Development actually demands
Analysis and design
HTML
CSS
JavaScript
Testing and evaluation
How Web Design and Development is examined
Check your knowledge

What Web Design and Development actually demands

Web Design and Development (WDD) is an optional pathway in Higher Computing Science: in the question paper you sit either the Web section or the Database section, and the same choice appears in the assignment. It runs from planning a site through building it with HTML, CSS and JavaScript to testing and evaluating it. The examiners reward correct, readable markup and styling, short working scripts, and clear explanations of design and testing decisions.

This guide walks through the key areas of WDD, then sets out the patterns the SQA repeats. Each key area has a matching dot-point page with practice questions; this overview ties them together.

Analysis and design

The area opens with analysis and design. Analysis states the purpose and functional requirements. The structure is planned with a site structure diagram (a map of the pages and their links), each page's layout with a wireframe (labelled regions, no final styling), and the whole design reviewed as a low-fidelity prototype for cheap early feedback.

HTML

HTML marks up structure and content. The page-layout elements give meaningful regions: header, nav, section and footer. Content uses links (anchors with an href), images (img with src and alt), lists (ul/ol with li) and tables (tr with td/th). Forms capture user input with labelled input fields and a submit button.

CSS

CSS controls appearance and layout through rules with selectors: element (h1), class (.name, reusable) and id (#name, unique). It sets appearance (colour, font, background) and positioning (margin, padding, layout), and is attached inline, internally or externally (external is best for multi-page sites). A horizontal navigation bar is a styled list of links laid out in a row.

JavaScript

JavaScript adds behaviour. It responds to events (onclick, onmouseover, onchange) by running functions, and changes the page through the DOM: getElementById finds an element by id and innerHTML changes the content shown inside it, updating the page without a reload.

Testing and evaluation

Testing checks the site against its requirements: every link loads the right page, forms accept and handle input, and scripts respond to their events. Usability and browser compatibility are checked too. The evaluation judges fitness for purpose and usability, recorded in a test plan.

How Web Design and Development is examined

A typical SQA profile for WDD:

Writing code. Most marks come from writing and reading HTML (including forms), CSS rules and selectors, and short JavaScript event functions.
Design. Site structure diagrams, wireframes and prototypes from a brief.
Explanation. The roles of HTML, CSS and JavaScript, internal versus external CSS, events and the DOM, and testing and evaluation decisions.

Check your knowledge

A mix of design, code and explanation questions covering WDD. Attempt them, then check against the solutions.

State what a site structure diagram shows. (1 mark)
Name the HTML element used for the navigation links of a page. (1 mark)
State the symbol that begins a CSS class selector. (1 mark)
State the JavaScript method used to find an element by its id. (1 mark)
State what setting an element's innerHTML does. (1 mark)
State what fitness for purpose means when evaluating a website. (1 mark)

Sources & how we know this

SQA Higher Computing Science Course Specification (C816 76) — SQA (2023)