Web Design & Development · Revision

WDD revision: retrieve, fix, apply, explain

One two-hour session across the whole Web Design and Development unit. You will spend most of it getting answers out of your head rather than re-reading. It feels harder than reading your notes, and that difficulty is the reason it works.

1 · RetrieveWrite what you know with notes closed. Rate how sure you are before you look.

2 · CheckReveal the answer. Correct in a different colour. Mark it Got it or Not yet.

3 · Come backMissed items return later in the session and again in your revision plan.

01 · 0–10 min

Brain dump

Notes closed. On the blank space below, write or sketch everything you can remember about Web Design and Development: terms, rules, HTML tags, CSS properties, JavaScript, testing. No order needed. Getting stuck is useful: it shows you where the gaps are before you start revising them.

Check yourself against the unit

In a different colour, tick every item you wrote down and star the ones you missed. How many of the six strands did you reach?

Analysis

End-user requirements
Functional requirements

Design

Home page + two levels, max four pages per level
Wireframes, low-fidelity prototype
Horizontal nav bars, media position, form inputs
File formats: text, graphics, video, audio

HTML

nav, header, footer, section, main
form, id, input types, select
Validation: length, presence, range

CSS

Inline, internal, external
Grouping and descendant selectors
display, float, clear
Margins, padding, height, width
Nav bar: list-style-type, hover

JavaScript

Functions
onclick, onmouseover, onmouseout

Testing and evaluation

Personas, test cases, scenarios
Input validation, nav bar, media
Devices and browsers
Fitness for purpose, usability

02 · 10–35 min

Retrieval round A

Ten mixed questions. The topics are deliberately shuffled rather than grouped, because switching between topics makes you work harder to pick the right idea, which is exactly what the exam asks. For each card: write → rate → reveal → mark. Aim for about two and a half minutes per card.

03 · 35–55 min

Code detective

The course requires you to read and explain code, and the exam rewards spotting what is wrong. Each snippet below has faults. Say what is wrong, say why it causes the symptom, then write the fix. Work alone for two minutes, then compare with a partner before you reveal.

Detective 1 · CSS navigation bar2 faults

