Flexbox and BEM

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Ahora para el tema de accesibilidad o errores de HTML, te recomiendo siempre ver los reportes, ver cuales son los problemas, corregirlos y generar un nuevo reporte con 0 errores en TODOS LOS PROYECTOS, porque esto mejorará la calidad de código evitando errores de sintaxis y problemas a futuro ya sea por temas de SEO, código deprecado, etc.

  Por lo menos en este proyecto no te recomiendo usar ni section ni articles, el motivo masomenos es que estas etiquetas sirven para englobar una misma temática en tu web. Por ejemplo un section puede ser una sección con un subtitulo, info de esa sección y un conjunto de cards.

  Esto lo mencionó porque aqui esta creando una pequeña tarjeta QR que servirá para ponerle diferentes parte como imagenes, textos, números, iconos, etc. Y se suele manejar más con div ya que sirven principalmente para agregarle efectos, posicionamiento, etc.

  Por otro lado para eliminar los errores de una vez, lo primero es que utilices un h1 mínimamente por página en tu proyecto en este caso deberías cambiar el h3 por un h1 .

  Tambien usar un <main> para colocar todo el contenido principal de tu página en este caso puedes utilizarla para englobar todo el contenido dentro de tu body ya que ahí esta el contenido principal de tu página.

  Con esto masomenos puedes terminar sin errores en el reporte y te va servir para poder quitarle los errores en tus demás proyectos :D!

  Marked as helpful

  0

  ---

  

  Jose Daniel•270

  @J0SEED01Posted over 2 years ago

  @Sdann26 Gracias por los comentarios, actualize los estilos que me dijiste y las etiquetas igual las cambie a div y aparecen menos errores ,Gracias!

  0

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @J0SEED01 A ya es que te mencione que debías agregar un main, por eso cambia <div class="card"> por <main class="card"> y con eso se eliminan todos los errores.

  Por cierto el h1 tiene su propio tamaño por lo cual queda grande pero lo puedes modificar con font-size para que quede del tamaño del diseño y quede bien :D

  Marked as helpful

  0

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @J0SEED01 Jose uu, te mencione que cambiarás el tamaño del font-size del h1 podrías ponerle font-size: 1.27rem (o un poco menos) para que quede como el del diseño y ya actualizas el screenshot ya que ha quedado grande :'v por cierto soy el mismo Sdann del Discord 3:.

  Marked as helpful

  0

  

  Jose Daniel•270

  @J0SEED01Posted over 2 years ago

  @Sdann26 vale gracias ya lo cambiee jjaaja

  1

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @J0SEED01 A este paso voy a revisar todos tus proyectos hahaha!

  0

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @J0SEED01 A este paso voy a revisar todos tus proyectos hahaha!

  Marked as helpful

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Jose Daniel acabo de revisar varios de tus proyectos y te ayudaré a masomenos como eliminar la mayoría de errores de accesbilidad pero primero mejores este diseño (Por cierto comento este proyecto porque es el más sencillo).

  Quitale el flex-basis: 300px a la tarjeta para que ocupe todo el tamaño de su contenido más la imagen.

  Por otro lado cambia esto a:

  .card, .card__img img {
    border-radius: 12px;
  }
  

  Es solo que la imagen de adentro tiene menos border-radius que la card.

  Tambien modifica este tamaño si puedes para que quede el texto como el diseño.

  .card__info {
    width: 230px;
  }
  

  Para la sombra te recomiendo utilizar la funcion rgba, o hsla, la relevancia de estas es el ultimo valor que te puede ayudar a dar transparencia haciendo que mientras más cerca esta del 0 es más transparente.

  Por ejemplo:

  box-shadow: 0 0 16px -2px rgba(0, 0, 0, 0.2);

  Con todo esto creo que podrías mejorar mucho el diseño ya que todos los cambios que te mencione los estoy aplicando en el navegador.

  Marked as helpful

  0