Box model · CSS review · MP1 mid-demo round

We covered the box model and how MP1 really starts: understanding your client, then turning that into a proposal and a PRD.md for AI to build from. Every project begins with a fresh public repo, named in lowercase with hyphens. On the CSS side, remember that every element is content, padding, border, and margin, and that box-sizing: border-box makes those sizes much easier to reason about.

• The real skill in MP1 is not the code, it is understanding what your client wants. Talk to them first, take notes in plain language, and only then turn it into a proposal. As coding gets easier, finding the right need is what sets your project apart
• Turn your client conversation into a proposal, then ask AI to expand it into a PRD.md (a product requirements document). Commit PRD.md to your repo and point AI at it: "Read PRD.md and build the first feature." It works as the shared plan for the whole project
• Every project starts the same way: create a new, separate public GitHub repo. This is now the first step in each mini-project's instructions. Keep it out of your oim3690 and username.github.io repos, name it in lowercase with hyphens after the topic (like hospital-website, or mini-project-one if you have not picked a topic yet), and link to it from your oim3690 README
• A specific prompt beats "make it better." Name the color, the size, the exact selector. Re-asking with the same vague words is a lottery. Knowing some CSS is what lets you say precisely what you want
• The box model: every element is content, then padding, then border, then margin. An element takes up more space than its text because of these layers. Open DevTools, inspect an element, and you can see all four
• A common first step in modern CSS is * { margin: 0; padding: 0; }. The * selects every element and clears the browser's default spacing, so you add spacing back only where you want it
• box-sizing: border-box makes an element's width and height include its padding and border, which makes sizes much easier to reason about
• Every element has a default display. Most are block (they take a full row, top to bottom). Images are inline by default, which is why they sit inside text and resist centering. Switch an image to display: block and use margin: 0 auto to center it
• Layout in two dimensions is the hard part of CSS. Old sites faked it with <table> tags, which is clumsy and not responsive. Flexbox and Grid are the modern tools, and we cover them next class

To do before Monday (6/8):

1. Create your MP1 project repo if you have not already: a new, separate public GitHub repo, named in lowercase with hyphens, linked from your oim3690 README
2. Keep your MP1 proposal moving. Turn your client conversation into a short proposal with a rough sketch of the layout. The deadline is soft, but aim to have your proposal ready by the end of this week
3. Keep working on your personal website. Apply the CSS you have learned, and check the gallery to see what your classmates have done
4. Write up your group exchange in logs/wk03.md: what you learned from your classmates about finding clients and uncovering what they really want, plus who your client is, what they want, what you built so far, and how you used AI
5. Optional but worth it: play a few levels of CSS Diner to practice selectors. We started it in class, but most of you did not get far. If you play, note the level you reached and one thing you learned in your wk03.md
6. Monday 6/8: Flexbox, Grid, and responsive design