Reading and debugging AI code

Today was CSS: how selectors and the cascade decide which rule wins, how boxes, Flexbox and Grid lay a page out, and how one page adapts to a phone. Every idea was checked on a real site in DevTools. The habit worth keeping: when you want to know why something looks the way it does, right-click it, choose Inspect, and read the Styles panel.

The four review questions, with what each one showed:

• nav a { ... } styles every a inside a nav. The space means "inside". A comma means "and also": nav, a styles every nav and every a.
• nav a:hover applies while the pointer is over the link. On Babson.edu, the underline under a link is a border-bottom, which is how a site gets an underline in its own color and thickness.
• A class beats a tag, wherever it sits in the file. When two rules use the same selector, the later one wins. When the selectors differ, the more specific one wins first, so .intro beats p even when p comes later.
• A property you never set comes from an ancestor. Set font-family on body and every heading inherits it. In the Styles panel this shows as Inherited from body.

To see any of this on any site, open DevTools with Cmd+Option+I (macOS) or Ctrl+Shift+I (Windows), then right-click an element and choose Inspect. A rule with a line through it lost to another rule. Click the :hov button to force a hover state and read the rules that apply only then.

A correction from class: a tag name you make up, like the <plate> in CSS Diner, behaves like a span, which means it sits inline inside a line of text. It does not behave like a div. Every current browser still displays it.

Full slides: Box Model and Layout.

• Every element is a box: the content, then padding, then the border, then margin between it and its neighbors.
• Block elements stack top to bottom (p, h1, div). Inline elements sit inside a line (a, img).
• display: flex lines up items in one direction, a row or a column. justify-content: space-between spreads them evenly whatever their widths. Use it for navigation bars, rows of buttons, and centering.
• display: grid lays out two directions at once, rows and columns. Use it for a whole page or a set of cards. repeat(auto-fit, minmax(110px, 1fr)) fits as many columns as the width allows.

In the 1990s, pages were laid out with HTML tables, which fix every row and column in place. You can see one yourself: open the Wayback Machine, type apple.com, and pick a date from the late 1990s.

Full slides: Responsive Design.

A responsive page uses the same URL and the same HTML on every device, and its CSS changes the layout to fit the screen. Look for two things in your files:

1. The viewport tag in the <head>: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Without it, a phone draws the page as if it were about 1,000 pixels wide and shrinks everything. Typing html:5 and pressing Tab in VS Code includes it.
2. An @media block in the CSS, which applies its rules only at certain screen widths. That is where a menu turns into a column or a hamburger icon.

To see your page on a phone without a phone, open DevTools and click the Toggle device toolbar button (the phone and tablet icon at the top left of the panel), then pick a device from the list.

127.0.0.1 is your own computer, so your phone cannot open it. Push and deploy with GitHub Pages, then open the live URL on your phone.

• CSS Diner for selectors. We did the first six levels in class.
• Flexbox Froggy for Flexbox.
• Grid Garden for Grid.

The lightning talk asked how much control an AI agent should have, and the room answered with money: how much would you hand a shopping agent to spend on your behalf? Most answers were small or nothing, and several went up when asked about next year.

The question is current. Meta released Muse, a personal agent that can shop, book and fill in forms for you, on September 8. One position from the room was to let the agent fill the cart and do the checkout yourself.

Trust in online shopping took years to build. Your parents typed a credit card number into Amazon for the first time with the same doubts you have about an agent now. Agents will go through that process too.

Claim a slot on the lightning board. A tool or idea from someone's talk can go into your weekly note, with its link and without the speaker's name.

• How I Built This: founders on how their companies started. The Yeti episode came up.
• Acquired: the full history of a well-known company in each episode. Episodes run three to four hours.
• All-In: four investors on technology, business and markets.
• Limitless: short AI news episodes, a few times a week.
• Predictive History: history lectures that use game theory to explain events.
• The Diary of a CEO: long interviews with founders and experts.
• Silicon Valley, the TV series: watch season one, which uses many ideas from finance and investment classes.

1. Mini Project 1: submit your repo URL on Canvas by Sunday 9/27. The project does not need to be finished by then. By Sunday the repo should hold PROPOSAL.md, PRD.md and AGENTS.md. The project is due Tuesday 9/29, deployed and working by 3:00 PM, because you will present it in class that afternoon.
2. <your-github-username>.github.io: PRD.md and AGENTS.md in the repository.
3. oim3690/index.html: make it responsive. Ask your agent to do it, read what it changed, and check the result with the device toolbar.
4. oim3690/logs/wk04.md: in addition to what you usually write, you can summarize what you know about CSS so far, from what we covered in class, what you practiced, or the CSS your agent wrote for your own pages. Write what you learned, what you found interesting, and what you do not know yet. We will take questions from these next time.

Checkpoint 2 closes Sunday 9/27. The checklist on Canvas has the full list.