EnergyAct – SDG 7: Affordable and Clean Energy

User Profile Page

Technical Description

The User Profile page (profile.html) is built on the shared team template, using the global structure.css for header, navigation, footer, and base typography. All page-specific rules are held in an embedded <style> block so they never conflict with the global CSS.

HTML structure: The page uses the standard <header>, <main>, and <footer> template. Inside <main>, the layout is divided into four logical zones: a progress bar area, a step-button row, a revisit panel, and the profile output card. Each zone is a plain <div> with a descriptive id so JavaScript can target it directly.

CSS techniques: The progress bar uses a two-element approach — an outer wrapper (.progress-wrapper) styled with a fixed height, rounded corners, and a grey background, and an inner fill (.progress-bar) whose width property is updated by JavaScript. A transition: width 0.6s ease rule gives the bar a smooth animation as it fills. Flexbox (display: flex; flex-wrap: wrap; gap: 12px) is used on .step-buttons to keep the four control buttons in a tidy responsive row that wraps gracefully on small screens. Each profile section card uses border-left: 4px solid #c46a1b to create a visual accent consistent with the site's orange palette. A @media (max-width: 600px) block switches the button row to a vertical column on mobile.

JavaScript: All profile data is stored in a single object (profileData) and step completion is tracked in a second object (stepDone). The main dispatcher runStep(step) delegates to one of three dedicated functions — collectStep1(), collectStep2(), collectStep3() — each of which fires three sequential prompt() calls. Pressing Cancel on the first prompt of any step triggers an early return, skipping the step without breaking the flow. Completed data is written to the DOM via textContent on individual <span> elements. updateProgress() recounts the completed steps and sets the bar's style.width and the text node simultaneously. checkAllComplete() reveals the green confirmation banner and the ✓ Complete badge only when all three stepDone flags are true. resetProfile() clears every field and re-disables Step 2 and Step 3 buttons, returning the page to its initial state after a confirm() dialogue.

Accessibility

The progress bar wrapper carries an aria-label="Profile completion progress" attribute so screen readers announce its purpose. All buttons have clear, descriptive visible labels ("Step 1: Basic Details", "Revisit Step 1", etc.) — no icon-only controls that would be ambiguous without sight. The active navigation link (class="active") signals the current page to both sighted users and assistive technologies. Text contrast throughout follows the site's orange-on-white and white-on-dark-navy palette, which meets WCAG AA contrast requirements. The page uses semantic heading hierarchy: <h2> for the page title, <h4> for each profile sub-section card, so the document outline is logical.

Link to the validation page

View the HTML validation report for the User Profile page.

Link to the page

Open the User Profile page.

Sitemap Page

Technical Description

The Sitemap page (sitemap.html) uses the shared team template and global CSS, with additional page-specific styling in an embedded <style> block. The diagram itself is a fully hand-coded inline SVG — no bitmap images, no third-party libraries.

SVG structure: The SVG uses a fixed viewBox="0 0 900 580" combined with width: 100% and height: auto on the containing class so the diagram scales proportionally on all screen sizes. The hierarchy is rendered using <line> elements drawn first (so they sit behind nodes), followed by node groups. Each node is a <g> (group) element wrapped in an <a> anchor tag, making the entire node — both its rectangle and its label — a clickable link to the corresponding page.

