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
Daniel• 30
@danielfrontendjourney
Posted
@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
