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 FlexBox)

@jlmunozfdev

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


Todavía me cuesta trabajo manejar Flexbox, aunque no sé si lo he aplicado bien. La parte de media queries también estoy en duda. Y sí alguien quiere aportar con un comentario bienvenido sea.

Community feedback

P

@874anthony

Posted

Estuve viendo la parte que preguntabas en tu feedback, y me parece que manejas bien el flexbox. Alíneas y le cambias el alineamiento con el flex-direction, los cuales son usos comunes. Si quieres profundizar en Flexbox siempre tienes la (documentación oficial)[https://developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Flexbox]

En respecto a los media-queries, veo que definiste:

.div__card {
   width: 300px;
}

@media (min-width:962px){ 
    .div__card {
        width: 375px;
    }

También me parece correcto, en el caso de que hayas tomado por un mobile-first design, primero haces el esquema para teléfonos móviles, y vas creciendo los elementos a medida que se haga más grande el ancho de la pantalla.

No me queda más que felicitarte, sigue así!

Marked as helpful

0

@jlmunozfdev

Posted

@874anthony Gracias por el feedback. Me es más fácil comenzar por la parte mobile y luego ir agrandando. Bueno, así lo aprendí en un curso que llevé y ya me familiricé con ello hasta que encuentre nuevas formas. Como dicen poco a poco mientras no se deje de practicar. Muchas gracias nuevamente por el comentario.

1
David 8,000

@DavidMorgade

Posted

Muy buenas Jorge, bienvenido a la comunidad y felicitaciones por terminar este challenge!

A mi parecer has sacado un buen uso de flex-box para este reto, muy buen trabajo alineando el componente y los textos en su interior junto con la imagen.

Este reto es más simple pero aun así te recomendaria que usarás tags the html un poco más semánticos como por ejemplo: main, section, footer, h1 y demás... para este reto tampoco es algo muy importante, pero sería una buena práctica para que vayas habituando a usar tags más semánticos!.

Espero que mi feedback sea de ayuda para próximos proyectos, buen trabajo!

Marked as helpful

0

@jlmunozfdev

Posted

@DavidMorgade Justamente estoy revisando el tema de html semántico en la documentación ya que estoy más familizarizado (como la mayoría) con los divs. Cuando ya me familizarice mejor ya comenzaré a utilizarlo. Gracias por el feedback.

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