Design comparison
Community feedback
- @krushnasinnarkarPosted 4 months ago
Hi @mukund-chander,
Congratulations on successfully completing the challenge!
I have a suggestion regarding your code that I believe will be of great interest to you.
-
All the content should be wrapped in a
<main>
landmark element for better semantics and accessibility. -
For the clickable elements, consider using
<a>
tags instead of buttons for navigation purposes. Buttons are generally used for actions like toggling things or submitting forms, while<a>
tags are better suited for navigation. You can style the<a>
elements to look like buttons. Additionally, these clickable elements are a list of items, so it's better to use<ul>
and<li>
elements.
<main> <ul class="card__buttons"> <li><a href="https://github.com">GitHub</a></li> <li><a href="https://frontendmentor.io">Frontend Mentor</a></li> <li><a href="https://linkedin.com">LinkedIn</a></li> <li><a href="https://twitter.com">Twitter</a></li> <li><a href="https://instagram.com">Instagram</a></li> </ul> </main>
3 Your profile card doesn't work responsively below the screen size of 425px because you gave a fixed width of 425px to the
.card
class. This problem can be solved by replacing the width with themax-width
property..card { max-width: 425px; }
I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.
Feel free to reach out if you have more questions or need further assistance.
Happy coding!
Marked as helpful1 -
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