This is a solution to the Interactive rating 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 for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Select and submit a number rating
- See the "Thank you" card state after submitting a rating
The following screenshots shows both the mobile and desktop version of the project.
- Solution URL: Source code
- Live Site URL: Netlify live web
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Responsive web design.
- Mobile-first workflow
This has been a great and challenging project where I learned twiks about css and manipulating DOM.
.range::-webkit-slider-thumb {
-webkit-appearance: none;
}I will continue perfecting my css and html skills moreso creating custom buttons,checkboxes and being able to manipulate them.
-
Tools - This helped me for color and web testing tools. I really liked this pattern and will use it going forward.
-
Tools - This is mozzila developer network for web developer documentation of html css and js.
- Website - Erick Ngechu
- Frontend Mentor - @Rickyngechu
- Twitter - @Ricky_101com
I would like to acknowlegde Jonas schmedtman for the great skills he has offered me in his javascript courses.Furthermore I would like to pass my gratitude towards Kevin powell a great css master who has sharpened my css skills and responsive web design in general.
Some youtube tutorials on slider thumbs.