DEV Community

Cover image for Challenge 2 - Product preview card component - Frontend Mentor
Abhishek Baliyan
Abhishek Baliyan

Posted on • Updated on

Challenge 2 - Product preview card component - Frontend Mentor

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

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

Desktop View

Mobile View

Links

My process

  • First, I See the design then thought, how do I lay that out in html
  • Then I wrote the HTML
  • Second, how can i use CSS to achieve the layout
  • Then I wrote the CSS for layout
  • Third, how should each element be styled
  • Then I wrote CSS for each element

Built with

  • Semantic HTML5 markup
  • CSS
  • Flexbox
  • Mobile-first workflow

What I learned

  • Screen Reader - Visually hide
  • How to add img/icon on button

Continued development

  • CSS Grid
  • In depth CSS

Useful resources

Author

Acknowledgments

The stackoverflow guide of image replacing by css solved my problem.

Top comments (0)