
Design comparison
Solution retrospective
grid placments exact, use gap when spacing consistent across all flex/grid elements or else use margin, if some style is not applying please check if any other style is not influencing it
What specific areas of your project would you like help with?more responsive
Community feedback
- @tathanz98Posted 2 months ago
¿La solución incluye HTML semántico? Sí, si has utilizado elementos como <header>, <footer>, <section>, <article>, etc., estás utilizando HTML semántico. Este tipo de etiquetas mejoran la accesibilidad y el SEO, ya que le indican a los navegadores y a los motores de búsqueda el significado de cada sección de la página.
Mejoras:
Asegúrate de usar etiquetas adecuadas para los distintos elementos. Por ejemplo, usar <main> para el contenido principal y <aside> para contenido relacionado pero secundario. Considera el uso de <nav> para la barra de navegación si no lo has hecho ya. ¿Es accesible y qué mejoras se podrían realizar? Accesibilidad:
Sí, una página accesible debería permitir que los usuarios con discapacidades puedan navegarla fácilmente. Esto incluye: Uso de etiquetas alt en las imágenes. Asegurarte de que el contraste de los colores sea suficiente para personas con dificultades visuales. Uso de aria para describir funciones de los elementos interactivos. Mejoras:
Asegúrate de que todos los elementos interactivos, como botones o enlaces, sean accesibles con el teclado. Añadir roles aria a elementos interactivos que no sean semánticos, como los botones personalizados. Verifica la accesibilidad en un lector de pantalla y herramientas como Lighthouse. ¿El diseño se ve bien en una variedad de tamaños de pantalla? Sí, si utilizas media queries para garantizar que el diseño sea responsivo y se adapte a diferentes tamaños de pantalla. Esto es clave para garantizar que la página sea usable en dispositivos móviles y de escritorio.
Mejoras:
Revisa en diferentes dispositivos para asegurarte de que todos los elementos se ajusten correctamente. Considera el uso de unidades relativas como em o rem en lugar de px para fuentes y márgenes, lo que ayuda a que el diseño sea más flexible. ¿El código está bien estructurado, es legible y reutilizable? Sí, un código bien estructurado debe seguir convenciones claras como la indentación consistente, el uso de comentarios explicativos y la separación de estilos, scripts y HTML en archivos separados.
Mejoras:
Utiliza comentarios en tu código para explicar el propósito de secciones importantes. Considera la creación de clases reutilizables en CSS para evitar la repetición de reglas de estilo. Esto hace que tu código sea más limpio y más fácil de mantener. ¿La solución difiere considerablemente del diseño? No, si el diseño sigue de cerca las pautas visuales proporcionadas en el desafío. Asegúrate de que los colores, las tipografías y las proporciones coincidan con el diseño original.
Mejoras:
Si la solución difiere, asegúrate de que todos los elementos visuales (como los márgenes, los espacios, las fuentes, etc.) se ajusten al diseño original. Usa las herramientas de inspección del navegador para verificar que los tamaños y la distribución sean correctos. Revisa el espaciado entre elementos, especialmente en pantallas pequeñas
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