My Role in the Group
As Student 1, I was responsible for developing the following pages:
Implementation Details
Splash Screen
The Splash Screen includes a full-screen background, loading animation, and auto-redirection to the Home Page after 4 seconds. It uses both JavaScript (`setTimeout`) and a Meta Refresh tag.
Volunteer Page
The Volunteer Page features:
- A scrollable section listing different volunteer opportunities.
- A sorting dropdown (Most Popular, Latest Work, etc.).
- A feedback section with an emoji-based rating system.
- A button hover effect and smooth transitions for an engaging user experience.
Content Page
The Content Page provides detailed information on Climate Action Initiatives. It includes:
- Well-structured sections explaining different aspects of climate action.
- High-quality images with alt text for accessibility.
- A "Go to Top" button with smooth scrolling using JavaScript.
Challenges and Lessons Learned
One of the biggest challenges was making the Volunteer Page scrollable while maintaining a clean UI. I fixed this by using CSS grid layout and setting a max-height with overflow-y auto.
Accessibility Considerations
To ensure accessibility, I added:
- Alt text for images.
- Proper heading structure (H1, H2, H3) for screen readers.
- Avoided using only colors for conveying meaning.
Validation Links
Future Improvements
In future versions, I would add:
- More interactive elements like real-time filtering in the Volunteer Page.
- A dedicated gallery to showcase images from climate events.
- Better mobile responsiveness for smaller screens.
Challenges and Lessons Learned
Detail any challenges encountered during the implementation process and explain how they were resolved. Reflect on the lessons learned from overcoming these challenges.
Compliance
Discuss how the pages you have created are compliant with Janet regulations governing web page publication. This includes demonstrating your understanding and application of these regulations. Be realistic and truthful.
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.