Lab | Practical Exercises with AI UI Tools

Requirements

• Fork this repo
• Clone this repo

Submission

• Upon completion, run the following commands:

git add .
git commit -m "done"
git push origin [master/main]

• Create a Pull Request and submit your assignment.

Exercise 1: AI‑Generated Landing Page

Goal: Create a simple landing page using Copilot / ChatGPT / Lovable suggestions.

You can also add Copilot to your VSCode environment.

Requirements

• Header with navigation
• Hero section
• Three feature cards
• Footer

Steps

1. Create index.html
2. Ask Copilot for a layout
3. Modify styling manually
4. Improve responsiveness

Discussion

• What parts were helpful?
• What required manual fixes?

Exercise 2: AI‑Assisted CSS

Goal: Use AI to generate CSS for components.

Use AI to generate CSS for components.

Tasks

Generate CSS for:

• card layout
• responsive grid
• button hover animation

Example prompt comment:

/* Create a responsive card layout with flexbox */

Evaluate:

• readability
• performance
• maintainability

Exercise 3: Retrospective Use

Goal: Use a lab that you have done before to learn how to diagnose and fix issues.

Ask AI:

• why layout is broken
• attempt to fix it

Outcome: Learn diagnostic prompting.

Final Practice - Defend Your Website

At the end of the day, you must present your work and defend it in a 5‑minute presentation.

You may present in Spanish or English.

Your presentation must include a demonstration of the website.

Goal

Learn how to present and defend your website in no more than 5 minutes.

Wrap‑Up Discussion

Questions:

• When should developers rely on AI tools?
• What risks exist in AI‑generated code?
• Why is client‑server architecture essential for web apps?

Key takeaways

• AI accelerates UI development but requires validation.
• Web apps depend on client‑server communication.
• Understanding architecture is essential before using advanced frameworks.