Responsive solution using Tailwind CSS

Solution retrospective
Restarting my webdev journey this really helped me get my confidence back and I am happy that I was able to complete this challenge.
What challenges did you encounter, and how did you overcome them?Trying to form the mental model to complete this challenge was the hard part.Figuring out what structure of HTML should I go with and how to place the items in a particular way was also hard.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@rupali317
Hello @shitij-kpn. Great work on your first challenge.
I have the following suggestions for your code where you can improve the accessibility of your project
- There are keyboard users who will use "Tab" or "Shift+Tab" to navigate across the page. When I use the tab key, the button in your page gets highlighted but the highlight color can be changed to make it more visible to the eye.
:focus-visible
will get the job done
button:focus-visible { outline:none; box-shadow: 0rem 0rem 0rem 0rem 0.25rem hsl(39, 64%, 57%) }
- I used the screen reader to read the entire content of your page. I noticed that for the part where there are 4 items the screen reader reads the icons as image. When users who rely on screen readers encounter "image" word, it might cause confusion. If these icons are just for decoration, you can have the
role="presentation"
attribute for the SVG tag. In that way assistive technology will ignore reading the SVG.
Hope that helps!
Marked as helpful - There are keyboard users who will use "Tab" or "Shift+Tab" to navigate across the page. When I use the tab key, the button in your page gets highlighted but the highlight color can be changed to make it more visible to the eye.
- @0xabdulkhaliq
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
GRADIENT BACKGROUND DURING HOVER :
- Looks like the component
button
hover state background got a solid color instead of gradient colors. We need to fix this!
- Just add the following tailwind utility classes
hover:bg-gradient-to-r from-purple-600 to-indigo-600
- Now your component's
button
background for hover state has been set properly
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Join 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