Skip to content
Submitted 3 months ago

Product Preview Card Component (HTML, CSS)

#sass/scss
P
Carl•1,135
@CarlHumm
Preview site (opens in new tab)View code (opens in new tab)
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?

Hello

I haven't completed a solution in a long time so I'm fairly happy with how this went. Took awhile but I got the hang of the newer sass syntax with @use and @forward instead of using @import.

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

Fonts didn't work - at first

To begin with none of my fonts were loading and I couldn't figure out why. After some research I found out that it was because I was using url's relative to my sass partial, and not to where the partial code is resolved. It wasn't a bad thing though as I learnt something new and got to experiment with optimizing fonts.

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

Article, div or li?

I used an h3 in place of h2 or h1 as I viewed the component as part of a larger real life page, but that's not what confused me.

I wasn't sure whether the main card should be an article, div or li. The card could easily be part of a carousel of li's, it could also be a stand alone div or article, this is where I was confused. In the end I decided to make it an article.

Any advice on what tags are most appropriate and what tags I could use for .product__content and .product__thumbnail would be appreciated. These feel like dividing sections/containers to me, and I wasn't sure whether a div or section would be most appropriate.

Thanks for reading, open to any advice/tips!

Community feedback

  • Ezequiel•1,030
    @3eze3Posted 3 months ago

    Code Review

    Hello 👀, very good solution for this challenge, Carl.

    I have a few recommendations that may help you with your future challenges:

    General:

    Having a structured codebase is key when starting any project.

    • Use an assets folder to store images, icons, and fonts.

    • Regarding the structure of the SCSS, of course, this is very personal and depends on how you get used to developing, but it would be good to centralize your partial imports in one file.

    Since having a _base.scss partial and importing @use './components/index'; that in turn imports @forward './cards' is unnecessary.

    You can improve this by having a central_file.scss, and directly importing the necessary partials into it, and placing the mixin and variable files that will be used by the partials there.

    HTML:

    • Replace the div with <figure> and <figcaption> to improve the semantics and accessibility when working with visual content related to text.

    • Add aria-label to buttons to improve the accessibility of interactive elements.

    • If you want to see the component in a broader context, like a perfume store, we have a section for perfumes, and each perfume is an independent piece that forms part of the same section, so the use of article is correct. :)

    CSS:

    • Remove unused styles and simplify the CSS/SCSS code, as in the reset I see you have reset.scss with styles for tags you don't use.

    • Centralize all styles in one main file (e.g., styles.scss) to avoid creating unnecessary extra files.

    • Use @forward only for sharing mixins, functions, and variables, not for component styles, like you do with _card.scss (you can import this directly).

    • As for mixins, you can really use them if multiple styles repeat, or if multiple structures repeat, like layouting with flex or grid.

    I hope these recommendations have helped you, keep it up, and if you ever have a doubt or get stuck on something, feel free to message me on LinkedIn.

    Happy coding 🍧

    Marked as helpful
    2
    P
    Carl•1,135
    @CarlHummPosted 3 months ago

    @3eze3

    Thank you for the helpful suggestions.

    I'm familiar with importing sass partials into a single file but am new to the @forward and @use parts of dartsass, so thank you for the advice regarding sharing mixins, functions and variables.

    I must admit, the reset was me being a bit lazy :)

    Will do, and good luck on your next challenge as well!

    0

Please log in to post a comment

Log in with GitHub

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