CSS techniques: Node styles are applied with class selectors (.node rect, .node-home rect, .node-highlight rect) rather than inline SVG attributes, which keeps the SVG clean and easy to maintain. A transition: fill 0.25s ease on .node rect produces a smooth colour change on hover. The .node:hover rect rule switches the fill to amber (#ffd580) and .node:hover text simultaneously turns the label dark so it remains readable against the lighter background — a two-rule coordination pattern. Student 4's pages (User Profile, Sitemap, and the Student 4 Content node) use the .node-highlight class (dark navy, blue stroke) to visually distinguish them from the rest. A dashed connector line (stroke-dasharray="5,4") marks the logical branch to the "All Content Pages" group node, separating it visually from the solid main-page connectors.

Accessibility: Every node group carries an aria-label attribute and a child <title> element — the two recommended methods for giving SVG elements an accessible name. A tabindex="0" attribute on each <a> wrapper ensures the node is reachable by keyboard Tab navigation. The .node:focus rect and .node:focus text rules mirror the hover styles, providing a visible focus ring for keyboard users. The overall SVG carries role="img" and aria-label="EnergyAct website sitemap diagram" for screen readers. A colour key below the diagram provides a legend for users who may find the colour coding alone insufficient.

Accessibility

In addition to the SVG-specific measures above: the page heading structure is semantic (<h2> for "Website Sitemap"), the colour legend uses plain HTML with inline <span> boxes and text labels rather than colour alone, and all navigation links in the header inherit the team's global active-page styling. The sitemap is therefore usable by keyboard-only users, screen-reader users, and users on small screens thanks to the responsive SVG viewBox.

Link to the validation page

View the HTML validation report for the Sitemap page.

Link to the page

Open the Sitemap page.

Content Page – Solar Energy

Technical Description

The Content page (content_ST4.html) follows the shared team template and links to the global structure.css. An embedded <style> block adds more than fifteen page-specific rules for typography, section layout, image presentation, and the internal navigation menu.

HTML structure: The page title is marked as <h1 id="top"> — the id="top" serves as the anchor target for the fixed "Go to Top" button at the bottom of the page, implemented using only HTML and CSS (position: fixed) without any JavaScript. Six content sections are each wrapped in a <section> with a unique id (e.g. id="what-is-solar"), enabling the internal navigation menu at the top of <main> to jump directly to each section via anchor links (href="#section-id"). The internal nav is a <nav> element with aria-label="Page contents" to distinguish it from the site-wide header navigation.

CSS techniques: Custom list styling (list-style: none, border-left: 3px solid #c46a1b, background-color: #fdf5ee, border-radius: 0 6px 6px 0) replaces the default bullet points with orange-accented cards, making each list item visually distinct and thematically consistent. Images use the .content-img class: max-width: 600px with display: block; margin: auto for centred responsive sizing, plus a subtle box shadow and rounded border for polish. A @media (max-width: 600px) rule scales the h1 and h2 font sizes and adjusts the Go-to-Top button padding for mobile.

Content: The page is structured into six sections covering what solar energy is, its link to SDG 7, types of technology, student actions, global statistics, and the future of solar. All content is original. Four relevant images are included, each with meaningful descriptive alt text and a styled caption below.

Accessibility

Semantic heading hierarchy is maintained throughout: one <h1> for the page title, <h2> for section headings, <h3> for sub-topics. All four images carry descriptive alt attributes. The internal navigation menu uses a labelled <nav aria-label="Page contents"> so screen readers can identify it separately from the site navigation. The fixed "Go to Top" link has an aria-label="Go back to top of page" to clarify its purpose. Text colour against the page background maintains WCAG AA contrast. All image captions are marked as <p class="img-caption"> so they are read in document order by assistive technologies.

Link to the validation page

View the HTML validation report for the Content page.

Link to the page

Open the Solar Energy Content page.

Challenges and Lessons Learned

SVG coordinate system: The biggest challenge on the Sitemap was positioning nodes accurately using the SVG coordinate system. Initially, connector lines did not align with the centres of rectangles because I was confusing the x/y of the <rect> (its top-left corner) with the centre point needed by <line>. I resolved this by carefully calculating centre-x as rect-x + rect-width / 2 for every node and keeping a hand-drawn sketch alongside the code during development.

JavaScript prompt flow: Managing the multi-step prompt sequence on the User Profile page required careful use of null checks. Early versions mistakenly treated an empty string input (user presses OK without typing) the same as pressing Cancel, which broke the skip logic. I fixed this by explicitly checking if (value === null) for skip detection, and separately using the || "Not provided" fallback only for empty strings.

Responsive SVG: Making the sitemap readable on mobile required removing fixed pixel width and height attributes from the <svg> tag and relying entirely on the viewBox with a CSS width: 100% rule. This taught me that SVG responsiveness depends on the viewport scaling the viewBox, not on pixel dimensions on the element itself.

Lesson learned: Planning page structure on paper before writing code saves significant debugging time — particularly for pages that mix HTML, CSS, JavaScript, and SVG, where mistakes in one layer can silently break another.

Compliance

All three pages I created comply with JANET regulations governing academic web publication in the following ways:

Content: All text content on the Solar Energy page is original and written by me. No text has been copied from the UN SDG website or any other source. Where factual statements are made (e.g. about the number of people without electricity), these reflect widely reported public figures used in an educational context.

Images: Images referenced in content_ST4.html are either royalty-free resources (credited in the References section) or placeholder paths intended to be replaced with correctly licensed images before final submission. All images include descriptive alt text as required for both accessibility and ethical image use.

Code integrity: All HTML, CSS, and JavaScript was written by me without copying or adapting templates from the internet. No pre-built SVG libraries or diagram generators were used for the sitemap — it was hand-coded.

Privacy: The User Profile page does not collect, transmit, or store any user data on a server. All information entered via prompt() exists only in the browser's JavaScript memory for the duration of the session and is discarded when the page is closed or reset.

See the module compliance notes for full details.

Group Meetings and Individual Contribution Log

References

• Economou, D. (2026) 4COSC011W Web Design and Development – Lecture Notes. University of Westminster. (Accessed: March 2026).
• W3Schools (2025) HTML Tutorial. Available at: https://www.w3schools.com/html/ (Last accessed: March 2026).
• W3Schools (2025) SVG Tutorial. Available at: https://www.w3schools.com/graphics/svg_intro.asp (Last accessed: March 2026).
• MDN Web Docs (2025) JavaScript prompt(). Available at: https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt (Last accessed: March 2026).
• MDN Web Docs (2025) Accessible SVG. Available at: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role (Last accessed: March 2026).
• iStock (2025) Royalty-free images. Available at: https://www.istockphoto.com/ (Last accessed: March 2026).
• World Wide Web Consortium (2025) W3C Markup Validation Service. Available at: https://validator.w3.org/ (Last accessed: March 2026).