Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Javascript Mastery course theory and application Certified

Learn javascript theory and apply HTML5, CSS3 and Javascript to develop a Mathematical quiz and Whack a Mole Game

Created bySalvatore Aetos

Last updated 7/2024

English

What you'll learn

At the end of the course you will have great skills set like HTML5, CSS3 and Javascript
You will learn the theoretical aspects of Javascript
You will be able to build projects using HTML, CSS3 and Javascript to develop games and quizzes
You will learn to apply the theoretical aspects of Javascript into real life projects.
Learn Event Handlers and DOM manipulation in a project
Set time out and Set interval in a project

Course content

5 sections • 41 lectures • 6h 45m total length

Trailer1:42

Javascript Variables12:27
Javascript Variables Quiz
Javascript Data Types7:47
Javascript Data Types Quiz
Javascript Function2:29
Javascript Function Quiz
Javascript Function Parameter6:12
Javascript Return11:30
Javascript Return Quiz
Javascript Scoping9:28
Javascript Scoping Quiz
Javascript Alert Confirm Prompt6:07
Explore the browser utility functions alert, confirm, and prompt in JavaScript; learn how alerts display messages, how confirm returns true or false, and how prompt captures input and logs results.
Javascript Objects17:58
Javascript Objects Quiz
Javascript Arrays6:27
Explore how arrays compare to objects in JavaScript, access items with zero-based indices, inspect their length using console.log, and see how adding elements by index differs from object properties.
Javascript If Else statement6:27
Explore how arrays compare to objects in JavaScript, including zero-based indexing, array literals, accessing elements with indices, and the length property shown by console log outputs.
Javascript Switch Case9:28
Master switch case syntax by exploring case blocks, default handling, and the role of breaks, using age examples and console logs to demonstrate how control flows through cases.
Javascript Switch Case Quiz
Javascript Maths Operators5:15
Explore JavaScript maths operators, including addition, subtraction, multiplication, division, exponential, and increment and decrement, demonstrated via console log examples with numbers three and two.
Javascript Logical Operators15:36
Javascript Logical Operators Quiz

Setup6:30
Set up a JavaScript maths quiz by creating HTML, CSS, and main.js files in a project folder, linking CSS and JavaScript in index.html, and saving changes to run it.
Generate Problem11:10
Create a dynamic quiz generator that builds math problems by randomly selecting numbers from 1 to 10 and an operator of plus, minus, or multiply, via a generate problem function.
Console log to check the functions1:53
Random generator10:20
Store problem data as you solve, generating random problems with a generate problem function. Update the HTML UI using a problem element and state.currentProblem to show numbers and operator.
Live server extension2:01
Install the live server extension from the terminal on port five thousand five hundred for live updates on local host. Replace drag-and-drop with automatic refresh as you edit.
Form creation3:18
Create a form on the index page, assign the dash form class, add a text input with the field class, and include a submit button to capture answers.
Get rid of default behaviour for Form5:52
Master preventing the form’s default behavior by wiring a submit handler with addEventListener and event.preventDefault in JavaScript to stop refresh and keep user input intact.
Check Solution12:29
Point system11:46
Implement a browser quiz point system by tracking correct and wrong answers, updating points needed and mistakes allowed via DOM selectors and state.
Update system6:26
Learn to build a JavaScript quiz that updates the score on correct answers, tracks mistakes, auto-advances questions, clears the input after submission, and ends when the score reaches zero.
Logic and Reset game7:00
Styling CSS15:44
Styling and UI design19:27
UI Design updated and Game Functionality8:05
Link the progress bar with JavaScript to animate the HTML element using transform and scaleX, render progress with a reusable function, and reset the bar for new quizzes.
End of message Game13:23
Game and Animation (Key Frames CSS)20:15
Explore building an interactive JavaScript maths quiz with animated feedback using keyframes in css, including handling wrong answers, delays, and reset logic to show right or wrong states.
End message game and Reset functionality11:08

HTML structure game10:51
CSS styling game11:57
CSS styling game 27:20
CSS styling game 317:38
Learn CSS styling for the game interface, including borders, dimensions, margins, background images, and the start button, countdown, and score, plus star visuals and two element sizes.
Javascript Pop out functionality game19:30
Javascript skeleton game code functionality13:40
Start game and movement of Objects animated7:40
Score system and animation improvement6:30
Enhance the score system and animation by adopting an arrow function binding, resetting the image, preserving the countdown, and adding a scoreboard with one-click scoring and high school functionality.
High Score functionality20:52

Requirements

Basic knowledge of HTML and CSS (No prior knowledge is also okay as it is explained in detail)

Description

JavaScript Mastery: Theory & Application course. Designed for beginners and experienced developers alike, this course covers fundamental principles, advanced programming concepts, and real-world applications to help you become a proficient JavaScript developer.

If you want to start learning Javascript or to apply HTML5, CSS3 and Javascript in a project to program or you already have some basic knowledge, then you are in the right place. This course gives you a chance to take your knowledge to the next level. You will start from very basics and learn to apply the skills in two different projects (Quiz and Game).

Get certified in Javascript theory and application in projects. Please send me your email in my inbox and I will forward you your certification after your assessment. Please give at least few weeks to a month to receive your certificate via email as it is a popular course.

You will learn about the very basics of this language, like how to write JavaScript, what kind of syntax it has.

You will learn the following topics on Javascript theory:

Javascript Variables

Javascript Data Type

Javascript Function

Javascript Function Parameter

Javascript Return

Javascript Scope

Javascript Alert Confirm Prompt

Javascript Objects

Javascript Arrays

Javascript If Else statement

Javascript Switch Case

Javascript Maths Operators

Javascript Logical Operators

(More topics will be added in the future)

This is a fun, practical & project based course for all skill levels. The projects in this course are designed to get you building things using HTML5, CSS & JavaScript with no frameworks or libraries. Every project is built from scratch and has some kind of dynamic functionality.

Although this is a theoretical and project based course, I will still be explaining everything as I go. There are projects designed for you to complete in a few hours.

You should have some basic knowledge of HTML/CSS/JS. If you are brand new, this course is a mix of both with emphasis on Javascript theory and building two projects. The projects are end to end product.

You will learn to create two projects.

First project is Quiz. The following skills you will learn to implement in the project:

Choosing Random Numbers

User Interface

Calculating Answer (Algorithm)

Win and Lose condition

Progress Bar

Overlay

Animation

Second project is Whack a Mole game. The following skills you will learn to implement in the project:

Learn about ES6 syntax

Event listeners

How to control CSS styles and classes with JavaScript

What's the difference between setTimeout and setInterval

How to use clearInterval, difference between const and let variables

Regular JavaScript functions and ES6 arrow functions and much more.

Create a plugin that tracks, updates and stores high score. We will also talk about logical operators in JavaScript (OR/AND/NOT) and other fundamental vanilla JavaScript techniques and principles that are useful not only for games, but also for building websites, generative art

JavaScript DOM manipulation (build a simple game add-on that keeps track of high score)

Learn local storage browser objects and it's associated JavaScript methods.

The projects will help you better understand how JavaScript works, use these skills to level up as a Front end web developer and get one step closer to getting hired for your first coding job. Also, it is a good stepping stone before you start learning React, React native and Next.js

Who this course is for:

Students who want to learn HTML5, CSS3 and Javascript
Students who want to create projects and develop using HTML5, CSS3 and Javascript
Students who want to learn the theoretical aspects of Javascript

Javascript Mastery course theory and application Certified

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 2min

Javascript Theory13 lectures • 1hr 57min

Javascript Quiz17 lectures • 2hr 47min

Javascript Whack a Mole game9 lectures • 1hr 56min

Chat GPT1 lecture • 4min

Requirements

Description

Who this course is for: