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

Note: Delete this note and update the table of contents based on what sections you keep.

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 URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

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

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

I learn to use html to replace images at a certain width

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

        <picture class="product__img">
          <source
            srcset="./images/image-product-desktop.jpg"
            media="(min-width: 460px)"
          />
          <img
            src="./images/image-product-mobile.jpg"
            alt="Picture of a perfume bottle laying on it's side"
          />
        </picture>

Also to hide elemnts while making them visible to screen readers

 <p class="product__original__price">
              <span class="visually-hidden">Current price:</span>
              <s>$169.99</s>
            </p>

  /* ie9+ */
.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Continued development

Im still not great with grid. I need to improve using it. I also still feel like an impster so i need to feel more confident with coding.

my biggest drawback is completing a project by myself without comsulting youtube tutorials. I hope to gain the experience nessesary to work on a project by myself.

Useful resources

• Example resource 1 - This helped me to reset my elements

Author

• Website - Thabiso
• Frontend Mentor - @SefalaThabiso

Acknowledgments

I would like to thank kevin powell for great youtube tutorials and everyone who commented on my solutions. Learning alone is hard but having a community which support you is great