Exercise: A Mobile-First Taco Truck Page

Style Sol Taco Truck's ready-made page mobile first, with a one-column phone layout, two min-width breakpoints in rem and a truck photo that fills its box, and let the tests check each part.

Journeyman · CSS · Web Development · Updated

Sol Taco Truck moves around town, so its customers check the website every day to find out where it's parked. Almost all of them check on a phone, usually around lunchtime. The owner has a page with everything on it: today's location and hours, a photo of the truck, the menu and catering. On a phone, though, it scrolls sideways, the photo is a different shape at every width, and on a laptop the menu is one long, thin strip. You'll style it mobile first, the way this chapter showed, and tests will tell you when each part is done.

Before you start

You need Node.js to run the tests. Setup: VS Code, a Browser and Node.js installs it, along with VS Code and Live Server. Everything else is in the exercise code: you don't need any page from earlier in the course.

Get the exercise code

In the Exercise box beside the lesson, choose Get the starter on GitHub to open its GitHub repository. Click Code, then Download ZIP, and unzip it into your css-in-depth folder.

The folder holds:

  • index.html: the whole page, viewport line included. It's ready, and you don't change it.
  • styles.css: the colors, fonts and spacing are ready, except for one rule left over from the truck's old desktop-only site. The responsive layout is yours to add, below the line that says Yours: the responsive layout.
  • images/sol-taco-truck.svg: the photo of the truck.
  • page.test.js and package.json: the tests. You don't need to change these.

Open the folder in VS Code, right-click index.html and choose Open with Live Server. Then turn on device mode in the developer tools, set the width to 320, and keep it on while you work.

What to do

The two parts of the page you'll lay out look like this in index.html:

<section class="today" id="today">
  <div class="today-text">
    <h1>Hungry? Here's where we are today.</h1>
    <p class="location">Riverside Park, by the boat launch</p>
    <p class="hours">Open 11 a.m. to 8 p.m. Tuesday to Saturday</p>
    <a class="directions" href="https://www.openstreetmap.org/">Get directions</a>
  </div>
  <img class="truck-photo" src="images/sol-taco-truck.svg" alt="The Sol Taco Truck, painted sunset orange, parked under the trees by the river with its serving window open" width="1200" height="800">
</section>

<div class="menu">
  <article class="menu-group">
    <h3>Tacos</h3>
    <ul>
      <li>Carne asada <span class="price">$4.00</span></li>
    </ul>
  </article>
</div>

The real menu has four groups (tacos, burritos, sides and drinks), each with its own items. The comment at the top of styles.css lists the work, and the README says the same:

  1. Fix the leftover rule that makes the page scroll sideways on a phone.
  2. Pictures that fit: no picture wider than its box, and none squashed.
  3. The truck photo: a wide box of its own shape, filled by the photo, with the serving window in view.
  4. The phone layout: the menu is a grid of one column, with a gap. The top of the page stays one column.
  5. A first breakpoint, where the menu starts to look stretched (about 40rem): two menu columns.
  6. A second, wider breakpoint (about 64rem): the location and hours beside the photo.
  7. Make it yours: a nav that becomes a row, four menu columns on a wide screen, a different photo shape beside the text.

Check your work

In VS Code, open a terminal (Terminal > New Terminal). Run npm install once, to download what the tests need, then run the tests as often as you like:

npm install
npm test

At first eight of the nine tests fail. That's expected: only the first one passes, because the viewport line and the link to styles.css are already there. Each part you add turns its test green. A failing test's message says what it found and what to fix, for example .truck-photo has object-fit: fill. Use object-fit: cover, so the photo fills its box without stretching.

The tests' browser can't change its width, so the tests read your media queries straight from the stylesheet and check your base rules as a phone would see them. They can't see the page: the README's How it should look checklist covers that, one width at a time. Go through it in device mode.

Hints

  • Find the leftover with the developer tools. At 320 pixels, hover over elements in the Elements panel until you find the one that sticks out past the right edge, then look at its width. Responsive Design and the Viewport shows the fix.
  • The phone layout needs almost nothing. Boxes stack in one column by default. Your base rules only make .menu a grid with a gap, ready for columns later.
  • Find each breakpoint by dragging. Widen device mode slowly and stop where the content starts to look wrong. Then divide the width by 16 for rem. Media Queries and Breakpoints walks through it.
  • Smallest first. Put the 40rem query before the 64rem one, as in Mobile First: Start Small, Then Add Room, so the wider screen's rules come later and win.
  • object-fit needs a box with a shape. Give the photo an aspect-ratio first, then object-fit: cover. Responsive Images: max-width, object-fit and srcset has both.

When you're done

Every test is green, and the end of the test run says:

ℹ tests 9
ℹ pass 9
ℹ fail 0

At 320 pixels the page is one column: today's location and hours at the top, the truck as a wide strip, and the menu cards one under another, with no sideways scrolling. At 640 pixels the menu splits into two columns. At 1024 pixels the hours move beside the photo. Now set the browser's font size to Large and drag through the widths again: do your breakpoints move to wider screens, so the bigger text gets its columns only when there's room?

Then put the page online, as in Put Your Page Online for Free, and open the link on your own phone.

So what

This is how real sites are built: the phone layout first, because that's where most people are, then a few breakpoints placed where the content asks for them. A shop, a restaurant, a portfolio or a class project: every page you make from now on can start this way.

Key terms

Related