Submitted 7 months ago

Product Preview Card

Luke Johnsen•10

@lukejohnsen

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Glad I was able to utilize some CSS custom properties to help with the theme. Definitely didn't use it everywhere but something I'll keep in mind for next time so I'm not rewriting properties over and over.

What challenges did you encounter, and how did you overcome them?

I've been trying to use rem and em more frequently in my CSS. Sometime I still find it a challenge to figure out when and where to utilize these, but it's a work in progress.

What specific areas of your project would you like help with?

General feed, what could've been done better or more efficiently? Are there any redundancies?

Community feedback

Bernardo Poggioni•5,380
@R3ygoskiPosted 7 months ago
Hello Luke, first of all, congratulations, your solution looks good and is almost similar to the proposed design.

Regarding your question, I'll start with redundancy; apparently, no, it seems quite clean and without redundancies.

As for what could be improved, there are some areas I'd like to highlight:

Instead of using image swapping the way you did, you could use a <picture> element; here's a link about it: W3School - Picture

Using more semantic tags to enhance accessibility. Some examples of areas that could use semantic tags:

<div class="card-wrapper"> could be <main>, as it's the main content.

<div class="card"> could be <article>, as it's self-explanatory.

<div class="card-image"> could be <figure>, as it contains only one image and it's also the main image of the page.

Now, a tip regarding using rem; I strongly recommend using it for your fonts. I noticed that some did, but others didn't. The important reason for using rem for fonts is that it allows them to adapt to the user's font settings.

Once again, congratulations on the project, it looks very good. Keep practicing and improving. If you have any questions, please ask below, and I'll try to help.
Marked as helpful
1

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord