Problem 1: Personal Portfolio Website with Accessible Contact Form

Task:

Multi-Page Structure: Create a personal portfolio with at least three pages (e.g., Home, About, Contact). Use semantic HTML elements like <header>, <nav>, <main>, and <footer> consistently across all pages.
Navigation & Linking: Use relative paths to link pages together and organize your project into appropriate folders (e.g., an images/ folder and a css/ folder).
Accessible Contact Form: On the Contact page, add an HTML form that collects user information (name, email, message). Ensure that each form control has a corresponding <label>, required attributes, and ARIA attributes (e.g., aria-required="true") where applicable.
CSS Styling: Apply an external stylesheet to style the pages. Use selectors (element, class, ID) to create a cohesive design and maintain consistency in the navigation and layout.

Expected Outcome:

A fully functional multi-page portfolio that demonstrates semantic HTML structure, proper internal linking, an accessible and validated contact form, and consistent, attractive styling via CSS.

Problem 2: Blog Homepage with Article Listing Table and Accessible Navigation

Task:

Semantic Structure: Build a blog homepage using semantic HTML elements including <header>, <nav>, <main>, and <footer>.
Article Table: Create an HTML table (using <table>, <thead>, <tbody>, and optionally <tfoot>) to display a list of articles with columns such as Title, Publication Date, and a Short Summary.
Accessible Navigation: Ensure your navigation menu is accessible by including ARIA roles (e.g., role="navigation") and making sure keyboard focus order is logical.
CSS Enhancements: Style the table and navigation menu using CSS. Experiment with pseudo-classes (like :hover) and selectors to enhance usability and visual appeal.

Expected Outcome:

A blog homepage that clearly organizes articles in a data table and provides an accessible navigation menu, all presented with thoughtful CSS styling.

Problem 3: Product Catalog with Order Form and Pricing Table

Task:

Product Table: Develop a product catalog page that uses an HTML table to list products. The table should include columns such as Product Name, Price, and Availability. Use semantic tags like <thead>, <tbody>, and <tfoot> (if you wish to display totals or summary data).
Order Form: Below the table, add an HTML form that lets users select a product (e.g., via a dropdown or radio buttons) and specify a quantity. Ensure all form elements have corresponding <label> elements and include basic HTML5 validation attributes (such as required).
Accessibility & ARIA: Enhance the form with ARIA attributes where necessary (for example, aria-label on form controls) to improve accessibility.
CSS Styling: Use an external stylesheet to style both the table and form. Apply CSS selectors to achieve a visually appealing, responsive design.

Expected Outcome:

A product catalog page that integrates a well-structured product table and an accessible order form, all presented in a cohesive design using semantic HTML and CSS.

Problem 4: Restaurant Website: Menu Display and Reservation System

Task:

Menu Page: Create a page for a restaurant’s menu that displays dishes using an HTML table. The table should include columns like Dish Name, Ingredients, Price, and Spiciness. Use semantic HTML tags such as <caption>, <thead>, <tbody>, and <tfoot> if needed.
Reservation Page: Build a separate reservation page that features an HTML form for booking a table. The form should include inputs for name, email, number of guests, and meal preference (using radio buttons or a select menu). Use proper <label> tags and ARIA attributes for enhanced accessibility.
Consistent Navigation: Implement a navigation menu (using <nav>) on both pages with relative links to ensure smooth movement between pages.
CSS Design: Style both pages using CSS to maintain a consistent visual theme and improve the user experience.

Expected Outcome:

A mini restaurant website composed of at least two pages—one showcasing a semantic table-based menu and the other providing an accessible reservation form—both linked with consistent navigation and enhanced by CSS styling.

Problem 5: Event Schedule and Registration with Enhanced Accessibility

Task:

Schedule Table: Create an event schedule page that presents event details (e.g., Date, Time, Location, Activity) in an HTML table. Use semantic tags such as <thead>, <tbody>, and <tfoot> (for summaries or totals if desired).
Registration Form: Develop a separate registration page that contains an HTML form for event sign-ups. Ensure the form is accessible by using proper <label> tags, required attributes, and ARIA attributes (like aria-required and aria-label) where needed.
Semantic and Accessible Navigation: Use semantic HTML elements (such as <header>, <nav>, <main>, <footer>) on both pages. Include ARIA landmarks and ensure keyboard navigation is optimized.
CSS Styling: Apply CSS (external stylesheet) to style the table, form, and overall layout, ensuring that the design is both visually appealing and accessible.

Expected Outcome:

A two-page event website where one page displays an organized event schedule in a table and the other offers an accessible registration form, complete with semantic structure, proper navigation, and professional CSS styling.

Problem 6: Business Dashboard with Employee Directory and Data Submission Form

Task:

Employee Directory Table: Construct a dashboard page that displays an employee directory using an HTML table. Include columns such as Employee Name, Department, and Email. Use semantic elements like <thead>, <tbody>, and optionally <tfoot> to clearly structure the data.
Submission Form: Add an accessible form on the same page (or on a separate “Add Employee” page) that allows users to submit new employee data. The form must include proper <label> elements, validation attributes, and ARIA roles (e.g., aria-label, aria-required).
Advanced CSS Styling: Use advanced CSS selectors (such as descendant selectors, child combinators, and pseudo-classes) to style the dashboard. Incorporate responsive design techniques so that the dashboard is user-friendly on different devices.
Semantic Layout & Navigation: Structure the dashboard using semantic HTML elements like <header>, <nav>, <main>, <aside>, and <footer>. Ensure that any navigation links or controls are accessible.

Expected Outcome:

A comprehensive business dashboard that features a semantically structured employee directory table and an accessible data submission form, enhanced by advanced CSS styling and responsive design.

Review Week 2 Problems (Advance)