Design comparison
Solution retrospective
This was the first time learning and using an API . The only place I had a hard time with was the box shadow on hover where the shadow on touchscreen devices stick, I still dont know the fix
Community feedback
- @GeorgeDarisPosted over 1 year ago
Hello again, Mustafa!
Your solution is very close to the design, and your CSS is concise, as is your JavaScript code. Regarding the hover state persisting on mobile, I would suggest you take a look at this stack overflow solution which uses a media query to check whether the device uses a mouse or not to conditionally add the styling.
There are some improvements you could make to your HTML markup. Wrap your content inside a
main
tag, and since the advice component is self-contained, you could use anarticle
tag instead. Theh1
andp
are used correctly, but your button isn't accessible. Instead of using a div with a nested image, use a nativebutton
element and add the image as a pseudo element, or nest it without forgetting to specify it as a decorative element. You should also add a title attribute to it so screen reader users can know what it does.Hope this helps! You're on a good track!
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