Design comparison
Solution retrospective
Getting the automatic card generation via .map of the array. I wanted to have the buttons for timeframes be automatically generated based on the data received too, but I had issues reading out the keys properly and decided not to invest too much time into it.
What challenges did you encounter, and how did you overcome them?Getting the grid to look right while having a presentable tablet version. For that I limited the max columns on the grid to 4 and manually adjusted the width of my columns to match mobile/pc sizes respectively.
Getting the position right on the background icons of the colorstrips seemes to be a bit of a magic number thing for me where I just used some % values for mobile/pc to make it look right.
All in all quite a lot of media queries here.
What specific areas of your project would you like help with?For some reason htmlPurge from vite-plugin-purgecss purges my second data on my cards [data-category]. What causes this to happen and how do I address this? I just removed PurgeCss to get my code to work in production, but this is not a good long-term solution.
Community feedback
- @gmagnenatPosted 4 months ago
Hi, congrats on completing this challenge !
I recommand you check the documentation about The tabs pattern its actually very interesting. To improve the accessibility of your solution, there are special case to take care of regarding keyboard navigation.
- tabs should be navigable using arrow keys
- when pressing the tab key you need to get directly to the content of the selected tab
By reading your code, I think your use of headings isn't optimal. You should follow a structured and ordered way (h1, h2, h3...). Using h1 in the card could be changed to a simple <p> element or a <time> element.
Let me know if you have specific questions.
Happy coding !
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