Website path Design

Make it work on a phone

A page that reads well on a small screen.

Start this module

Example brief

A food truck's page must be easy to read on a phone in bright sunlight.

An example. Use your own idea next.

Steps

Ask for a single-column layout on small screens.
Ask for large and high-contrast text that survives bright sunlight.
Narrow your browser window, or open the page on a phone, and read it top to bottom.

What you will learn

Responsive design: The layout adapts to the screen. Flexible widths (max-width, flexbox, grid) do most of the work.
Media queries: Rules such as @media (max-width: 600px) change styles on small screens only. Use them for the exceptions.
Tap targets: Buttons should be large enough to press with a thumb, roughly 44 pixels, with space around them.

A sample prompt

Build a one-page site for Taco Rueda, a food truck. It must be easy to read on a phone in bright sunlight: one column below 600px wide, dark text on a light background, large text, and buttons at least 44 pixels tall. Sections for the menu, where to find us this week and catering, and a button that says 'See this week's stops'.

Write yours first, then compare.

To complete it

Pass all 6 checks on one version, then accept.