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
- Live Site URL: https://fm-quiz.vercel.app/
- Semantic HTML5 markup
- SCSS / SASS
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Gulp - Task runner
This project was one of those projects that takes time to create. This time I did the design through figma file, which was different from the way I used to approach working with Frontend mentor projects. In general, the work on this project felt more serious from that and more interesting. In general I practiced with style separations in partials and tried to use CSS where possible before going to JS. For example, the options element is based on native radio buttons and theme toggle on checkbox.
I've noticed many times that I should focus on writing more professional JS a bit more. Often it seems to me that I write code and logic more complicated than it should be. In future projects I would like to try some frameworks for JS, but before that maybe I should try to go a little deeper into the basics again.
- Kevin Powell - About self-hosting fonts with font face
- Frontend Mentor - @DaniilGurski