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
- Solution URL: https://www.frontendmentor.io/solutions/interactive-rating-component-using-html-css-and-js-2IeJrH5ZvO
- Live Site URL: brendanmadden.github.io/interactive-rating-component
- JavaScript
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
I learned a lot during this project, and after a long break from coding it helped me to get a lot of my confidence back. I'm so thankful that I decided to take it on and challenge myself, and I'm really proud of my result.
I learned to solve problems with JavaScript event listeners that I had not experienced in the past, and I was able to effectively resolve all of the issues I ran into in a timely manner.
I learned a little bit more about proper use of semantic HTML throughout this project as well, although I would like to continue to improve in this area, as well as with regard to accessibility.
I've found that onne of the largest challenges I experience when starting a new project from scratch is determining the best layout structure, and the CSS to match it. I would like to continue to improve my layouts, and understanding of the most effective CSS to produce those layouts I'm looking to achieve.
I would also like to continue to learn more about proper use of semantic HTML, and I'm always looking to improve my HTML accessibility.
I'm currently focused on learning as much as I can about JavaScript, and I'm almost finished Jonas' course (referenced below). This is another area for continued development I'm focused on.
- Pixel to REM Converter - This is a great resource I use on most projects for any conversions I might need.
- Jonas' JavaScript Course - This course in an unbelievable education in JavaScript and I would not have been able to build this project on my own without having taken it.
- GitHub - Brendan Madden
- Frontend Mentor - @brendanmadden
- Twitter - @BrendanMadden_