Project 3: Spots
Overview
Intro
The provided Figma design includes reference frames at 320px (mobile) and 1440px (desktop). However, the implementation must ensure that the webpage is fully responsive across all screen sizes greater than 320px. To achieve this, the design is divided into three: Desktop, Tablet, and Mobile.
Desktop View (≥1320px)
The layout should closely match the 1440px Figma frame, with content centered and constrained to a maximum width. Three cards are displayed per row. On larger screens, only the horizontal side spacing (margins) will increase.
Tablet View (630px – 1319px)
The layout adjusts to two cards per row, while card dimensions remain consistent with the desktop view for visual consistency.
Mobile View (320px – 629px)
The layout follows the 320px Figma frame as a baseline. One card is displayed per row, with flexible side spacing. Importantly, media queries should not be hardcoded to exactly 320px—the Figma frames are references, not strict breakpoints. The minimum supported width is 320px.
This approach ensures a fluid, adaptive design that maintains the integrity of the Figma layouts while accommodating real-world screen sizes and devices.
GitHub URL https://jazjaz122.github.io/se_project_spots/
Figma
Please see Figma design below.
https://www.figma.com/file/BBNm2bC3lj8QQMHlnqRsga/Sprint-3-Project-%E2%80%94-Spots?type=design&node-id=2%3A60&mode=design&t=afgNFybdorZO6cQo-1
Project Video
Check out this video (https://drive.google.com/file/d/1wTv20ChFLlHL15HUeb6Fx4X-c_Do6JSs/view?usp=sharing), where I describe my project and some challenges I faced while building it.