Feedback Page

Technical Description

The base template was crafted using semantic HTML5 structure combined with modern design practices. It includes:

HTML Structure :

• Semantic Tags:
  Utilized semantic HTML5 elements such as<section>, <form>, <fieldset>, <label>, <textarea>, and <button> to enhance document structure and accessibility.
• Form Design :
  The feedback form is enclosed in a <form> element, with grouped inputs for name, email, rating, and feedback message. Labels are associated with input fields using the for and id attributes, improving accessibility for screen readers.
• Input Elements :
  • Text inputs for name and email using <input type="text"> and <input type="email">.
  • Rating system implemented with <input type="radio"> options grouped within a <fieldset> to allow a single-choice selection.
  • User message captured using a <textarea>.
  • A <button type="submit"> is used to trigger form submission.
• Form Validation :
  Basic HTML validation is achieved using the required attribute on key fields like name, email, and feedback message to ensure no submission occurs with missing data.

CSS Styling :

• Layout :
  A centered, responsive card layout is created using Flexbox. The form container uses max-width, margin: auto, and padding to ensure it stays neatly aligned on all screen sizes.
• Styling Inputs :
  Input fields and textareas are styled with border-radius, padding, and box-shadow to provide a clean and user-friendly appearance. Focus states are defined using :focus selectors for accessibility.
• Button Design :
  The submit button is styled with soft gradients, hover effects using transition, and increased contrast for visibility.
• Radio Buttons :
  Custom styles for radio inputs are created by hiding default radio elements and styling labels to act as interactive buttons, providing a better visual experience.
• Responsiveness :
  Media queries are used to adjust padding, input sizes, and form layout for smaller screens, ensuring usability on tablets and mobile devices.

Accessibility

Accessibility practices included :

• Form Accessibility :
  All form fields are properly labeled using <label for="id">, ensuring screen readers can correctly associate input fields with their descriptions.
• Keyboard Navigation :
  The feedback form is fully keyboard accessible, allowing users to tab through input fields, radio buttons, and the submit button without needing a mouse.
• Alt Text for Visuals :
  Any icons or decorative elements used in the feedback page (such as emojis or validation icons) are provided with alt text or marked with aria-hidden="true" when purely decorative.
• Input Focus visibility :
  Clear focus outlines are maintained using :focus styles, allowing users to see which form field is currently active.
• Text Constrast and Font Size :
  All labels and input text meet the WCAG 2.1 AA standard for color contrast and are styled with readable font sizes.
• Error Prevention and Clarity :
  Fields are grouped clearly, and placeholder text (if used) does not replace the need for visible labels. This helps prevent input errors for users with cognitive or visual impairments.

Validation & Page Links

Validation Page | View Feedback Page

Team Page

Technical Description

Key HTML and CSS techniques used :

HTML Structure :

• Semantic Elements :
  Used <section>, <main>, <article>, and figure for better structure and meaning. Each team member is wrapped inside an <article> for modular and semantic layout.
• Profile Cards :
  Each team member's information is displayed using a structured card format, which includes:
  • <img> for profile picture
  • <h3> for the name
  • <p> for the role and description
• Grid Layout :
  Team members are presented using a container div, typically styled with CSS Grid or Flexbox for even spacing and responsive adaptation.

CSS Styling :

• Card Styling :
  Each member card uses Box shadow, Border-radius, and Background-color to create soft, elevated cards. Spacing is handled via margin and padding.
• Hover Effects :
  Hover transitions applied to cards and icons using transition: all 0.3s ease; for interactive feel.
• Typography :
  Clear heading hierarchy is maintained with scalable font sizes. Font families are consistent with the site’s theme for cohesion.
• Responsive Layout :
  CSS media queries are used to convert the multi-column team layout into a single-column stack on mobile devices, ensuring usability across screens.

Accessibility

Accessibility practices included:

• Semantic Structure :
  The layout uses semantic tags such as <section>, <article>, and <figure> to improve screen reader interpretation and enhance document structure.
• Profile Cards with ALT Text :
  All team member images include descriptive alt attributes to provide context for visually impaired users (e.g., alt="Team member - John Doe" ).
• Keyboard Navigation :
  All navigation links and interactive elements are fully accessible using keyboard tab navigation.
• Readable Layout :
  Text sections are clearly segmented with adequate spacing and font sizing to support users with cognitive and reading difficulties.
• High Contrast & Font Legibility :
  Backgrounds and font colors were chosen with sufficient contrast ratios to comply with WCAG 2.1 AA standards, enhancing readability.

Validation & Page Links

