
Design comparison
Community feedback
- @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:
- 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>
<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@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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord