3-column card challenge - Grid & Flexbox involved.

Community feedback

• 

  IRVINE MESA•1,855

  @DrMESAZIMPosted over 2 years ago

  Hi Francisco

  This was indeed great work from you. I would like to add since you are doing newbie challenges I urge you to look into mastering one CSS framework for mobile responsiveness .As you noticed in the challenge you used both the GRID and FLEX frameworks.

  0

  ---

  

  Francisco Prado•80

  @franciscoprado4Posted over 2 years ago

  @DrMESAZIM Thank you for your suggestions, but i want to master css first because the frameworks come and go. May be i will try tailwind in the future.

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Buen trabajo, Francisco Prado!

  Respecto al diseño y si es responsive todo esta perfecto luego de revisar el código tengo tres recomendaciones.

  • Usa a en ves de button el motivo es que tiene la función de hacerte leer más texto siendo lo más probable que te redirija a una nueva página o otro apartado en donde se pondrá este componente.

  • Usa solo un h1 en ves de 3, entiendo que capaz por el problema de como es el diseño no te quedo más que poner 3 porque si pones 3 h2 te deberá saltar un error. Entonces lo que puedes hacer es cambiar tus h1 por h2 y pones un h1 con el titulo de la página y para que este no moleste al diseño de tu página agregale la clase sr-only con lo siguiente atributos:

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

  La idea detrás de esta clase es que hará que el h1 desaparezca a la vista de la página pero aun así sea reconocido por el lector de pantalla. Esta clase se suele usar para temas de accesbilidad que si deseas ya puedes investigar.

  • Lo ultimo es agregarle un transition a tus botones como transition: color 300sm; para que al pasar a su estado hover este lo haga de manera suavizada y no tan bruzca.

  Eso seria todo, suerte en tus proyectos venideros.

  0

  ---

  

  Francisco Prado•80

  @franciscoprado4Posted over 2 years ago

  @Sdann26 Gracias por las sugerencias. Si, a veces confundo la funcionalidad que te da un link con un botón. Poco a poco voy sabiendo la diferencia.

  0