Lab 2: Building Your First Web Page

Introduction

In this lab, you’ll build a simple multi-page personal website using semantic HTML. Then, you’ll use an AI assistant to automatically detect accessibility issues, such as missing alt text, missing form labels, or incorrect structural elements, and improve your pages accordingly. You will document the issues AI found and describe the changes you implemented.

This lab introduces core skills that front-end developers use every day: structuring content meaningfully, applying accessibility best practices, and using modern AI tools to accelerate debugging and review.

Learning Objectives

By the end of this lab, you will be able to:

Create a multi-page site using semantic HTML elements (header, nav, main, section, article, footer, etc.).
Apply accessibility fundamentals, including meaningful alt text, proper label–input associations, and logical heading structure.
Use AI to detect accessibility gaps in HTML files.
Document accessibility improvements and justify your choices.
Organize a small static site with proper file structure and links.

Getting Started

Prerequisites

Before beginning this lab, ensure you have:

Basic understanding of HTML tags and attributes.
A code editor (VS Code recommended).
A modern web browser.

Setup Instructions

Create a new folder for this lab:
```
lab2_building-your-first-webpage/
```
Inside that folder, create:
```
index.html
about.html
contact.html
```
Open the folder in VS Code or your preferred editor.

Lab Structure

This lab should include the following files:

README.md — Lab instructions (this file)
index.html — Your home page
about.html — A page describing you
contact.html — A simple contact page with a form
accessibility_report.md — A document summarizing issues found by AI and your fixes

Exercise Overview

You will:

Build a three-page personal site using semantic HTML.
Add images, navigation, and a basic form.
Run your HTML through an AI assistant (e.g., ChatGPT, GitHub Copilot Chat, etc.) to identify missing or incorrect accessibility elements.
Fix all identified issues.
Document your changes in accessibility_report.md.

Total time expected: ~1 hour.

How to Work Through the Lab

1. Create the Semantic Structure

For each of the three pages (index.html, about.html, contact.html):

Use:
- <header> for the site title
- <nav> with links to all three pages
- <main> for page content
- <footer> with copyright text

index.html requirements

A hero section using <section>.
An image of yourself or a placeholder (e.g., via https://placehold.co).
A brief welcome message.
Appropriate heading hierarchy (h1 → h2).

about.html requirements

Two <article> elements describing:
- Your background
- Your interests or goals
At least one image.
List elements (<ul> or <ol>).

contact.html requirements

A contact form containing:
- <label> + <input type="text"> for “Name”
- <label> + <input type="email"> for “Email”
- <label> + <textarea> for “Message”
- A submit button
Labels must be properly associated using for and id.

2. Run an AI Accessibility Review (10 minutes)

Provide your HTML source to an AI tool and ask:

“Identify any accessibility problems in this HTML. Look for missing alt text, missing form labels, incorrect heading structure, unclear link text, or improper semantic usage. Provide specific recommended fixes.”

Save the AI feedback for reference.

3. Apply Fixes

Implement the AI’s recommendations. Typical fixes may include:

Adding meaningful alt text (alt="Portrait of Benjamin smiling" instead of "image").
Ensuring headings follow a logical order (no jumping from <h1> to <h4>).
Fixing label/input associations.
Adjusting structural semantics (e.g., replacing <div> with <section>).
Improving link accessibility (“Click here” → “View my projects”).

4. Document Your Fixes

Create a new file:

accessibility_report.md

Include:

List of issues AI found
Which issues you fixed
Before/after examples for at least three changes
A short reflection (4–6 sentences) on how AI helped improve your code

Example format:

## Issue 1: Missing alt text on hero image
- AI detected missing alt attribute.
- Before: <img src="me.jpg">
- After: <img src="me.jpg" alt="Benjamin speaking at a conference">

## Issue 2: Incorrect heading structure
...

5. Polish & Validate (5 minutes)

Open all three pages in your browser.
Click through navigation.
Verify layout and content flow logically.
Optionally run your pages through:
- W3C HTML Validator
- Chrome Lighthouse (Accessibility tab)

Tips for Success

Meaningful alt text: describe purpose, not appearance (unless appearance is content).
One <h1> per page, representing the page’s main purpose.
Use semantic elements whenever possible—they improve accessibility and SEO.
Avoid div-itis: if there’s a semantic element, use it.
AI won’t fix the code for you, but it will help you spot issues faster.

Additional Resources

MDN Web Docs — Semantic HTML
W3C Web Accessibility Initiative — Alt Text Guide
WebAIM — Forms and Labels
Lighthouse Accessibility Audits

What to Expect

Expected Deliverables

A working 3-page website with:
- Correct semantic structure
- Proper accessibility basics
A written accessibility report summarizing AI-assisted improvements.

Common Issues

Issue	Cause	Fix
Images flagged as decorative	Missing `alt`	Add meaningful alt text
AI flags heading misuse	Skipped levels	Adjust hierarchy
Form not accessible	Missing labels	Add proper `for`/`id`
Links unclear	Vague link text	Replace with descriptive labels

Lab Workflow Summary

Build page skeletons using semantic HTML
Add content, images, navigation, and a form
Run accessibility review using an AI assistant
Apply all suggested accessibility fixes
Document issues + corrections
Validate pages in browser