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.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I could practice the mobile-first approach that I recently learned from this course on creating responsive layouts. I learned the difference between button:focus and button:active and also used outline property to customise the outline on focus.
On the mobile view, the button keeps the changed background color on tap until tap is made outside the button area. I should figure why this is happening and then find a way to make the button get back to the original background color right on releasing the touch on the button.
- Disable highlight on button tap - Helped me remove the blue highlight that appeared over the button on click.
- Conquering Responsive Layouts - Kevin Powell - Helped me learn how to create responsive layouts with a mobile-first approach.
- Difference between button:focus and button:active
- Frontend Mentor - @kichopher