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

Responsive cards using Flexbox

@valentinalopezh98

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@MelvinAguilar

Posted

Hola 👋. ¡Buen trabajo al completar el desafío! Tengo algunos comentarios para usted que podría considerar

HTML:

  • Usa la etiqueta <main> para envolver todo el contenido principal de la página. de la etiqueta <div>. Con este elemento semántico puedes mejorar la accesibilidad de tu página.
  • Debe usar un encabezado de nivel uno (h1) aunque este no es un desafío de página completa. Puede crear un elemento '<h1>' dentro de su elemento 'principal' que estará oculto visualmente pero visible y legible por lectores de pantalla. La clase "sr-only" oculta el contenido visualmente y aquí son los estilos para copiar. por ejemplo: <h1 class="sr-only">c3-column preview card component</h1>
  • <p class="title"> se podría considerar como texto importante, si considera, puede intercambiarlo por <h2>
  • Debe usar la etiqueta <a> en lugar de la etiqueta <button> porque el botón Más información es un enlace a otra página. Use botones para realizar acciones como enviar un formulario o cerrar un modal y use enlaces para navegar a otra página. Puedes leer más sobre esto aquí.
  • No todas las imágenes deben tener texto alternativo. Los iconos de automóviles solo tienen fines de decoración, por lo que se pueden ocultar de [lectores de pantalla] (https://developer.mozilla.org/en-US/docs/Glossary/Screen_reader) agregando aria-hidden ="true" y dejando su atributo alt vacío:
<img src="./images/icon-sedans.svg" alt aria-hidden="verdadero">
<img src="./images/icon-suvs.svg" alt aria-hidden="verdadero" >
<img src="./images/icon-luxury.svg" alt aria-hidden="true" >

CSS:

  • En lugar de usar píxeles en tamaño de fuente, use unidades relativas como em o rem. El tamaño de fuente en unidades absolutas como píxeles no se escala con la configuración del navegador del usuario. Esto puede causar problemas de accesibilidad para los usuarios que han configurado su navegador para usar un tamaño de fuente más grande. Puedes leer más sobre esto aquí.

¡Espero que le sea útil! 😄 Sobre todo, ¡la solución que envió es genial!

Saludos cordiales

Marked as helpful

0

@valentinalopezh98

Posted

@MelvinAguilar Muchas gracias, lo voy a revisar! 😄

1

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