Design comparison
SolutionDesign
Solution retrospective
This practic although it is simple, Raise my level in web development. I aceppt criticism and sugesttions
Community feedback
- @mayankdrvrPosted about 1 year ago
Congratulations Jesus for completing this challenge. Your design matches the solution very well.
Here are a few observations-
- It is good practice to use semantic html elements for better web accessibility instead of simply using <div> tags.
- In this challenge, the icons are purely ornamental, so the alt tag should be empty (alt="") to indicate to screen readers that they should be disregarded.
- Hovering over "Learn more" buttons is supposed to change the button color with a small delay in transition.
- Below 335px width of screen, the text and card gets partially hidden, the text does not wrap and the card does not resize. Maybe, you can make it more responsive by setting the maximum width of card to be upto 100% of width of its parent container(body). See if using this CSS property in image styling can make the image more responsive-
max-width: 100%;
Awesome solution and keep it up.
Marked as helpful0@GalindezproPosted about 1 year ago@mayankdrvr Gracias por su observación, uso muchos DIV porque es una practica y no le doy mucha importancia pero lo tomare en cuenta para próximos desafíos.
Estuve revisando el error que me comento para corregirlo y lo veo normal, si puedo ver las tarjetas por debajo de 335px.
Gracias por su feedback, me ayuda a mejorar
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