Five days, four students, one offline website and twelve slides
A team of four Class XII students has five days to deliver two things for the annual day: a four-page website for the school IT club and a 12-slide presentation for the parents' session. The draft site uses nested tables for layout, a 4.2 MB JPEG as a repeating background, headings made with tags, three images with no alt attribute, and a stylesheet loaded from an online CDN that will not load in the school lab, which has no internet during the event. Navigation links point to C:\Users\priya\site\about.html. The slides average 14 bullet points each in six different fonts, and the projector in the audio-visual hall washes out light colours. One member is good at image editing but weak at HTML; another is confident with HTML but will be absent on day four; the other two are beginners.
1. Rank the website defects by what must be fixed first, and explain the reasoning behind the order rather than just listing fixes.
Read the worked answer
Order by 'what breaks the deliverable', not 'what is ugly':
- Offline stylesheet and absolute local paths. With the CDN unreachable and links pointing at C:\Users\priya..., the site shows unstyled text and dead navigation in the lab. Nothing else matters if the pages do not display. Fix: copy the CSS into a local css/ folder, link it relatively; change links to about.html, index.html, images/logo.png.
- Layout tables to semantic structure. Nested tables fail screen readers, are hard for beginners to edit under time pressure, and are obsolete practice. Fix: header, nav, main, footer with a simple CSS grid - four pages only, so the rewrite is small.
- Headings. Replace with h1 and h2. One h1 per page; search engines and assistive tech rely on the outline, and font tags are not valid HTML5.
- 4.2 MB background. Resize to roughly 1600 px wide and compress to under about 200 KB, or drop the photo for a solid colour. On a lab machine a 4.2 MB repeating image visibly stalls scrolling.
- Alt text on the three images. Cheap to add, needed for accessibility and usually a marking point.
Reasoning: items 1-2 are correctness failures, 3-5 are quality failures. Correctness first.
2. Design the testing routine you would run on day four to prove the site works in the hall, given that your HTML-strong member is absent that day.
Read the worked answer
Because the strongest HTML person is away, the testing must be written down on day three so beginners can execute it without them. Deliverables: a one-page checklist and a known folder structure (index.html, about.html, gallery.html, contact.html, css/, img/).
Routine:
- Copy the whole site folder to a different machine and open it with no internet. If a page loses its styling or a link dies, the path is absolute and must be made relative.
- Click every navigation link on every page, including the logo back to home. Dead ends are the most common beginner defect.
- View each page in two browsers available in the lab.
- Check every image loads and every img has non-empty alt text.
- Check heading order by looking at the page with CSS switched off - h1 then h2 should still make sense.
- Open the site on the actual projector to judge the background and text contrast, since the hall washes out light colours.
Keep a printed fix list; the absent member's work must be documented, not held in their head, and nothing should depend on one person who will not be present on the day.
3. Redesign the presentation for a washed-out projector and a 12-slide limit, and say how you would divide the work across the four members.
Read the worked answer
Slide design. 14 bullet points on one slide is a document, not a slide. Apply 6-by-6 as a ceiling - no more than about six lines, six words a line - and aim for one idea per slide. Six fonts becomes one family with two weights; the theme is set once in the master slide so it cannot drift. Body text at 24 pt or larger, titles at 32 pt or larger. Because the projector washes out light colours, use dark text on a light solid background or white text on a dark solid background, and never pale grey or thin light-coloured lines on white.
Content cut: 12 slides become title, purpose of the club, what members learned (3 slides), two project demos, upcoming plan, how to join, thank you - roughly nine to eleven slides, leaving room for a demo.
Division of work, matched to strengths. The image-strong member prepares the two or three photos and the logo, sized small. The HTML-strong member finishes the site by day three and files a written handover and checklist, since they are absent on day four. One beginner builds the slide master and types the content; the other runs the link and offline tests from the checklist and takes responsibility for the day-four rehearsal.