Practice 1 — HTML/CSS with LLM Assistance

Building a Product Review Interface

Practice
HTML
CSS
LLM
AI-Assisted Development
Auteur
Affiliations

Emmanuel BRUNO

Université de Toulon

LIS UMR CNRS 7020

Date de publication

2025-10-12

Résumé

Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows.

Session Overview

Project: Read the description of the “Multi-Source Product Review Aggregator” Project. Prerequisites: LLM Quick Start lecture, HTML/CSS Essentials lecture, VS Code + GitHub Copilot (or ChatGPT). Objective: Create static HTML/CSS prototypes for the review aggregator interface using LLM-assisted development

Learning Goals

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

  • ✅ Apply the CRISP framework from LLM Quick Start to generate semantic HTML and accessible CSS
  • ✅ Use verification checklists from HTML/CSS Essentials to validate AI-generated code
  • ✅ Build responsive layouts with Tailwind CSS using mobile-first approach
  • ✅ Catch common AI mistakes (semantic HTML errors, accessibility issues, invalid Tailwind classes)
  • ✅ Iterate on prompts to refine generated code using feedback loops
  • ✅ Create production-ready prototypes that will later be converted to React components

This practice directly applies what you learned in today’s lectures!

Avertissement

All prompts and code snippets in this practice are templates. You must customize them with your own product/review data and project details.

Quick Reference from Today’s Lectures

Before starting, review these key concepts:

From LLM Quick Start:

  • 🎯 CRISP Framework: Context, Role, Input, Steps, Parameters
  • ✅ Verification Workflow: Generate → Test → Compare → Fix → Document
  • 🚫 AI Red Flags: Invalid classes, missing accessibility, div soup

From HTML/CSS Essentials:

  • 📋 Semantic HTML Checklist: Use <article>, <section>, <header>, not just <div>
  • ♿ Accessibility Checklist: Alt text, ARIA labels, color contrast, keyboard nav
  • 🎨 Tailwind Best Practices: Mobile-first, utility classes, responsive design
  • ⚠️ Common AI Mistakes: Non-existent classes, wrong semantic elements, poor contrast

Keep these lectures open as reference while you work!

Context: From Minimal App to Review Aggregator

Your mission: Create static HTML prototypes for the Multi-Source Product Review Aggregator project. These pages will demonstrate the UI/UX before being converted to React components in later sessions.

Why start with static HTML?

  1. Focus on fundamentals — Semantic HTML, CSS, accessibility first
  2. Faster iteration — No build tools, just open in browser
  3. Better understanding — See how Tailwind works before React abstracts it
  4. Client approval — Show designs before investing in interactivity
  5. Progressive enhancement — Build from solid foundation

Part 1: Project Setup

Important

If it takes too long to set up, ask for help or do it home with a wired connection The goal is to spend most of your time on LLM-assisted HTML/CSS, not environment setup.

For this practice, you will only need a web browser and VS Code with GitHub Copilot (or ChatGPT without VS Code). No Node.js or backend is required yet.

Step 1.1: Create Project Structure

Create prototypes within the fullstack-minimal-app project:

See fullstack-minimal-app starter code.

Use the README instructions, set up the project locally and test it with Docker or local Node.js installation.

Then create a prototypes folder inside frontend/public with the following structure:

fullstack-minimal-app/
├── frontend/
│   └── public/
│       └── prototypes/
│           ├── index.html           # Product listing page
│           ├── product-detail.html  # Product detail with reviews
│           ├── reviews.html         # Full reviews page (optional)
│           ├── css/
│           │   └── (Tailwind via CDN)
│           └── images/
│               └── (placeholder images)
├── backend/
└── db/

Part 2: LLM-Assisted HTML Generation

Exercise 2.1: Generate Product Detail Page with Review Section

🎯 Apply the CRISP Framework from LLM Quick Start!

Use GitHub Copilot Chat or ChatGPT to generate the HTML structure.

SAMPLE CRISP Prompt Template (PLEASE MODIFY/IMPROVE/TEST):

Test and refine this prompt to fit your needs, compare the result with simpler prompts, and iterate on the output.

## Context
Product review aggregator web application. Creating static HTML/CSS prototype before implementing React.

## Role
You are an expert web developer specializing in semantic HTML5, accessibility (WCAG 2.1), and Tailwind CSS.

