Week 1

HTML/CSS - the important parts

The essential HTML/CSS concepts you need to understand before AI generates it all for you — layers of separation, the box model, responsive design, CSS methodologies, and Chrome DevTools.

↗ Open slides

In this lecture, we will learn:

Why...

Are there 3 separate layers when creating a webpage (Structure, Style, Behavior)?
Is understanding the box model critical for debugging layout issues?
Is CSS moving towards utility-first approaches like Tailwind?

How to...

Build responsive, mobile-first layouts using Flexbox, Grid, and media queries
Choose between utility-first and component-driven CSS methodologies
Use Chrome DevTools to inspect, debug, and test layout issues
Install the Chrome DevTools MCP to let AI tools write and validate HTML/CSS in the browser