nav ul { list-style-type: none; }
nav li { float: left; }
nav a  { padding: 10px 20px; text-decoration: none; }
nav a:hover { background-color: #185FA5; }

Symptom 1: on hover, the highlight is a thin strip behind the text and spills over the content below.
Symptom 2: the page footer appears beside the nav bar instead of underneath it.

Faults and fixes

Symptom 1: links are inline by default, so the vertical padding does not make a proper box. Add display: block; to nav a.
Symptom 2: the list items are floated, so they leave normal flow and following content moves up beside them. Add clear: both; to the footer.

nav ul, nav li and nav a are all descendant selectors.

Detective 2 · Margins2 calculations

.a { margin-bottom: 30px; }      /* stacked above .b */
.b { margin-top: 20px; }

.c { float: left; margin-right: 30px; }   /* side by side */
.d { float: left; margin-left: 20px; }

A pupil says the gap between .a and .b is 50px, and the gap between .c and .d is 30px. Give the real gaps and name the rule.

Both claims are wrong

.a and .b: 30px. Adjacent vertical margins between block elements collapse to the larger value, not the sum. This is margin collapse.
.c and .d: 50px. Horizontal margins never collapse, so 30px + 20px add together.

Detective 3 · JavaScript2 faults

<div id="sidebar">Latest news</div>
<button onclick="changeLeft">Move sidebar</button>

<script>
function changeLeft() {
  var box = document.getElementById("sidebar");
  box.style.float = "left";
  box.style.background-color = "yellow";
  box.style.width = "30%";
}
</script>

Clicking the button does nothing, and the browser console reports an error in the function.

Faults and fixes

The event attribute names the function but never calls it. It needs brackets: onclick="changeLeft()".
The property name. A hyphen is read as subtraction in JavaScript. Use camelCase: box.style.backgroundColor = "yellow";

float and width are single words and need no change.

Detective 4 · HTML form2 faults

<form>
  <label for="age">Age (12 to 18)</label>
  <input type="text" id="age" min="12" max="18" required>

  <input type="radio" name="level" value="beginner"> Beginner
  <input type="radio" name="grade" value="expert"> Expert

  <input type="submit">
</form>

Testers can type "banana" as an age and it is accepted. They can also select both radio buttons at once.

Faults and fixes

Range validation needs a number input. min and max do nothing on type="text". Change to type="number".
Radio buttons in one group must share the same name. Change name="grade" to name="level".

04 · 55–60 min

Break

Stand up. Screens and pens down.

Walk, stretch, drink some water. No new content in this break: your brain does some of its consolidating while you are not working.

05 · 60–80 min

Boomerang, round B and draw it

Boomerang · 3 min

Before anything new, go back to round A. Without looking, re-answer the cards you marked Not yet, out loud to a partner or in one line on paper. Coming back to something after a gap is stronger practice than seeing it again straight away.

Retrieval round B · 9 min

Six more cards, about a minute and a half each. Same routine: write, rate, reveal, mark.

Draw it · 8 min

Scenario. Riverside Cycling Club wants a website with a home page, a Rides section (weekend rides, evening rides, ride maps), a Join section with a membership form, and a News section. On paper, sketch two things:

A site structure diagram that follows the course rules.
A wireframe of the Join page: navigation, form inputs, submit button, a place for the confirmation message, and one image placed relative to the text.

Drawing makes you retrieve the rules in a different form from writing them, which strengthens them.

Tick off what your sketch has

Home page at the top, then two further levels (level 1 and level 2).
No more than four pages on any level (Level 1 could be Rides, Join, News, plus one more at most).
Level 2 pages sit under a level 1 page (for example weekend rides, evening rides and ride maps under Rides). No orphan pages.
Wireframe areas are labelled by function: navigation, heading, form, image, footer.
A horizontal navigation bar and the form inputs shown with their types (text box, radio buttons, drop-down list, submit button).
An output area for a confirmation or error message.
No final colours, fonts or exact images. A wireframe is a rough layout plan.

06 · 80–105 min

Exam practice

Exam style, no help, about a minute and a half per mark. These are written to match the style of the question paper, using a new context so you have to apply what you know rather than recall a lesson example. Write in full, then reveal and mark point by point.

Q1 · HTML form5 marks

Riverside Cycling Club needs a join form with: the member's age (a whole number from 12 to 18, which must be filled in); a preferred ride chosen from a drop-down list; a membership type chosen from Junior or Senior (one only); and a button to send the form. Write the HTML for the form.

One mark each

Fields and submit button inside a <form> element.
Age input with type="number" and both min="12" and max="18" (range).
required on the age input (presence).
<select> with at least two <option> elements.
Two radio buttons with the same name and different values.

<form>
  <label for="age">Age</label>
  <input type="number" id="age" name="age" min="12" max="18" required>
  <label for="ride">Preferred ride</label>
  <select id="ride" name="ride">
    <option>Weekend ride</option>
    <option>Evening ride</option>
  </select>
  <input type="radio" name="level" value="junior"> Junior
  <input type="radio" name="level" value="senior"> Senior
  <input type="submit" value="Join">
</form>

Q2 · Read and explain CSS4 marks

header, footer { background-color: #185FA5; color: white; }
nav ul { list-style-type: none; }
nav li { display: inline; }
main { float: left; width: 70%; }
section { float: right; width: 25%; }
footer { clear: both; }

(a) Describe the effect of the rule header, footer. (2)
(b) Explain why footer { clear: both; } is needed. (1)
(c) Name the type of selector used in nav li. (1)

Marking points

(a) It is a grouping selector: the same declarations apply to both header and footer (1). Both get a blue background and white text (1).
(b) main and section are floated, so the footer would move up beside them; clear: both makes it sit below both floated boxes (1).
(c) Descendant selector (1).

Q3 · JavaScript3 marks

The ride map is in a paragraph with id="map" and is hidden when the page loads.
(a) Write a JavaScript function called showMap that displays it. (2)
(b) Write the HTML attribute that makes the function run when the user's mouse moves over an image. (1)

Marking points

function showMap() {
  document.getElementById("map").style.display = "block";
}

onmouseover="showMap()"

(a) Function declared with the correct name and braces (1). Selects the element by id and sets style.display to "block" (1).
(b) onmouseover="showMap()" with the brackets (1).

Q4 · Testing3 marks

The age field on the join form must accept whole numbers from 12 to 18. Describe the test data that should be used to test this validation. Include the expected result for each.

One mark per category

Normal data, such as 15: accepted (1).
Extreme data, the boundary values 12 and 18: both accepted (1).
Erroneous data, such as 11, 19 or "banana": rejected (1).

Q5 · Compatibility2 marks

Describe how the club can test that its website is compatible across devices and browsers.

One mark each

Devices: view the site on a desktop, a tablet and a smartphone and check that layout, navigation and media display correctly (1).
Browsers: open the site in more than one browser and check it looks and works the same in each (1).

Q6 · Finished early? Evaluation2 marks

Every test case passed, but three of five testers could not find the Join page. Which evaluation criterion is affected? Explain your answer.

One mark each

Usability is affected (1).
Users find the site difficult or confusing to navigate, even though it meets its functional requirements, so it may still be fit for purpose (1).

07 · 105–120 min

Teach-back, triage and plan

Teach-back · 6 min

In pairs. A picks a topic below and explains it for 90 seconds with no notes. B listens and checks three things: did A use the exact terms, give an example, and say why? Then swap, and B picks a different topic. Explaining something aloud shows you instantly whether you really know it.

Descendant vs grouping selectorMargin collapseFloat and clearPersona, scenario, test caseValidation attributesFitness for purpose vs usabilityWhy external CSS for many pagesWhy a function needs ()

Triage · 6 min

Use your Not yet marks, your detective and exam answers, and the confident mistakes above. Be specific: "margin collapse on vertical margins" is more useful than "CSS".

123

Your spaced plan · 3 min

Revision that is spread out lasts longer than the same time crammed into one evening. Write the date next to each row.

When	What (10–15 min)
Tomorrow	Redo every Not yet card from memory, then your three targets.
In one week	Brain dump again on blank paper, and compare with today's. Then redo Q1 to Q3.
In three weeks	Q4 to Q6 from memory plus one full WDD past paper section.

Teacher note · Shift+T

Run sheet

Min	You do	Watch for
0–10	Model the brain dump for 60 seconds, then silence. Project the strand map only after five minutes.	Pupils who write nothing: prompt with one strand name only.
10–35	Circulate. Do not rescue. Ask "how sure are you?" to reinforce rating before reveal.	Pupils revealing before writing, or ticking Got it on blank answers.
35–55	Two minutes solo, then pair talk, then reveal. Run a 2-minute whole-class debrief on the most missed fault.	Detective 3 hyphen fault is the usual miss.
55–60	Enforce the break: out of seats, devices away.	Resist adding content.
60–80	Boomerang first, then round B, then drawing. Visit pupils whose site map has a fourth level.	Orphan pages; labelling by appearance instead of function.
80–105	Quiet, timed, no help. Pupils self-mark in a different colour after the timer.	Q4: erroneous values must be rejected, not just "different".
105–120	Teach-back circulation: listen for exact terms. Collect common targets for the next lesson.	Make sure the plan has dates.

Why it is built this way

Retrieval before re-reading. Testing yourself beats restudying for long-term retention (Roediger and Karpicke, 2006; Karpicke and Blunt, 2011). The brain dump and every card ask for recall first.
Confidence rating and feedback. Confident errors are corrected more reliably than low-confidence ones once feedback arrives (Butterfield and Metcalfe, 2001). Rating also builds calibration, a metacognitive skill.
Interleaving. Mixed topics improve discrimination and later transfer compared with blocked practice (Rohrer and Taylor, 2007; Dunlosky et al., 2013).
Spacing. Boomerang cards and the dated plan use distributed practice (Cepeda et al., 2006).
Generation and pretesting. Attempting before seeing the answer helps even when the attempt fails (Kornell, Hays and Bjork, 2009).
Error detection and self-explanation. The detective section uses faulty code to prompt explanation of why (Chi et al., 1994) and gives practice at the "read and explain" outcome.
Dual coding. The sketch task re-encodes rules as images (Paivio; Mayer).
Teaching to learn. Explaining to a partner exposes gaps (Fiorella and Mayer, 2013).
Fading support. Scaffolded cards give way to unaided exam questions as pupils gain fluency, in line with the expertise reversal effect (Kalyuga et al., 2003).
Attention. There is no firm "ten-minute attention span" (Bradbury, 2016). What the evidence does support is that sustained single-task vigilance declines and brief resets help (Ariga and Lleras, 2011), so the session changes mode every 10 to 25 minutes (write, read, move, draw, timed, talk) and includes a real break.

Notes

Exam questions here are original, written in SQA style. They are not past-paper items. Swap in current-year WDD questions if you want direct paper practice.
Marks per minute: the Section 2 option is 25 marks for roughly 35 to 40 minutes of a 2-hour paper, about 1.5 minutes per mark.
This page sits outside WDD1 to WDD17 and does not change the unit totals.

Web Design and Development Revision

WDD revision: retrieve, fix, apply, explain

Brain dump

Analysis

Design

HTML

CSS

JavaScript

Testing and evaluation

Retrieval round A

Code detective

Break

Stand up. Screens and pens down.

Boomerang, round B and draw it

Boomerang · 3 min

Retrieval round B · 9 min

Draw it · 8 min

Exam practice

Teach-back, triage and plan

Teach-back · 6 min

Triage · 6 min

Your spaced plan · 3 min