rmcg.dev/projects/FrontendMentor/newbie/product-preview-card-component
Robert McGovern 103ac58257 removed p tag from button as html validation error 2022-10-09 22:57:37 +01:00
..
css finished product challenge, added light dark mode 2022-10-09 22:50:33 +01:00
design added base project files for remaining newbie challenges, place a placeholder image 2022-10-05 21:32:03 +01:00
images finished product challenge, added light dark mode 2022-10-09 22:50:33 +01:00
js finished product challenge, added light dark mode 2022-10-09 22:50:33 +01:00
screenshots finished product challenge, added light dark mode 2022-10-09 22:50:33 +01:00
.gitignore added base project files for remaining newbie challenges, place a placeholder image 2022-10-05 21:32:03 +01:00
README-orig.md finished product challenge, added light dark mode 2022-10-09 22:50:33 +01:00
README.md finished product challenge, added light dark mode 2022-10-09 22:50:33 +01:00
index.html removed p tag from button as html validation error 2022-10-09 22:57:37 +01:00
style-guide.md added base project files for remaining newbie challenges, place a placeholder image 2022-10-05 21:32:03 +01:00

README.md

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

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

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

Mobile Mobile Dark Desktop Desktop Dark

My process

Standard for me so far. Set up CSS properties for most things. Then I built the mobile version of the page. Made minor changes for the desktop version. Added a Light/Dark switcher, just to show updating the variables to change the colors.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox (for some alignment)
  • CSS Grid (just for putting in the middle of the page)
  • Mobile-first workflow

Author

Acknowledgments

Two articles gave me the setup for the Light / Dark switcher I've set up. The first by Musthaq Ahamad gave the JavaScript, but I didn't want to have it as a sliding button and with using a class for dark mode. For handling that I used ideas from Luke Lowrey's implementation, using data attributes.