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.
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.
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
Loading…