Tres Columnas Tarjeta

Hola Carlos, parabéns pela sua solução, para construir essa solução com o grid-layout, você pode usar as dicas seguintes:

Por ejemplo, para crear esta grilla con 3 columnas, solo una grid-template-column: 1fr 1fr 1fr; y max-width: 900px de esta manera creas automáticamente un componente con 3 columnas de 300px cada una.

Y cuando el componente tiene que ser mobile con el media query, solo ponendo grid-template-column: 1fr; hacer todas los cards verticales

Espero que te ayude, saludos desde Brasil!

Hi @camaflo87,

Congratulation on completing another frontend mentor challenge.

Excellent work! I have some suggestions regarding your solution:

HTML

• Page should have one level heading. You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

• In this challenge , the svgs are much likely to be decorative. As they are decorative, you should add aria-hidden=”true”and focusable=”false” to be ignored by screen readers.

• Never use <div> alone to wrap a meaningful content. Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. What would happen when the user click those learn more?In my opinion, clicking those "learn more" would likely trigger navigation not do an action so button elements would not be right. So you should use the <a>. For future use , it's a good habit of specifying the type of the button to avoid any unpredictable bugs.

• Add the hover states on the learn more links.

• There are so many arguments against setting the root font-size: 62%it state that you should never change the root font size because it harms accessibility.

Aside these , you did great work. Hopefully this feedback helps.

Muy buenas Carlos Alberto, enorabuena por terminar este challenge!, tal vez pueda ayudarte con un par de tips para las proximas challenges.

• Como primer consejo te diría que no utilices pixeles para definir los tamaños, para ello mejor utiliza otras unidades relativas como pueden ser rem, ya que con ellas te costara muchísimo menos conseguir un buen layout responsive!

• En este caso podrías eliminar los margins y centrar todo con flex directamente en el body, también cuidado que en tu contenedor le estas dando un width menor del que ocupa tu grid y eso hace que se rompa en tamaño tablet!

• Finalmente en el caso del html podrías usar etiquetas section en cada card ya que su contenido está relacionado tematicamente y quedaría mucho mejor semanticamente.

Espero que mis consejos te ayuden para futuros proyectos, muy buen trabajo!