AI Agents Update · CSS Layout: Flexbox + Grid · MP1

Today we wrapped up HTML and CSS. We updated our AI agent setup, learned the two modern layout tools (Flexbox and Grid), and spent the last stretch on Mini Project 1. Responsive design and forms move to Wednesday.

• GitHub Copilot changed its pricing. The free plan now gives only about 2,000 code completions a month and no Agent mode, which is the part we actually want. If you have run out, you have a fix.
• Use OpenRouter as a single hub for many models. Add a few dollars of credit, then in VS Code open manage language models, add OpenRouter, paste your API key, and pin DeepSeek V4 Flash as your default. It is cheap, fast, and good enough for this class. Full steps are in the AI tools setup guide.
• If paying is a barrier, email me and I will send you a $5 class credit. Nobody should be blocked while finishing MP1.
• There are three ways to use an agent, all the same idea underneath: the Agent mode inside VS Code, a terminal agent like Claude Code or Codex, and a desktop app for everyday non-coding tasks. Pick whichever fits. Use the Agent mode, not just autocomplete.
• Why this matters beyond our class: the infrastructure is now cheap or free, and AI is capable enough that one person can build and run what used to take a whole team. People call this a one person company. I run my own projects this way, with GitHub, Supabase, and Cloudflare. Learning to direct an agent well is the skill that unlocks it.

The model is fixed once it is trained. The only thing you control is the context you give it. Managing AI is managing context.

This is the most important idea from today. An agent is no longer a junior helper. Treat it like an experienced developer you are managing, and remember that most failures come from miscommunication, not from the model. You steer it with an AI harness: a small set of documents that tell the agent what you want and what it may not do.

• A PRD.md is the project's ground truth. Think of it as the constitution for the whole project. The agent reads it first.
• A CLAUDE.md holds your hard rules, for example "only vanilla JavaScript, no frameworks" or "use Python 3.14." The agent respects them.
• Put related files in one folder and point the agent at it, so it can read the full picture.

This is exactly why MP1 asks you for a proposal and a PRD. Those documents are your harness.

• Start with a clear proposal (PROPOSAL.md). Answer four questions: who is the client and who are the users (they are often different. For a hospital site the client may be a doctor, but the users are patients), what is the one main job the site must do, what does success look like, and what content do you already have versus need to collect.
• Turn the proposal into a PRD.md with AI. A good prompt: "Please act like an experienced product manager. Interview me one question at a time to turn this proposal into a PRD." Answer the questions, then ask it to write PRD.md. Read the whole thing and make sure it is what you actually want. If a term is unfamiliar, ask the AI to "explain it like I am five."
• Sketch your layout before you let AI design anything. Draw it on paper and snap a photo, or use Figma. Hand that sketch to AI together with the PRD. If AI invents your layout and your colors, the result is not really yours. The design should start with your idea.
• At the project demo I will ask you to explain a big chunk of your code and how the project is structured: which file controls what. You do not need to go line by line, but you should understand what AI built for you. We have no exams, so the demo carries real weight.

• The box model recap: every element is content, then padding, then border, then margin. box-sizing: border-box makes width and height include padding and border, which is far easier to reason about.
• Flexbox is for one-dimensional layout, a row or a column. Set display: flex on the container. justify-content aligns items along the main axis (try center, space-between, space-evenly). align-items aligns them on the cross axis. This is how you finally center something both horizontally and vertically, the classic hard problem.
• Grid is for two-dimensional layout, rows and columns together. Set display: grid and use grid-template-columns. The fr unit splits space into fractions, so 1fr 1fr 1fr makes three equal columns. repeat(auto-fit, minmax(200px, 1fr)) lets a grid reflow on its own as the window resizes, which is a preview of responsive design.
• Rule of thumb: use Flexbox for a navigation bar, a single row, or centering one item. Use Grid for galleries, dashboards, and full-page layouts.
• A good way to really learn these: inspect a real site. Open DevTools on any navigation bar, find the element with display: flex, and toggle its values to watch the layout change.

1. MP1 comes first. Two deadlines to keep straight:
   • By the end of today: have a polished PROPOSAL.md and a PRD.md in your repo. I will check them tonight, and they count toward participation.
   • Friday 6/12: the full project is due. If you have not yet, create a new separate public GitHub repo with an index.html, submit the link on Canvas, and add your layout sketch to the repo.
2. Set up your AI agent if you have not: OpenRouter plus DeepSeek V4 Flash, or your own paid agent. Email me for a $5 credit if you need it.
3. Apply the same proposal and PRD process to your personal website. Decide what content you want, write a short PRD, then ask AI to help you redesign it.
4. Update your weekly log logs/wk04.md: what you learned about Flexbox and Grid, about using AI agents and the PRD workflow, and anything else that stood out this week.
5. Optional but worth it: play a few levels of Flexbox Froggy and Grid Garden. If you do, note the highest level you reach and one thing you learned in wk04.md.
6. Wednesday 6/10: responsive design and forms, a short HTML and CSS summary, then we start JavaScript.