## Input
Product data structure:
- Product name: "USB-C Fast Charger 30W"
- Price: $19.99
- Description: "Fast charging USB-C charger with intelligent power delivery"
- Image: Placeholder (use https://placehold.co/600x400)

Review data structure (for mockup):
- Review ID, source (Amazon/BestBuy), author, rating (1-5), title, body, date

## Steps
Create a complete HTML page `product-detail.html` with:
1. Semantic HTML5 structure (header, nav, main, article, section, footer)
2. Product information section (image, name, price, description)
3. Review statistics section (overall rating, total count)
4. Review list section (3-5 sample reviews)
5. Star rating visualization (CSS only, no JavaScript)
6. Responsive layout (mobile-first)

## Parameters
**MUST follow these constraints:**
- Tailwind CSS via CDN (already loaded in template)
- ONLY semantic HTML elements (article, section, header, footer, time, NOT generic divs)
- ARIA labels for all ratings (e.g., `aria-label="Rated 4.5 out of 5 stars"`)
- Mobile-first responsive design (base styles for mobile, md: for tablet, lg: for desktop)
- No JavaScript (static HTML only)
- Include sample/mock data directly in HTML
- Add HTML comments explaining major sections

**Output format:**
- Complete HTML file ready to open in browser
- Valid HTML5 (must pass W3C validator)
- Accessible (Lighthouse score 95+)
- Professional appearance matching modern e-commerce sites
In VS Code with Copilot
  1. Create file product-detail.html
  2. Open Copilot Chat (Ctrl+Shift+I or Cmd+Shift+I)
  3. Paste the CRISP prompt above
  4. Review before accepting: Check for red flags from lecture
  5. Open in browser: Right-click file → “Open with Live Server” (or double-click)
⚠️ Verification Checklist (from HTML/CSS Essentials)

Before moving on, verify the AI output using this checklist:

Semantic HTML: - [ ] Uses <article> for review cards (not <div class="review">) - [ ] Uses <time> element for dates with datetime attribute - [ ] Uses <header>, <main>, <section>, <footer> appropriately - [ ] Product info is in semantic structure (not just styled divs)

Accessibility: - [ ] All <img> have meaningful alt text - [ ] Star ratings have aria-label="Rated X out of 5 stars" - [ ] Color contrast meets WCAG AA (4.5:1 for body text) - [ ] Can navigate with keyboard (Tab key)

Tailwind CSS: - [ ] All classes exist in Tailwind docs (check tailwindcss.com) - [ ] Mobile-first approach (base classes, then md:, lg:) - [ ] Responsive breakpoints work (test in browser DevTools) - [ ] No custom CSS (only Tailwind utilities)

Common AI Mistakes to Fix: - ❌ <div class="review"> → ✅ <article class="review"> - ❌ Missing ARIA labels on ratings → ✅ Add aria-label - ❌ text-gray-300 (low contrast) → ✅ text-gray-700 or darker - ❌ Non-existent class like padding-4 → ✅ p-4 - ❌ Desktop-first (lg:w-full md:w-1/2) → ✅ Mobile-first (w-full md:w-1/2)

If you find issues, create a follow-up prompt to fix them!

Exercise 2.2: Generate Review Statistics Card

🎯 Practice the CRISP framework with a focused component.

Create a focused component for displaying aggregate statistics.

CRISP Prompt:

## Context
Static HTML section for product review aggregator showing aggregate statistics.
This is part of Practice 1 after HTML/CSS Essentials lecture.

## Role
You are an expert in data visualization with HTML/CSS, specializing in accessible design.

## Input
Mock aggregate data to display:
- Overall average: 4.2/5.0
- Total reviews: 125
- Source breakdown:
  - Amazon: 4.5 avg, 80 reviews
  - BestBuy: 3.8 avg, 45 reviews
- Rating histogram: 5★:50, 4★:40, 3★:20, 2★:10, 1★:5

## Steps
Create an HTML section with Tailwind CSS displaying:
1. Large prominent overall rating (4.2/5.0) with visual star representation
2. Total review count below rating
3. Per-source breakdown as a clean table or list
4. Star rating histogram with CSS bars (using Tailwind width utilities)
5. Visual star representations using Unicode stars (★/☆) with ARIA labels

## Parameters
**MUST follow:**
- Pure HTML + Tailwind CSS (no SVG, no JavaScript, no external libraries)
- Semantic HTML (`<section>`, `<table>` or `<dl>` for data)
- ARIA labels for all visual ratings
- Mobile-responsive (stack vertically on mobile, horizontal on desktop using `flex-col md:flex-row`)
- Color-blind friendly colors (use Tailwind's amber for ratings, blue/green for sources)
- Histogram bars proportional to data (use `w-[50%]`, `w-[40%]`, etc.)

**Output format:**
- HTML `<section>` element with complete internal structure
- Can be copied directly into product-detail.html
- Include explanatory HTML comments for each subsection
🎓 What You’re Learning

This exercise practices: - Breaking down complex components into structured prompts - Specifying visual requirements precisely (bars, proportions, layout) - Enforcing accessibility constraints (ARIA labels, semantic elements) - Using Tailwind utilities for responsive design without custom CSS

Notice how the CRISP framework helps you think through requirements systematically!

⚠️ Verify Statistics Component

Apply the verification workflow from today’s lectures:

1. Generate (done with CRISP prompt)
2. Test in browser: - [ ] Open in browser, check visual appearance - [ ] Test mobile view (375px) - should stack vertically - [ ] Test desktop view (1024px+) - should show side-by-side

3. Compare against requirements: - [ ] Overall rating is prominent and large - [ ] Histogram bars are proportional (50 reviews = 50% width, etc.) - [ ] Colors are distinguishable (not just relying on color alone) - [ ] All numbers match the input data

4. Fix common AI mistakes: - ❌ Bars not proportional → ✅ Use w-[50%], w-[40%], not w-1/2, w-2/5 - ❌ Missing ARIA labels → ✅ Add aria-label="4.2 out of 5 stars" - ❌ Poor mobile layout → ✅ Use flex-col md:flex-row - ❌ Low contrast text → ✅ Use text-gray-900 not text-gray-400

5. Document what works and what needed fixing for your reflection!

Exercise 2.3: Generate Individual Review Card

Create the HTML structure for a single review card.

Prompt template:

**Context**: Single review card component for e-commerce product review display.

**Input**: Sample review data:
- Author: "Sarah Johnson"
- Source: "Amazon"
- Rating: 5/5
- Date: "September 15, 2025"
- Title: "Excellent quality!"
- Body: "This USB-C charger works perfectly with my laptop. Fast charging and solid build quality. Highly recommended for MacBook users."

**Task**: Create an HTML article element representing one review with:
1. Review metadata header (author, source, date)
2. Star rating display (5 filled stars)
3. Review title (bold, prominent)
4. Review body text
5. Helpful vote buttons (mockup only, no JavaScript)
6. Source badge (colored pill showing "Amazon")

**Constraints**:
- Use HTML5 `<article>` element
- Tailwind CSS for styling
- Accessible (ARIA labels for rating)
- Mobile-responsive card layout
- Include semantic time element for date

**Output Format**:
- Single `<article>` element
- Copy-pasteable into a parent container
- Includes 2-3 variations (different ratings, sources)

**Success Criteria**:
- Card has clear visual hierarchy
- Rating immediately visible
- Source badge distinguished by color
- Proper spacing and typography
- Works well in a vertical list

Part 3: Browser Testing & Refinement

Exercise 3.1: Accessibility Audit

Test keyboard navigation and screen reader compatibility:

  1. Keyboard Navigation Test:

    - Tab through all interactive elements
- Shift+Tab to navigate backwards
- Enter/Space to activate buttons
- Arrow keys for any custom controls

    What to check:

  2. HTML Validation:

    • Go to: https://validator.w3.org/#validate_by_input
    • Copy your HTML and paste
    • Fix any errors or warnings

  3. Lighthouse Audit:

    # In Chrome DevTools (F12)
# 1. Open Lighthouse tab
# 2. Select "Accessibility" category only (faster)
# 3. Click "Analyze page load"
# 4. Target: 95+ score

Exercise 3.3: Cross-Browser Testing

Test in multiple browsers to catch inconsistencies:

# 1. Open each browser and load your page
# 2. Check for layout issues, console errors, and performance
# 3. Use browser dev tools to inspect elements and debug
Browser Version Test Focus
Chrome Latest Tailwind rendering, DevTools
Firefox Latest Accessibility features, fonts
Safari Latest Mobile viewport, CSS differences
Edge Latest Windows users, enterprise

Quick test checklist: - [ ] Page loads without errors - [ ] Tailwind classes render correctly - [ ] Star ratings display properly - [ ] Unicode characters (★) show correctly - [ ] Layout doesn’t break

Part 4: Iteration & Polish

Exercise 4.1: Prompt Refinement Workshop

🎯 Practice iterative prompting from LLM Quick Start!

Take your review card and practice the feedback loop pattern.

Scenario: Your review cards look cluttered on mobile.

Iteration 1 — Identify the problem (use CRISP format):

## Context
HTML review card with Tailwind CSS appears cluttered on mobile (375px width).

## Role
You are a UX expert specializing in mobile-first responsive design.

## Input
Current issue observations:
- Text too small to read comfortably (using text-sm)
- Star rating cramped next to author name on same line
- Source badge overlaps with date on mobile
- Card padding feels tight (using p-4)
- Overall feels cluttered and hard to scan

## Steps
Analyze the current review card HTML and suggest specific improvements:
1. Identify which Tailwind classes are causing mobile issues
2. Recommend mobile-first class changes
3. Suggest layout restructuring for better mobile readability
4. Ensure changes maintain desktop appearance

## Parameters
**Constraints:**
- Only modify Tailwind classes (no HTML structure changes)
- Maintain accessibility (don't remove ARIA labels)
- Keep semantic HTML (`<article>` structure)
- Use Tailwind responsive prefixes (md:, lg:) correctly

**Output format:**
- List of specific Tailwind class changes
- Before/after examples for each change
- Explanation of why each change improves mobile UX

Iteration 2 — Apply specific fixes (refined CRISP prompt):

## Context
Review card needs mobile layout improvements based on previous analysis.

## Role
Expert front-end developer implementing mobile-first responsive design fixes.

## Input
**Current HTML:** [Paste your review card article element]

**Specific changes to apply:**
- Increase text size: text-sm → text-base for body text
- More padding: p-4 → p-6 on mobile for better tap targets
- Stack metadata: Use flex-col on mobile, flex-row md:flex-row on desktop
- Star rating on own line: Use w-full mb-2 on mobile
- Better spacing: space-y-4 between major sections

## Steps
Rewrite the review card `<article>` with these improvements:
1. Update all text size classes to be larger on mobile
2. Add mobile-first padding (p-6 base, p-4 on lg: if needed for desktop)
3. Restructure metadata layout to stack on mobile
4. Add proper spacing utilities (space-y-4, mb-2, etc.)
5. Ensure responsive classes use mobile-first pattern

## Parameters
- Maintain semantic HTML structure
- Keep all ARIA labels and accessibility features
- Ensure desktop view still looks good (test at 1024px+)
- Verify all Tailwind classes exist in docs

**Output:** Complete updated `<article>` element ready to copy-paste.
🎓 Prompt Engineering Principle (from LLM Quick Start)

Specific, narrow prompts > Vague, broad prompts

This is the iterative refinement pattern: 1. First prompt: Generate initial solution 2. Test: Find specific problems 3. Second prompt: Fix those specific problems (not “make it better”) 4. Repeat: Until satisfied

Instead of: - ❌ “make it better” - ❌ “fix the mobile view” - ❌ “improve the design”

Use: - ✅ “increase mobile text size from text-sm to text-base” - ✅ “stack star rating below author name on screens < 640px using flex-col md:flex-row” - ✅ “change card padding from p-4 to p-6 on mobile for better tap targets (min 44x44px)”

Each iteration should be measurably better than the last!

Exercise 4.2: Self-Review with LLM

🎯 Use AI as a code reviewer (LLM Quick Start technique!)

Ask the LLM to critique your HTML using a structured review prompt:

## Context
I created static HTML for a product review aggregator in Practice 1.
I want to verify it meets professional web development standards.

## Role
You are a senior web developer conducting a thorough code review.
Focus on teaching web fundamentals, not just listing issues.

## Input
[Paste your complete product-detail.html] or reference it with #product-detail.html

## Steps
Review this HTML for:
1. **Semantic HTML**: Are elements appropriate? (article vs div, time element for dates, etc.)
2. **Accessibility**: WCAG 2.1 AA compliance (ARIA labels, contrast ratios, semantic structure, keyboard nav)
3. **Tailwind CSS**: Best practices (mobile-first, proper utility usage, responsive breakpoints, no non-existent classes)
4. **Responsive design**: Mobile (375px), tablet (768px), desktop (1024px+) all work properly
5. **Potential issues**: Missing alt text, invalid HTML, broken structure, poor UX

## Parameters
**Output format:**
- Issues organized by severity:
  - 🔴 **High:** Breaks functionality or accessibility (must fix)
  - 🟡 **Medium:** Suboptimal but works (should fix)
  - 🟢 **Low:** Minor improvements (nice to have)
- For each issue:
  - **What:** Specific problem found
  - **Why:** Why it matters (teaching moment)
  - **Fix:** Exact code to fix it
- **Positive feedback:** What's done well (celebrate wins!)

**Tone:** Critical but constructive. Focus on learning.
What to Do With the Review
  1. Prioritize fixes: Start with 🔴 high-severity issues
  2. Learn from each: Understand why it’s an issue, not just what to fix
  3. Create fix prompts: Use CRISP framework to generate fixes
  4. Document your learning: Note patterns for your reflection

This is how professional developers use AI: as a knowledgeable colleague who reviews their work!

Extension Challenges (Optional)

For students who finish early or want extra practice.

  • Improve the visual design using Tailwind utilities (shadows, hover effects, transitions)
  • Add a mock “Write a Review” form (static HTML only, no functionality)
  • Add others components/pages, that would be part of the full project. for instance, create a product listing page (index.html) showing multiple products with summary review stats.

Resources

Official Documentation

Tools

Réutilisation