Rupesh Dahal [2]- Editor's Page

Home Page

The Home Page serves as the central hub of the website, providing users with an overview of the project and easy access to other sections. It is designed to be visually appealing, user-friendly, and informative, ensuring that visitors can quickly understand the purpose of the website and navigate to the content they are interested in.


HTML Techniques

The Home Page is structured using semantic HTML5 tags to ensure clarity and accessibility. The <header> tag is used to display the main title and navigation menu, while the <main> tag contains the primary content. Sections such as the introduction, featured content, and call-to-action buttons are organized using <section> tags. The <footer> tag is used to include additional links, contact information, and credits.


Key HTML elements include:

  • <nav>: Used for the navigation menu, providing links to key pages like Volunteer, Content, and Editor’s Pages.
  • <h1>, <h2>: Define headings to establish a clear content hierarchy.
  • <p>: Used for text paragraphs, ensuring content is readable and well-structured.
  • <a>: Hyperlinks for seamless navigation across the website.
  • <img>: Displays visuals with descriptive alt attributes for improved accessibility.


CSS Techniques

The Home Page is styled using modern CSS techniques to create an engaging and responsive design. Flexbox is used to align elements horizontally and vertically, ensuring a clean and organized layout. The page features a consistent color scheme and typography that aligns with the overall theme of the website.

Key CSS properties include:

  • Flexbox: Centers the main content and navigation menu, ensuring adaptability to various screen sizes.
  • Grid: Organizes featured content into a visually appealing layout.
  • Media Queries: Makes the page fully responsive for desktops, tablets, and mobile devices.
  • Transitions and Animations: Adds subtle hover effects for enhanced user interaction.
  • Box Shadow and Border Radius: Creates depth and a modern look for cards and buttons.


Purpose of Key Tags and Styling

  • <header> and <nav>: Provide a clear, accessible navigation system for an enhanced user experience.
  • Flexbox and Grid: Ensure a responsive, visually appealing layout adaptable to various screen sizes.
  • Media Queries: Enable full responsiveness, ensuring accessibility across all devices.
  • Semantic HTML Tags: Improve accessibility and SEO, making the page easy to navigate and understand.


Accessibility Features

The Home Page is designed with accessibility in mind. Key features include:

  • Descriptive alt text for all images, ensuring screen readers can convey the content to visually impaired users.
  • Proper contrast ratios for text and background colors, making the content readable for users with visual impairments.
  • ARIA labels for interactive elements, such as buttons and links, to improve navigation for users relying on assistive technologies.


Challenges and Lessons Learned

During the development of the Home Page, one challenge was ensuring the layout remained consistent across different screen sizes. This was resolved by thoroughly testing the page on multiple devices and adjusting the media queries as needed. Another challenge was balancing visual appeal with performance, which was addressed by optimizing image sizes and minimizing CSS code. These experiences highlighted the importance of responsive design and performance optimization in web development.



Compliance

The Home Page complies with Janet regulations and web standards. It uses semantic HTML5 tags, includes descriptive alt text for images, and adheres to accessibility guidelines. The page has been validated using the W3C Validator, ensuring it meets industry standards for HTML and CSS.



Links



By combining a clean design, responsive layout, and accessibility features, the Home Page effectively introduces users to the website and guides them to explore further. It reflects the overall theme of the project while providing a seamless and enjoyable user experience.

Table Page

The Table Page is a dedicated section of the website designed to present detailed climate-related data in a structured and easy-to-understand format. This page focuses on providing users with clear, organized tables that highlight key statistics, such as global CO₂ emissions by country, renewable vs. non-renewable energy usage, and the impact of climate policies. The goal is to make complex data accessible and actionable for visitors, enabling them to better understand the current state of climate change and the effectiveness of various mitigation strategies.



HTML Techniques

The Table Page leverages semantic HTML5 tags for clarity and accessibility. The <header> tag houses the navigation menu, linking to key sections like Home, Volunteer, and Profile Pages. Main content is divided into logical sections using <section> tags, each dedicated to specific datasets. Tables are structured with the <table> tag, utilizing <thead>, <tbody>, and <tfoot> for clear and organized data presentation.

Key HTML elements include:

  • <h1> and <h2> tags for headings, creating a clear hierarchy.
  • <p> tags for descriptive text, ensuring readability.
  • <table> tags for displaying data, with <th> for table headers and <td> for table data.
  • <footer> for the page footer, which includes quick links and copyright information.


CSS Techniques

The Table Page is styled using modern CSS techniques to create a visually appealing and responsive design. Flexbox is used to align elements within the navigation menu and footer, while Grid is applied to organize the layout of the data tables. The page features a consistent color scheme and typography that aligns with the overall theme of the website.

Key CSS properties include:

  • Flexbox: Centers the navigation menu and footer content, ensuring a clean and organized layout.
  • Grid: Structures the data tables, making them easy to read and visually appealing.
  • Media Queries: Ensure the page is fully responsive for desktops, tablets, and mobile devices.
  • Box Shadow and Border Radius: Add depth and a modern look to tables and sections.
  • Color Coding: Differentiates rows in tables (e.g., high, medium, low emissions) for easier interpretation.


Purpose of Key Tags and Styling

  • <table>: Provides a structured way to present complex data, making it accessible and easy to understand.
  • Flexbox and Grid: Ensure the layout is visually appealing and functional, adapting to various devices and screen sizes.
  • Media Queries: Guarantee responsiveness, making the page accessible on all devices.
  • Semantic HTML Tags: Improve accessibility and SEO, ensuring the page is easy to navigate and understand.


Accessibility Features

The Table Page is designed with accessibility in mind. Key features include:

  • Descriptive alt text for all images, ensuring screen readers can convey the content to visually impaired users.
  • Proper contrast ratios for text and background colors, making the content readable for users with visual impairments.
  • ARIA labels for interactive elements, such as buttons and links, to improve navigation for users relying on assistive technologies.


Challenges and Lessons Learned

One challenge during the development of the Table Page was ensuring the data tables remained readable and visually appealing on smaller screens. This was resolved by using media queries to adjust the table layout for mobile devices. Another challenge was organizing the large amount of data into a coherent structure, which was addressed by using clear headings and color-coded rows. These experiences emphasized the importance of responsive design and effective data presentation in web development.



Compliance

The Table Page complies with Janet regulations and web standards. It uses semantic HTML5 tags, includes descriptive alt text for images, and adheres to accessibility guidelines. The page has been validated using the W3C Validator, ensuring it meets industry standards for HTML and CSS.



Links



By combining a clean design, responsive layout, and accessibility features, the Table Page effectively presents critical climate-related data in a way that is both informative and easy to navigate. It reflects the overall theme of the project while providing a seamless and enjoyable user experience.