Design comparison
Community feedback
- @grace-snowPosted over 2 years ago
Hi Daniel
There's some really important things you need to learn here and refractor before moving on
- don't size html font size down to 62.5%. I'm sure some old tutorial has told you to do this without teaching the huge accessibility problems it can create. Your solution is unreadable at the moment because of this one line, and it really brings you no benefit at all. There is no reason you need 1rem to equal 10px. Let it stay at its default.
- you need to Indent your code consistently. It will be easier to read and easier to find and prevent bugs. You can even do this automatically in code editors like vs code through linting services
- the image on this challenge is the most important piece of content - it can't have empty alt text
- not sure why you have so many divs here, like box background and hero. I think you only need one element for the card, which needs a max width and Padding. That's it
- the image should not have a width. Change to display block and width/max-width 100% and it will fill available width in that card
- as the report says, make sure you add landmark elements to this. You can use main for the card and footer for the attribution
- remove position fixed from the footer. That will end up overlapping content on some phone screens
- to vertically and horizontally center the card on the page, use flexbox or grid properties and min-height 100vh on the wrapping element (eg the body)
I hope this helps.
0@danielfrontendjourneyPosted over 2 years ago@grace-snow thanks a lot!
All your feedback is valuable and welcomed. It's the first project I build myself after spending some time on tutorials. As I read it I had some "aha" moments that I find very valuable so thanks a bunch for this.
As I go to my second challenge will remember this and will also modify what you said.
0 - @mathanraj0601Posted over 2 years ago<html lang="en">
improve your accessibility by adding this in index.html hope its helps:)
0@grace-snowPosted over 2 years ago@mathanraj0601 what do you mean by this feedback? Did you look at the code?
1@mathanraj0601Posted over 2 years ago@grace-snow sorry for that i really confused with my tabs as i opened lots of projects to comment so put mistakenly.
1
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