@ericsalvi
Posted
Hey Yui,
Great job with your first submission!
I think your flex works great for the pricing section where you have it now. I don't think there really is a need for anything else to have flex unless on mobile it needed to go from column to row. But for this component that is not the case.
A suggestion for future flex usage, instead of adding a padding-left: 20px
to the item-2 class, you could just use gap: 20px
set on the flex container.
I'd also try to name your classes according to what the content is. Reading the code, item-1 and item-2 don't really help the developer to fully understand what each section is. I like to implement the BEM naming convention, not required, just helpful.
One last thing is that the 2 buttons you have are not selectable via the keyboard. It looks like you just have 2 divs styled to appear like buttons. I'd check out https://a11y-101.com/design/button-vs-link for future submissions on buttons.
Also to piggyback on what Philemon was saying, each submission on this platform generates a report for any invalid accessibility or HTML. Check out your report It is good practice to try and fix them. I use the axe DevTools
extension in Chrome before I submit.
Can't wait to see more of your work!
Marked as helpful
@yterai
Posted
@ericsalvi Thank you so much for your feedback! I'll def have those things in mind next time :)