Design comparison
Solution retrospective
It feels like I could read and understand CSS much more than my first challenge. Especially when it comes to min/max-width, min/max-height. I am proud that most of the CSS units I used are not px!
What challenges did you encounter, and how did you overcome them?Comparing to the last challenge, I noticed that using flexbox on the HTML tag did not work like the last challenge, instead it only worked by implementing it on the body tag.
What specific areas of your project would you like help with?I would love help with understanding why the flexbox for html did not work like the first challenge (QR Code Component) and only worked in the body tag to center the card. I would also love it if there is anything to optimize my HTML and CSS!
Community feedback
- @grace-snowPosted about 2 months ago
This looks really good overall.
Just a few small pointers
- try not to place text in divs or spans alone. It can be a bad habit that creeps in. Use meaningful elements, even paragraph for text.
- do you think the main image is meaningful content? If you think it is, then that's fine. Personally i'd consider it decorative so leave the alt blank.
- Similar on the author image. That alt description is only repeating the text that's right next to it so it's pointless describing that image.
- that description div is unnecessary. Try to keep the html as simple as possible.
- don't get into the habit of styling the html element. That background and min-height should be on the body not html.
- this challenge doesn't need a media query. The whole point of using max width instead of width is so that the card can already shrink narrower when viewed on a small screen. Use the larger max width and it will adapt naturally without a media query.
- the hover styles can be on the link by default. Note people can view mobile sized screens on any device including laptops and desktops (eg zoomed). If you want to exclude touch devices you'd put the hover style inside a hover media query
@media (hover: hover) {although this isnt always needed. - you've forgotten to make the whole card clickable I think, as the design shows. A simple way to do that is make the card position relative then add a media query to the link that's absolutely positioned to cover the card. Now the link effectively covers the card too.
- make sure you've got padding on an outer wrapper or a little margin on the card. As at the moment the shadow is being cut off at the bottom when I view on some screen sizes like mobile landscape.
Marked as helpful0@mdchongPosted about 2 months ago@grace-snow Thank you so much for the feedback!
I never knew the alt for an image can be left empty at certain circumstances! I also felt uncomfortable at times repeating the same context for the description when there is an explicit one inside the tag, but I thought it was mandatory at all times as I was taught to do so. But I am so glad learning about a different approach and this is a total new idea for me! 😀
I will also get into a habit keeping the html as simple as possible and not to style the html! I will go back and make sure to make the changes! 🎉
0
Please log in to post a comment
Log in with GitHub
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