Design comparison
SolutionDesign
Community feedback
- @Nnenna-udefiPosted almost 3 years ago
Nice Job! Try to wrap everything in your body tag in a main tag to avoid accessibility issues
<body> <main> </main> </body>Marked as helpful0 - @grace-snowPosted almost 3 years ago
Hi
As well as what others have suggested (h1 and container main) you have more important issues to fix on this
- never have text in divs or spans alone. Those stats need to be an unordered list with 3 list items inside. I recommend against adding brs in text too - use spans with classes to display something block when needed
- attribution needs to be a footer element on the page
- some of the text in this is too small to read at equivalent of 8px. Overall do you see how much smaller your solution is than the design? That needs addressing.
- don't put explicit heights on the image or overlay. Instead use min-height so it can grow as needed.
- you don't need the overlay div on this. Read about blend modes. You can have background image background color and background blend mode all on the same element
- in css selectors try to avoid using nested element selectors like h2 span. Think about that in a larger project - potentially problematic and not reusable. Instead you could create a text-purple class or something, use that on the span. That's reusable anywhere and lowers the css specificity
0 - @anoshaahmedPosted almost 3 years ago
To get rid of the accessibility/HTML issues shown in your Report:
- wrap everything in your body in
<main>OR use semantic tags OR giverole=""to the direct children of your<body>... Click here to read more - have at least one
<h1>in your code
Good job! :)
0 - wrap everything in your body in
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