Saugat Bhattarai, Student [4]

Profile Page

The Profile Page was designed to showcase a user's environmental activism journey, skills, and scheduled volunteer activities. Below are the key technical aspects implemented:

HTML Structure & Key Tags:

• Semantic HTML5 Elements: Utilized <header>, <section>, <footer> for proper document structure, improving accessibility and SEO.
• Hero Section: Created with a <div class="hero profile-hero"> that includes an overlay for better text visibility against the background image.
• Grid Layout: The profile container uses CSS Grid with display: grid; to create a responsive two-column layout for user information and skills sections.
• Font Awesome Integration: Incorporated icons using <i class="fas fa-icon-name"> tags with proper aria-labels for accessibility.

CSS Techniques:

• CSS Variables: Defined color scheme and styling constants using custom properties (e.g., --primary-color) for consistency and easy theme updates.
• Skill Bar Visualization: Created animated skill bars using width percentage and color-coded styling to visually represent proficiency levels.
• Interactive Elements: Applied hover effects with transform: translateY(-5px); on cards to create subtle interactions that improve user engagement.
• Responsive Calendar: Implemented a custom event calendar with color-coded event markers and tooltips using relative positioning and flex layout.
• Media Queries: Used breakpoints at 992px, 768px, and 576px to ensure responsive design across devices, adjusting grid layouts to single column on smaller screens.

Functionality Highlights:

• Interactive User Card: Created with hover effects and an editable avatar feature.
• Skill Visualization: Used percentage-based progress bars to display professional skills and personal goals.
• Event Calendar: Developed a custom calendar with event indicators and tooltips to show scheduled volunteer activities.
• Contact Form: Implemented a styled form with input validation and responsive design.

View Profile Page View Validation Results

Sitemap Page

The Sitemap Page was designed to provide a clear visual representation of the website structure, enhancing user navigation and understanding of content organization. Below are the key technical aspects implemented:

HTML Structure & Key Tags:

• Semantic HTML5 Elements: Utilized <section>, <header>, <footer> for proper document structure, improving accessibility and SEO.
• SVG Integration: Implemented <svg> elements with appropriate viewBox attributes to create a responsive, scalable sitemap visualization.
• Interactive Elements: Created clickable page representations using <a> tags wrapped around <rect> elements to enable direct navigation.
• Text Labels: Added descriptive <text> elements with proper text-anchor attributes to ensure clear labeling of all sitemap components.

CSS Techniques:

• SVG Styling: Applied embedded CSS within <defs> and <style> tags to define visual characteristics of sitemap elements.
• Color Coding: Used different fill colors (e.g., fill: #3498db; for main pages) to visually distinguish page types and hierarchies.
• Interactive Hover Effects: Implemented transition: fill 0.3s, filter 0.3s; with hover states to create responsive visual feedback when users interact with sitemap elements.
• Drop Shadows: Added filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); to enhance visual depth and improve element distinction.
• Responsive Design: Ensured the SVG scales appropriately using a flexible viewBox and container styling with percentage-based widths.

Functionality Highlights:

• Visual Hierarchy: Implemented distinct section groupings with labeled headers to organize content logically.
• Connection Lines: Created directional arrows using <path> elements with custom <marker> definitions to show relationships between pages.
• Interactive Navigation: Each sitemap node functions as a direct link to the corresponding page, enhancing site exploration.
• Visual Differentiation: Used unique styling for entry points, main pages, and secondary pages to communicate site structure at a glance.
• Descriptive Labels: Included clear section labels and page names to ensure users understand the purpose of each component.

View Sitemap Page View Sitemap Validation Results

Content Page

The Content page was designed to educate users about the critical environmental issues our planet faces today. Below are the key technical aspects implemented:

HTML Structure & Key Tags:

• Semantic Sectioning: Utilized <section> elements with unique IDs (e.g., id="greenhouse") to create clearly defined content areas that can be targeted by the navigation menu.
• Internal Navigation: Implemented an <aside class="internal-nav"> element that contains anchor links to each section, enhancing page usability and content discovery.
• Image Integration: Used <img class="resource-image"> tags with descriptive alt attributes for accessibility and consistent styling across all content sections.
• Fixed Navigation: Created a "Go to Top" button with <a href="#" id="go-to-top"> to improve navigation on long-scrolling content.

CSS Techniques:

• Flexbox Layout: Implemented display: flex; for the page container to create a side-by-side layout with the navigation menu and main content area.
• Sticky Positioning: Applied position: sticky; to the internal navigation menu to keep it visible as users scroll through content sections.
• Card-Based Content: Styled each .resources-section with consistent padding, background, and border-radius to create a card-like appearance that visually separates content topics.
• Image Formatting: Set width: 85%; max-height: 400px; object-fit: cover; on resource images to maintain consistent size while preserving aspect ratios.
• Responsive Design: Used media queries to transform the side-by-side layout into a vertical layout on mobile devices, with the navigation menu becoming horizontal and scrollable.

Design Highlights:

