This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Live Site URL: (https://hran-8.github.io/product-preview-card/)
I started with the mobile layout first. I created classes and added some semantic HTML elements as needed. I tried to do all the visual styling first, like colors, backgrounds, and font families. Then, I moved to positioning and then margins/padding/sizing. I struggled a bit when I tried to move onto the desktop layout because the image wasn't scaling properly alongside the container. I'm still struggling with this.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I learned a lot about workflow. I would previously start out trying to make the desktop version and downsizing it, but it is much easier to start mobile. I also learned how to keep things as responsive as possible by using relative units rather than pixels, although I'm still having trouble. Using different images depending on the width of the viewport was also new to me and I learned about the srcset attribute.
I still struggle with responsiveness; my website breaks when the viewport width is anywhere between 375px and 1440px. I want to find a solution to this without making a bunch of media queries.
- Kevin Powell's tips for beginners on his YouTube channel really helped me understand the workflow better and start projects with more organization.
- Viewing MDN for properties and values I wasn't sure about/forgot was useful.