Frontend Mentor - Product preview card component solution

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.

Table of contents

• The challenge
• Screenshot
• Built with
• What I learned
• Continued development
• Useful resources
• Author

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

Screenshot

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• media query
• buttons
• responsive images

What I learned

• HTML picture tag
• Css line

To see how you can add code snippets, see below:

<picture>
  <source
    media="(min-width: 476px)"
    srcset="images/image-product-desktop.jpg"
    class="product"
  />
  <img src="images/image-product-mobile.jpg" class="product" />
</picture>

.proud-of-this-css {
  letter-spacing: 0.25rem;
}

Continued development

I would like to focus more on responsiveness and Grid

Useful resources

• Super Simple Dev - This helped me understand principles like grid and responsiveness. I really liked the explanation and will use it going forward.
• Example resource 2 - This is an amazing viedo which helped me finally understand responsive images. I'd recommend it to anyone still learning it.

Author

• Frontend Mentor - @Jeanclaude09-dev
• instagram - @iamje_nclaude