• Visual Hierarchy: Implemented consistent heading styles with h1, h2, and h3 elements to create clear content organization and improve readability.
• Interactive Navigation: Created hover effects with background-color: var(--primary-color); color: white; on navigation links to provide visual feedback on interaction.
• Text Formatting: Applied text-align: justify; and maximum width constraints to paragraph text for improved readability across different screen sizes.
• Shadow Effects: Used box-shadow: var(--box-shadow); on content cards and images to create depth and visual separation from the background.
• Accessibility Considerations: Maintained color contrast ratios and implemented semantic HTML structure to ensure content is accessible to all users, including those using screen readers.

View Climate Challenges Page View Validation Results

Calendar Implementation Challenge

One of the most significant challenges encountered was creating the interactive event calendar on the Profile page. Initially, I struggled with:

• Grid Layout Complexity: Maintaining proper alignment of calendar days across seven columns while ensuring responsive behavior.
• Event Tooltip Positioning: Ensuring tooltips remained visible without extending beyond viewport boundaries.
• Color Coding System: Creating a visually distinct yet harmonious color scheme for different event types.

Resolution:

To overcome these challenges, I implemented several solutions:

• Used CSS Grid with fixed column count and applied specific styling for inactive days (previous/next month).
• Implemented absolute positioning for tooltips with z-index management to prevent overflow issues.
• Created a color-coded legend that matches event markers for better user comprehension.

Lesson Learned:

This experience taught me the importance of planning complex UI components before implementation. Breaking down the calendar into smaller components (header, grid, day cells, event markers) made the development process more manageable. I also learned valuable techniques for tooltip positioning and improved my understanding of CSS Grid for complex layouts.

Responsive Design Challenge

Another challenge was ensuring consistent appearance and functionality across various device sizes, particularly for the Profile page with its complex sections.

Resolution:

I implemented a comprehensive responsive strategy:

• Utilized CSS Grid with minmax() and auto-fit for naturally responsive layouts.
• Created targeted media queries for three breakpoints: desktop (992px+), tablet (768px-991px), and mobile (below 768px).
• Adjusted font sizes, spacing, and interactive elements based on screen size to maintain usability.
• Tested extensively across different devices and browsers to verify consistent behavior.

Lesson Learned:

This challenge reinforced the importance of "mobile-first" thinking and planning for responsive design from the project's inception rather than as an afterthought. I discovered that using relative units (rem, em, %) instead of fixed pixel values greatly simplified responsive implementation. Additionally, I learned to leverage modern CSS features like Grid and Flexbox to create naturally responsive layouts with minimal media queries.

Ensuring accessibility was a key priority throughout the development of my assigned pages. The following accessibility features were implemented:

• Semantic HTML Structure: Used appropriate HTML5 semantic elements (<header>, <nav>, <main>, <section>, <footer>) to provide clear document structure for screen readers.
• ARIA Attributes: Added aria-label and aria-hidden attributes where appropriate to improve screen reader compatibility, particularly for icons and interactive elements.
• Color Contrast: Ensured all text meets WCAG 2.1 AA standards for color contrast (minimum 4.5:1 for normal text, 3:1 for large text) to improve readability for visually impaired users.
• Keyboard Navigation: Implemented proper focus states and tab order for all interactive elements to ensure keyboard-only users can navigate effectively.
• Alternative Text: Added descriptive alt attributes for all images and icons to provide context for users who cannot see visual content.
• Form Accessibility: Included proper <label> elements associated with form inputs using the for attribute in the contact form.
• Responsive Text Sizing: Used relative units (rem) for font sizes to respect user browser preferences and allow text scaling.

Regulation Compliance and Ethical Practices

The Janet Regulation Page was designed to ensure that all website content adheres to legal, ethical, and educational standards. Below are the key technical and compliance aspects implemented:

Content Moderation and Compliance:

• Content Review Process: Established a workflow for reviewing and approving content to ensure it aligns with educational goals and remains appropriate for all audiences.
• Copyright Compliance: Verified that all images, icons, and text content are either original, licensed, or sourced from public domain repositories with proper attribution.
• Legal Notices: Included a clear copyright notice and terms of use in the footer to inform users of their rights and responsibilities.

Secure and Ethical Development Practices:

• HTTPS Implementation: Ensured all pages are served over HTTPS to protect user data and maintain secure communication.
• Clean Code Standards: Followed best practices for writing clean, maintainable, and well-documented code to facilitate future updates and collaboration.
• Data Privacy: Avoided collecting unnecessary user data and ensured compliance with privacy regulations such as GDPR.

Accessibility and Inclusivity:

• WCAG Compliance: Designed the page to meet WCAG 2.1 AA standards, ensuring accessibility for users with disabilities.
• Inclusive Language: Reviewed all content to ensure it is free from bias and inclusive of diverse audiences.
• Keyboard Navigation: Verified that all interactive elements are fully operable using only a keyboard.

Sources and Licensing:

• Font Awesome: Icons sourced from Font Awesome under their free license.
• Images: All images used are either original or sourced from free-to-use platforms such as Unsplash or Pexels, with proper attribution where required.