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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Screenshot

Links

• Solution URL: Frontend Mentor Solution
• Live Site URL: 3 Column Preview Card

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Netlify

What I learned

1. Adding Different Images for Mobile and Desktop Version through Image element and srcset attribute.

      <picture class="section product-photo">
        <source srcset="/images/image-product-mobile.jpg" media="(max-width:600px)">
        <img src="/images/image-product-desktop.jpg" alt="Perfume Image">
      </picture>

2. Use of gap to give spacing between Flex children.

Continued development

Moving ahead:

• I will learn to use media queries to make sites responsive in Mobiles.
• I want to create more complex projects by improving grasp on Flexbox, positioning and typography.

Useful resources

• Learn FlexBox - Kevin Powell - This Video by the CSS Guru Kevin helped me to understand the basics of FlexBox.
• CSS Course on FreeCodeCamp - This is a amazing all in one course for CSS by Dave Gray.
• Netlify - Netlify allows you to deploy your project live on web for free.
• Solutions on Frontend Mentor - I refer other's solution to same project when I got stuck.

Author

• Twitter - _aviral07
• Website - Aviral Sharma
• Frontend Mentor - aviralsharma07
• Blogs - My Technical Blogs