Type Speed Test app using Vue 3, Vite and CSS

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

I am most proud of implementing the Responsive Web Design (RWD), ensuring that the typing test is fully functional and looks great on mobile devices. Next time, I would separate the CSS into distinct files or use scoped styles for each page to improve code maintainability and organization.

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

Initially, I struggled with the <select> element because its default system styling was too inconsistent with the project's design. I spent an entire afternoon experimenting with different UI strategies to ensure the difficulty and mode selectors looked great on all screen sizes. In the end, I successfully implemented a responsive switch: using a clean button group for desktop and space-saving dropdown for mobile. It was a "Great" moment when it finally worked!

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

Currently, I rely heavily on Flexbox for almost everything. I'm wondering if my HTML structure is semantic enough, or if it has too many nested div elements. I would appreciate any advice on how to implement CSS Grid to make the layout more efficient and clean. Any tips on improving my Responsive Design (RWD) strategy for mobile devices would also be very helpful!