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

QR Card Component

#accessibility
Felipe• 130

@freefrozztea

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Danilo Blas• 6,300

@Sdann26

Posted

Felipe, felicitaciones por acabar tu segundo reto!

En lo personal intenta siempre que tus proyectos queden igual al diseño ya que esto es muy apreciado por las empresas que te contraten para maquetar, en este caso creo que el espaciado debe ser un poco más pequeño y la opacidad de la sombra podrías reducirla a 0.25 ya que es lo más común usando en sombras.

Por cierto no te recomiendo usar section para crear tus componentes como esta card y la mayoría de retos de nivel newbie son componentes que a futuro podrían ser reutilizables en varios apartados de la página, para ello utiliza div's que su principal proposito es darle clases para modificar los elementos dentro de estas. Los sections y articles guardalos para cuando trabajes una página por completo y tengan diferentes apartados ahí es donde se le da su principal uso.

Para ir averiguando por tu cuenta podrías investigar las siguiente tecnologías si es que no conoces:

  • Nomenclatura BEM
  • Preprocesador SASS
  • Reset CSS y/o Normalize CSS

Si es que ya sabes alguno de esos temas enhorabuena vas por buen camino :D!

Espero que mis comentarios sean de ayuda, buena suerte!

1

Felipe• 130

@freefrozztea

Posted

@Sdann26 Muchas gracias Danilo. Ya corregí la opacidad de la sombra. Cambié las etiquetas section por las etiquetas div. La verdad que no quise usar Reset CSS o Normalize CSS porque quería chocarme con los errores de no usar estos. Si bien conozco SASS también pensé que no era necesario para este desafío, aunque para una refactorización posiblemente lo use. La Nomenclatura BEM la aprendí pero aún me falta acostumbrarme a usarlo.

Muchísimas gracias por todas tus recomendaciones! Si tenés alguna nueva recomendación que crees me será útil podés darla con tranquilidad. Abrazo!

1

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