Build a Quiz App with HTML, CSS, and JavaScript

Improve your core development skills by building a Quiz App with HTML, CSS, and JavaScript

4.42 (5058 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Build a Quiz App with HTML, CSS, and JavaScript
162,814
students
2 hours
content
Mar 2019
last update
FREE
regular price

What you will learn

ES6 JavaScript features like arrow functions, the spread operator, const and let, and template literal string

how to use the Fetch API to load trivia questions from an API

how to store high scores in Local Storage

how to use Flexbox, Animations, and REM units in CSS

how to create a progress bar from scratch

how to create a spinning loader icon from scratch

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

Content

Introduction

Introduction and Resources
Create and Style the Home Page
Create and Style the Game Page
Display Hard Coded Questions and Answers
Display Feedback for Correct/Incorrect Answers
Create Head's Up Display (HUD)
Create a Progress Bar
Create and Style the End Page
Save High Scores in Local Storage
Load and Display High Scores from Local Storage
Fetch API to Load Questions from Local JSON File
Fetch API to Load Questions from Open Trivia DB API
Create a Spinning Loader
Closing

Reviews

Reese
February 24, 2023
I like how James explains what each line of code is for & how they work. More project-based courses like this please......
Amadu
January 9, 2023
The content in the course is great to help beginners understand how JavaScript really works in development before moving to frameworks. This short project course is great. Thanks to the author for creating it.
Al-Mukhtar
December 1, 2022
it's been really engaging, building an app for the first time and the explanations are really insightful. Thank you James.
Brian
November 8, 2022
If you're trying to build along with him as he goes it's quite fast. You'll need to pause a lot. I'm at the end of the course and I have multiple issues with mine. I'll have to go back and figure out where I went wrong.
Nikhil
November 8, 2022
I really liked the way he made the full session interesting. I learned a lot of things by watching him type the code and explain it, which made things much easier.
Alieksieienko
November 7, 2022
Very quickly read course and for example we can’t see well the function inspect code in web browther. Low quality of video. I see mistakes in code in GitHub.
Peter
November 1, 2022
Well, what about - if it is for beginners - to show what program you're using right on the beginning of lesson 2. Sorry, FAIL for me.
Brady
October 24, 2022
Really great. - Getting started with the tutorial right off the bat. - Clear instructions and explanations of rationale for steps. - Good video and audio quality. Speaker is easy to understand. Note: While it's definitely possible to follow along for someone with very minimal experience with HTML/CSS/JavaScript (i.e., me), more background knowledge on these things would certainly help. Having said that, I feel like I'm learning a ton just by doing.
Ella
October 16, 2022
Nicely stepped through. A good project to follow along with, however, more emphasis could be placed on educating the viewer on solving the problems than arise rather than simply solving them. Overall, very good presentation.
Jason
October 14, 2022
As a beginner looking to find courses on building applications, this was great. However, also being a beginner, there were too many assumptions being made about the knowledge of the user to be extremely helpful. I think that I will come back and do this again in a few months' time after I have more training and experience. Overall it was well done and I appreciate the time put into making the class. My one piece of advice would be to stay more on path, instead of jumping from different lines. It made it sometimes difficult to follow. Thankfully there is a pause and rewind, so not a giant concern, just worth mentioning.
Muhammad
September 24, 2022
Amazing wonderful Experience and Very easy way to make a beautiful page. Also thanks so much for providing the GitHub link, Thank you once again.
Anand
September 17, 2022
Should first give details of how to setup the development environment along with all the development tools
George
September 17, 2022
Wow, such an amazing content for a free course, although it hasn't given every single detail yet it was amazing to learn new things and open doors for this amazing field. thank u very much !!
Mahmoud
August 17, 2022
The course is so bad. It didn't explain anything in HTML, CSS or JavaScript. I tried to understand JavaScript or CSS but it's very hard and I'm like the lost person in many lines of code and I don't know what's their usage. I needed this course for my university quiz but I went to the wrong person.
Faotu
August 10, 2022
James's free course is amazing and engaging. The explanations are extremely vivid and concise, I will always recommend this course for beginners and entry-level JavaScript developers. I wished to see his paid course because I know it will be super amazing. The time he put to develop this free needs to be rewarded. Thank you, James

Charts

Price

Build a Quiz App with HTML, CSS, and JavaScript - Price chart

Rating

Build a Quiz App with HTML, CSS, and JavaScript - Ratings chart

Enrollment distribution

Build a Quiz App with HTML, CSS, and JavaScript - Distribution chart
2223252
udemy ID
2/16/2019
course created date
11/6/2019
course indexed date
Bot
course submited by