Page Editor - Student 3
Name: E.A.C.P.Edirisingha
Role: Feedback page & Team page
Feedback & Program Directory
Technical Description
The page utilizes semantic HTML5 elements like <header>, <main>, and <section> to organize content effectively. I implemented a scrollable program card layout using CSS Flexbox with overflow-x: auto. JavaScript was integrated to handle real-time form validation and a live character counter for the feedback text area, enhancing the interactive experience.
Accessibility
To ensure accessibility, I used <label> tags for all form inputs to assist screen readers. I also implemented tabindex for keyboard navigation and ensured all program images have descriptive alt text.
Links
Team Page
Technical Description
For the Team page, I employed CSS Grid to create a responsive layout for member profiles. I used CSS transition and transform properties to create interactive hover effects. The structure uses <div> containers for each member, ensuring a clean separation of profile images and role descriptions.
Accessibility
I focused on color contrast ratios to ensure text readability against the background. Semantic headings (h2, h3) were used to maintain a clear document hierarchy for assistive technologies.
Links
Challenges and Lessons Learned
One primary challenge was managing the responsiveness of the scrollable card layout on smaller screens. This was resolved by refining the Flexbox properties and testing across various viewport widths. Additionally, perfecting the JavaScript form validation taught me how to provide immediate user feedback without requiring a page reload, significantly improving my front-end logic skills.
Compliance
This website complies with Janet regulations by ensuring all content is academic in nature and relevant to SDG 9 (Industry, Innovation, and Infrastructure). I have avoided any prohibited commercial content and ensured that all external resources, such as images and tutorials, are properly cited in the references section.
Group Meetings and Individual Contribution Log
| Meeting | Date & Time | Format | Objective | Attended | Your Individual Contribution |
|---|---|---|---|---|---|
| 1 | 3 Feb 2026 | Face-to-face | Agree SDG and assign roles | Yes | I agreed to take responsibility for the Feedback Page and Team Page. Contributed to the discussion selecting SDG 7. |
| 2 | 10 Feb 2026 | Online (Teams) | Agree visual identity and colour palette | Yes | I suggested the primary accent colors. Agreed to use the dark navy highlight on the Feedback form buttons. |
| 3 | 17 Feb 2026 | Online (Teams) | Review shared template from Student 1 | Yes | I tested the shared template on my pages and confirmed navigation links for feedback.html and team.html worked. |
| 4 | 03 Mar 2026 | Hybrid | Progress review – mid-point check | Yes | I demonstrated the working Feedback form JavaScript and the CSS Grid Team layout. Received feedback on mobile responsiveness. |
| 5 | 17 Mar 2026 | Face-to-face | Cross-review pages and fix links | Yes | I reviewed teammates' pages to confirm links to my sections functioned correctly and added aria-labels to the form. |
| 6 | 24 Mar 2026 | Online (Teams) | Final review and validation checks | Yes | I ran W3C validation on both pages, corrected a stray closing tag in team.html, and prepared validation screenshots. |
References
- W3Schools (2026) HTML Tutorial. Available at: https://www.w3schools.com/html/
- MDN Web Docs (2026) CSS Grid Layout. Available at: https://developer.mozilla.org/
- Duckett, J. (2011) HTML and CSS: Design and Build Websites. John Wiley & Sons.