responsive page

Community feedback

• 

  Jony Reyes•80

  @JonRe88Posted about 1 month ago

  Puntos Positivos: Uso de HTML semántico:

  Usaste etiquetas correctas como <main>, <section>, <h1>, <h2>, <ol>, <ul>, <table>, etc. La estructura jerárquica de títulos es adecuada.

  Mejoras Sugeridas:

  1. Corrección en la tabla de nutrición (Error en la etiqueta <td>) En la fila de calorías, la etiqueta <strong> está mal cerrada. -Corrección: `<tr>

  <td><span>Calories</span></td> <td><strong>277kcal</strong></td> </tr>` 2. Mejora en accesibilidad Para hacer la página más accesible, puedes agregar un <header> y un <footer> en caso de que el diseño lo requiera. Usa aria-label en secciones clave si lo necesitas. Agrega etiquetas <thead> y <th> en la tabla para mayor accesibilidad: -Corrección:

    <thead>
      <tr>
        <th>Nutrient</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Calories</td>
        <td><strong>277kcal</strong></td>
      </tr>
      <tr>
        <td>Carbs</td>
        <td><strong>0g</strong></td>
      </tr>
      <tr>
        <td>Protein</td>
        <td><strong>20g</strong></td>
      </tr>
      <tr>
        <td>Fat</td>
        <td><strong>22g</strong></td>
      </tr>
    </tbody>
  </table>```
  3. Mejora en la Responsividad
  Asegúrate de que la imagen no sea demasiado grande en pantallas pequeñas. En el CSS, puedes agregar:
  
  `img {
    max-width: 100%;
    height: auto;
    display: block;
  }`
  
  También podrías envolver la imagen y el contenido en un div con display: flex para un mejor diseño en pantallas grandes.
  

  0
• 

  P

  Elewude Okikijesu•430

  @HelewudPosted about 1 month ago

  The font import in the css file is not correct, that's why its not being picked up by CSS.

  @font-face { font-family: "outfit"; src: url("./assets/fonts/outfit/Outfit-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; }

  Note, when dealing with range values, you are to state the minimum and maximum value

  @font-face { font-family: "young-serif"; src: url("./assets/fonts/young-serif/YoungSerif-Regular.ttf") format("truetype"); font-weight: 400; }

  Note, when dealing with single values, just state only the value

  0