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.68 (5186 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Build a Quiz App with HTML, CSS, and JavaScript
179,172
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

Why take this course?

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

Carolina
October 27, 2023
Solo creo q deberian haber subtitulos tambien para gente de habla hispana, de lo contrario muy bueno el curso me gusto mucho y aprendi bastante.
Adesola
July 12, 2023
Well explanatory but it could have been better if your voice wasn't too fast. Considering those who practice as they watch these course videos. As for me, I catch up with your voice by pausing the video then play after writing few lines of code.
Anthony
July 6, 2023
It was perfect, am a beginner on web page development, this course gave me insight into real life web development problem. And it did it step by step which made it good for me to follow and practice.
Matt
July 4, 2023
Multiple issues with this course. Just because you can do something does not mean you can teach something. The folder structure is disorganized for the project files and there are some incorrect use of how to properly link to files. Instead of linking using "/" you should be using "./index.html" etc. It may work on your local maching but once online it will not function properly as depending on where you place it in a repository it does not know what the "root" folder is. Instructor works in a VS Code IDE which is great but when teaching they should not use plugins that make deciphering the code more difficult. Example: the equals sign "=" vs "==" vs "===" looks completely different than your defauld IDE setup and appear as 2 long lines or 3 but makes if hard to tell which "=" sign is actually used especially on a small screen. Also for me the video quality was always blurry a bit but that could just be Udemy and I am used to Coursera being crystal clear. I found myself going back over the videos and watching things twice with each section as he moves fast and does not really teach from a beginner level. He leaves out important details that I catch sometimes and get lost with other times. I found that mid video sometimes his screen changes and you will notice single quotes change to double quotes like he edited video and abruptly cut to another file or something. He does not even finish certain sections as demonstrated by the fact that most of you who finish the course will have a score counter still multiplying by 100 when his final score in GitHub finished code file does not! He never goes back to explain to change it and the code should be a score of 0-30 for each game with 3 questions. Went back and watched each video again to see if I missed something but no he does not explain to change the code here like his final version. There are many more things but overall I was disappointed that this took so long and seemed to be scattered in thought. I will not be taking any more of his courses due to teaching style and lack of attention to detail. There are many other better courses out there.
Stephan
June 22, 2023
Wow also meg überrascht wie gut das pacing ist. Der Tutor hat echt Ahnung und kommt schnell zum Punkt und das macht einfach spaß
Thomas
June 16, 2023
James made it very easy to follow along. Loved that he explained where he's getting the API and loader from, and I also liked his use of the console. I am an HTML/CSS/JavaScript beginner and this video provided me a good introduction into what's possible with these webpage programming "languages"
Penugonda
April 9, 2023
I guess if the tutor types everything and then explains will be soo good, but since he typed everything before and just go troughed it the only place it is lagging, other things are on to the top
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.
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.

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