Design comparison
SolutionDesign
Solution retrospective
All feedback are welcome...
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS π¨:
- This solution is perfect in terms of design & code, but forget to add a
background-color
for the.card
- So add
background: white
for thediv class="card"
to make the component as same per the design
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
0 - @arifaisal123Posted over 1 year ago
That's a very good attempt! However, I have the following opinions on your submission that you can consider:
- For semantics, it is considered a good practice to give the most important heading as <h1> element. Try to look if there are other important headings than <h1>76</h1>.
- Generally, styles are better kept with external stylesheets which you've rightly done! Nonethless, in some of your text, you have used <b> to bold. It is a better practice to style it in your css file. Maybe, you want to add a <span> around the text. Semantically, <b> does not have any much importance, but if you want to style it using tags, you can use <strong> which semantically refers to something with strong importance.
- Additionally, you may want to add something more meaningful in your alt, inside the <img> tag. As it will be read by screen readers, you can write as "reaction icon" instead of just icon.
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