Design comparison
Solution retrospective
I'm not sure
What challenges did you encounter, and how did you overcome them?I had a bit of trouble in the beginning with lining evrything up, but in the end found a solution that worked out
What specific areas of your project would you like help with?I'm good
Community feedback
- @0xabdulkhaliqPosted 8 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your question that I believe will be of great interest to you.
REFACTORING THINGS :
- You don't need to nest
a
inside ofbutton
, it only causes accessibility issues. Instead you can just apply the styles which you wrote forbutton
toa
element directly.
- Using CSS you can style any elements,
a
also completely customizable. So my suggestion for you is to only havea
directly without nesting withbutton
elements.
- The resulted styles will be like this,
a { background: hsl(0, 0%, 20%); border-radius: 0.5rem; margin: 0.45rem; border: none; padding: 0.9rem; width: 17.2rem; text-align: center; text-decoration: none; font-size: 0.9rem; font-weight: 600; } a:hover { background-color: hsl(75, 94%, 57%); }
- By refactoring your elements on html and the styles you written on css would be a great thing to rectify accessibility issues with your solution.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0 - @marcobaassPosted 8 months ago
@0xabdulkhalid thanks a lot. That helps a lot. I didn't came up with the idea not using a button tag and only style a. But makes totaly sense.
0 - @marcobaassPosted 8 months ago
So apparently made an error by nesting the <a> tag inside the <button>. But how can I solve this problem? How can I make the button open a link without the issue of interactive controls beeing nested?
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