3-column preview card component

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Adan felicitaciones por acabar este proyecto veamos algunos detallitos a mejorar.

  Agregale los siguientes atributos en esta clase, el primero es para agregar un efecto de cambio con cierto retardo y el segundo es porque en realidad si no lo pones verás que el botón como que crece y es porque no tiene borde así que si se lo agregas al inicio solo cambia el fondo del botón no el borde.

  .button-group {
    transition: all 200ms;
    border: 2px solid var(--background-headings-buttons);
  }
  

  Por otro lado hay un problema es que si usas muchas etiquetas h1 al subir una página será penalizado el SEO de la página ya que solo debe haber una por página, ahí si te recomendaría cambiar todos los h1 por h2, pero entonces generaría el problema de que no hay h1, para lo cual lo solución más fácil que puedes tomar es agregar un h1 dentro de tu main que contenga el título que quieras y le agregas la clase sr-only la cual tendrá los siguientes atributos:

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
  

  Masomenos funciona de la siguiente manera, la clase hace que el elemento que la contenga no aparezca en el flujo pero sin embargo exista, su nombre sr-only viene de solo screen reader para que solo lo detecte el lector de pantalla, esto se usa para temas de accesbilidad cuando deseas explicar o dar detalle de algo pero no deseas que aparezca en la web porque se autoexplica mediante la visualización pero para dar más detalle al usar los lectores de pantalla se suele usar esta clase.

  Espero que mis comentarios sean de utilidad.

  Marked as helpful

  0

  ---

  

  Adan Saavedra•250

  @AdanSaavedraPosted over 2 years ago

  @Sdann26 Muchas gracias Danilo, tu comentario me ha sido de mucha utilidad, ya que olvide esos pequeños detalles de la transición y agregarle el borde para que no parezca que crece.

  Te acrezco muchísimo tu explicación del sr-only, era algo que desconocía y gracias a ti me quedo super claro. Gracias por compartir tu conocimiento bro, tu comentario fue muy util.🔥👍🏾😄

  1