Learn JavaScript by Building a Full-Stack Web App

Name: Learn JavaScript by Building a Full-Stack Web App
Rating: 4.7 (22 reviews)

Learn fundamental programming concepts while building a fully-featured multiplayer game with modern JavaScript!

Created byRick Schubert

Last updated 11/2024

English

What you'll learn

Learn modern JavaScript to solve real problems
Understand the fundamental concepts of web development
Develop a complete web application including backend and frontend
Build a REST API with NodeJS and Express
Create responsive web pages using React and NextJS
Upload your code to GitHub
Deploy your application to AWS

Course content

6 sections • 150 lectures • 20h 15m total length

Course Overview11:25
Install Visual Studio Code2:00
Install Git Bash (only necessary on Windows)6:25
Install Node.js3:58

Setting up the project and writing our first JavaScript14:00
Introduction to variables5:50
Our first function11:41
Function Exercise5:35
Objects7:53
Add players using array .push()13:55
Array .pop()12:02
Add questions to our game4:52
Starting a round in our game8:19
Template strings3:26
Append to object properties8:58
if conditions and errors10:39
Completing makeGuess function5:50
JSON.stringify()2:56
Default imports and default exports6:21
Named export and named import6:11
Splitting the project into multiple files11:25
Import/export exercise5:57
Calculating round results step 117:01
For loops11:19
Dynamically adding object properties13:25
Math.abs() to calculate guess differences6:10
Assign different points depending on exactness7:35
Dynamic offsets depending on question15:24
Setup of round 32:42
Array .forEach()10:07
Object.keys() and Object.values()5:16
Calculating final results step 111:20
Calculating final results step 216:09
Installing third party libraries15:50
First use of async/await in a function8:45
Purpose of async/await12:30
Making our app interactive16:25
Allow interactive guesses — Exercise Prompt6:41
Allow interactive guesses — Exercise Solution12:11
Cleaning up5:03
Understand callbacks9:09
Turn callbacks into promises11:50
Introduction to JSON5:23
Reading files12:52
Reading files with promises11:43
Parsing JSON12:19
Section outro for the command line app1:52

Backend section intro2:30
What is a network request?4:48
Installing Postman2:03
Set up of new backend module6:09
Create our first server10:08
Express documentation3:57
Modern import syntax6:37
Named exports with modern syntax5:52
State handler10:08
Endpoint to get players10:56
Endpoint to add players step 112:27
Modify game state from add player endpoint12:51
Find specific elements with .find()9:45
Returning HTTP errors10:22
Logging network traffic7:17
Endpoint to start a new round11:14
Unique IDs via UUID5:08
New round endpoint to forward a question6:44
Select random element of an array6:00
Selecting a random question3:08
Filtering array elements with .filter()5:34
Using .filter() in our endpoint11:17
Send Gone status code when questions run out4:34
Handling request input12:06
Exploring falsy values7:33
Accessing last item in an array15:26
Get current round endpoint6:49
Start of endpoint to get current round answers10:23
Hard-coding game state to simplify testing8:09
Matching question and round using .find()13:29
Using the OR operator to set default values10:48
Calculating guess difference with Math.abs()8:36
Array .sort()6:53
Calculating points per guess step 111:29
Calculating points per guess step 26:51
Update points for each player10:35
Sorting the final score6:12
Demo of finished backend5:43

Frontend section intro5:23
What is HTML?4:50
Setting up our Next.js web app9:02
Editing our first component9:10
Using variables in JSX4:39
Applying a custom CSS style3:30
Create a new array from another array using .map()7:15
Generating a list of JSX elements with .map()6:40
Hard-code game state for testing3:51
Adding CORS6:03
Making network requests to our backend with axios14:03
Reactive variables9:52
useEffect to only run actions once9:24
Unique key props on list items4:29
Setting up a new page and route11:41
Handling button presses8:27
Pass a new player from frontend to backend9:56
Ternary operator7:11
Success and error messages11:14
Dynamically hide JSX elements8:54
Backend polling with setInterval()9:23
Start game button2:31
Set up game page and route4:50
Backend modifications to always start a new round3:58
Starting a new round on every page render9:47
Add useEffect() to initiate a call on every render6:46
Setting up client page and route5:01
Text input and submit guess button on client page8:55
Send player guess to backend12:35
Setting cookies11:10
Reading cookies4:58
Polling to check for round start9:09
Page redirects using Next.js router5:10
useEffect teardown functions6:08
Game page countdown6:57
Dynamically remove text on countdown2:54
Hard-coding game state to test game page5:23
Retrieve answers on round finish6:36
Return JSX from other functions4:25
Display final results Exercise Prompt4:23
Display final results Exercise Solution11:47
Display round answer5:12
Triggering page refresh5:19
Create game over page13:05
Redirect to game over page when game finishes12:23
Adding images9:47
Clean up8:27
Dynamically hide inputs on client page8:25
Trigger page refresh when game starts12:48
Demo of our final game — well done!5:38

Deployment Section Intro2:56
Dynamic URLs via environment variables6:33
Export Next.js app to static HTML8:05
Statically serve HTML files in backend4:43
Handler to reset game state6:52
Install git (only necessary on Mac)1:57
Create GitHub repository6:40
Set up SSH key4:39
Upload code to GitHub11:32
Generate GitHub token2:48
Sign up to AWS8:17
Launch a rented AWS computer via EC210:48
Deploying our game to AWS12:47
AWS clean up3:18

Requirements

No programming experience needed — I will explain everything you need
A computer where you can install software (Windows, Mac, Linux)

Description

I want to teach you JavaScript in the best way possible — by directly using it! Under my guidance, you will build a modern web application that will be an interactive guessing game. You will build a REST API with Node.js and create responsive web pages powered by React and Next.js. Along this journey, you will learn all the fundamental principles that real programmers use to solve problems.

Practice makes perfect

Throughout the course, there are numerous exercise points where you are invited to pause the video and tackle a challenge so that you can practise and retrain the things you already learned. The key ingredient in this course is you. But don’t worry, I will always walk you through my solution at the end of each exercise.

The right tool for the job

JavaScript is the most popular programming language in the world, and for good reason — it is used in thousands of applications, such as backend servers, web pages and even desktop applications like the Slack messaging app. Knowing this programming language is a fantastic means to boost your career.

Learning should be fun

Programming fills me with joy. I aim to bring this passion with me when teaching my students. This course is exactly the kind that I would love to take myself — I make things fun and engaging.

Have a problem? No problem!

Errors are natural in programming. I will be in the Q&A section ready to take on your questions. Every lesson also comes with a transcript of the code changes; that way, you can confirm your solution independently.

Let’s get started

I am thrilled to have you here and I can’t wait to take you with me on this journey. See you in the course!

- Rick

Who this course is for:

Beginners who want to start programming with JavaScript

Learn JavaScript by Building a Full-Stack Web App

What you'll learn

Explore related topics

Course content

Introduction and Set Up4 lectures • 24min

Command Line Application43 lectures • 6hr 45min

Backend38 lectures • 5hr 11min

Frontend50 lectures • 6hr 19min

Deployment14 lectures • 1hr 32min

Outro/Goodbye1 lecture • 5min

Requirements

Description

Who this course is for: