Completed Pages & Tasks
- Feedback Form & Directory: (View Live | View Validation) - Created a robust user feedback form with JS validation and a scrolling programme directory.
- Team Page: (View Live | View Validation) - Built the "About Us" page detailing team roles using CSS hover transitions.
- Content Page (Biodiversity): (View Live | View Validation) - Authored the page focusing on wildlife protection.
Technical Description: Feedback Page
HTML Form Structure
I utilised standard HTML5 input types, including type="email", type="tel",
type="date", and type="datetime-local", to ensure proper mobile keyboards
appear. The <fieldset> and <legend> tags group the personal
details against the feedback details semantically.
A <datalist> was implemented for the "rating" input, offering users a dropdown
suggestion menu while still allowing free text input.
JavaScript Form Validation
I wrote a `validateFeedback()` script attached to the form's `onsubmit` event. It prevents the default
HTTP POST reloading (return false) and manually checks the lengths and pattern structures
of the Full Name, Email, and Comments blocks. It directly inserts an error message `<span>`
beneath the offending field using `.textContent`.
Live Character Counter
An event listener attached to the comment `<textarea>` triggers on every keystroke (`input` event), calculating `value.length` and updating the counter in the UI. When exceeding a near-limit threshold, the text colour turns red to visually warn the user.
Technical Description: Team Page
CSS Expandable Details
The team members' specific details are hidden by default using
max-height: 0; overflow: hidden;. Utilizing the :hover and :focus
pseudo-classes on the parent container triggers a CSS transition that raises the max-height
to 300px, expanding the div gracefully.
Technical Description: Content Page (Biodiversity)
Structurally identical to ST1's layout for consistency across the website. Features anchor tags linked to headers for intuitive on-page navigation.
Challenges & Lessons Learned
Challenge: Making the team member details expand properly without jumping abruptly.
Resolution: Initially, I attempted transitioning display: none to
block, but learned CSS cannot transition the display property. I resolved this by
transitioning max-height instead, providing the smooth CSS-only accordion effect.
Lesson Learned: CSS transition rules must target interpolable values (like heights, widths, or opacities) to render smoothly.
Accessibility Considerations
- Form Labels: Every input holds a matching
<label for="...">tag. Without this, screen readers cannot properly announce what the expected input is. - Keyboard Navigation: Added
tabindex="0"to the Team member cards. This ensures that users relying on the keyboard (Tab key) can focus the element and trigger the CSS:focusstate to reveal the hidden details, just as a mouse user employs:hover.
JANET Compliance
The form on the feedback page does not transmit personal data to any external server (it relies solely on client-side JS validation). Therefore, it poses no security risk to University infrastructure or GDPR liabilities.
Group Meetings & Individual Contribution Log
| Date & Time | Format | Objective | Attended | My Contribution |
|---|---|---|---|---|
| 10 Feb 2026, 14:00 | Face-to-face | Coursework kick-off & role assignment | Yes | I agreed to tackle the form validation requirements, sketching out the required fields for the feedback form. |
| 17 Feb 2026, 15:00 | Online (Teams) | Determine colour palette and global CSS rules | Yes | I ensured that our form error states (red text) still passed contrast checkers. |
| 24 Feb 2026, 14:00 | Face-to-face | Review Home Page and Gallery progress | Yes | I gathered the necessary text details from the team to populate the Team page biographies. |
| 03 Mar 2026, 16:00 | Online (Teams) | Content coordination and internal linking | Yes | I demonstrated the JS character counter functionality and assisted ST4 with planning their JS prompts. |
| 10 Mar 2026, 14:00 | Hybrid | Review all content pages and fix CSS bugs | Yes | Fixed a bug where the Team cards broke out of their CSS grid bounds when hovered. |
| 24 Mar 2026, 13:00 | Face-to-face | Final review, validation, and submission prep | Yes | Completed W3C validation for my 3 pages and wrote up this Editor document. |
References
- United Nations. (n.d.). Goal 15: Life on land. Sustainable Development Goals. https://sdgs.un.org/goals/goal15
- University of Westminster. (2025). 4COSC011W Web Development Lecture Notes (Weeks 1-8).
- Unsplash. (n.d.). Royalty-free photography source. https://unsplash.com/
- W3C. (n.d.). Markup Validation Service. https://validator.w3.org/
- MDN Web Docs. (n.d.). CSS Flexbox & Layout Guide. https://developer.mozilla.org/
- W3Schools. (n.d.). JavaScript Timing & Style Objects. https://www.w3schools.com/
- Image Source Assets (Unsplash IDs):
- Forest Hero Background:
1441974231531 - Lush Greenery:
1448375240586 - Forest Canopy:
1473448912268 - Hands with Seedling:
1542601906990 - Recycling Management:
1532996122724 - Conservation Volunteers:
1488521787991 - Sustainable Farming:
1500651230702 - Academic Collaboration:
1526304640581 - Desertification/Land Degradation:
1509099836639 - Tropical Biodiversity (Macaw):
1425082661705 - Natural Biodiversity (Mountain):
1454496522488 - Wild Leopard/Biodiversity facts:
1456926631375