Profile page

Technical Description

I developed this profile page using HTML, CSS, and JavaScript to create an interactive progressive user profile feature. JavaScript is used to collect user input through multiple steps, display the entered details dynamically, and calculate profile completion using a progress bar. I also used styled content boxes and responsive design to make the page visually organised and user-friendly.

Accessibility

I considered accessibility by using clear headings, readable text, visible buttons, and a simple page structure to make the profile process easier to follow. The layout is responsive for different screen sizes, and the progress information is displayed clearly to help users understand their completion status.

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

View Profile Page

Sitemap Page

Technical Description

I developed this sitemap page using HTML, CSS, and SVG to visually represent the structure of the SmartEdu website. I used SVG elements to create nodes and connecting lines, allowing users to clearly understand the relationship between pages. Each node is interactive and linked to different pages, making navigation more intuitive and user-friendly.

Accessibility

I considered accessibility by including descriptive labels, titles, and ARIA attributes within the SVG to support screen readers. The sitemap uses clear text, structured layout, and clickable elements to help users easily navigate the website. The design is also responsive, ensuring usability across different devices and screen sizes.

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

View Sitemap Page

Content Page

Technical Description

The Content page was structured using semantic HTML elements such as < section>, < article>, and headings to organise information logically. Paragraph < p> tags were used to present textual content clearly.CSS was used to control layout, spacing, and typography, ensuring consistency with the rest of the website. Styling such as margins, padding, and font sizes were applied to improve readability.

Accessibility

Accessibility of content was ensured by using clear and structured headings, making it easier for screen readers to interpret the content. Text content was written in a readable format with appropriate styles like font size ,space.Links were clearly labelled, and colour contrast was maintained to ensure visibility for users with visual impairments.

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

View Content Page

Challenges and Lessons Learned

During the development process, one of the main challenges was ensuring consistency across all pages while working in a group. This was resolved by using shared CSS files and agreed design guidelines. Another challenge was implementing responsive layouts, which was overcome by using CSS Flexbox and Grid.I also faced difficulties in aligning elements correctly and managing spacing, but through practice and testing, I improved my understanding of CSS layout techniques. This project helped me better understand the importance of clean code structure, teamwork, and planning in web development.

Compliance

The web pages created comply with general web development standards and guidelines. Proper HTML structure was followed using semantic elements, ensuring that the content is accessible and meaningful. External CSS was used instead of inline styling to maintain clean and maintainable code.Accessibility guidelines such as providing alt text for images and ensuring good colour contrast were followed. Links are clearly labelled, and navigation is consistent across all pages. No copyrighted content was used without proper referencing, and all resources are appropriately credited. See the lecture notes for more details on compliance.

Group Meetings and Individual Contribution Log

Group Meetings and Contribution Log that documents my engagement with group work.

• 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:

References

Provide links to resources i 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).