Four-card-feature-section

Community feedback

• 

  Farid_Danilo•140

  @FaridDanilo

  Posted about 1 month ago

  Feedback sobre tu solución

  A continuación, te comparto algunos puntos de mejora que pueden ayudarte a perfeccionar aún más tu código:

  ---

  HTML

  1. Error semántico en la estructura principal

     • Detecté que estás combinando dos etiquetas en una sola línea:

       <main section class="main-container">
       

     • Corrección: Solo deberías usar una etiqueta en ese lugar. Lo correcto sería:

       <main class="main-container">
       

  2. Jerarquía de títulos

     • Actualmente tienes dos etiquetas <h1>: una para el título y otra para el subtítulo. Recuerda que solo debe haber un <h1> por página para mantener una estructura semántica adecuada.
     • Sugerencia de corrección:

       <h1 class="title-normal">Reliable, efficient delivery</h1>
       <h2 class="title-bolder">Powered by Technology</h2>
       

  3. Encabezados en las tarjetas

     • En cada tarjeta usas <h2> para el título. Para mantener la jerarquía, te recomiendo emplear <h3>, ya que ya tienes <h1> y <h2> para el título principal y subtítulo.
     • Corrección:

       <h3 class="s-title">Supervisor</h3>
       

  4. Nombres de clases CSS

     • Estás utilizando nombres como s-title, tb-info, etc. Si bien funcionan para este proyecto, pueden dificultar la reutilización y escalabilidad del código en proyectos más grandes.
     • Recomendación: Utiliza nombres de clases más genéricos y descriptivos, por ejemplo: card-title, card-info, card-image, etc.

  ---

  CSS

  1. Uso de font-family en el selector universal

     • Actualmente tienes:

       * {
         box-sizing: border-box;
         margin: 0;
         padding: 0;
         font-family: "Poppins";
       }
       

     • Es mejor aplicar la fuente en el selector body en vez del universal (*), para evitar posibles conflictos en el futuro.
     • Sugerencia:

       body {
         font-family: "Poppins", sans-serif;
       }
       

  2. Variables CSS

     • Observé que usas variables como --Grey-500. Es recomendable emplear minúsculas y guiones para mantener la coherencia y facilitar la escalabilidad:

       --grey-500
       

     • La consistencia en la nomenclatura hace que el código sea más fácil de mantener y escalar.

  ---

  Espero que estos comentarios te sean útiles :)

  10

  Marked as helpful