Skip to content
Submitted 11 months ago

Pure HTML and CSS Product preview card component

Alexandre Xavier•60
@abxsantos
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

I've experimented a bit with the class names trying to follow BEM conventions (not sure if the names are too big or if using - are the right way though).

I'm pretty sure I've improved in responsiveness of this component as well (maybe someday I will leave backend development for good hahaha :P), thanks a lot for all the previous solution reviews (thanks specially to @danielmrz-dev!).

Also I've been looking up on how to improve the SEO of pages, and experimented a bit with microdata and some other tips that I got, such as heading structure, which is still a bit confusing by the way.

In case of a component, should headers be used?

Anyway, as always, any review is a good review! Feel free to comment anything or suggesting improvements!

Community feedback

  • Daniel 🛸•44,270
    @danielmrz-devPosted 11 months ago

    E aí Aleee!

    Ficou excelente! Parabéns por mais um projeto!

    Agradeço demais a menção honrosa rsrs

    E fico feliz que consegui te ajudar de alguma maneira!

    Bora aprender junto 💪🏼🦾

    Marked as helpful
    1
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted 11 months ago

    Hello there 👋. Good job on completing the challenge !

    I have only one suggestions about your code that might interest you.

    • When following the BEM naming convention, avoid repeating __ in class names because only one block name is allowed. For instance, the class name .card__content__type doesn't follow the pattern: "block__element--modifier" and includes the block names content and type.

      You can use .card__type or another version.

      The class card__content__price-group__full-price is a bit lengthy and doesn't adhere to the BEM convention. You could shorten it to card__full-price or consider creating other block-level components like price and then have the class as price__full-price.

      You can reference an example of this error here: BEM Quick start - Nesting.

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
    0
    Alexandre Xavier•60
    @abxsantosPosted 11 months ago

    @MelvinAguilar thanks a lot!! I'll pay more attention to the naming convention!

    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