Splash Screen
Technical Description
I developed this splash screen using HTML, CSS, and JavaScript to create an engaging introduction for the SmartEdu website. I used a full-screen background image with a dark transparent overlay to improve readability and create a visually appealing first impression. The layout was designed to be simple, clean, and centered using Flexbox so that the content appears properly aligned on different screen sizes.
To improve user experience, I included a CSS-based animated loader, a countdown timer, and a Skip Intro button. The page automatically redirects users to / after 4 seconds using a meta refresh tag, while JavaScript updates the countdown in real time and allows users to skip the splash screen manually if they prefer.
Accessibility
I considered accessibility when developing this splash screen to ensure it can be used by a wide range of users. I used clear and readable text with sufficient contrast against the dark overlay background, making the content easier to see. The layout is simple and centered using Flexbox, which helps users focus on key information without distractions. I also used semantic HTML elements and ensured the page works well across different screen sizes and devices.
To improve usability, I included a visible countdown timer and a “Skip Intro” button so users are not forced to wait for the automatic redirect. The button can be easily clicked, and the JavaScript functionality ensures smooth navigation. Additionally, images such as the background should include appropriate alternative text in a full implementation, and further improvements like keyboard navigation and ARIA labels can be added to enhance accessibility for users with assistive technologies.
Link to the validation page
View Validation Report, use the marker to jump to the corresponding section of the validation page.
Link to the page
Action Impact Simulator
Technical Description
I developed this Action Impact Simulator page using HTML, CSS, and JavaScript to create an interactive feature for the SmartEdu website. I used a responsive grid layout to display action cards and JavaScript to calculate the selected actions, impact score, and impact level dynamically. Additional functions such as reset, suggestion, and background image changes were included to make the page more engaging and interactive for users.
Accessibility
I considered accessibility by using clear headings, readable text, and descriptive alt text for all images. I also included labelled navigation elements and visible buttons to improve usability. The layout is simple and responsive, helping users access the content more easily across different screen sizes and devices.
Link to the validation page
View Validation Report, use the marker to jump to the corresponding section of the validation page.
Link to the page
Content Page
Technical Description
I developed this content page using HTML and CSS to present information about digital learning in a clear and structured way. I used internal navigation links, responsive images, and organised content sections to improve readability and user experience across different devices.
Accessibility
I considered accessibility by using clear headings, descriptive image alt text, and simple navigation links to help users move through the page easily. The layout is responsive and readable, making the content more accessible on both desktop and mobile devices.
Link to the validation page
View Validation Report, use the marker to jump to the corresponding section of the validation page.
Link to the page
Challenges and Lessons Learned
While developing my assigned pages, I faced several challenges related to both design and functionality. For the splash screen, one challenge was making sure the countdown, loading animation, and automatic redirection worked smoothly together without affecting the user experience. In the Action Impact Simulator, the main challenge was using JavaScript correctly to track selected actions, calculate the impact score, and update the result dynamically. For Content Page 2, I had to focus on structuring a large amount of information in a way that remained clear, readable, and visually organised for users.
Through this work, I learned how to combine HTML, CSS, and JavaScript more effectively to create interactive and user-friendly web pages. I also improved my understanding of responsive design, accessibility, internal navigation, and dynamic content updates. Overall, this part of the project helped me strengthen both my front-end development skills and my ability to design pages that are functional, informative, and visually consistent with the rest of the website.
Compliance
When developing my assigned pages, I aimed to follow web development best practices and W3C guidelines to ensure the pages were structured correctly and worked consistently across different devices. I used semantic HTML elements such as headings, paragraphs, sections, navigation, buttons, and images with alternative text where needed. I also made sure the pages were responsive, visually clear, and easy to navigate for users.
In addition, I considered accessibility and usability by using readable text, clear layouts, descriptive content, and interactive elements that support user engagement. My pages were designed to align with the overall website style while maintaining proper structure, functionality, and user-friendly design. Validation tools were also used to help identify and correct syntax or structure issues during development.
Group Meetings and Individual Contribution Log
Include a Group Meetings and Contribution Log that documents your engagement with group work.
Requirements:- A minimum of six (6) group meetings must be recorded.
- Each student must provide their own account of the meetings.
- The log must focus on individual contribution, not just group activity.
Feel free to follow the example table structure below:
| Group Meetings and Contribution Log | |||||
|---|---|---|---|---|---|
| Meeting | Date & Time | Format | Objective | Attended | Your Individual Contribution |
| 1 | 3 Feb 2026, 2:00 pm | Face-to-face | Select SDG and assign pages | Yes | I agreed to develop the Splash Screen, Action Impact Simulator, and my Content Page. |
| 2 | 8 Feb 2026, 7:30 pm | Online | Plan website structure and design | Yes | I suggested ideas for the opening splash design and transition style. |
| 3 | 15 Feb 2026, 4:00 pm | Face-to-face | Develop shared template and navigation | Yes | I checked how the splash page would connect to the Home Page and other sections. |
| 4 | 22 Feb 2026, 8:00 pm | Online | Review progress and fix issues | Yes | I proposed realistic action cards and impact scoring ideas for the simulator. |
| 5 | 5 Mar 2026, 3:00 pm | Online | Test functionality and responsiveness | Yes | I tested countdown, simulator interaction, and improved mobile layout issues. |
| 6 | 23 Mar 2026, 6:30 pm | Face-to-face | Final testing, validation and improvements | Yes | I checked validation, accessibility, and completed my documentation pages. |
References
Provide links to resources you used following a consistent format (e.g., APA, MLA, or a simplified style). For example:
- iStock (2025) iStock. Available at: https://www.istockphoto.com/ (Last accessed: 11 Feb 2025).
- Duckett, J., 2011. HTML and CSS: Design and Build Websites,John Willey&Sons. Inc. Indianappolis.
- W3Schools (2025) HTML Tutorial. Available at: https://www.w3schools.com (Accessed: 10 March 2026).
- Google (2025) Google Flow (Image Generation Tool). Available at: https://labs.google/ (Accessed: 10 March 2026).
- W3C (n.d.) The W3C Markup Validation Service. Available at: https://validator.w3.org/ (Accessed: 26 March 2026).
- United Nations (n.d.) Sustainable Development Goal 4: Quality Education. Available at: https://sdgs.un.org/goals/goal4 (Accessed: 26 March 2026).