Submitted 3 months ago

e-commerce with React and Tailwind for Accessibility practice

accessibility, react, tailwind-css, vite

Alexwz89•480

@Alexwz89

A solution to the E-commerce product page challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am happy to finish this medium level challenge.

What challenges did you encounter, and how did you overcome them?

Cart part- reviewed how to useContext.
Carousel - Not very hard, but how to factor the repeated and reusable part is definitely to be done.
I add tab control by adding aria properties, it is very difficult to figure out how to better work on the new module's accessiblity.

What specific areas of your project would you like help with?

How to judge the accessibility?
Whiches are mandatory and whiches are not?
How to add animation and smooth transition for the dynamic elements.

Code

Please log in to post a comment

Community feedback

Marzia Jalili•9,710
@MarziaJalili
Posted 3 months ago
Amazing work! 👑

✅ Try to avoid using extra div elements as much as you can, bro. For example, the one nesting the Cart component is unnecessary.

✅ For smooth transitions you could use the Tailwind classes transition-all/colors/etc and duration-num/200/300 for it's duration in milliseconds.

✅ Lastly, if you want to evaluate your projects setting some animations, I would recommend you look into GSAP. It's one if the most popular frameworks for animations out there.

Keep hitting the books!

😎😎😎
Marked as helpful

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