Skip to content
Submitted 14 days ago

Product preview card component solution

Bruna Gonçalves•180
@brunagoncalves
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?

I’m most proud of how I managed to achieve a visually appealing and responsive layout that stays true to the original design specifications from the challenge. The project’s mobile and desktop views are well-optimized, and I enjoyed working with a mobile-first approach, which improved the layout transitions significantly. Next time, I’d focus more on optimizing the CSS further—potentially by leveraging CSS variables and mixins even more for reusable styles across breakpoints and elements, which would keep the codebase cleaner.

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

One of the main challenges was handling the image swapping between mobile and desktop views. Ensuring that the correct image displays at the right breakpoint took some trial and error with CSS media queries, but I eventually achieved it by setting up distinct classes for the images and adjusting visibility based on screen width. Another challenge was designing the hover and focus states to feel intuitive and consistent across devices. Careful planning with CSS transitions helped create smooth interactive effects that look consistent.

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

What could I improve in my project and tips.

Community feedback

  • Bernardo Poggioni•5,360
    @R3ygoskiPosted 14 days ago

    Olá Bruna, parabéns pela conclusão do projeto, ele ficou muito bem-feito, parabéns.

    Uma dica sobre o HTML, ao invés de utilizar duas <img/>, considere utilizar uma <picture>, que dessa forma você consegue trabalhar melhor essa parte de alteração de imagens. Segue um link sobre: W3School - Picture.

    Sobre a semântica do HTML, você utilizou uma <header> para a imagem, mas <header> serve para algo introdutório, a imagem por si só não é introdutória, o mais correto seria utilizar uma <figure>. E um pequeno erro, é a parte de p.card-name, o mais correto é que aqui fosse uma <h2>, pois esse PERFUME seria uma categoria.

    E também a segunda secção do Card, no caso a secção onde estão as informações, ela não é <div>, mas sim um <article>, isso devido ao conteúdo dela ser independente e autocontido.

    Edit: Não havia notado no momento, mas nesse trecho: <img src="images/icon-cart.svg" alt="Icon Cart" aria-hidden="true"> o alt deveria ser assim alt="", isso porque não damos alt para ícones e nem para imagens de fundo.

    E é isso, parabéns pela conclusão do projeto, ele ficou realmente muito bom, continue praticando e se aprimorando. Caso tenha ficado qualquer dúvida quanto ao que eu disse, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful
    0
    Bruna Gonçalves•180
    @brunagoncalvesPosted 14 days ago

    Thanks for the comment.

    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