Kavinu Thepul | Page Editor | Student 04

Profile Page

Technical Description

Key HTML and CSS techniques used:

  • HTML Structure:
    • Used semantic tags like <section>, <header>, <nav>, <footer>, and <main> for accessibility and logical layout.
    • Profile content is grouped into clear categories such as user info, skills, goals, and contact form using separate <section> blocks.
    • Used <ul> and <li> for lists of skills, goals, and experiences.
    • Form inputs are labeled with <label for> for better accessibility and validation.
  • CSS Styling:
    • Used column-count in .profile-layout to create a two-column responsive layout.
    • Used border-radius, box-shadow, and transition for smooth hover effects on cards.
    • Each section uses max-width and padding for clear spacing and visual hierarchy.
    • Progress bars for skills and goals are implemented using .progress-bar and .progress-fill divs with dynamic width values.
    • Responsive design handled using media queries for tablet and mobile screen widths.

Accessibility

  • Semantic HTML tags (e.g. <main>, <section>) enhance screen reader compatibility.
  • All images use descriptive alt attributes (e.g. profile photo, interest icons).
  • Form inputs include <label> elements linked to ids using for attributes.
  • Color contrast (e.g. green buttons on light backgrounds) ensures text is readable.
  • A scroll-to-top button with aria-label improves keyboard navigation and accessibility.
  • Focus states and input validation (e.g. required fields) support user interaction.

Link to the Validation Page

Profile Validation | Student 4: Validation Page

Link to the Page

Profile Page

Sitemap Page

Technical Description

  • HTML Structure:
    • Uses semantic HTML elements like <section> and <main> for structure and readability.
    • Interactive sitemap created using <svg>, <rect>, <text>, and <line> for scalable vector graphics.
    • SVG elements are nested in <a> tags to enable clickable navigation.
    • Separate SVG structures are used for desktop and mobile views with .svg-desktop and .svg-mobile classes.
  • CSS Techniques:
    • SVG elements are styled using class selectors like .rect1, .rect2, .rect3 to differentiate shape sizes.
    • fill, stroke, and transition properties enhance interactivity with hover effects on rectangles.
    • Text within SVGs styled via svg text selectors for font size and color control.
    • section has max width/height and shows scrollbars on hover to keep layout clean initially.
    • Responsiveness handled using media queries: below 600px, the desktop SVG is hidden and the mobile SVG is shown instead.

Accessibility

  • Uses semantic tags to improve screen reader support.
  • Links embedded within <a> tags inside SVGs allow keyboard and assistive technology access.
  • Hover effects provide visual feedback for mouse users.
  • Mobile-friendly version ensures the content is accessible on smaller screens.

Link to the Validation Page

Sitemap Validation | Student 4: Validation Page

Link to the Page

Sitemap Page

Content Page

Technical Description

  • HTML Structure:
    • Uses semantic tags like <section>, <nav>, and <main> to structure content meaningfully.
    • The sidebar uses a nested <ul> list with icons and anchor tags linking to specific id-based sections for smooth in-page navigation.
    • Each section contains a heading, descriptive text, and relevant media (e.g. <img> and <iframe>).
    • Embedded YouTube and interactive maps are included using <iframe> tags inside responsive wrappers.
  • CSS Styling:
    • The page layout is split using a flex container in the .container class to position sidebar and content side-by-side.
    • .sidebar is styled with padding, box-shadow, and hover transitions for a card-like UI with interactive navigation items.
    • Section headings use distinct classes like .content-h and .header-for-content to control size and color (e.g. green highlights).
    • Responsive design handled using media queries for screens under 768px and 600px. This hides sidebar text labels and adjusts padding/font sizes.
    • iframe and img tags are styled for full width display, with border-radius and box-shadow for visual polish.

Accessibility

  • All images include descriptive alt text (e.g. "Greenhouse gas chart", "Earth’s climate system").
  • Consistent heading levels (h1, h2) for proper content hierarchy, supporting screen readers and keyboard navigation.
  • Embedded videos and maps use descriptive title attributes for accessibility.
  • Contrast-friendly text and hover effects improve readability for all users.
  • Navigation sidebar uses anchor links with clear labels and icons to support both visual and keyboard navigation.

Link to the Validation Page

Content Validation | Student 4: Validation Page

Link to the Page

Content Page

Challenges and Lessons Learned

  • Responsive Design: Ensuring proper layout across screen sizes was challenging. Media queries were applied to restructure content like sidebars and form elements for better mobile usability.
  • SVG Implementation: Building an interactive visual sitemap using SVG required learning how to nest <a> elements inside <svg> and style them with CSS for hover feedback.
  • Form Accessibility: Structuring form fields with proper <label for> usage, placeholder text, and required validation enhanced accessibility and user guidance.
  • Content Linking: Creating section-based anchor navigation in the content page required accurate ID management and styling consistency between links and their target sections.
  • Lessons Learned: A key takeaway is that accessibility, responsiveness, and semantic structure are just as important as visual design. Online documentation and validators were vital to overcoming development issues.

Compliance

  • HTML & CSS Validation: The site complies with HTML5 and CSS3 standards, verified through W3C validation tools. Errors and warnings were resolved throughout the development process.
  • Accessibility: The site includes semantic elements, alt attributes for images, accessible form labels, and logical heading structures, aligning with WCAG 2.1 guidelines.
  • JANET Guidelines: All content adheres to JANET's Acceptable Use Policy by avoiding commercial or inappropriate material, using verified educational sources, and ensuring user safety.
  • Copyright and Data: All external resources are credited, and no personal data is collected or stored, meeting GDPR expectations.

References