Design comparison
Solution retrospective
What's the best way to position the user image and also the background circles ? (The best way is the way that would use less code)
Community feedback
- @grace-snowPosted over 3 years ago
Hi @Maryehb
The background circles are positioned fine and the card looks pretty good (I'm viewing on mobile)
But there are some big issues, mainly with the html, on this. I hope these suggestions help you:
- there's no html semantics at all. You need to use meaningful elements, text can't be in divs alone. Really think about what would make sense for this document
- alt attributes on decorative/meaningless images like the background circles need to be left blank. If they are svgs they also need aria-hidden true
- alt attribute on the persons picture needs to be his name. Describe what the picture is of
- more of a question this one... Why is almost everything in the css a flex column? There is no need for so many flex columns especially when block elements will stack by default anyway. Nesting flex deeply can lead to unpredicable results as well as bloated css.
- make sure you keep small details from the design like the card shadow
0@MaryEhbPosted over 3 years ago@grace-snow thank you so much for this precious comments on my code. I will go back and apply them to the code 🤩🥰 I don't know why I used many flex columns 😂 but I am going to try to fix that But I want to understand more about the alt attribute and how and when to describe it's image properly ?!!
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