Build a Quiz App with HTML, CSS, and JavaScript

What you will learn 

1. ES6 JavaScript features like arrow functions, the spread operator, const and let, and template literal string
2. how to use the Fetch API to load trivia questions from an API
3. how to store high scores in Local Storage
4. how to use Flexbox, Animations, and REM units in CSS
5. how to create a progress bar from scratch
6. how to create a spinning loader icon from scratch

Course content

Requirements

a text editor (Visual Studio Code suggested)

Google Chrome browser

an excitement to learn!

Description

Want to improve your core Web Develoment skills? Want to improve your knowledge of HTML, CSS, and JavaScript? In this course, you're going to learn how to build a Quiz application without the assistance of libraries or frameworks. Here are some of the topic we will cover!

Save high scores in Local Storage

Create a progress bar

Create a spinning loader icon

Dynamically generate HTML in JavaScript

Fetch trivia questions from Open Trivia DB API

Who this course is for:

• Beginner or aspiring Web Developers looking to learn core Web Development skills
• Intermediate Web Developers looking to improve their core Web Development Skills

Show less

Course content

1 section • 14 lectures • 2h 1m total length

Introduction14 lectures • 2hr 1min

Here’s the revised list without the time stamps:

1. Introduction and Resources
2. Create and Style the Home Page
3. Create and Style the Game Page
4. Display Hard Coded Questions and Answers
5. Display Feedback for Correct/Incorrect Answers
6. Create Head's Up Display (HUD)
7. Create a Progress Bar
8. Create and Style the End Page
9. Save High Scores in Local Storage
10. Load and Display High Scores from Local Storage
11. Fetch API to Load Questions from Local JSON File
12. Fetch API to Load Questions from Open Trivia DB API
13. Create a Spinning Loader
14. Closing

Enroll now click here