parham-dev27 / Product-Preview-Card-Component

Product-Preview-Card-Component

Home Page:https://parham-dev27.github.io/Product-Preview-Card-Component/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Product-Preview-Card-Component

Solution for a challenge from frontendmentor.io.


About The Project

This challenge will serve as excellent practice for individuals seeking to test their CSS skills. Flexbox is an incredibly potent extension of CSS, making it highly valuable to familiarize oneself with it. The primary objective of this challenge is to construct and to achieve a design that closely resembles the provided design. You are free to utilize any tools that aid you in completing the challenge. Therefore, if there's a particular skill you wish to enhance, feel encouraged to give it a try.

I do not have access to the Figma sketch so the design is not pixel perfect.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flex
  • Grid
  • Mobile-first workflow
  • Responsive Design
  • Media queries

What I learned

Another great project to practice CSS. I finally had a better understanding of CSS and learned how to make a responsive design with grids, flex-boxes and media queries. Really loved the project!

I also learned how to use responsive images in html using the picture, media and img tag.

Acknowledgments

A big thank you to anyone providing feedback on my solution. It definitely helps to find new ways to code and find easier solutions!