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

Responsive Product Preview Card

@jadefurtado

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@R3ygoski

Posted

Olá Jade, parabéns pela conclusão do projeto, ele ficou muito bem-feito e se assemelha muito ao design proposto.

Notei que tem um pequeno problema de responsividade no seu projeto, tanto que ele fica em formato vertical até no máximo telas de 375px, mas em telas de 376px pra cima ele fica na horizontal, o que causa uma estranheza e fica um pouco "quebrado", para corrigir isso, você pode alterar na sua MediaQuery o valor de 375px para 768px.

Outra coisa que notei, foi que você utilizou position na sua <img/>, mas isso não era necessário, você poderia colocar apenas um width: 100%, que já seria o suficiente para deixar a imagem na forma correta e utilizar display: flex no div.container, que dessa forma você conseguiria ter um controle mais simples de alinhamento vertical e horizontal.

Agora sobre o HTML, a estrutura está correta, mas ele está muito pouco semântico, e manter um HTML semântico é importante tanto para SEO quanto para Acessibilidade. Vou mostrar alguns elementos do seu HTML que poderiam ser alterados para ficar mais semântico.

  • <div class="container"> poderia ser alterado para <main>, sempre depois do <body> o mais correto é vir uma tag <main> e também pelo fato de que nela está contida todo o conteúdo principal da sua página.
  • <div class="container__image"> poderia ser alterado para uma <figure> pois essa é a imagem principal da sua página.
  • <div class="container__card"> poderia ser alterado para <article> pois o conteúdo presente nessa secção é autoexplicativo e independe do resto da página.

E é isso, novamente parabéns pela conclusão do projeto, caso tenha ficado qualquer dúvida ao que mencionei, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

0

@geekharman003

Posted

your solution is almost perfect but here are some tiny suggestions from me to make your solution almost pixel perfect:

(i) - reduce the font weight of original price

(ii) - change the font of add to cart button

0

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