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

HTML AND CSS

@gabriellima666

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

Lucas 👾 104,420

@correlucas

Posted

👾Fala Gabriel, tudo bem? Parabéns pelo desafio!

Acabei de ver sua solução e tenho umas dicas pra você.

Evite usar id no seu código, deixe pra usar id só quando seu código tiver um formulário ou JS. Pra estilizar o código use sempre classes ou o seletor direto de cada item.

O seu component está perfeito, mas se você quiser melhorar ainda mais, você pode usar a tag <picture> para simplificar seu código e segurar as duas imagens dentro do html. Usando essa tag, você nem precisará de media query pra mudar de uma imagem pra outra dependendo do dispositivo (mobile ou desktop), basta configurar tudo dentro do html.

Caso você ainda não conheça essa tag, aqui na documentação explica certinho como configurá-la: https://www.w3schools.com/tags/tag_picture.asp

👋 Espero ter ajudado e continue no foco!

0
P
FO 155

@de-furkan

Posted

Hi there,

The design looks great.

  1. You have got the colours correctly
  2. Fonts look great
  3. Button looks fine

To improve:

  • Consider using @media queries -> check out MDN docs or watch a youtube video, will help bring responsiveness to your design so that it looks consistent across different devices.

Hope this helps.

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