This is a solution to the Frontend quiz app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Select a quiz subject
- Select a single answer from each question from a choice of four
- See an error message when trying to submit an answer without making a selection
- See if they have made a correct or incorrect choice when they submit an answer
- Move on to the next question after seeing the question result
- See a completed state with the score after the final question
- Play again to choose another subject
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Navigate the entire app only using their keyboard
- Bonus: Change the app's theme between light and dark
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- JavaScript
- Fetch
- bem - Block Element Modifier
- scss - Sassy Cascading Style Sheets
I can say that this was one of the larger projects I’ve worked on, and it was quite labor-intensive. What I did for the first time and found to be a great experience were the dark mode implementation and the progress bar. I wouldn’t say they were very difficult, but they did take a bit more time to complete.
I have already completed two JavaScript courses on freeCodeCamp, and I am currently taking the Front End Development Libraries course, where I’ve finished Bootstrap, jQuery, and Sass, and I’m now working through React.
Alongside this, I am working on projects and following a learning path on Frontendmentor.
- ChatGPT - He is my hero, if I need something fast, if I can't understand something, or if I can't find it on the internet, I always ask him.
- W3Schools - This is my favorite documentation platform I've been using since I started programming, it's the best explained resource.
- YouTube - I'm always looking for news and listening to other developers, sharing their experiences so that I can see many different solutions to a problem.