A quick recap
As we wind down this week's challenge, I want to thank Ben and his fellow dev.to admins for getting behind this Weekly UI Challenge and setting up some great new tools for moderating the #weeklyui tag page. (seriously, check it out, it looks awesome)
Thank you to everyone who has participated, retweeted, and liked/unicorn'd these posts; I really hope we can get more of the community involved for Week 2 and beyond. Speaking of participants, Ali Spittel gets the Week 1 Gold Star🌟 for tweeting and displaying her daily results!
Welcome to Week 1, Day 7 of my Weekly UI challenge! As I stated in the announcement post, week 1 will focus on an ecommerce listing UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day seven, our goal is to…
Tweak, refactor, and/or fix your code
Today is all about you and your design/code perfectionism. Did you want to change your component API to be more flexible? Did you mean to tweak spacing on Day 5 but didn't have time? Perhaps you needed more time to research how to fix a few more a11y issues before you get that perfect score on Day 6. We all have to get sleep, spend time with friends and family, and have other things pop up that may affect your workflow; today is your day to finish strong and get everything up to spec as you see fit.
I will be updating my variant thumbnails to be tab-able, adjusting focus states on my buttons, and updating the API to be more programmatic. As always, you can check out my coded implementation on my Github pages site for this project.
Please add your repos and/or images of your designs in the comments for inspiration! I would love to see what you all created throughout the week.
Happy fixing! 🎉
Week 1 Calendar
- Design component ✅
- Display product name, price, and image ✅
- Add to cart button, favorite button ✅
- Sale price display, sold out states ✅
- Color variant thumbnail buttons ✅
- 100% a11y score ✅
- Tweaks, refactors, fixes 🎯
Top comments (0)