Free revision notes for OCR Cambridge Advanced National in Computing: Application Development unit F164 Website development (Extended Certificate H129). They cover all five Topic Areas in the specification: fundamentals of website development, then planning and designing, creating, testing, and reviewing high-fidelity website prototypes.
F164 is an optional unit assessed by an OCR-set assignment (NEA), not an exam. The assignment has 24 assessment criteria across three tasks, and they ask you to apply the knowledge in these notes. Sources: the OCR specification (version 5.0, June 2026, section 5.3.3) and WCAG 2.2.
Topic 1 - Fundamentals of website development
1.1 Website principles: domain name and URL structure
A Uniform Resource Locator (URL) is the full address of one resource on the web. A domain name is the human-readable part of it that identifies the website. The Domain Name System (DNS) translates the domain name into the IP address of the web server that hosts the site.
https://www.example.com/hire/kayaks.html?size=large#prices
| Part | Example | What it does |
|---|---|---|
| Protocol (scheme) | https:// | How the page is transferred. HTTPS encrypts the connection with TLS. |
| Subdomain | www | A division of the domain. Can point to a separate section, e.g. shop. |
| Second-level domain | example | The registered name, usually the brand. |
| Top-level domain (TLD) | .com | Generic (.com, .org) or country code (.uk, .co.uk). |
| Path | /hire/ | The folder on the server. Mirrors the site's folder structure. |
| File name | kayaks.html | The page requested. If omitted, the server returns the folder's index page. |
| Query string | ?size=large | Data sent to the page, used by dynamic sites. |
| Fragment | #prices | Jumps to an element with that id on the page. |
.co.uk; a charity often uses .org). Registered through a domain registrar for a fee and renewed each year. It must be available./hire/kayaks help users and search engines understand a page. Use lowercase file and folder names with hyphens, not spaces, because they become part of the URL.Spec 2.1 asks how the website's purpose impacts domain name choice. Link the choice to the scenario: a seaside hire shop targeting UK customers suits a short .co.uk name that contains the brand.
1.1 Website principles: platform, browser and device compliance
Impact: write standards-compliant code, check feature support before using new CSS or JavaScript, provide fallbacks, and test in several browsers.
Sizes: screen widths range from small phones to large desktop monitors, in portrait and landscape.
Types: desktop, laptop, tablet, smartphone, smart TV. Input differs: touch screens have no hover, so rollovers need an alternative, and touch targets must be large enough to tap.
Impact: responsive design, the viewport meta tag, compressed images for mobile data, testing on real devices.
When the scenario names devices (the Wind & Waves sample says the site must work on mobile devices), M5 requires the prototype to function as intended on those devices. Plan for them from Task 1.
1.1 Website principles: W3C compliance and WCAG
The World Wide Web Consortium (W3C) is the international standards body for the web. It publishes the CSS specifications and the Web Content Accessibility Guidelines (WCAG), and endorses the HTML standard (maintained by WHATWG as the HTML Living Standard). W3C compliance means the site's code follows these standards: valid HTML and CSS with no errors.
WCAG 2.2 is the current version (a W3C Recommendation since October 2023). Its success criteria sit under four principles, remembered as POUR, at three conformance levels: A (minimum), AA (the usual target, and the level UK public sector websites must meet) and AAA (highest).
| Principle | Meaning | Example success criteria |
|---|---|---|
| Perceivable | Users can see or hear the content | Text alternatives (alt) for images (1.1.1, A). Captions for prerecorded video (1.2.2, A). Text contrast of at least 4.5:1, or 3:1 for large text (1.4.3, AA). Text resizable to 200% (1.4.4, AA). |
| Operable | Users can use every control | Everything works from a keyboard (2.1.1, A). Moving content can be paused (2.2.2, A). Nothing flashes more than three times a second (2.3.1, A). Each page has a descriptive title (2.4.2, A). Keyboard focus is visible (2.4.7, AA). |
| Understandable | Users can understand content and controls | Page language is set, e.g. <html lang="en"> (3.1.1, A). Form inputs have labels or instructions (3.3.2, A). Navigation is consistent across pages (3.2.3, AA). |
| Robust | Content works with current and future tools, including assistive technology | Controls expose their name, role and value to assistive technology (4.1.2, A), which valid, semantic HTML does by default. |
D2 asks you to assess design choices against current W3C and accessibility guidelines. Name the guideline and level (for example "WCAG 2.2 success criterion 1.4.3, level AA") and give a judgement, rather than listing features.
1.1 Website principles: site structures, Web 2.0 and Web 3.0
The site structure is how the pages are organised and linked. Common structures: hierarchical (a tree from the home page down through sections), linear (pages in a fixed order, e.g. a checkout), and webbed (pages link freely to each other).
index.html (or index.php) and placed in the root folder, because the web server returns it by default when a visitor requests the domain or a folder.sitemap.xml) that lists URLs for search engines.Impact: sites must accept, store, moderate and secure user input, usually with a database and server-side scripting.
Impact: semantic markup and structured data become more important.
1.2 Purpose of websites
The spec lists seven purposes. A site often has more than one. The content, layout and style are adapted to the purpose.
| Purpose | Aim | How content, layout and style adapt |
|---|---|---|
| Advertise/promote | Raise awareness of a product, service, brand or event | Strong images and video, brand colours, short persuasive text, prominent calls to action ("Book now") |
| Educate | Teach a topic or skill | Structured content in sections, clear headings, diagrams, examples, quizzes |
| Entertain | Give enjoyment | Games, video, music and animation; bold, immersive style |
| Influence | Change an opinion or behaviour (e.g. a charity or health campaign) | Emotive images, statistics, testimonials, a single clear action |
| Inform | Provide factual information (news, opening times, council services) | Clear layout, readable text, search, up-to-date content |
| Market | Identify, attract and keep target customers over time | Newsletter sign-up forms, social media links, offers, content aimed at a defined audience |
| Sell | Take orders and payment (e-commerce) | Product pages, basket, secure checkout, trust signals such as HTTPS and reviews |
Advertise and market are different purposes. Advertising is a specific promotional message. Marketing is the wider activity of reaching and keeping a target audience, for example collecting sign-ups.
1.3 Website types
| Static | Dynamic | |
|---|---|---|
| Content | Same for every visitor | Generated per request, can be personalised |
| Updating | Edit the HTML files | Change the database, often through an admin interface |
| Hosting | Any web server | Server-side scripting and a database |
| Speed and cost | Fast and cheap | Slower to build and host |
Combining types: most sites are several types at once. The Wind & Waves sample asks for an interactive multimedia site that works on mobile, so it must also be responsive. A CMS site is dynamic and usually responsive through its theme.
Personalisation: websites increasingly tailor content to each user, using accounts, cookies, browsing history, location and recommendations. Non-essential cookies need consent under PECR (see F161 Topic 6).
1.4 Webpage components: semantic HTML5, CSS3 and scripting
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <figure>. Screen readers use them to jump between areas, and search engines use them to understand the page.<video> and <audio>, <canvas>, and new form input types (email, date, number) with built-in validation..css file linked from every page keeps the style consistent. CSS3 added media queries, Flexbox, Grid, transitions, animations, web fonts and rounded corners.<p>…</p>. Some are empty, e.g. <img>. Attributes add information: href, src, alt, class, id. Meta tags in the <head> describe the page (see 1.5).<body>
<header><img src="assets/images/logo.svg" alt="Wind and Waves"></header>
<nav><a href="index.html">Home</a> <a href="hire.html">Hire</a></nav>
<main>
<h1>Kayak and surfboard hire</h1>
<section>...</section>
</main>
<footer>...</footer>
</body>
1.4 Webpage components: navigation, user interactions and forms
<a href="">. Internal links go to pages on the same site (relative paths), external links to other sites (absolute URLs), and anchor links to a section (#id). Link text should describe the destination ("View hire prices", not "click here").<map> and <area> with a shape (rect, circle, poly) and coordinates. Each area needs its own alt text. Example: clicking a beach on a map.<nav>. Shows the current page. On small screens it usually collapses into a menu button.User interactions are the ways users act on the page: clicking or tapping, hovering, scrolling, swiping, typing, dragging and playing media. Each should give feedback, for example a button changing colour when pressed.
Forms collect input from users (bookings, enquiries, sign-ups). They are built from <form>, <input> (types such as text, email, tel, date, checkbox, radio), <select>, <textarea> and a submit <button>. Every input needs a <label>. Attributes such as required and the input type give validation in the browser; a server-side script (e.g. PHP) processes the data. Personal data collected must follow UK GDPR (see F161 Topic 6).
<label for="email">Email address</label> <input type="email" id="email" name="email" required>
1.4 Webpage components: responsive design features
fr units) instead of fixed pixels, so they stretch and shrink with the screen. Built with CSS Grid or Flexbox.% (parent), em (element's font size), rem (root font size), vw/vh (viewport). Images use max-width: 100% so they never overflow.<meta name="viewport" content="width=device-width, initial-scale=1">
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
img { max-width: 100%; height: auto; }
@media (max-width: 600px) {
.gallery { grid-template-columns: 1fr; } /* breakpoint at 600px */
}
1.4 Webpage components: libraries, frameworks and animation
A library is a collection of pre-written, reusable code that your code calls when it needs it. A framework provides the structure and conventions that you build the site inside. Both save development time and are already tested across browsers.
| Spec category | Examples | Used for |
|---|---|---|
| HTML based | HTML5 Boilerplate; Bootstrap's ready-made HTML components | A standards-compliant starting template and page components |
| CSS based | Bootstrap, Tailwind CSS, Bulma, Foundation | Responsive grid, pre-styled buttons, forms and navigation bars |
| JavaScript based | jQuery, React, Vue, Angular; animation and slider libraries | Interactivity: menus, sliders, carousels, dynamic content |
| PHP based | Laravel, Symfony, CodeIgniter (WordPress is a PHP CMS) | Server-side: processing forms, databases, user accounts |
Animation techniques: CSS transitions (a property changes smoothly, e.g. on hover), CSS keyframe animations (@keyframes), CSS transforms (rotate, scale, translate), JavaScript animation and libraries, animated GIFs and banners, and parallax scrolling. Accessibility limits: moving content lasting more than five seconds needs a way to pause it (WCAG 2.2.2), nothing may flash more than three times a second (2.3.1), and the prefers-reduced-motion media query lets users turn motion down.
M1 needs an explanation of how each chosen library or framework lets the prototype function as intended, e.g. "Bootstrap's grid gives the hire page a three-column layout that becomes one column on phones". Naming the library alone does not meet it.
1.5 Search Engine Optimisation (SEO) techniques
SEO is improving a website so it appears higher in the unpaid (organic) results of search engines. A search engine finds a page by crawling, stores it by indexing, then ranks it against each search.
robots.txt file tells crawlers which areas not to crawl.noindex meta tag keeps a page out.alt text and link text. Keyword stuffing (unnatural repetition) is penalised.<head>. The <title> is the headline in results; the meta description is often the snippet underneath. Google ignores the old meta keywords tag.<title>Kayak and Surfboard Hire in Cornwall | Wind and Waves</title> <meta name="description" content="Hire kayaks, surfboards and wetsuits by the hour or day.">
D1 is to justify SEO techniques: give each technique a reason linked to the client, e.g. keywords chosen from what 16 to 30-year-olds would search for. D3 is to implement them so the prototype is visible to search engines, evidenced with screenshots of the code.
Topic 2 - Plan and design prototypes
2.1 Client and user requirements
Client requirements are what the organisation paying for the site needs. The spec breaks them into four parts:
User requirements are what the people using the site need in order to use it well: finding information quickly, clear navigation, accessible content, fast loading on their device, and readable text.
P1 must cover both client and user requirements and expand them into specific requirements you can check in Task 3. "Works on mobile" becomes "every page displays without horizontal scrolling at 360px wide".
2.1 Navigation, interactive components and assets
The navigation system is how users move between pages: navigation bar, menus, footer links, buttons and hotspots. It must be consistent on every page and let users reach key content in few clicks.
| Interactive component | What it is |
|---|---|
| Buttons | Controls that trigger an action, e.g. submit a form, open a gallery |
| Media controls | Play, pause, volume and full screen for audio and video (controls attribute) |
| User input fields | Text boxes, drop-downs, checkboxes and date pickers in forms |
| Rollovers | An element changes when the pointer is over it (CSS :hover). Touch screens have no hover, so information must not depend on it. |
| Hyperlinks | Text or images that link to another page, section or site |
| Hotspots | Clickable regions of an image (image map) |
Assets are the content items the site uses: text, sound, images, video/animation and forms. Each one is planned in the assets list (2.2) with its source and licence.
2.1 House style, plugins and other design considerations
A house style is the set of rules that gives every page the same look, matching the client's brand.
M2 is to explain why the house style suits the client in the scenario. Give reasons for each choice: "sea blue and sand colours reflect that the shop is near the sea".
2.1 Hosting requirements
Web hosting is renting space on a web server that stores the site's files and serves them to visitors. The spec lists four hosting requirements.
How purpose affects hosting: a site that sells needs HTTPS and a payment provider that meets the Payment Card Industry Data Security Standard (PCI DSS), plus capacity for busy periods. A multimedia site with video needs more storage and bandwidth, or uses a video host. A dynamic site needs server-side scripting (e.g. PHP) and a database; a static site can use cheaper hosting.
The P2 guidance says the explanation must include the content in Topic Area 2.1: cover cost, location, security and domain name, each explained for this client.
2.2 Tools to plan and design website prototypes
The spec splits the tools into two groups: tools to document ideas early on, and tools to document plans and designs once ideas are chosen.
| Tool | Purpose and conventions | When to use it |
|---|---|---|
| Mind map | Central idea with branches of related ideas and sub-branches. Informal, quick. | Generating ideas at the start, e.g. possible pages and features |
| Mood board | A collage of images, colours, fonts and textures that sets the look and feel. Can be annotated. | Agreeing a visual direction with the client before designing |
| Site plan | Diagram of every page and the links between them, usually a hierarchy from the home page. Shows the navigation system and a summary of each page's content. | Designing the structure (P3) |
| Visualisation diagram | A sketch of how a page will look, with colours, fonts, images and annotations. | Showing the intended appearance of a page |
| Wireframe | The layout skeleton of a page: boxes for header, navigation, images and text, with annotations for sizes, fonts and links. Little or no colour. Can be drawn for each breakpoint. | Designing page templates and layout (P4) |
| Storyboard | A sequence of frames showing how the user moves through pages or how an interaction or animation plays out. Each frame has a sketch and notes on links, timing and actions. | Planning interactions and multimedia |
| Assets list | Table of every asset: name, type, description, source, licence or copyright, file format, properties, where used. | Identifying assets (P5) |
| House style sheet | One page defining the colour palette (hex codes), fonts and sizes, logo use, image styles and button styles. | Defining the house style (P4, M2) |
P3 and P4 both require designs with enough detail to be interpreted by someone who hasn't seen them before. Annotate every wireframe and label every link on the site plan.
Topic 3 - Create prototypes
3.1 Website structure: folders, pages and index page
The folder structure separates the site's files by kind. The spec names three folders: templates, assets and pages.
wind-and-waves/ root folder
index.html index page (home)
pages/
hire.html
lessons.html
contact.html
templates/
page-template.html
assets/
css/styles.css
js/main.js
images/kayak-single.jpg
video/beach-intro.mp4
index.html goes in the root folder. The server returns it when someone visits the domain, and the relative links from it depend on where it sits.P7 can be evidenced with screenshots of the folders and files. Show the folder structure, the pages and the index page location.
3.2 Sourcing and preparing assets
Preparing assets (spec examples): sizing, changing resolution, cropping, removing backgrounds, changing the length or duration of sound, video or animation, and animating static images to make moving objects or banners. Compressing files reduces loading time. The spec does not include creating original assets.
| Format | Type | Properties and use |
|---|---|---|
| JPEG | Image | Lossy compression, no transparency. Photographs. |
| PNG | Image | Lossless, supports transparency. Logos, graphics, screenshots. |
| GIF | Image | Up to 256 colours, simple transparency, animation. Small animated banners. |
| SVG | Vector image | Scales to any size without losing quality. Icons and logos. |
| WebP | Image | Lossy or lossless, transparency and animation, usually smaller files than JPEG or PNG. |
| MP3 | Audio | Lossy, supported by all browsers. |
| WAV | Audio | Uncompressed, large files. |
| MP4 (H.264) | Video | Lossy, the most widely supported video format. |
| WebM | Video | Open format, small files. |
Properties to choose: dimensions in pixels, resolution, file size, compression (lossy or lossless), colour depth, and for sound and video the duration, bit rate and frame rate.
Naming conventions make assets identifiable: lowercase, no spaces (use hyphens), descriptive and consistent, e.g. img-surfboard-blue-800w.jpg. Web servers are often case-sensitive, so Kayak.JPG and kayak.jpg are different files. Descriptive names also help image search.
3.3 Web authoring software tools and templates
Other tool skills in 3.3: form controls (inputs, labels, drop-downs, buttons, see 1.4), interactive features and controls (rollovers, sliders, accordions, media players), responsive design features (see 1.4), libraries/frameworks linked with <link> and <script> tags, and SEO (titles, meta descriptions, headings, alt text, file names; see 1.5).
3.3 CSS: box model, page formatting and content formatting
The box model: every element is a rectangular box made of four layers, from inside out: content, padding (space inside the border), border, margin (space outside the border). By default width sets the content only; box-sizing: border-box makes it include padding and border.
font-family, font-size, color, line-height, text-align, list and link styles, image borders.:root { --sea: #0b4f6c; --sand: #f2e3c6; } /* house style colours */
body { font-family: Arial, sans-serif; color: #1a1a1a; }
h1, h2 { color: var(--sea); }
.card { padding: 1rem; border: 1px solid #ccc; margin-bottom: 1rem; }
a:hover, a:focus { text-decoration: underline; } /* rollover */
M6 needs evidence of the CSS styles implemented, e.g. screenshots of the stylesheet next to the pages that use it. One external stylesheet linked from every page is the clearest way to show a consistent style.
Topic 4 - Test prototypes
4.1 Testing methods
| No. | Test type | Description | Test data | Expected result |
|---|---|---|---|---|
| 1 | Technical | Booking form rejects an invalid email | kayak.co.uk | Form not sent; message asks for a valid email |
| 2 | Viewpoint | Hire page at phone width | 360px wide | Single column, no horizontal scrolling |
Test data follows F161 Topic 5: normal, extreme (boundary) and erroneous.
4.1 Testing types and elements to test
Elements of website prototypes to test (spec list):
| Element | What to check |
|---|---|
| Content display | Text, images, video and sound appear correctly |
| Ease of use | Users complete tasks quickly without help |
| Hyperlinking | Every link goes to the right place; no broken links |
| Interactive elements | Buttons, rollovers, forms, media controls and hotspots work |
| Multiple browser testing | Same appearance and behaviour in each target browser |
| Multiple device testing | Works on each device type named in the scenario |
| Multiple viewpoint size testing | Layout adapts at each screen size and breakpoint |
| Navigation features | Navigation bar and menus work and are consistent on every page |
| Pages display | Every page loads and its layout is correct |
| Readability of content | Font size, contrast and line length make text easy to read |
M3 is to justify the testing: give a reason for each method and type, linked to the scenario. "User testing with people aged 16 to 30 checks the site appeals to the target audience" earns more than "user testing is useful".
4.1 Results analysis and remedial action
Results analysis compares each actual result with the expected result, identifies why any test failed and what the failure means for users. Remedial action is the fix needed, e.g. "add a media query at 600px so the gallery becomes one column". The spec does not include carrying out the remedial action.
P11 needs evidence of actual results (screenshots, photographs or recordings). M7 is to analyse them and explain the remedial action; the guidance says you are not expected to fix errors found in final testing.
Topic 5 - Review and improve prototypes
5.1 Reviewing the effectiveness of website prototypes
Reviewing means assessing strengths and weaknesses and comparing the prototype against the requirements written in Task 1. The spec lists what to judge it on:
| Review against | How to assess it |
|---|---|
| Client requirements | Check each specific requirement from P1: met, partly met or not met, with evidence |
| User requirements | Use user testing feedback: could users find what they needed? |
| Accessibility | Check against WCAG: alt text, contrast, keyboard use, captions, labels |
| Device independence/compatibility | Results from multiple device and browser tests |
| Responsive design | Results from viewport size tests at each breakpoint |
| SEO techniques used | Are titles, meta descriptions, headings, keywords and alt text in place? Is the site mobile-friendly? |
P12 is to assess: give a judgement for each requirement backed by evidence, covering the areas in Topic Area 5.1.
5.2.1 Constraints and improvements
Constraints are factors that limited the prototype:
Improvements (spec list): accessibility, browser independence/compatibility, content, visuals and interaction, device independence/compatibility, domain name, SEO, and security (e.g. HTTPS, server-side validation of forms). Each improvement should be linked to a weakness found in testing or review.
5.2.2 Further development opportunities
D5 is to discuss: weigh each improvement or development (benefit, cost, effort) and reach a judgement. The guidance says achieving P12 and M7 can support it.