NFT preview card component

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Buenas Eduardo, excelente trabajo finalizando el challenge, enorabuena por la solución!

  Me gustaría intentar contestar tus preguntas y ayudarte con tu solución.

  1. Puedes conseguir el efecto de dos formas, usando el div overlay como has hecho tu (la mejor y más sencilla manera a mi parecer), o usando un pseudoelemento ::before para generar el cuadro cuando hagas hover, a mi parecer la primera opción es mucho mas sencilla y logra el objetivo.

  2. Este proyecto no necesita Grid, no es un layout complejo, se puede hacer completamente con Flexbox. Utiliza CSS Grid para layouts más complejas con varias filas y columnas, flexbox para layouts más sencillos y como herramienta rápida para alinear

  3. Contestado en la pregunta anterior, utiliza Flex para layouts de 1 columna o 1 row (una navegación, un bloque con varios textos, una imagen con texto abajo o al lado..) y grid para estructuras más complejas (los productos de un e-commerce, una galería de imagenes, varios testimoniales en columnas y filas...)

  Finalmente me gustaría añadirte algunas cosas para mejorar tu projecto:

  • No limites el width a 25% en tu clase child hace que el layout se rompa a partir de 1440px, en vez de eso, añade flex a tu body para poder centrar tu componente de está manera:

  body {
    background-color: hsl(217, 54%, 11%);
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
  }
  

  Y con eso lo tendrías centrado en medio de tu body, ya que le estarías dando un tamaño de toda la pantalla con el min-height: 100vh!

  Espero que mi feedback te sea de ayuda, si tienes cualquier pregunta no dudes en preguntar, un saludo!

  Marked as helpful

  1

  ---

  

  Eduardo•200

  @EDDuardOo-CodePosted about 2 years ago

  @DavidMorgade Muchas gracias de antemano por la observaciones, además de ayudarme a entender mejor cuando usar grid o flexbox,

  Mejorare usando grid y flexbox poniendome mas retos, ademas de eso tomare en cuenta el consejo de poner un flex al body, ademas de utilizar medidas responsivas

  1