Frontend Developer project
Build an e-commerce product page from a design
A single product page built pixel-for-pixel from a real design file, on a real network — the layout, image, and font decisions that separate a fast page from a Lighthouse warning.
The brief
Pick a public product page design on Figma Community (search 'product page' or 'PDP') or use a real product page as a visual reference, and rebuild it from scratch: a gallery with a main image and thumbnails, a price and variant selector (size or colour), an add-to-cart button, and a description with expandable sections. Use placeholder images sized like real product photography (at least 1200px wide) so image performance work is real, not trivial. The page must render correctly from 360px to 1440px wide and load its largest image without blocking the rest of the page.
Suggested stack
What you hand in
- A public GitHub repository with the running app and a README
- A link to or screenshot of the design you built from
- A short section in the README naming the layout and performance trade-offs you made
Grading happens against the rubric below, so read it before you start — not after.
How this is graded
Published in advance and weighted out of 100. Nothing here is a surprise.
Spacing, alignment, and type sizes match the source design within a few pixels at the design's base width. Interactive states (hover, selected variant, disabled add-to-cart) are implemented, not just the static frame.
The layout reflows deliberately at real breakpoints rather than just shrinking — the gallery, price block, and description each get a mobile-appropriate arrangement, and nothing overlaps or overflows between 360px and 1440px.
Images use responsive sizing (srcset or a framework equivalent) and modern formats where practical, the main image doesn't block first paint, and fonts are loaded with a fallback so text isn't invisible while they load.
Headings follow a real hierarchy, the price and variant selector use appropriate native elements, and the add-to-cart button is a real button with an accessible name.
No console errors, no layout shift when images load, no leftover placeholder text or commented-out code.
Why this project is worth your weekend
- Building from a design file, not a written spec, is the actual daily job of a frontend developer at most companies.
- Product pages are the highest-traffic template on any e-commerce site, so performance mistakes here cost real revenue.
- An interviewer can open the page on a throttled connection and see exactly where the performance work was skipped.
Where people lose points
- Shipping one full-resolution image to every screen size instead of using responsive image sizing.
- Matching the design only at its exact width and leaving the layout broken on a real phone.
- Using a styled div for the variant selector instead of a real radio group or select, which loses keyboard and screen reader support.
Other Frontend Developer projects
Two or three of these turn an empty resume into a portfolio.
Built it? Get it scored against this rubric.
Submit your work and get a score on every criterion above, written feedback, and three resume bullets you can use straight away.