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 7b0b8f2dc6 minor updates to make the old price more accessible. Swapped price block to be a paragraph rather than div, wrapped old price in del tags, and added aria-lablel explaining that 169.99 was the old price 2022-10-10 14:58:57 +01:00
..
css minor updates to make the old price more accessible. Swapped price block to be a paragraph rather than div, wrapped old price in del tags, and added aria-lablel explaining that 169.99 was the old price 2022-10-10 14:58:57 +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 minor updates to make the old price more accessible. Swapped price block to be a paragraph rather than div, wrapped old price in del tags, and added aria-lablel explaining that 169.99 was the old price 2022-10-10 14:58:57 +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.