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

QRC code Challenge using HTML Semantic and Flexbox

@chocoboMate

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had a difficult time figuring out how to center the "main" vertically because I forgot that I need use the height of window using vh for viewport in body. I realized later on that I need to based the height of the body in viewport so that when I align it in center vertically it will be correct.

Community feedback

@Enmanuel-Otero-Montano

Posted

¡Hola Teresa! Felicidades por tu solución.

Solo permiteme decirte que al body no es necesario darle 100vw, ya que normalmente el body ocupa todo el ancho de la pantalla. Espero no tomes a mal mi señalamiento.

Saludos

0
Elaine 11,420

@elaineleung

Posted

Hi Teresa, welcome to Frontend Mentor, and congrats on completing your first challenge! This looks really great, and I'm glad you figured out how to center the component in the end. I also love the footer design with your avatar; great personal touches :)

Just some quick comments: In your code, I see that you have a media query for max-width: 375px, which suggests to me that you might have started writing this with the desktop in mind first (even though technically this component has the same design for all sizes). I'd suggest that for other challenges with a desktop and mobile view, start with the mobile first and then write media queries for the desktop; you'll find that's it a lot easier to add/change things than to remove or unset them.

Also, I'm looking at your report, and you just got a few issues to fix, namely the need for a <main> tag for your content (you can just change your .container div to from a <div> tag to <main>), and also that your section tags should contain have a heading tag is possible.

Once again, great job, and I'm looking forward to seeing more work from you!

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