This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Solution URL: Solution on github
- Live Site URL: Live site on netlify
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Typescript - React framework
- Styled Components - For styles
- Vite
This challenge helps me to improve my typing skills. Also this small projects give me the change to test new approches and tools for my developer experience.
In this particular project i use "Performance insights" tab from Google devTools to fix some layout shifts. Few issues whit layout shifts weren't fixed though.
My main goal is improve with typing and performance issues
- Website - Hector Ovalles
- Frontend Mentor - @Acrata