Unit 03
Layout and Response
By the end of this unit you have built and published a real page of your own — a Hot Take, one screen, one opinion — that holds together on a phone and on a laptop, and you can say why every part of it is where it is.
Unit 2 ended with you able to read a utility class. This unit is where you build with one, and at the end of it you will have a page you would actually send someone.
The Hot Take
Here is the assignment, and it is the whole unit: one screen, one opinion, yours.
Not a research paper. Not both sides. A take you would defend at a lunch table. The best pierogi in Parma. Why the Rapid is fine, actually. That the second album was better. That gym class should start after 9am. Six-string bass is a real instrument.
The rule is that it has to be something you actually believe, because the hardest part of a first design is not the CSS — it is caring enough about the content to notice when the design is failing it. A page about nothing looks fine no matter what you do to it, which means you learn nothing.
The box and the flow
Every element on a page is a box. Even the ones that do not look like boxes. A heading is a box. A link is a box. The whole page is a box full of boxes, and layout is the practice of deciding how big the boxes are and where they sit.
A box has four measurements, from the inside out:
| Layer | What it is | Is it inside the background? |
|---|---|---|
| content | The text or image itself | Yes |
| padding | Breathing room between the content and the edge | Yes |
| border | The edge itself, if it is drawn | It is the edge |
| margin | Space pushing other boxes away from this one | No — margin is outside |
The one that catches everyone: padding grows the box, margin does not. Add padding and the thing gets bigger. Add margin and the thing stays the same size and moves away from its neighbours.
Add this question to
Loading your meetings…
A box holds 200px of content. It has 16px of padding on every side, a 2px border, and 24px of margin. How wide is the box you can see?
Content + padding + border is what gets drawn. Margin is the gap it holds around itself, and it belongs to no box's width.
What a container is for
Open any well-made site on a wide monitor. The text does not stretch to the edges of the screen. It stops.
That is a container A box that limits how wide the content inside it can get, and centres it in whatever space is left. , and it exists because of how eyes work, not because of how screens work. A line of text longer than roughly 75 characters is genuinely harder to read — your eye loses the start of the next line on the way back. A container caps the damage.
In Tailwind that is two utilities: max-w-2xl sets the ceiling, mx-auto
centres it. You are about to write both.
Write it · html
Renders as you type · nothing leaves your browser
Hot Take, stage one: the shell.
index.html
Tab indents. Press Esc first to tab out of the box.
Result
- The page has a doctype, head, title and body
- A container caps the width max-w-2xl on the div around your heading.
- The container is centred
- Something has breathing room Padding on the container, so the text does not touch the edge.
- Your own take, not the starter one
Swap the heading for your take before you go on. The last goal is not decoration — every stage from here builds on this page, and it is much easier to judge a design when the words are ones you mean.
Container, row, column
Once the outside is settled, the inside gets divided. Almost every layout you have ever seen is the same three-part idea:
- a container that limits the width,
- a row that runs across it,
- columns that split the row.
The row does not stack its children; it puts them side by side. In Tailwind you
get that with grid and then say how many columns you want:
grid-cols-3 makes three of equal width.
Add this question to
Loading your meetings…
You have a row set to grid-cols-12. You put in three children: col-span-6, col-span-4, and col-span-4. What happens?
Spans are a claim on the row's columns. When the claims exceed what is left, the next child wraps — which is why 'do the spans add up' is the first thing to check when a layout breaks.
Write it · html
Renders as you type · nothing leaves your browser
Hot Take, stage two: the argument, in three parts.
index.html
Tab indents. Press Esc first to tab out of the box.
Result
- The three reasons sit in a grid row
- The row is split into three grid-cols-3 on the div that holds the three reason blocks.
- The columns are not touching
- Still three reasons, not four
Notice what you did not have to do: no widths, no percentages, no floats. You named the number of columns and the gap, and the browser did the arithmetic.
Submit for review · text
Read by a human · you can resubmit
Your Hot Take has a main argument and some supporting detail. Describe the split you chose for them — equal thirds, a wide column and a narrow one, something else — and say what about YOUR content made that the right split. 'It looked better' is a starting point, not an answer: what specifically looked better, and for which part?
What earns points5 pts
- 1 Names the actual split they used
- 2 Ties the split to something specific about their own content
- 2 Says what it does for the reader, not just for them
A layout decision you can defend is a layout decision you can repeat. This is the difference between designing and rearranging.
When the screen changes
Here is the thing that makes web design different from every other kind of design: you do not know how big the page is.
A poster is a fixed size. A page is whatever size the reader’s screen happens to be — a phone held one-handed on a bus, a laptop, a tab taking up half a monitor, a projector. Three columns that look considered on a laptop are three unreadable slivers on a phone.
So you do not design one layout. You design what the layout becomes.
Mobile first, and what the prefixes mean
Tailwind’s answer is a set of prefixes. md:grid-cols-3 means from the medium
breakpoint upward, use three columns. Below that, it does nothing, and whatever
you wrote without a prefix applies instead.
That ordering is the part worth slowing down for:
| You write | On a phone | On a laptop |
|---|---|---|
grid-cols-1 | One column | One column |
grid-cols-1 md:grid-cols-3 | One column | Three columns |
grid-cols-3 | Three columns — slivers | Three columns |
md:grid-cols-3 alone | Whatever the default is | Three columns |
Add this question to
Loading your meetings…
An element has class="text-lg md:text-3xl". On a 400px-wide phone, how big is the text?
Prefixes name a MINIMUM width, so md: means medium and up. A utility with no prefix applies at every width, which is why the small-screen case is the one you write first.
Write it · html
Renders as you type · nothing leaves your browser
Hot Take, stage three: make it survive a phone.
index.html
Tab indents. Press Esc first to tab out of the box.
Result
- One column on a phone Change grid-cols-3 to grid-cols-1, then add the wide case back with a prefix.
- Three columns from md up
- The headline is smaller on a phone than on a laptop A prefixed text size on the h1 — the unprefixed one is the phone case.
- Check all three widths before you call it done
At 380 you should see a single readable column. At 1100 you should see three. Nothing about the content changed — only what the layout becomes.
Writing the media query yourself
The prefixes are a convenience. Underneath, they are ordinary CSS, and it is worth writing one by hand once so the prefix stops being magic.
@media (max-width: 640px) {
.stack-on-phone { flex-direction: column; }
}Read it out loud: when the screen is at most 640 pixels wide, this rule applies. Everything outside the block applies always; everything inside applies only under that condition.
Write it · html
Renders as you type · nothing leaves your browser
The same idea, in CSS you wrote.
Tab indents. Press Esc first to tab out of the box.
Result
- .row is a flex row to start with
- A media query for 640px and below @media (max-width: 640px) { .row { … } }
- Inside it, the direction changes
Now drag the width control across 640. That is exactly what md: does for you — the prefix writes this block, and the only thing you gave up by using it was the chance to pick the number.
Components, and the one thing you want them to do
A component A named, reusable piece of interface — a button, a card, a navigation bar — that a framework gives you already styled.
is the next step up from a utility class. A utility sets one property. A
component is a whole object someone already designed: btn is a button that
already knows about padding, radius, hover, focus and disabled states.
We use daisyUI, which sits on top of Tailwind and adds exactly that layer.
It is MIT-licensed and community-run, and its component names are ordinary
words: btn, card, navbar, hero.
The hero, and the one ask
A hero is the block at the top of a page that says what this is. It has one job beyond that: make it obvious what you want the reader to do next.
One. Not four. A hero with four buttons has no call to action, it has a menu, and a reader who has to choose usually chooses to leave.
Add this question to
Loading your meetings…
A hero has three equally-sized, equally-coloured buttons: 'Read more', 'Get started', and 'Learn about us'. What is the actual problem?
One unambiguous call to action. Secondary options can exist — as a plain link, as smaller text — but they have to LOOK secondary, or they are not secondary.
Write it · html
Renders as you type · nothing leaves your browser
Hot Take, stage four: the top of the page.
index.html
Tab indents. Press Esc first to tab out of the box.
Result
- The top block is a hero daisyUI wants hero on the outer block and hero-content on the inner one.
- It has a call to action
- Exactly one action is emphasised
- The action says what it does
'Click here' fails the last goal on purpose. A button's text is the promise it makes — 'Read the research', 'See the schedule', 'Change my mind' all tell a reader what happens next. 'Click here' tells them nothing and reads badly out loud to a screen reader.
One attribute, a whole new site
Everything you just built uses semantic colour slots — bg-base-200,
btn-primary, text-base-content — instead of fixed colours. That choice looks
like a naming detail. It is not. It is the reason the page below can change its
entire mood without a single edit to its markup.
Try it. Every one of these is the same HTML.
Remix it · one page, every mood
Nothing here is a picture — it is the real page, restyling
One page. Eight decisions about what it should feel like.
Theme
One person's opinion
The six best breakfasts in Cleveland
Ranked by someone who has eaten all of them more than once, which is the only credential this list claims.
Start at number sixThe diner on Detroit
Hash browns with actual edges. Coffee that tastes like a decision.
The bakery counter
Four tables, no menu, and a kolache worth the parking.
The place with no sign
You have driven past it a hundred times. Stop this time.
The one in the market
Standing room only, and the eggs come out in ninety seconds.
The corner spot
Cash only, which is either charming or a problem, depending.
<html data-theme="retro">
The line under the preview is the only thing that changed. That is what a theme is: a set of values the colour names point at. Write bg-primary and you get whatever primary means right now; write bg-blue-600 and you have made that decision permanently, everywhere, for everyone.
Next: Top 6
Hot Take was one screen so that every decision stayed visible. Top 6 is the real project: six of something you are genuinely expert in, on a page you assemble rather than one you fill in.
Six best breakfasts in Cleveland. Six worst bus stops. Six albums nobody asked about. Six pieces of gear, six trails, six arguments, six recipes. The form is fixed so that everyone’s craft is comparable; the subject is yours so that the expertise is real.
You will start from a ThemeStarter — a repository of professional-quality sections on a theme spine, handed to you through GitHub Classroom — and your job is to assemble and adapt it, not to fill in blanks. Everything you need is already in your hands: a container, a row, columns, breakpoints, components, and a hero with one ask.
That is the unit: a box and what it is made of (WD3.1); a container, a row and
columns that add up (WD3.2); a layout that becomes something else when the
screen does (WD3.3); and components with one clear ask (WD3.4). Unit 4 gives
you a real editor, version control, and a way to hand work in — because Top 6 is
the first thing you have built that is worth not losing.
Where you are
Not startedAnswer the checks above whenever you like. They're not graded, and you can retry any of them.
Kept in this browser only, unless you sign in.
Signing in carries this — and everything else you've done here — onto any device, and keeps it if you clear this browser.
Intro to Web Design · members' unit
Layout and Response is behind a locked door
Units in Intro to Web Design are for people taking the course. Getting in takes a link or a key — signing in on its own doesn't do it.
What's in this unit · 13 min read
- The Hot Take
- The box and the flow
- Container, row, column
- When the screen changes
- Components, and the one thing you want them to do
- Next: Top 6
4 quick checkslive HTML/CSS sandboxcode exercises
1 Sign in
With your school Google account. This is how your work reaches the gradebook — it doesn't open the unit by itself.
A key unlocks this browser and keeps your progress here; signing in keeps it with you across devices. Either way the key itself is only ever checked as a hash. Manage all of this on your account, read what signing in stores, or go back to Intro to Web Design.
Sources
- Gilmour Academy — Intro to Web Design
- Mark Mead — HyperUI — free Tailwind CSS components (MIT)
- Pouya Saadeghi — daisyUI (MIT)