Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card

@lukejohnsen

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@R3ygoski

Posted

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

Log in with GitHub
Discord logo

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