@vishalkhandal96Submitted 9 months ago
tathanz98
@tathanz98All comments
- @tathanz98Posted 2 months ago
HTML semántico Comentario: Verifica si se han utilizado etiquetas semánticas como <header>, <main>, <section>, <article>, y <footer> en lugar de contenedores genéricos como <div>. Esto mejora la estructura y el significado del contenido. Mejora: Si no se usaron etiquetas semánticas, podrías reemplazar <div> con elementos adecuados para facilitar la accesibilidad y el SEO. 2. Accesibilidad Comentario: La solución debe incluir atributos de accesibilidad como aria-label o alt para imágenes, y los botones deben ser navegables por teclado. Mejora: Si faltan, añade descripciones claras a las imágenes y asegúrate de que todos los elementos interactivos (botones, enlaces) sean accesibles para usuarios con lectores de pantalla o discapacidades motoras. 3. Diseño adaptable Comentario: Asegúrate de que la solución sea responsiva, utilizando unidades relativas (em, %, vh, vw) y consultas de medios (@media) para ajustar el diseño en pantallas pequeñas y grandes. Mejora: Si el diseño no se ve bien en diferentes tamaños de pantalla, incluye puntos de quiebre adicionales y prueba en dispositivos reales o emuladores. 4. Estructura y legibilidad del código Comentario: El código debe estar bien comentado, con una separación clara de responsabilidades (HTML para estructura, CSS para estilo, JavaScript para interacción). Mejora: Si el código es difícil de leer, considera aplicar formato adecuado y dividirlo en módulos reutilizables, como archivos separados para CSS y JavaScript. 5. Consistencia con el diseño Comentario: Si el resultado difiere significativamente del diseño original, analiza si la diferencia mejora o perjudica la experiencia del usuario. Mejora: Mantén consistencia en los colores, tipografías y espaciados definidos en el diseño original. Usa herramientas como Figma o Zeplin para comparar el diseño con el resultado. Recomendaciones adicionales Uso de frameworks: Considera usar frameworks como Bootstrap o Tailwind CSS para acelerar el diseño y mantener consistencia. Optimización de recursos: Comprime imágenes y minimiza archivos CSS/JS para mejorar los tiempos de carga. Pruebas: Realiza pruebas de usuario y en diferentes navegadores para identificar posibles problemas de compatibilidad o usabilidad.
0 - P@keshavsharma333Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
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
@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 - @Haaji-gitSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
This is the best challenge that i ever did, so thanks frontend mentor for giving us this opportunity.
@tathanz98Posted 2 months agoHTML Semántico ¿La solución incluye HTML semántico? El código HTML tiene una buena base, pero se podría mejorar el uso de etiquetas semánticas. Por ejemplo, en lugar de usar <div> para contenedores generales, sería beneficioso usar etiquetas como <section>, <article> o <header> cuando sea apropiado. Esto mejoraría la accesibilidad y la estructura del documento, permitiendo que los usuarios y los motores de búsqueda comprendan mejor el contenido de la página.
Sugerencia: Considerar usar <section> para las tarjetas y <header> para la parte superior del contenido, donde se encuentra el título y la descripción general. 2. Accesibilidad ¿Es accesible y qué mejoras se podrían realizar? Actualmente, la solución no parece incluir atributos importantes para la accesibilidad, como los atributos alt para imágenes y roles de ARIA. Aunque las imágenes tienen texto alternativo (alt), sería importante agregar descripciones más detalladas y específicas para mejorar la comprensión del contenido por parte de los lectores de pantalla.
Sugerencia: Asegurarse de que todas las imágenes tengan descripciones precisas y que los elementos interactivos, como los botones (si los hubiera en el futuro), tengan un enfoque accesible y roles definidos para facilitar la navegación con teclado o tecnologías de asistencia. 3. Diseño Responsivo ¿El diseño se ve bien en una variedad de tamaños de pantalla? El diseño parece funcionar bien en pantallas de diferentes tamaños debido al uso de media queries para manejar el comportamiento en pantallas pequeñas. Sin embargo, las tarjetas están muy apretadas en pantallas pequeñas (como en dispositivos móviles). Algunas tarjetas se superponen ligeramente o pueden quedar demasiado grandes para el espacio disponible.
Sugerencia: Se podría considerar agregar un ajuste de flex-wrap para que las tarjetas se distribuyan más adecuadamente en pantallas muy pequeñas. Además, los márgenes podrían ajustarse dinámicamente según el tamaño de pantalla. 4. Estructura, Legibilidad y Reutilización del Código ¿El código está bien estructurado, es legible y reutilizable? El código tiene una estructura clara, y los comentarios en el código ayudan a comprender el propósito de cada bloque. Sin embargo, sería bueno modularizar más los estilos, especialmente en los estilos repetidos para las tarjetas, como los bordes, sombras y tamaños de márgenes. Usar clases comunes o un sistema de variables podría mejorar la reutilización.
Sugerencia: Considere el uso de variables CSS para estilos repetitivos y la creación de clases de utilidad, lo que haría que el código fuera más limpio y fácil de mantener. 5. Diferencias con el Diseño ¿La solución difiere considerablemente del diseño? La solución es bastante fiel al diseño original en términos de la disposición y el estilo visual. Sin embargo, el uso de margin-top en las tarjetas para separarlas podría mejorarse, ya que podría hacer que el diseño se vea menos coherente en pantallas pequeñas. Asegurarse de que todos los elementos tengan márgenes o rellenos consistentes para mantener la uniformidad visual es clave.
Sugerencia: Asegúrese de que el espaciado entre las tarjetas se ajuste dinámicamente para garantizar que se vea bien en todas las resoluciones. Resumen de comentarios: HTML semántico: Mejorar el uso de etiquetas semánticas. Accesibilidad: Añadir descripciones más detalladas para las imágenes y asegurarse de que todos los elementos interactivos sean accesibles. Diseño responsivo: Asegurar una distribución adecuada de las tarjetas en pantallas pequeñas. Código: Mejorar la reutilización y modularidad, utilizando variables y clases comunes. Coherencia con el diseño: Ajustar los márgenes y espaciado para que el diseño se vea mejor en todos los tamaños de pantalla.
0 - @Lazaro-MGSubmitted 4 months ago@tathanz98Posted 2 months ago
HTML Semántico Puntos fuertes: El uso de etiquetas como <main>, <section>, <header>, y <picture> es acertado y mejora la semántica del documento. Esto contribuye a que el contenido sea comprensible tanto para desarrolladores como para lectores de pantalla. Áreas de mejora: Considera incluir la etiqueta <footer> para los créditos o enlaces adicionales si corresponde al diseño. Utiliza etiquetas más específicas en lugar de <div> donde sea posible, como <aside> o <article>. Accesibilidad Puntos fuertes: El texto alternativo de la imagen está incluido (alt="Product Image"). El botón "Add to Cart" utiliza texto claro y descriptivo, acompañado de un ícono visual. Áreas de mejora: Añade etiquetas aria-label o aria-labelledby al botón "Add to Cart" para proporcionar contexto adicional a los lectores de pantalla. Asegúrate de que los colores del texto y el fondo cumplan con las pautas de contraste WCAG. El precio original ($169.99) podría tener un contraste bajo debido al color gris. Utiliza etiquetas <label> en caso de que existan formularios o entradas en futuras implementaciones. Diseño responsivo Puntos fuertes: Las media queries están bien implementadas, permitiendo que el diseño se adapte a pantallas de diferentes tamaños. El uso de flexbox asegura un buen control sobre el diseño del producto y su descripción. Áreas de mejora: Verifica cómo se comporta el diseño en pantallas intermedias (entre 768px y 1024px). A veces, los elementos pueden quedar demasiado comprimidos si no se manejan los espacios correctamente. Asegúrate de que las imágenes se escalen correctamente en dispositivos con resoluciones más altas, como pantallas Retina. Estructura del código y reutilización Puntos fuertes: El código CSS utiliza clases descriptivas que facilitan la comprensión del diseño. Los estilos están separados en secciones claras, lo que mejora la organización. Áreas de mejora: Podrías usar variables CSS para colores y tamaños (--primary-color, --font-size) para facilitar futuros cambios en el diseño. Considera agrupar estilos similares para reducir redundancia. Por ejemplo, las propiedades repetidas para #but y .add-to-cart podrían consolidarse. Conformidad con el diseño original Puntos fuertes: El diseño refleja de cerca el diseño proporcionado en términos de estructura, tipografía y colores principales. Áreas de mejora: Si hay alguna discrepancia con el diseño, como alineaciones o espaciados, verifica esos detalles con herramientas como Pixel Perfect para ajustarlos. Si no se incluyeron animaciones o transiciones, añadirlas podría mejorar la experiencia del usuario.
Marked as helpful0
