Product-preview-card-component

The challenge of this project was to build a responsive product preview card component.

Built with:

- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- media queries

What I learned

- media queries: this was my first project where I used media queries to create a responsive website for mobile phones

- <picture> element: I learned how to use the <picture> element to provide different images for different screen sizes. Also, I am planning to improve on using responsive images using just the "srcset" attribute for resolution switches and learn more about device pixel ratio (DPR).

- fonts: I had the chance in this project to learn how to ise Google fonts, by using two different custom fonts: Monsterrat and Fraunces. In the future  I am looking to improve by using @font-face as well in my projects.