Content Overview
Name: Kavindu Chandupa
Role: Student 2
Completed Tasks/Pages:
- Home Page - Introduces the Climate Action website
- Table Page - Displays climate-related data in an organized format
- Renewable Energy Content Page - Detailed information on renewable energy solutions
Technical Description
1. Home Page
HTML Techniques:
- Used semantic
<header>,<nav>, and<section>tags - Implemented responsive navigation with flexbox
- Added accessible image descriptions with
altattributes
CSS Techniques:
- Created a responsive layout with media queries
- Used CSS variables for consistent theming
- Added smooth hover transitions for interactive elements
2. Table Page
HTML Techniques:
- Structured data with
<table>,<thead>, and<tbody> - Added proper table headers with
<th>for accessibility - Included table captions for context
CSS Techniques:
- Styled with zebra striping using
nth-child() - Made tables scrollable on mobile with
overflow-x: auto - Added subtle hover effects on table rows
3. Renewable Energy Page
HTML Techniques:
- Used semantic
<article>and<aside>elements - Implemented a card-based layout for different energy types
- Added proper heading hierarchy (
<h2>to<h4>)
CSS Techniques:
- Created a responsive grid layout
- Added interactive card hover effects
- Used CSS animations for visual engagement
Links to My Work
All links open in new tabs for your convenience. The validation report shows W3C validation for all my pages.
Challenges and Lessons Learned
Challenge: Responsive Table Design
Making the data table readable on mobile devices was difficult due to the amount of data.
Solution: Implemented horizontal scrolling with a sticky header row and added tooltips for truncated data.
Lesson: Semantic HTML Matters
Initially used divs for everything, but learned that proper semantic tags improve accessibility and SEO.
Challenge: Color Contrast
Some color combinations looked nice but failed accessibility contrast checks.
Solution: Used WebAIM's contrast checker to ensure all text meets WCAG AA standards.
Accessibility Features
- All images have descriptive
alttext - Proper heading hierarchy implemented
- Sufficient color contrast ratios maintained
- Keyboard navigable interface
- ARIA labels added where needed
Compliance with Janet Regulations
All pages meet Janet's web publishing standards by:
- Providing clear, accurate information
- Ensuring all links work correctly
- Maintaining accessibility standards
- Including proper metadata
- Validating all HTML and CSS
References
- MDN Web Docs. (2023). HTML5 Semantic Elements. https://developer.mozilla.org/en-US/docs/Glossary/Semantics
- W3Schools. (2023). CSS Grid Layout. https://www.w3schools.com/css/css_grid.asp
- WebAIM. (2023). Color Contrast Checker. https://webaim.org/resources/contrastchecker/
- Janet. (2023). Web Publishing Guidelines. https://www.jisc.ac.uk/website