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

A web design for the showcase and sale of a parfum product, this designed was built mainly with CSS Flexbox, margin, padding and position was alos used to achieve the desired spacing and positioning on the design.

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

Check screenshot folder for screenshot of the design.

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

The process of building this site started with adding the necessary div elements to create containers to make the use of flexbox easy and achievable. The Challenge was to build parfum catalogue design for desktop 1440px and mobile of 375px, I started the building for desktop first and later added media queries for the mobile of 375px. Apart for the use of Flexbox and Media Queries nothing beyond the usual(Margin, Padding, Position, Font, etc.) was used in the building of this site.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

I can't say i learned something necessarily new in the building of this design, but practice makes perfect, hence if i were to say i learned anything new it would be that i am one step closer in becoming perfect in the use of every elements that was used in this design. Hence i am grateful that i completed this project.

Continued development

Going forward, I think i am going to be looking into more resposives builds as to continue to develop my skills in Media Queries and Flexbox but more in particular Media Queries as i enjoyed them although still frustrating to use i still enjoyed using them either way.

Useful resources

Some of the usefull resouces or websites that really helped me in the building of project include:

• Resource 1 - This site on on all aspects of the design as i looked up this site alot during the build of this design. I really liked this pattern and will use it going forward.
• Resource 2 - This is an amazing article which helped me in understanding Media Queries. I'd recommend it to anyone still learning this concept.

Author

• Frontend Mentor - @modade97
• Twitter - @modadegospel