This is a solution to the Product preview card component challenge on Frontend Mentor.
The challenge was to build a responsive product preview card component based on the provided design. Users should be able to view the layout correctly on mobile and desktop screen sizes and see a hover or active state on the “Add to Cart” button. The goal was to use clean, semantic HTML and modern CSS techniques to closely match the design and ensure accessibility.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Solution URL: [Github] (https://github.com/usiemeblessing/product-preview-component)
- Live Site URL: [Netlify] (https://usiemeblessing-product-preview.netlify.app/)
I began by building the HTML structure with semantic tags, then styled the layout using CSS and Flexbox. I followed a mobile-first approach and used media queries to make the design responsive. I aimed to match the original design closely while keeping the code clean and accessible.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- I learnt how to position elements wherever i want on the page using the position property and offset properties
- I also improved my attention to detail, especially in spacing, typography, and color use.
I would love to improve greatly on my knowledge and application of media queries, positioning and use of maximum and minimum values.
- Frontend Mentor - @usiemeblessing