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 using html and css

P
Ken 160

@ubcyukiny

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


What are you most proud of, and what would you do differently next time?

Most proud of the completion of the project.

What challenges did you encounter, and how did you overcome them?

  1. Margins and paddings were confusing at first, but by using Google DevTools, hovering on the computed panel, makes it easier to understand and debug

  2. Figuring how to center the QR Code card component inside the body. Tried multiple solution from stack overflow, for eg. margin: auto, which only centers horizontally and other solutions like

body {
   display: flex;
   justify-content: center;
   align-items: center; 
}

Stumbled on adding height:100vh, which seems to fix the issue.

What specific areas of your project would you like help with?

I need to work on my understanding of the display property and viewport unit. Would also appreciate some feedback on my coding style!

Community feedback

@luisgonzalez2001

Posted

Podrías reducir la cantidad de código que utilizaste para estilar, por ejemplo; el font-family podrías ponerlo en el body y así tenerlo ya heredado en todo el proyecto, al igual con las propiedades margin y padding que reciben 4 parámetros en una linea (arriba, derecha, abajo e izquierda)

Marked as helpful

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