Video Playlist: https://www.youtube.com/playlist?list=PLB6wlEeCDJ5Yyh6P2N6Q_9JijB6v4UejF
Fetch trivia questions from Open Trivia DB API
CSS - Flexbox, Animtations, and REM units
Welcome to "Build a Quiz App with HTML, CSS, and JS". I'm so excited you decided to take the initiative to improve your core Web Development skills!
In this video, we are going to create the home page along with a good chunk of the necessary CSS. The home page will consist of a few links for the Game and High Scores pages. We will also create helper CSS classes for Flexbox, buttons, and hiding elements.
I encourage you all to take a look at Emmet snippets for generating HTML and CSS.
In this video, we will create the Game Page and display static question and answer information. Eventually, we will load questions from an API, but for now, we will hard code one question so to establish styling.
In this video, we check the user's answer for correctness and display feedback to the user before loading the next question.
In this video, we will create a Heads Up Display (HUD) for our quiz app. This will display the user's score and current question number.
In this video, we will take our HUD one step further by creating a visual progress bar to track the user's progress through the questions.
In this video, we will create our End page where we will display the user's achieved score. This screen will provide a form for saving the score and links for playing again or going home.
In this video, we will save and maintain a high scores array in Local Storage. To do this, we will need to JSON.stringify() and JSON.parse() to convert our high score array to a string and visa versa.
In this video, we will create our High Scores page. We will have to load the high scores from Local Storage, iterate through them, and display them on the screen.
In this video, we will move our sample questions from a hard coded array to an external .json file. This will help clean up our Game.js file and set ourselves up to request questions from an API in the next video.
In this video, we will use Fetch to request a list of questions from the Open Trivia DB API.
In this video, we will create a simple spinning loader in CSS that will be displayed until we are finished requesting/loading questions from the API.
Thank you so much for going through this course. I truly hope that you enjoyed it and that you have improved your core Web Development skills!!