This is a solution to the Product Preview Card Component. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
A simple project using HTML5 and CSS3 that displays product preview card component (similar to a landing page for a featured product) consisting of a product image and data (name, description and price) and button linking to a checkout functionality.
- I started with the markup on index.html, complying with HTML5 semantic tags and standards as much as possible.
- The styling provided by the project briefing was implemented first, followed by the classes I came up with on the markup.
- I used Figma to acquire all the right dimensions involved in the layout and implemented them in the appropriate CSS classes.
- The CSS Cube methodology was used when coding the stylesheet and some of the conventions from BEM were used when naming classes.
- Semantic HTML5 markup
- Cube CSS methodology
- For some reason CSS media queries will work perfectly when in a local environment but will break whenever deployed to production unless a targeting similar to
@media only screenis implemented. I can't tell why, but it works. - This was the first time I implemented a multi- to single-column responsive design on Frontend Mentor and it worked as intended.