SUSTAINIFY

Chameen Amanjana, Student 2

Home Page

Technical Description

The Home Page of the website is implemented using HTML and CSS to ensure a structured, visually appealing, and user-friendly experience.
HTML
Semantic HTML tags such as header, nav, main, section and footer provide clear content structure, improving readability and SEO.
Navigation Bar (nav) Contains an unordered list (ul) with links (a) for seamless navigation across pages.
Content Section Uses a combination of div containers and CSS flexbox/grid properties to arrange content responsively.
CSS
max-width, padding, and margin ensure optimal content alignment.
responsive design that adapts to different screen sizes.
font-family and color properties create a visually appealing theme.
Images are assigned appropriate alt attributes and width/height properties to enhance performance.

Accessibility

All images have meaningful alt attributes to assist screen readers.
The navigation bar and interactive elements can be accessed via the keyboard (tab key support).
High contrast, readable Fonts and adequate color contrast and rem/em font sizes improve readability.

Link to the validation page

Link to the page

Table

Technical Description

The Table Page is designed to display structured data on sustainable city initiatives.
HTML
HTML Table (table) Used to structure information into rows (tr) and columns (th, td).
Responsive Design using CSS media queries hide specific columns on smaller screens to improve readability.
CSS
overflow-x: auto ensures horizontal scrolling when necessary.
Table Styling border-collapse keeps table borders clean and structured.
nth-child(even) applies alternating row colors for better distinction.
Hover effects (:hover) provide a subtle interaction cue.
Navigation and Branding of the page follows a consistent structure with a header containing the logo and navigation links, ensuring uniformity across the site.

Accessibility

Table Headers (th) with clearly labeled columns provide meaningful structure.
Responsive Table Adjustments so that columns that may not fit well on smaller screens are hidden using media queries.
Keyboard and Screen Reader Support so that the table remains accessible for keyboard navigation.
Proper table markup ensures compatibility with screen readers.
Color contrast and readability for Text and background colors maintain sufficient contrast for visual clarity.

Link to the validation page

Link to the page

Content Page

Technical Description

This page is designed to provide detailed content related to community resilience and climate change. The structure and styling choices focus on readability, navigation, and accessibility.
HTML
Semantic Elements of the page utilizes header, nav, main, section, and footer for clear organization and improved accessibility.
Navigation Menu: A sticky navigation bar (.nav-menu) is implemented using position: sticky; top: 0; z-index: 1000;, ensuring users can quickly jump to different sections of the page.
Sections and Headings: Each topic is wrapped inside a section with a corresponding h2 heading, improving both structure and accessibility for screen readers.
Images: The img elements are wrapped inside .image-container for central alignment and are given alt attributes for accessibility.
CSS
The page uses a clean sans-serif font (font-family: Arial, sans-serif;) for readability.
line-height: 1.6 is applied to improve text spacing and readability.
The container class centers content (width: 77%; margin: auto; padding: 20px;).
The sticky navigation bar ensures users can easily access different topics.
Navigation links (nav-menu a) are styled with contrasting colors for visibility.
Sections are visually separated using a light green background (background: rgba(128, 239, 128, 0.3);).
Rounded corners (border-radius: 5px;) provide a modern and smooth design.

Accessibility

Using header, nav, main, and section improves screen reader navigation.
Every image includes an alt attribute describing its content for visually impaired users.
The sticky navigation bar allows quick access to different sections via the keyboard.
Contrast & readability since the text color contrasts well against the background, ensuring readability for users with visual impairments.
Responsive Design like the use of max-width: 100% for images ensures they scale properly on smaller screens, enhancing usability across devices.

Link to the validation page

Link to the page

Challenges and Lessons Learned

Challenges and Solutions

The navigation bar had inconsistencies across different pages due to CSS conflicts.
Solution: Ensured that the global CSS file applied a consistent style and standardized spacing and alignment.

Some text, especially within table headers, lacked contrast against the background, making it harder to read.
Solution: Adjusted text colors to improve readability while maintaining the page’s visual aesthetic.

Initially, the table did not display properly on smaller screens, causing text overflow and misalignment.
Solution: Implemented CSS media queries to hide less critical columns on mobile devices and added a scrollable container to ensure usability.

Lessons

Mobile-First Design is Essential Designing for smaller screens first ensures a better user experience on all devices.
Consistency in CSS Saves Time Maintaining a shared stylesheet prevents unnecessary styling conflicts across different pages.
Accessibility Should Be Considered from the Start Implementing semantic HTML and ensuring color contrast from the beginning prevents major fixes later.

Compliance

Includes clear navigation, appropriate color contrast, and text alternatives for images.
The content is structured using semantic HTML tags such as header, footer and main, ensuring that screen readers and assistive technologies can easily parse the information.
Additionally, the use of external CSS and the separation of content and styling enhance both accessibility and maintainability.
The website includes a privacy policy and terms of service to meet legal requirements regarding data collection and user privacy.
The responsive design ensures that the pages are mobile-friendly, adhering to the Janet guideline of usability across devices.

References

Provide links to resources you used following a consistent format (e.g., APA, MLA, or a simplified style). For example:

Go top