This is a solution to the Coding bootcamp testimonials slider 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 for the component depending on their device's screen size
- Navigate the slider using either their mouse/trackpad or keyboard
Mobile design:
I decided to use React for this project because it consisted of two card-type components that needed to switch between each other by clicking buttons or arrow keys. React allows us to make reusable components and also dynamically update the content of the webpage. Previously, I usually used create-react-app to start my React projects, but the authors of this library stopped support, so I decided to try Vite, which is actively supported by the community and has a smaller bundle size.
- Vite
- React JS
During the development of this page, I learned how to use Vite to start a React project. Vite also allows you to host your site locally, so I was able to check the appearance of the webpage on my mobile device.
Another new thing that I learned was the "" HTML element and its corresponding CSS property. I didn't know that you could style quotes using CSS and special codes for their appearance.
I also liked that this challenge had the requirement of using JavaScript to make a carousel.
- Ainur Saduova
- Frontend Mentor - @NuraSad