Design comparison
Community feedback
- @nzewiPosted about 2 years ago
Congrats on completing this challenge RoriCrimson You have a great solution there
1.Using relative units like
rem
andem
instead ofpx
would make your site more responsive. Learn about them and use them in your next project.2.Ensure that all content on your page is contained within a landmark region, e.g Wrapping your card
<div>
inside a<main>
tag. This makes your HTML more semantic- Never forget to add the
alt
attribute to your image tag. All images must have alternate text to convey their purpose and meaning to screen reader users. It makes your site more accessible
I hope this helps
0 - Never forget to add the
- @correlucasPosted about 2 years ago
👾Hello @roricrimson, Congratulations on completing this challenge!
Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:
1.Add the
alt text
to improve accessibility.The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of a slow connection, an error in the src attribute, or if the user uses a screen reader). ---><img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor">
2.Add a margin of around
margin: 20px
to avoid the card touching the screen edges while it scales down.3.Replace the
<h4>
containing the main title with<h1>
note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.4.Use
<main>
instead of<div>
to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.✌️ 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