MP1 showcase

Today every Mini Project 1 site was presented, and the room wrote feedback for each one and voted on which site does most for its client. Mini Project 1 continues: take the site back to your client this week, read the feedback on your project, and keep building. The habit worth keeping: when you use a site, write down what works and what you would change, and when someone uses yours, record their words exactly.

Open the showcase page and sign in with GitHub. Your feedback is under Feedback on your project, without names. Every presenter received feedback from classmates. The last entry on each list is mine: the suggestions made aloud in class after your talk.

Read all of it before you meet your client. If your client does not reply, the Take it back to your client section says how to work from this feedback instead.

Checkpoint 3 checks the conversation with your client, in FEEDBACK.md in your Mini Project 1 repo.

• Press . on any GitHub repository and it opens in github.dev, the VS Code editor in a browser. It works on anyone's public repo, which makes it a quick way to read how a site you like was built.
• Ask your agent to format your code with a formatter such as Prettier. Consistent spacing keeps each commit's diff to the lines that changed, which matters once more than one person, or an agent, edits a file.
• Keep files in folders. CSS, JavaScript and images in their own folders (assets/css/, assets/js/, assets/images/) are easier to find than files loose at the root.
• A logo can be your favicon, the small icon in the browser tab. Ask your agent to add one from your logo file.
• Setting width in CSS does not make a photo download faster. It changes how large the photo is drawn; the visitor still downloads the whole file. A 5 MB photo takes about ten times as long to load as a 500 KB one. On most sites, resize and compress large photos before you commit them, with a tool such as Squoosh. On a site where photo quality is the point, such as a photography portfolio, keep the full-size files and host them on a storage service or CDN, such as Amazon S3 or Cloudflare R2.
• YouTube videos can play on your page. Under a video on YouTube, choose Share, then Embed, and paste the <iframe> into your HTML.
• A product landing page and a portfolio do different jobs. A landing page asks the visitor to do one thing (join a waitlist, call a number); a portfolio lets them explore. Build toward the one your client needs.

These came from your logs/wk04.md notes. We did not reach them in class, so here are the answers. Each one was checked in a browser.

Layout#

Full slides: CSS Layout.

• Flexbox or Grid for one section? Flexbox lays things out along one line, a row or a column: a nav bar, a row of buttons. Grid places things in rows and columns at once: cards, a gallery. If columns need to line up across rows, use Grid.
• How many columns does repeat(auto-fit, minmax(200px, 1fr)) give? It depends on the width of the container, which is the screen minus padding. With 16px padding and a 1rem gap: one column at 390px, three at 768px, five at 1280px. A column is never narrower than 200px, and the leftover space is shared equally.
• What does 1fr mean next to a fixed column? fr shares out the space left after fixed sizes and gaps. grid-template-columns: 240px 1fr in an 800px box with a 16px gap gives columns of 240px and 544px.
• Several rules touch one element's position. Which one is moving it? Right-click the element and choose Inspect. The Styles panel lists every rule that reached it, with the winner on top. The Computed tab and its box diagram show the final margin, padding and size.
• Why is a box wider than its width? By default width sets the content only, and padding and border are added outside it: width: 200px; padding: 20px; border: 1px solid measures 242px. With box-sizing: border-box, it measures 200px. Every MP1 stylesheet starts with * { box-sizing: border-box; }, which the agent wrote.
• What does the viewport tag do? Without it, a phone lays the page out 980px wide and shrinks it to fit. With width=device-width, the layout is the phone's real width (390px on many phones), so your @media rules for phones take effect.
• How can you predict a page at 390px? Read the @media blocks and look for fixed widths. An element with a fixed width over about 350px, or a row of flex items that never wraps, will overflow.

Which rule wins#

Full slides: CSS Advanced.

• p and .intro both set a color. Which wins? The class, even when the p rule comes later. The later rule wins only between equally specific selectors. In the Styles panel, the losing color has a line through it.
• A rule has a line through it. What beat it? Another rule that reached the same element, by being more specific or by coming later. Look above it in the Styles panel.
• What are the :root variables? :root is the whole page. --gold: #c9a227 stores a value under a name, and color: var(--gold) uses it. Change the value once and every rule that uses it changes.
• When does the agent's dark mode block run? @media (prefers-color-scheme: dark) applies when the visitor's system is set to dark mode. To test it, open DevTools, press Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS), type dark, and choose Emulate CSS prefers-color-scheme: dark.
• Two pages use one variable name for different colors. A stylesheet holds one value per name. Give each page's <body> a class and set the variable on that class: .page-cv { --gold: #b8860b; }.
• What does !important do? It overrides specificity: p { color: red !important; } beats .intro { color: black; }. It is a warning sign because the next fix needs another !important. When a stylesheet has many of them, the agent was often overriding its own earlier rules; ask it to remove them and fix the selectors instead.
• rem, px or % for a font size? rem for font sizes, because it follows the reader's browser setting. px for borders and fine detail, and % or fr for widths that follow the container. clamp(1.5rem, 5vw, 3rem) scales a heading between two sizes.
• How do you read a whole stylesheet? Top to bottom: the :root variables, then the resets (*, body), then one block per section in page order, then @media at the bottom. Match each block to the page with Inspect.

In your own code#

Full slides: HTML Essentials, Accessibility Quick-Wins.

• It works on your laptop and breaks on GitHub Pages. Check letter case first: GitHub Pages treats Index.html and index.html as different files, and your laptop usually does not. Then check that every linked file was committed and pushed.
• An image makes the page wider than a phone. max-width: 100% and height: auto on the image.
• The header covers the content when you scroll. position: sticky or position: fixed is doing that. If a link jumps to a heading that ends up under the header, add scroll-margin-top to the heading.
• Which image needs alt text? Any image that carries information: a product, a place, a person. Write what it shows that matters to the page. A purely decorative image takes alt="".
• <button> or <a>? A link goes somewhere, to a URL. A button does something on this page. <a href="#"> goes nowhere and is a placeholder.

1. Mini Project 1: take the site back to your client this week. Ask them to open it on their own phone and computer, what they would change, and which of the features you have not built yet they want first. Also ask whether they want their own domain name; we may cover how to connect one in a later class. How to run it.
2. Read the feedback on your project on the showcase page, then keep building: make at least one change that came out of the conversation or the feedback.
3. oim3690/logs/wk05.md by Sunday 10/04.

Checkpoint 3 closes Sunday 10/11.