OCR H446 · 1.3.4 Web technologies
Web Challenges
20 short, guided HTML, CSS and JavaScript tasks that mirror what OCR A-level asks you to write: fill in the gaps, build to a spec, or fix the bug, then get instant marking. Every task stays inside the OCR Appendix 5d construct set.
☰ Browse by Topic
Skeleton of a page
A student is starting the home page for a school chess club. The four structural tags have been removed. Add the opening
Library navigation list
A community library wants a navigation menu as an unordered list with three items. Each item must be a hyperlink: Home →
Make the badge a link
On a charity site, clicking the donation badge image should take the visitor to the donation page donate.html . The imag
Sign-up form
A cinema loyalty scheme needs a sign-up form. Complete the form so it collects a username (text), a password (password f
Three selectors
Style a news page using internal CSS (inside the <style> block in the head). Write three rules: All <p> para
Style the heading (external sheet)
A bakery uses an external stylesheet . In index.html , add the <link> that attaches css/style.css . Then in that s
Fix the stylesheet
A student's stylesheet has four mistakes and nothing is styling correctly. The intended behaviour: all paragraphs navy t
Delivery-charge function
An online shop calculates a delivery charge. The base charge is 3.50 . Orders going outside the UK add a surcharge of 6.
Grade lookup
A results page turns a band letter into a message. Write the function showGrade(band) that uses a switch statement: "A"
Validate the age box
A form should let people register only if they are 18 or over . The validation function has a logic bug : it currently u
Race results list
A running club wants to show the top three finishers of a race as a numbered (ordered) list , in this order: Priya Shah
Style the notice box
A library website shows opening-hours notices in a box with the class notice . Complete the CSS rule so that every eleme
Mark the quiz
A spelling-quiz app marks a learner's answers. The function markQuiz(given, correct) is given two arrays of the same len
Competition age check
A coding competition is open to entrants aged 13 to 19 inclusive (so 13 and 19 both count). Complete the function isElig
Open or closed?
A café website shows whether it is open. Write the function showStatus(hour) using an if/else statement so that: when ho
Museum exhibit page
A museum's exhibit page needs two things adding inside the <main> block: the image exhibit.svg (already in the pro
Link to an external site
A college home page already has an internal link to its courses page (a relative link). Now add an external link to anot
Group selectors for headings
A gallery page has two headings ( <h1> and <h2> ) that should share the same colour. Rather than write the s
Reveal a message on click
A festival page has a button that should reveal a message when clicked. In js/script.js , write a function called reveal
Space out the card
A notice board shows each notice in a box. Style the element with class card so the box has some breathing room: 16px of