Reading AI-Generated Code

--- theme: seriph title: Reading AI-Generated Code info: "Module A-READ-001 - Read HTML/CSS/JS that AI produced, identify unknowns, ask AI to explain specific pieces" --- # Reading AI-Generated Code --- # The Situation You asked AI: "Create a profile card with my name, photo, and a short bio." AI gave you 40 lines of HTML and CSS. **Now what?** You need to **read it**, **understand it**, and **know what to ask about**. --- # Why This Skill Matters - AI writes code fast, but **you** are responsible for it - If you can't read it, you can't fix it when it breaks - If you can't explain what it does, you haven't learned anything - Employers won't ask "can AI write code?" - they'll ask "can **you** explain this code?" --- # The Workflow ``` 1. READ - go through the code line by line 2. FIND - mark the parts you don't recognize 3. ASK - ask AI to explain JUST those parts 4. VERIFY - change something to prove you understand ``` We'll practice this workflow three times today: HTML, CSS, then both together. --- layout: center --- # Round 1: Reading HTML --- # AI Gave You This HTML ```html <header> <nav aria-label="Main navigation"> <ul> <li><a href="#about">About</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main> <section id="about"> <h1>Jane Smith</h1> <p>Business student at Babson College.</p> </section> </main> <footer> <p>&copy; 2026 Jane Smith</p> </footer> ``` --- # Step 1: READ - What Do You Recognize? Things you probably know: - `<ul>`, `<li>`, `<a href="...">` - a list of links - `<h1>`, `<p>` - heading and paragraph - `<a href="#about">` - links to a section on the same page Things you might **not** know: - `<header>`, `<nav>`, `<main>`, `<section>`, `<footer>` - what are these? - `aria-label="Main navigation"` - what does this do? - `&copy;` - what is that? --- # Step 2: FIND - Circle the Unknowns Your unknowns might be: 1. **`<header>`** - Is this different from just using `<div>`? 2. **`<nav>`** - Why not just put the links in a `<div>`? 3. **`<main>`** - Does this actually do anything visible? 4. **`aria-label`** - What is `aria`? 5. **`&copy;`** - How does this become the copyright symbol? --- # Step 3: ASK - The Right Way Bad prompt: > "Explain this HTML code." (AI will explain every tag including `<p>` and `<a>` - things you already know.) Good prompt: > "I understand basic HTML tags like `<p>`, `<a>`, and `<ul>`. In this code, I don't understand what `<header>`, `<nav>`, `<main>`, and `<footer>` do that's different from using a `<div>`. Also, what does `aria-label` do? Explain just those parts." **Tell AI what you already know so it skips the basics.** --- # What AI Would Tell You - `<header>`, `<nav>`, `<main>`, `<footer>` are **semantic tags** - they work exactly like `<div>` visually, but they tell the browser (and screen readers) **what role** that section plays - `aria-label` gives a name to an element for screen readers - a visually impaired user's software would announce "Main navigation" when it reaches the `<nav>` - `&copy;` is an **HTML entity** - a special code that displays as &copy; **Now you know.** These aren't magic. They're labels for meaning. --- # Step 4: VERIFY - Prove You Understand Save the HTML from the previous slide as `reading-html.html`. Try this yourself: 1. Change `<header>` to `<div>` - does the page look different? (No.) 2. Remove `aria-label` - does anything visible change? (No.) 3. So why keep them? (Accessibility + code readability.) If you can explain **why** the semantic tags are there even though they don't change how the page looks, you understand this code. --- layout: center --- # Round 2: Reading CSS --- # AI Gave You This CSS ```css * { margin: 0; padding: 0; box-sizing: border-box; } nav ul { list-style: none; display: flex; gap: 1.5rem; } nav a { text-decoration: none; color: inherit; } nav a:hover { border-bottom: 2px solid currentColor; } ``` --- # READ + FIND - What's Unfamiliar? Things you might recognize: - `margin`, `padding` - spacing - `color`, `text-decoration` - text styling Things you might **not** recognize: 1. **`*`** - what does the asterisk select? 2. **`box-sizing: border-box`** - what does this change? 3. **`list-style: none`** - what does it remove? 4. **`gap: 1.5rem`** - what is `rem`? 5. **`color: inherit`** - inherit from where? 6. **`currentColor`** - what color is "current"? --- # ASK - Targeted Questions Good prompt: > "I know what `margin`, `padding`, and `color` do. In this CSS, I don't understand these specific things: > 1. What does `* { }` select? > 2. What does `box-sizing: border-box` change about how size is calculated? > 3. What does `color: inherit` mean - inherit from what? > 4. What is `currentColor` in `border-bottom: 2px solid currentColor`?" Four specific questions. AI can answer each one directly. --- # VERIFY - Test Each Answer Save the CSS from the previous slides as `reading-css.html`. For each answer AI gives, test it: | Question | Test | |---|---| | `*` selects everything | Remove the `*` rule - do margins appear around elements? | | `box-sizing: border-box` | Add `width: 200px; padding: 20px` to a box - is the total 200px or 240px? | | `inherit` takes the parent's value | Change the parent's color - does the link color change too? | | `currentColor` = the element's text color | Change the link's `color` - does the border follow? | **Changing things and seeing what happens is how you learn CSS.** --- layout: center --- # Round 3: The Full Workflow --- # A Complete AI-Generated Component You asked AI: "Create a card with a title, description, and a button." ```html <article class="card"> <h2 class="card-title">My Project</h2> <p class="card-desc">A website I built for a local bakery.</p> <a href="#" class="btn" role="button">View Project</a> </article> ``` ```css .card { max-width: 20rem; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .btn { display: inline-block; padding: 0.5rem 1rem; background: #2563eb; color: #fff; border-radius: 0.25rem; text-decoration: none; } ``` --- # Your Turn: Follow the Workflow Save the card HTML and CSS above as `reading-practice.html`. **READ** - go line by line. Mark each line as "know" or "don't know." Possible unknowns: - `<article>` - another semantic tag? - `role="button"` - why does a link need `role="button"`? - `border-radius` - what does this do visually? - `box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)` - what do those four numbers mean? - `rgba(0, 0, 0, 0.1)` - what is `rgba`? - `display: inline-block` - how is that different from `block` or `inline`? --- # ASK + VERIFY Write a prompt for the unknowns you found. Then open `reading-practice.html` and try: 1. Remove `border-radius` - what changes? (Corners become sharp.) 2. Change `box-shadow` to `0 0 0 rgba(0,0,0,0)` - what changes? (Shadow disappears.) 3. Change `rgba(0, 0, 0, 0.1)` to `rgba(0, 0, 0, 0.9)` - what changes? (Shadow gets much darker.) 4. Remove `role="button"` - does anything visible change? (No - it's for accessibility.) Each test builds your understanding of what each property does. --- # The Pattern to Remember Every time AI gives you code: 1. **Read it line by line** - don't skip 2. **Mark what you don't know** - be honest 3. **Ask AI about those parts only** - not "explain everything" 4. **Change something to test your understanding** - break it on purpose This is how developers learn. Not by memorizing - by reading, asking, and testing. --- # Common Unknowns to Watch For | Category | Examples | |---|---| | Semantic HTML | `<article>`, `<aside>`, `<figure>`, `<figcaption>` | | Accessibility | `aria-label`, `role`, `alt` | | CSS units | `rem`, `em`, `vh`, `vw`, `%` | | CSS layout | `display: flex`, `display: grid`, `gap`, `justify-content` | | CSS visual | `box-shadow`, `border-radius`, `opacity`, `rgba()` | | HTML entities | `&copy;`, `&amp;`, `&mdash;` | You don't need to memorize these. You need to **spot them** and **ask about them**. --- # Key Takeaways 1. **Read first** - go line by line before changing anything 2. **Find what you don't know** - be specific about your unknowns 3. **Ask AI about those parts only** - not "explain this code" 4. **Verify by changing things** - if you can predict what will happen when you change something, you understand it 5. AI is your tutor, not your replacement - use it to learn, not to skip learning