Week 1
21 Feb – 28 Feb
🚀 Launch — Agree Everything Before Anyone Writes a Single Line of Code
Meeting 1 — Foundation Session
21–22 Feb
- Choose your SDG from the 17 UN goals — pick one everyone is genuinely interested in, not just the easiest
- Agree on 2–3 main colours for the website and write them down so everyone uses the same ones
- Agree on the font — pick one from Google Fonts that suits your SDG theme
- Decide on a 5-letter team name for your folder — tell your tutor this within the first 2 weeks
- Confirm all file names exactly match the spec (home.html, gallery.html, splash.html, etc.)
- Sign the Group Contract — required for submission, get it done now
- Create a shared Google Drive folder and make sure everyone has access
Write all your agreed decisions in a shared doc — colours, font name, SDG choice, team name. Refer back to it throughout the project so you stay consistent.
Week 2
1 Mar – 7 Mar
🔗 Mid-Project Check — Make Sure Everyone's Pages Connect
Meeting 2 — Template Review & Cross-Link Check
1–2 Mar
- Every student confirms they have successfully copied the shared template and it displays correctly in a browser
- Open all navigation links from each person's page and verify they point to the correct file names — fix any broken paths now
- Confirm the global CSS is loading correctly on every page — check fonts, colours, and nav styling are consistent
- Agree on the exact folder structure on the university server — confirm everyone is using the same relative file paths
- Raise any design issues — if someone's page looks visually inconsistent with the rest, agree on a fix now
- Each person gives a quick update on their Week 2 progress — flag anything that might run late
This is the most common failure point in group web projects — someone uses a different folder structure and all the links break. Agree on paths in this meeting and write them down.
Week 3
8 Mar – 14 Mar
⚡ JavaScript Week — Check Everyone's Interactive Features Work
Meeting 3 — JavaScript Progress Review
8–9 Mar
- Each student demonstrates their page's interactive JavaScript feature — gallery expand, AIS scoring, feedback form, or profile prompts
- Check that the active page nav state is correctly set on every page — the current page's link must look different
- Test navigation between pages — click every nav link from every page and confirm nothing is broken
- Check every footer has the correct Page Editor and Validation links for that page's assigned student
- Flag any pages that are behind schedule — agree on a plan to catch up before Week 4
Meeting 4 — Pre-Submission Final Review
15–16 Mar
- Every student shows their completed pages — all main pages, content page, and any that are ready
- Check every single image across every page has alt text — this is the most common validation error
- Confirm all pages still use the shared template — nobody has accidentally changed the header or footer structure
- Agree on who still has outstanding work and set a hard personal deadline to finish before server upload
- Remind everyone to start their Page Editor and Validation pages this week — not at the last minute
Week 4
15 Mar – 19 Mar
🏁 Final Sprint — Validate, Document, and Ship
Challenge — Validate All Your Pages
ALL
- Run every HTML file you built through the W3C validator specified on Blackboard
- Fix every single error — warnings are fine but errors must be zero
- Take a clear screenshot of each successful validation result — you need one per page
- Check that every image on every page has alt text — this is a very common error
Most validation errors come from missing alt text, unclosed tags, or elements in the wrong place. Fix the errors one by one from the top — they often cause a chain reaction.
🏆 Required for submission
Challenge — Build Your Validation Page
ALL
- Use the template from Blackboard as the base for this page
- Add a section for each page you built with its name as a heading
- Drop in the screenshot showing the validator confirming no errors for each page
- Write a short reflection at the end — what errors did you find, how did you fix them, what did you learn
- Make sure the footer links to your Page Editor
Challenge — Build Your Page Editor
ALL
- State your name and role clearly at the top of the page
- List every page and feature you personally built
- Write a technical description for each page — what HTML elements did you use and why, what CSS techniques and why
- Add a contents list at the top with anchor links jumping to each section
- Include working links to each of your live pages — must open in a new tab
- Add links from each page section to the relevant validation screenshot on your Validation Page
- Write a challenges and lessons section — what was hard, how you solved it, what you learned
- Write an accessibility section — how did you make your pages work for all users
- Write a JANET compliance section — explain how your pages follow responsible web publishing rules
- Add your group meetings log as a table — minimum 6 meetings, include date, format, who attended, your contribution
- Add a references section listing every resource you used — lecture notes, websites, tutorials
Do not paste blocks of code into the Page Editor. Explain what you did in plain English. The marker wants to know you understand it, not that you can copy and paste it.
🏆 Worth 25 marks
Challenge — Upload to the University Server
ALL
- Follow the Blackboard instructions for transferring files to the university web server
- Put all your files inside your 5-letter team folder on the server
- Click every link on every one of your pages to confirm they all work on the live server
- Write down all your submission URLs in the correct format
- Submit your URLs as plain text, your ZIP of all files, and your signed Group Contract on Blackboard
Meeting 5 — Live URL Check
17 Mar
- Go through every live URL together as a group and confirm they all load correctly
- Write down and confirm all submission URLs
Meeting 6 — Final Sign-Off
18–19 Mar
- Final review of every page together — nav links, footers, alt text, active page state in nav
- Prepare your Blackboard submission — URLs, ZIP file, Group Contract
- Submit before 13:00 on 30th March — aim to be done today
🟦
Student 1 — The Foundation Builder
You carry the most responsibility in Week 1. The whole team depends on your template and CSS being done early. Your pages also require advanced JavaScript for the gallery.
home.html
gallery.html
style.css (shared)
template (shared)
content_ST1.html
Week 121 Feb – 28 Feb
🏗️ Build the Foundation — Template, CSS, and Navigation
Challenge 1 — Create the Global CSS File (style.css)
01
- Define the colour palette as CSS variables using the colours the team agreed on in Meeting 1
- Set up the font using a Google Fonts import and apply it to the whole page
- Style the body, header, main content area, and footer
- Design the navigation bar — how the links sit, their spacing, and their colour
- Add hover effects to all navigation links so they visually respond on mouse-over
- Create an "active" CSS class that makes the current page's nav link look different from the others
- Design reusable card styles — the box layout, border, padding, shadow, and heading inside
- Style buttons — background colour, text colour, border-radius, and hover state
- Style links as a separate CSS category — define default link colour, visited link colour, hover colour, and any underline behaviour. This is explicitly required in section 4.1 of the brief and must be distinct from button styles
- Add image styles — spacing, borders or shadows, responsive sizing
- Write clear comments in the CSS marking which sections other students must not change
This file is shared with the whole team. Keep it clean and organised with sections and comments. If it's messy, your teammates will break things trying to use it.
⭐ Worth 10 marks (Website Style)
Challenge 2 — Create the Shared HTML Template
02
- Create a proper HTML file with correct structure — doctype, html, head, body
- Add a header section containing the website logo or name and the navigation bar
- Add navigation links to all required pages — Gallery, AIS, User Profile, Feedback, Team, Sitemap
- Add a main content area with a comment telling teammates to put their content here
- Add a footer with placeholder links to the Page Editor and Validation pages
- Include an accessibility/compliance link in the footer
- Link the template to style.css and test it in a browser — confirm it looks correct
- Upload both the template and style.css to the shared Google Drive folder
- Write a short note in the Drive folder explaining how to use the template and what not to touch
Week 21 Mar – 7 Mar
🏠 Build the Homepage and Start the Gallery Structure
Challenge 3 — Complete home.html
03
- Use the shared template as your base — do not change the header, nav, or footer structure
- Add at least three content cards inside the main section
- Each card must have a heading, a relevant image with alt text, and original text about your SDG
- Each card must also include a short list — for example 3 actions people can take
- Do NOT copy any text from the UN website — everything must be written by you
- Add an interactive gallery section with four items — one linking to each team member's content page
- Each gallery item must show the topic of that content page and visually respond on hover
- Add a style block inside the HTML file with at least 5 CSS rules just for the homepage
- Add comments to the embedded CSS explaining what each rule does
- Make sure the Home link in the navigation bar has the active class applied
Challenge 4 — Start gallery.html Structure
04
- Copy the shared template and rename it gallery.html
- Create at least 4 gallery items in the main section, each with a thumbnail image and a title label
- For each item, create a hidden extended view section that will contain a larger image and more detail
- All images must be relevant to your chosen SDG and have proper alt text
- Leave the JavaScript behaviour for Week 3 — just get the structure right this week
Think of the gallery as a grid of thumbnail images. When you click one, a bigger view with more info appears. Plan your HTML structure around this behaviour before you start coding.
Week 38 Mar – 14 Mar
⚡ Add JavaScript to the Gallery and Complete Your Content Page
Challenge 5 — Complete gallery.html with JavaScript
05
- Add JavaScript event listeners so hovering over a thumbnail makes something visually happen — this must use JavaScript, not just CSS hover alone
- Make clicking a thumbnail show the extended view with the correct image and description for that item
- Add a close button that uses JavaScript to hide the extended view again
- Inside the extended view, add controls that let the user change the colour scheme of the text
- Add controls that let the user change the font style of the text in the extended view
- Add page-specific styling — either in an embedded style block or a separate CSS file just for the gallery
- Make sure the Gallery link in the navigation bar has the active class applied on this page
Pure CSS solutions like checkbox hacks or :target tricks will NOT pass. There must be real JavaScript event listeners in your code. The marker will look for this specifically.
⭐ Worth 20 marks
Challenge 6 — Complete content_ST1.html
06
- Write a detailed, original page about an aspect of your chosen SDG — all content must be your own words
- Use one h1 for the main title, then h2 for section headings, then h3 for subsections where needed
- Include at least 4 relevant images, all with alt text, all styled with CSS
- Add an internal navigation menu at the top of the page with anchor links to each section
- Give each section a unique id attribute so the internal links can target them
- Add a Go to Top button that stays visible as you scroll — use fixed CSS positioning
- Make sure the correct nav link shows as active on this page
🟨
Student 2 — The Interactive Experience Builder
You build the first impression (splash screen) and the most JavaScript-heavy feature (the Action Impact Simulator). Your pages need careful planning before you start coding.
splash.html
ais.html
content_ST2.html
Week 121 Feb – 28 Feb
📋 Plan and Prepare — Research and Sketch Your Pages
Challenge 1 — Plan Your Pages
01
- Sketch what the splash screen will look like — what image, where the text sits, what the countdown looks like
- Plan your 6 action cards for the AIS — what actions related to your SDG will you include, what are their impact points
- Decide your three impact level thresholds — where does low end and medium begin, where does high begin
- Find 3 royalty-free background images for the AIS — one for low, one for medium, one for high impact
- Find a full-screen background image for the splash screen from Unsplash or Pexels
- Test that the shared template from Student 1 works correctly on your machine
- Decide on the topic for your content page and write a rough outline of sections
The AIS is the most complex JavaScript task in the project. Planning the logic now — how selection works, how scores add up, how levels are determined — saves a lot of frustration in Week 3.
Week 21 Mar – 7 Mar
💫 Build the Splash Screen and Start the AIS Structure
Challenge 2 — Complete splash.html
02
- Display the website title prominently — large, centred, impossible to miss
- Write a 1–2 sentence mission statement about the website's purpose and SDG connection
- List all four team members' names clearly
- Set a full-screen background image using CSS — use background-size: cover and background-position: center
- Add a semi-transparent overlay behind the text so it stays readable against the image
- Add the HTML meta refresh tag in the head section to auto-redirect to home.html after 4 seconds
- Create a CSS loading animation using @keyframes — a spinning ring or pulsing dot, no GIFs allowed
- Add a JavaScript countdown that displays "Entering site in 4... 3... 2... 1..." and updates every second
- Add a Skip button that immediately takes the user to home.html when clicked
- Make sure the overall design matches the team's agreed colours and fonts
- Do NOT use a downloaded template — design this yourself
Challenge 3 — Build ais.html Structure
03
- Copy the shared template and rename it ais.html
- Create 6 action cards in the main section — each card needs an image, title, description, and impact points value
- All actions must be realistic things individuals like students could actually do related to your SDG
- All images must have alt text and be properly referenced if sourced externally
- Add a style block inside the HTML file with at least 5 CSS rules for the card layout and styling
- Within the embedded CSS, write a specific rule for the selected card state and a specific rule for the unselected card state — this is a named requirement in the brief. For example, an unselected card might have a plain border, while a selected card gets a coloured border, highlighted background, or bold outline. These two states must be visually distinct
- Add a feedback area below the cards where the score and message will appear — leave it empty for now
- Leave the JavaScript for Week 3
Week 38 Mar – 14 Mar
⚡ Add JavaScript to the AIS and Complete Your Content Page
Challenge 4 — Complete ais.html with JavaScript
04
- Make clicking a card select it — it should visually look different when selected (border, background, highlight)
- Clicking a selected card again should deselect it
- JavaScript must keep track of which cards are selected and add up their impact points into a total score
- Display the total score in the feedback area and update it every time a card is selected or deselected
- Show a message based on the score — one message for low, one for medium, one for high impact
- State your three score thresholds in comments in your JavaScript code
- Use JavaScript to change the page background image when the impact level changes — low gets image A, medium gets image B, high gets image C
- Background images must remain readable — add an overlay if the content becomes hard to read
The background change must be done by JavaScript changing the style of an element, not by CSS tricks. The marker is specifically checking for this distinction.
⭐ Worth 20 marks
Challenge 5 — Complete content_ST2.html
05
- Write a detailed original page about your chosen SDG angle — no copied text
- Use correct heading hierarchy — one h1, then h2s, then h3s
- Include at least 4 images with alt text, styled with CSS margins, borders or shadows
- Add internal navigation links at the top jumping to each section on the page
- Add a fixed Go to Top button visible while scrolling
- Ensure the correct nav link is marked as active
🟩
Student 3 — The Community & People Builder
You build the two most socially-focused pages — the team showcase and the feedback system. Your JavaScript centres on form validation and a live character counter.
feedback.html
team.html
content_ST3.html
Week 121 Feb – 28 Feb
📋 Plan and Prepare — Gather Team Info and Research Programmes
Challenge 1 — Plan Your Pages
01
- Collect a photo or icon for each of the 4 team members for the Team page — ask teammates now
- Collect each team member's role, pages they built, and a 1–2 sentence contribution summary
- Research 4 real programmes, campaigns, or opportunities related to your SDG for the Feedback page
- Plan the hover reveal effect for the team cards — sketch how it will look before and after hovering
- Test the shared template from Student 1 on your machine
- Decide the topic for your content page and write a rough section outline
Week 21 Mar – 7 Mar
👥 Build the Team Page and Start the Feedback Page
Challenge 2 — Complete team.html
02
- Copy the shared template and create one block per team member — 4 total
- Each block must show a photo or icon, the member's name, and their role
- All images must have meaningful alt text
- Add hidden detail content to each block — full name, role, pages built, contribution summary
- Use CSS to make this hidden content smoothly appear when the user hovers over the block
- The hover transition must be smooth — use CSS transition on opacity or max-height
- Add tabindex="0" to each team member block so keyboard users can tab to them
- Make sure the hover style also applies on focus so keyboard users see the same effect
- Use page-specific CSS in an embedded style block or a separate CSS file — do not put it in style.css
Challenge 3 — Build feedback.html Structure (No Form Yet)
03
- Copy the shared template and rename it feedback.html
- Build the scrollable programme cards section — at least 4 cards, each with a title, image, description, and button
- Make the cards section scrollable using CSS overflow so it doesn't take over the full page
- Add hover effects to the buttons — colour or size change on mouse-over
- Add a dropdown menu for sorting (Most Popular, Student-Friendly, etc.) — it doesn't need to actually work
- Build the reviews section with at least 3 review cards — headline, short review, reviewer name, date, and rating
- Add an overall rating summary above the individual review cards — this is a separately named requirement in the brief. It must show a numeric rating display such as "8.6/10 Excellent", a label describing the rating (e.g. "Exceptional"), and the total number of reviews (e.g. "Based on 109 reviews"). This summary is distinct from the individual review cards themselves
- Leave the feedback form for Week 3
Week 38 Mar – 14 Mar
⚡ Add the Feedback Form with JavaScript and Complete Your Content Page
Challenge 4 — Complete the Feedback Form with JavaScript
04
- Add a Full Name text input
- Add an Email Address input using type="email"
- Add a Telephone Number input using type="tel"
- Add an Address textarea
- Add a Comment/Message textarea with a maxlength attribute
- Add at least one of: a select dropdown, multi-select list, or datalist with searchable suggestions
- Add a date input and a datetime-local input
- Group fields using fieldset and legend — e.g. "Personal Details" and "Feedback Details"
- Add a JavaScript live character counter next to the message textarea — updates on every keystroke
- On submit, JavaScript must check all required fields are filled and email looks valid
- Error messages must appear next to the specific field that has a problem — not just a generic alert
- On successful validation, show a thank you message and hide the form
Every form field must have a visible label above or beside it. This is both an accessibility requirement and a marking criterion. Don't skip labels.
⭐ Worth 20 marks
Challenge 5 — Complete content_ST3.html
05
- Write a detailed original page about your SDG angle — all text must be your own words
- Use correct heading hierarchy — one h1, h2 sections, h3 subsections
- Include at least 4 images with alt text, styled with CSS
- Add internal navigation links at the top jumping to each section
- Add a fixed Go to Top button
- Mark the correct nav link as active
🟥
Student 4 — The Navigation & Profile Builder
You build the most technically unique pages. The SVG sitemap requires drawing with code. The profile page requires careful JavaScript logic with prompts and DOM updates.
profile.html
sitemap.html
content_ST4.html
Week 121 Feb – 28 Feb
📋 Plan and Prepare — Map the Site and Design the Profile Flow
Challenge 1 — Plan Your Pages
01
- Draw a rough diagram of the sitemap on paper — all pages and how they connect to each other
- Plan your 3 profile steps and the 3+ prompts per step — what information will you collect at each step
- Learn the basics of SVG before Week 2 — read the W3Schools SVG intro and understand rect, text, line, and a tags
- Test the shared template from Student 1 on your machine
- Decide your content page topic and write a rough section outline
SVG can feel intimidating but it's really just drawing shapes with code. Spend 30 minutes on the W3Schools SVG tutorial this week and it will make Week 2 much easier.
Week 21 Mar – 7 Mar
🗺️ Build the Sitemap and Start the Profile Page
Challenge 2 — Complete sitemap.html
02
- Copy the shared template and rename it sitemap.html
- Draw the entire website structure as SVG — not a screenshot, not a regular image, actual SVG code
- Represent every required page as a shape (rectangle or rounded box) with the page name as text inside
- Connect shapes with lines to show which pages are linked to which
- Make every shape a clickable link that goes to the corresponding page
- Add hover effects on shapes — fill colour, border, or opacity change on mouse-over — using CSS
- Add a visible focus state to every clickable node — this is an explicit accessibility requirement in the brief. When a user tabs to a node using the keyboard, it must visually change (e.g. an outline, a stroke highlight, or a colour shift). You can reuse the hover styling or create a dedicated focus style, but it must be present and visible
- Add a title element inside each SVG link for accessibility — screen readers use this
- Set the SVG viewBox attribute and make its width 100% so it scales on different screen sizes
- Make sure the sitemap colours match the team's agreed colour palette
- Make the Sitemap nav link show as active on this page
Challenge 3 — Start profile.html (Steps 1 & 2)
03
- Copy the shared template and rename it profile.html
- Add a Start / Continue Profile button that launches the prompt sequence when clicked
- Code Step 1 — launch at least 3 prompts one at a time collecting basic details like name and username
- Code Step 2 — launch at least 3 prompts collecting interests or preferences
- Store all collected answers in a JavaScript object
- After each step, update a profile display area on the page to show what's been collected so far
- If a user clicks Cancel or leaves a prompt blank, skip that answer without crashing
- Add a basic progress indicator showing how many steps are done
Week 38 Mar – 14 Mar
⚡ Complete the Profile Page and Your Content Page
Challenge 4 — Complete profile.html with Full JavaScript
04
- Add Step 3 — at least 3 prompts collecting actions, goals, or commitments related to the SDG
- After all 3 steps complete, the progress indicator must reach 100%
- Profile sections with no data must stay hidden — only show sections that have answers
- Add Revisit Step 1, Revisit Step 2, and Revisit Step 3 buttons below the profile
- When a revisit button is clicked, re-run the prompts for that step and update the profile display with any new answers
- The progress indicator must update when previously skipped prompts are later filled in
- Organise your JavaScript into separate functions — one per step, one for updating the display, one for updating progress
- Use conditional logic throughout — check if prompts were skipped, check step completion status
- Make sure the Profile nav link shows as active on this page
A profile completion percentage of 0/9 prompts = 0%, 3/9 = 33%, 6/9 = 67%, 9/9 = 100% is a clean way to calculate progress if you're not sure how to structure it.
⭐ Worth 20 marks
Challenge 5 — Complete content_ST4.html
05
- Write a detailed original page about your SDG angle — all text must be your own words
- Use correct heading hierarchy — one h1, h2 sections, h3 subsections
- Include at least 4 images with alt text, styled with CSS
- Add internal navigation links at the top jumping to each section
- Add a fixed Go to Top button
- Mark the correct nav link as active