Senitha Dahanayake, Oceayra, student 2

Splash Screen

Technical Description

The Splash Screen was created as the first point of interaction for users. The structure included a clear page title, a short mission statement connected to SDG 14, a list of group members, a countdown display area, and a Skip Intro button. These elements were organised in a central content container to keep the page easy to read and visually balanced.

CSS was used to create a full-screen background image and a loading spinner animation. Styling choices such as centring, spacing, readable text sizing, and colour contrast were used to make the page visually clear and suitable for the ocean theme. JavaScript was used to create a visible countdown that updated dynamically, while the automatic redirect after 4 seconds was implemented using an HTML meta refresh tag, as required by the coursework brief.

Accessibility

Accessibility was considered by keeping the content simple, readable, and clearly structured. The splash text was placed centrally for easy reading, and the page includes a Skip Intro button so users are not forced to wait for the automatic redirect. This improves usability for users who may prefer direct navigation.

Link to the validation page

View the Splash Screen validation evidence.

Link to the page

Open the Splash Screen.

Action Impact Simulator

Technical Description

The AIS page was structured using semantic sections inside the shared template’s main content area. I created six action cards, each containing an image, title, short description, and impact points. A separate feedback section was added below the cards to display the number of selected actions, total impact points, impact level, and a summary message.

The page uses the shared global CSS for overall website styling and consistency, while additional page-specific embedded CSS was used to style the simulator cards, spacing, borders, feedback box, and selected card state. I used a grid layout to organise the cards clearly and ensure that the page remained responsive on different screen sizes. Hover and focus styles were added to make it clear that the cards were interactive.

JavaScript was the core part of the simulator. It was used to allow users to select and deselect whole cards by clicking them. The script tracked which actions were selected, calculated the total impact score, and then updated the feedback summary dynamically. I also implemented three impact levels: low, medium, and high. Another required feature was changing the background image based on the user’s impact level. This was also controlled using JavaScript, not CSS-only techniques, so the page responded directly to user choices. I also included a Reset button and a Suggest One More Action button to improve interaction.

Accessibility

Accessibility on the AIS page was considered by making the cards focusable and allowing both mouse click and keyboard interaction. Clear visual focus states were used so users could tell which card was active. Images also include meaningful alternative text to support screen-reader users.

Link to the validation page

View the AIS validation evidence.

Link to the page

Open the Action Impact Simulator.

Content Page

Technical Description

My Content Page was built as a structured long-form page with one main heading and multiple clearly defined sections. I used internal navigation links at the top of the page so that users could jump to key sections easily. Each section used appropriate heading levels to keep the structure logical and accessible.

The page uses the shared template and global CSS provided by Student 1. Page-specific styling was added only where necessary for the internal navigation menu, content section spacing, image presentation, and the link connecting the page to the simulator. Images were styled with spacing and responsive presentation to improve readability while maintaining consistency with the overall website design.

The topic of my page was How Individual Actions Can Protect Life Below Water. I selected this topic because it connected directly to the website theme and also linked naturally with the Action Impact Simulator. The content page included multiple sections about marine threats, practical actions, and the future of oceans. Internal anchor links were added to support navigation on a long page.

Accessibility

Accessibility was considered by using a logical heading hierarchy, clear section structure, and meaningful alt text for all images. These decisions improve readability and also support users who rely on assistive technologies such as screen readers.

Link to the validation page

View the Content Page validation evidence.

Link to the page

Open the Content Page.

Challenges and Lessons Learned

One challenge I faced was making sure that the AIS page met all the coursework requirements without becoming overly complicated. The simulator needed to include selection logic, score calculation, impact levels, and dynamic background changes. I resolved this by planning the interaction step by step before finalising the JavaScript.

Another challenge was making sure that my pages remained clearly structured while also meeting technical requirements such as internal linking, responsive image styling, and accessibility. Breaking each page into clear sections helped me manage this more effectively.

From this process, I learned the importance of planning both structure and behaviour before writing final code. I also improved my understanding of how HTML, CSS, and JavaScript work together to create functional and user-friendly pages.

Compliance

The pages I developed for this coursework were designed in accordance with responsible web publishing practices expected within institutions connected to the JANET network. JANET is the UK research and education network provided by Jisc, and institutions using this network must follow ethical, lawful, and secure practices when developing online resources.

First, the content of the pages was created to be appropriate for an academic environment. The website focuses on Sustainable Development Goal 14 (Life Below Water) and is intended for educational purposes. No harmful, offensive, or misleading material is included, which supports the ethical use of network resources required by the JANET Acceptable Use Policy.

Second, I ensured responsible use of external resources. Images used within the website are intended to come from royalty-free or appropriately licensed sources. All external materials are referenced in the References section to respect copyright rules and maintain academic integrity.

Third, the pages do not collect or process personal data from users. This avoids potential issues related to GDPR and the UK Data Protection Act 2018. Since the website is an educational project, it does not require storing personal information or user accounts.

Accessibility was also considered during development. Images include alternative text, headings are structured using semantic HTML elements, and content is written clearly to support readability. These practices align with UK accessibility expectations and help ensure that digital resources are usable by a wider range of users.

Finally, the project follows good academic and professional practice. All content was written originally, external sources are acknowledged, and the website does not include malicious scripts or unsafe code. These steps help ensure that the website respects the security, ethical, and legal principles expected when using JANET-connected institutional systems.

Group Meetings and Individual Contribution Log

Group Meetings and Contribution Log
Meeting Date & Time Format Objective Attended Your Individual Contribution
1 15 Feb 2026 Face-to-face Agree SDG and assign roles Yes Agreed on SDG 14 as the website topic, selected the team name OCEAN, accepted responsibility for Student 2 pages, and helped set up the shared working structure
2 17 Feb 2026 Online Design planning Yes Gave feedback on the colour palette, typography, and layout direction, and reviewed how the SDG 14 theme should connect across the website.
3 25 Feb 2026 Hybrid Progress review Yes Reported progress on the Splash Screen and AIS, discussed how to implement JavaScript features, and checked navigation consistency across pages.
4 2 Mar 2026 Face-to-face Testing and layout fixes Yes Took part in cross-browser testing, reviewed mobile responsiveness, and helped finalise how shared footer elements would be organised.
5 10 Mar 2026 Face-to-face Accessibility and validation Yes Checked accessibility features such as alt text and keyboard navigation, and reviewed validation results for my implemented pages
6 25 Mar 2026 Face-to-face Final review and submission prep Yes Reviewed final versions of my pages, completed the Page Editor and Validation Page, and helped prepare the project for submission.

References

Provide links to resources you used following a consistent format (e.g., APA, MLA, or a simplified style). For example:

Go top