tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
rmcg.dev/projects/FrontendMentor/newbie/product-preview-card-component
History
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

Links

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.