Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hi @learnzie, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!
Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:
1.Add the
alt text
to improve the accessibility.The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of 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.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 one example to show can be cleaner this HTML structure:
<body> <main> <img src="./images/image-qr-code.png" alt="Qr Code Image" > <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </main> </body>
3.The colors you’ve used are a little bit different from the original colors.When you download the project files there’s a file called
style-guide.md
where you can find information such asfont-family
,hsl color codes
, device sizes and thefont-size
for the headings.✌️ 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