02. Mobile-First/Elaboration

Mobile Layout Completed
πŸ‘¨β€πŸ’Ό Our mobile design is implemented! But did we live up to the "pixel perfect" promise?

The brutally honest "screenshot overlay" test

πŸ‘¨β€πŸ’Ό If you're game, here's a fun but scary idea:
  1. Take a screenshot of the Figma design at 100% zoom (you can toggle that with ⌘0 or Ctrl+0)
  2. Open up a screenshot overly extension in your browser. PerfectPixel for Google Chrome does the job quite well.
  3. Make sure your browser is also at 100% zoom, and set the viewport width to 320px like the Figma artboard.
  4. Line up the images and see how close you got 🀘
πŸ‘¨β€πŸ’Ό Sooo... how did you go?

Time for a break!

πŸ“ Take some notes on what you've just learned, and quickly fill out the feedback form.
πŸ‘¨β€πŸ’Ό You know the drill. Time to get away from the screen for a bit, stretch those legs and look at some distant objects to rest those eyes a little. See you after the break!

Test Your Knowledge

Retrieval practice helps solidify learning by actively recalling information. Use this prompt with your AI assistant to quiz yourself on what you've learned.

Please quiz me on exercise 2 using the epicshop MCP server. Call the get_quiz_instructions tool with exerciseNumber "2" to get the quiz instructions, then quiz me one question at a time.

Learn how to set up the epicshop MCP server

Loading Mobile-First Elaboration form