Design comparison
Community feedback
- @Luis-OliveroPosted about 2 years ago
Hello Chakiri, congratulations on completing this challenge! Looking at the report it seems you have a few accessibility issues and only one issue with your HTML.
To start, I would suggest adding this to your <html> tag.
<html lang="en">
Also I would add a < main> tag around your <div>
<body> <main> <div class="card"> </div> </main> </body>
Another thing to keep in mind is that it is best practice to always have at least one <h1> tag on each page. I would change your <h2> line to an <h1>.
<h1 class="header">Improve your front-end skills by building projects</h1>
Hope this helps and keep at it!
Marked as helpful0 - @correlucasPosted about 2 years ago
👾Hello Chakiri, congratulations for your new solution!
1.Your solution is great and the code is working, but the html structure can be reduced by removing unnecessary divs, all you need is a single
<main>
or<div>
to keep all the content inside, and nothing more. The ideal structure is thediv
and only the image, heading and paragraph.Here’s a minimal html structure for this challenge:
<body> <main> <img> <h1></h1> <p></p> </main> </body>
2.Its ever better to use
relative units
asrem
orem
that have a better fit if you want your site more accessible between different screen sizes and devices.REM
andEM
does not just apply to font size, but to all sizes as well.✌️ I hope this helps you and happy coding!
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