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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The job is to replicate a webpage with one's own style of approach.

The challenge

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

My process

I Started with HTML structure and the proceeded to the CSS whereby I styled it based on the 1440px screen size first. Then I styled it for the 375px optimal screen size.

Built with

• HTML5 markup
• CSS properties

What I learned

I learnt about the css property called font-spacing

<h1>Some HTML code I'm proud of</h1>

.proud-of-this-css {
  font-spacing: papayawhip;
}

Continued development

I have challenge with box model properties in the css so positioning and arrangment are areas I want to focus on more. So I would like to refine that more so that I can create better designs.

Useful resources

• Example resource 1 - This helped me for any HTML or CSS tags or properties that I was looking for. I really liked this pattern and will use it going forward.
• Example resource 1 - This is a very good site for icons. I used this because I was unable to open the image icon for this project from the resource folder.

Author

• Frontend Mentor - @ambmamo
• Twitter - @yourusername