NFT preview card component Desktop and Mobile Responsive Design
Design comparison
Solution retrospective
Hi everyone! I just completed this preview card component desktop, activate state and mobile responsive. Feel free to give feedback and suggestions on what to improve. Thanks
Community feedback
- @nkhatri7Posted almost 3 years ago
Hey Jaime,
First of all the design looks great! One thing you should always try to remember is to use semantic HTML so in your case, it would be good to wrap your main content (the card) with
<main>
tags. Furthermore, you should always have a<h1>
element, so instead of using<h3>
, you should use<h1>
as it's the main piece of text or heading for that page.Another thing is that for links that don't have any text (e.g. social media icons or images), you want to include an
aria-label
attribute in the<a>
tag for accessibility purposes as it would help screen readers.Other than that, you're doing well so keep coding!
0@jongvelasquezPosted almost 3 years ago@nkhatri7 oh wow I didnt see that lol. learned a lot from you sir thank you so much first time I posted a solution in frontendmentor and it feels great to have feedback from other experts. Thank you sir will apply this feedback . Cheers and have a great day :)
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