Design comparison
Solution retrospective
Aun tengo dificultades con definir el uso de grid.
Community feedback
- @correlucasPosted over 2 years ago
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;
ymax-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 verticalesEspero que te ayude, saludos desde Brasil!
Marked as helpful0@camaflo87Posted about 2 years ago@correlucas Gracias por tu ayuda, ya estoy entendiendo un poco mas esto del Grid.
1 - @PhoenixDev22Posted over 2 years ago
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>
withclass="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”
andfocusable=”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.
Marked as helpful0@camaflo87Posted about 2 years ago@PhoenixDev22 Gracias, tome nota y hare las correcciones.
0 - Page should have one level heading. You can add a
- @DavidMorgadePosted over 2 years ago
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!
Marked as helpful0@camaflo87Posted about 2 years ago@DavidMorgade Gracias David, seguiré tus consejos.
1 -
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