Learning on Web Dev Open is free for all.

Take It Apart > Rebuild it by handMake it survive a phone
Phase 01Rebuild it by hand76 of 434

Make it survive a phone

Take your rebuild to a real device on a real network and fix what you find. Then measure it against the original.

Solo project60 minAI off

Deploy it. Then open it on a real phone, on mobile data, and use it one-handed, exactly the protocol from lesson five.

Work the checklist from memory before you look it up. Touch targets at least 44px with gaps between them. No 100vh anywhere, svh or dvh. Every image with dimensions, modern formats and correct sizes. No hover-only paths. No input font smaller than 16px. The keyboard not covering the field being typed into. Nothing horizontally scrolling at 360px.

Then measure both pages, yours and the generated original, the same way: Lighthouse mobile on the deployed URLs, and the Network panel with cache disabled for transfer size and request count.

Record four numbers for each: total transfer, request count, Largest Contentful Paint, Cumulative Layout Shift. Put them in a table.

You should win on most of them, and the reason is not that you are a better developer than the model, it is that you made choices and it produced a default. Where you lose, that is really interesting and worth a sentence about why.

Then run one honest check the numbers do not cover: hand the phone to someone else and ask them to do the main task. Watch without helping. Whatever they hesitate over is a real defect that no tool reported, and watching someone else use your work is a skill worth starting to build now.

Done when

  • Deployed and opened on a real phone over a mobile connection
  • The full mobile checklist applied, with a note on which items you missed from memory
  • No horizontal scroll at 360px; no 100vh anywhere
  • A four-number comparison table against the generated original
  • A sentence explaining any number where the original still wins
  • One other person observed using it, with what they hesitated over written down

Nobody marks this for you. It goes into your phase checkpoint, where a person does.

You should now be able to

  • Ship a page that works on a real phone on a real connection
  • Apply every mobile lesson from lesson five to your own work
  • Beat the generated original on measurable numbers
Ask the community

Loading…