Validation Page | View Team Page

Content Page

Technical Description

Key HTML and CSS techniques used :

HTML Structure :

• Structured Sections :
  The content is divided into thematic sections using <section> and <article> tags. Each segment includes a heading ( h2 or h3 ) and relevant content blocks.
• Images and Media :
  Used <img> for visual aids, placed with descriptive alt attributes for accessibility. Also includes icons and multimedia references to support learning.
• Lists and Highlights :
  Bullet points ( <ul> / <li>) are used for listing facts or tips. Emphasized content is wrapped in <strong> or <em> tags.
• Navigation :
  An internal sidebar or anchor list helps users quickly navigate to different content sections via <a href="#section-id">

CSS Styling :

• Content Presentation :
  A card-like layout is used to separate content areas, with generous padding, soft box-shadow, and color to distinguish them visually.
• Typography and Colors :
  Font styles emphasize clarity and contrast. Headers are styled with consistent weights, spacing, and color to distinguish them visually.
• Grid and Flex Layouts :
  For image grids or content alignment, CSS Grid or Flexbox is used, with gaps and auto-fit columns that adapt based on screen size.
• Call-to-Action Styling :
  Prominent buttons and quotes are styled with gradient backgrounds, large padding, and hover feedback for user engagement.
• Responsive Design :
  Media queries adjust the column count, font sizes, and image scaling for mobile screens. Content is readable and touch-friendly on all devices.

Accessibility

Accessibility practices included :

• Alt Text for Visuals :
  All images used in content sections include descriptive alt attributes to ensure screen readers convey meaningful context.
• Anchor Navigation :
  Internal section links are accessible and enhance usability for screen reader users and keyboard navigation.
• Semantic Markup :
  Sections are defined using <section>, <h2>, <p>, and other structural tags to build a clear document outline.
• Responsive Layout :
  The page adjusts to all screen sizes and includes touch-friendly spacing and font scaling, improving usability for mobile and tablet users.
• WCAG-compliant Contrast :
  Text elements and backgrounds maintain strong color contrast for visual clarity, adhering to accessibility guidelines.
• Keyboard Navigation Support :
  Users can navigate through the entire page, including interactive content, using only a keyboard.
• Consistent Heading Hierarchy :
  Logical heading levels ( <h1>, <h2>, etc.) are used to support screen readers and improve document navigation.

Validation & Page Links

Validation Page | View Content Page

Challenges & Lessons Learned

Challenges Faced

• Form Validation & Styling Consistency: Ensuring that form elements (radio buttons, select menus, and textareas) rendered consistently across all browsers was challenging.
  

  ➤ Solved by using CSS resets and form-specific styling to normalize across browsers.

• Submit Button Alignment: The button alignment was inconsistent in different viewport widths.
  

  ➤ Fixed using Flexbox alignment techniques and spacing utilities.

• Image Scaling & Cropping: Team member images were stretching or clipping incorrectly.
  

  ➤ Addressed with object-fit: cover and aspect-ratio controls.

• Inconsistent Card Heights: Different content lengths caused cards to have inconsistent height.
  

  ➤ Fixed using Flexbox column alignment and padding adjustments.

Lessons Learned

• Grouping inputs semantically using <fieldset> and <label> helps both with styling and screen reader navigation.
• CSS Grid simplifies card-based layouts across device widths.
• Standardizing image dimensions avoids layout shifts.
• Testing across browsers and devices catches layout bugs early.

Compliance

The web pages I developed — Feedback, Team, and Content (ST3) — comply with the Janet web publishing standards. The implementation emphasizes accessibility, data privacy, semantic structure, and ethical content sharing.

• Accessibility & WCAG 2.1 Alignment:
  

  Semantic HTML elements, meaningful alt text, logical tab order, and responsive layouts ensure the site is accessible to users with varying abilities and meets WCAG 2.1 Level AA criteria.

• Data Protection & GDPR Compliance:
  

  The feedback form collects no personal data beyond anonymous input and does not store or transmit sensitive user information, adhering to GDPR guidelines.

• Educational & Responsible Content:
  

  All page content — including team introductions, user feedback mechanisms, and climate-related educational material — supports academic goals and aligns with Janet's Acceptable Use Policy.

• Secure Code Practices:
  

  No harmful scripts, insecure APIs, or external tracking are used. All JavaScript and form logic runs locally or follows best practice for frontend safety.

• Licensed Resources:
  

  All images, fonts, icons, and stylesheets are sourced through verified and license-compliant platforms like Google Fonts, Font Awesome, and royalty-free image providers.

References