Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Modelo de recetario en HTML & CSS

@MindCode-89

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Aggressive-Mohammed

Posted

¡Hola MindCode-89!

¡Felicitaciones por completar el desafío! ¡Hiciste un trabajo increíble! Tu estructura HTML está bien organizada y demuestra un sólido entendimiento de los elementos semánticos. Sin embargo, aquí tienes algunas recomendaciones y comentarios en cuanto a las mejores prácticas de desarrollo web:

Recomendaciones: Fuera de <ul> o <ol>: Has utilizado elementos <li> sin envolverlos dentro de una lista desordenada <ul> o una lista ordenada <ol>. Para mejorar la semántica HTML, todos los elementos de lista <li> deben estar dentro de listas desordenadas <ul> o listas ordenadas <ol>. Ejemplo:

<ul> <li><strong>Total:</strong> Aproximadamente 10 minutos</li> <li><strong>Preparación:</strong> 5 minutos</li> <li><strong>Cocción:</strong> 5 minutos</li> </ul> Sección de Nutrición: El valor de "Grasa" debe usar una unidad adecuada (g para gramos) en lugar de cal, y debe coincidir con el formato de las otras entradas. Parece que debería ser "22g" en lugar de "22cal." Ejemplo: <tr> <th>Grasa</th> <td><strong>22g</strong></td> </tr> Atributo Alt para Imágenes: El texto alternativo de tu imagen debería describir mejor el contenido. En lugar de "omelete-logo", un texto alternativo más descriptivo como "Imagen de una tortilla simple" sería mejor para la accesibilidad. Ejemplo:

<img src="images/image-omelette.jpeg" alt="Imagen de una tortilla simple" width="600px" height="300px" /> Errores Tipográficos: Corrige los errores tipográficos como: "Saltto taste" → "Sal al gusto." "Nutrution" → "Nutrición." "Beat the eggs" está repetido en las instrucciones. Elimina la oración redundante.

HTML Semántico: Envuelve las listas y secciones en etiquetas semánticas adecuadas para mayor claridad y accesibilidad. También puedes considerar usar <article> para las secciones de recetas y envolver los ingredientes e instrucciones en <section> para separarlos lógicamente.

Espaciado Consistente: Asegúrate de mantener un espaciado consistente entre los elementos HTML y evita frases continuas o la falta de espacios, como "strong>Enjoy:</strong>Serve hot" debería ser "strong>Enjoy:</strong> Serve hot."

Estas actualizaciones harán que tu código sea más legible, accesible y bien estructurado tanto para los usuarios como para los desarrolladores.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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