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 Code Component HTML & CSS

@IvanSerranoGit

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,280

@Sdann26

Posted

Ivan!! Creo que te han dado un feedback bastante completo antes solo quería hacer enfasis en que cambies el <h3 class="info_container-title"> por <h1 class="info_container-title">, ya que es necesario que por página tengas 1 solo h1 y le podrías poner el atributo font-size: 1.3 rem para que encaje todo bien. El motivo del cambio es para que no tengas problemas de accesibilidad, frontend mentor siempre te genera un reporte con los posibles problemas de accesibilidad y HTML, y es nuestro deber corregirlos.

Editalo y actualiza el reporte para que salga sin error, en lo personal buen proyecto siempre puedes agregarle el toque tuyo sobre todo si no te indican como debes hacer el proyecto pero en el diseño debemos hacerlo lo más similar posible ya que es lo que piden las empresas.

Buenas suerte :D!

Marked as helpful

0
PhoenixDev22 16,990

@PhoenixDev22

Posted

Greeting @IvanSerranoGit ,

Congratulation on completing your first frontend mentor challenge,

I have few suggestions regarding your solution:

  • I wouldn't use any <section> tags in this challenge . section is not meant to be used anytime you feel tempted to use a div . section is for a bigger chunk of content often titled by <h2> Read more about usage notes

  • Page should contain a level-one heading . As this is not a real webpage , you can use <h1> with class="sr-only" (Hidden visually, but present for assistive tech) and use <h2> instead of <h3>. Always remember using heading tags in chronological order.

  • When you write alternative text, it should not be hyphenated. The alternative text should be human-readable ex : **qr code for frontend mentor **

  • width: 288px;an explicit width is not a good way . consider using max-width to card instead and a little margin to the card that will prevent it hitting the screen edges.

  • height: 450px;It's rarely ever a good practice to set heights on elements, you almost never want to set it . let the content define the height .

  • You should use em and rem units .Both em and rem are relative units , Using px won't allow the user to control the font size based on their needs.

  • It's recommended not to use px for font-size. you can use rem instead .

Overall , your solution is good. Hopefully this feedback helps.

Marked as helpful

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