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.

• The challenge
• Screenshot
• Links
• The Process
• Built with
• What I learned
• Continued development
• Useful resources
• Author

Users should be able to:

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

1. Desktop - https://i.postimg.cc/3Rdj8NSB/Screenshot-1.png
2. Tablet - https://i.postimg.cc/tC5scyDC/Screenshot-5.png
3. Phone - https://i.postimg.cc/Rhm0PbHH/Screenshot-4.png

• Solution URL: https://www.frontendmentor.io/solutions/product-preview-w-moblie-first-design-using-vsc-AflCto3k6-
• Live Site URL: https://idyazz.github.io/

• Created the HTML and added custom fonts Fraunces and Montserrat
• Uploaded images to postimages.org
• Specified the images required based on user's device in the html
• Created a css stylesheet and layed out the design with a mobile first approach. This ensures that the website displays properly whether the user is using a phone, tablet, or desktop
• Started working on CSS styles in this order; container, image, title, item, description, discount price, original price, add to cart button, and finally the attribution at the bottom
• added a special feature where if you hover over the add to cart button it transitions into a lighter green with a dark shadow behind it, as well as slighty increasing in size

• Visual Studio Code
• CSS styles
• HTML
• CSS Grid
• Mobile-first workflow

I learned how to create a website using the mobile first approach, as well as create and style a button.

I need to continue focusing on the grid layout for websites as I am still not familiar with it.

1. https://www.w3schools.com/ - This site was very useful since I was able to learn new html attributes and css styles that I didn't know about.

• Website - Yassine Idmahand
• Frontend Mentor - @Idyazz