anabfuentes / product-preview-card

A Frontend Mentor challenge to keep my HTML and CSS knowledge in building responsive sites fresh. The page features a product preview card for an ecommerce platform.

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

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

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

Links

• Solution
• Live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

The below HTML code was probably the biggest thing I learned and I'm happy to have found. I got this idea from Kevin Powell who I acknowledge and link below. I was really struggling to figure out how to effectively change images at my set breakpoint. I found this to be my favorite and most effective method. Previous to this project, I didn't know about the srcset element for changing out images.

<picture class="product-image">
  <source
      srcset="images/image-product-desktop.jpg"
      media="(min-width: 600px)"
      />
      <img
      src="images/image-product-mobile.jpg"
      alt="Gabrielle Essence perfume bottle laying flat on a white surface, surrounded by leafy, green plants"
      />
</picture>

Continued development

I want to continue to read up on and figure out useful implementations of CSS Grid. I primarily use Flexbox, but there were a few moments during coding for this project that Grid seemed simpler, so I definitely want to become more knowledgable in this area.

I also found some great articles and videos I want to look further, the topics include CSS Resets, Custom CSS Properties, and how to best section html code.

Useful resources

• "A Complete Guide to CSS Grid" via CSS-Tricks - This helped me more easily format this project. I really liked incorporating a mixture of Grid and Flexbox and I found this guide to be extremely easy to read through and implement.
• Video: "Taking on a Frontend Mentor challenge | Responsive Product Preview Card Component" by Kevin Powell - I initially watched this video as I wanted to see examples of how people coded the main images for the challenge and this definitely helped with that, but also introduced me to so many other CSS concepts that I'm eager to learn more about. Some of the topics I found most interesting/helpful: Implementing a CSS reset, Implementing custom properties, :is():, and a great way to change images based on different media breakpoints.

Author

• Website - Ana Fuentes
• Frontend Mentor - @anabfuentes
• LinkedIn - Ana Fuentes

Acknowledgments

To figure how to change the main image based on the mobile and desktop breakpoints, I followed along with a tutorial Kevin Powell has available on YouTube. After watching his solution, I saw there were a lot of great CSS methods he used that I tried out in my code as well. Thanks so much for making your tutorial available and showing me some new CSS and HTML tricks!