Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
JavaScript
Applied JavaScript by Building a Full-Stack Web App

Applied JavaScript by Building a Full-Stack Web App

Loại khoá học: Web Development

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

image
50.000 VND
65 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

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 also 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


Bạn sẽ học được gì

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

Yêu cầu

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

Nội dung khoá học

6 sections

Introduction and Set Up

4 lectures
Course Overview
11:25
Install Visual Studio Code
02:00
Install Git Bash (only necessary on Windows)
06:25
Install Node.js
03:58

Command Line Application

43 lectures
Setting up the project and writing our first JavaScript
14:00
Introduction to variables
05:50
Our first function
11:41
Function Exercise
05:35
Objects
07:53
Add players using array .push()
13:55
Array .pop()
12:02
Add questions to our game
04:52
Starting a round in our game
08:19
Template strings
03:26
Append to object properties
08:58
if conditions and errors
10:39
Completing makeGuess function
05:50
JSON.stringify()
02:56
Default imports and default exports
06:21
Named export and named import
06:11
Splitting the project into multiple files
11:25
Import/export exercise
05:57
Calculating round results step 1
17:01
For loops
11:19
Dynamically adding object properties
13:25
Math.abs() to calculate guess differences
06:10
Assign different points depending on exactness
07:35
Dynamic offsets depending on question
15:24
Setup of round 3
02:42
Array .forEach()
10:07
Object.keys() and Object.values()
05:16
Calculating final results step 1
11:20
Calculating final results step 2
16:09
Installing third party libraries
15:50
First use of async/await in a function
08:45
Purpose of async/await
12:30
Making our app interactive
16:25
Allow interactive guesses — Exercise Prompt
06:41
Allow interactive guesses — Exercise Solution
12:11
Cleaning up
05:03
Understand callbacks
09:09
Turn callbacks into promises
11:50
Introduction to JSON
05:23
Reading files
12:52
Reading files with promises
11:43
Parsing JSON
12:19
Section outro for the command line app
01:52

Backend

38 lectures
Backend section intro
02:30
What is a network request?
04:48
Installing Postman
02:03
Set up of new backend module
06:09
Create our first server
10:08
Express documentation
03:57
Modern import syntax
06:37
Named exports with modern syntax
05:52
State handler
10:08
Endpoint to get players
10:56
Endpoint to add players step 1
12:27
Modify game state from add player endpoint
12:51
Find specific elements with .find()
09:45
Returning HTTP errors
10:22
Logging network traffic
07:17
Endpoint to start a new round
11:14
Unique IDs via UUID
05:08
New round endpoint to forward a question
06:44
Select random element of an array
06:00
Selecting a random question
03:08
Filtering array elements with .filter()
05:34
Using .filter() in our endpoint
11:17
Send Gone status code when questions run out
04:34
Handling request input
12:06
Exploring falsy values
07:33
Accessing last item in an array
15:26
Get current round endpoint
06:49
Start of endpoint to get current round answers
10:23
Hard-coding game state to simplify testing
08:09
Matching question and round using .find()
13:29
Using the OR operator to set default values
10:48
Calculating guess difference with Math.abs()
08:36
Array .sort()
06:53
Calculating points per guess step 1
11:29
Calculating points per guess step 2
06:51
Update points for each player
10:35
Sorting the final score
06:12
Demo of finished backend
05:43

Frontend

50 lectures
Frontend section intro
05:23
What is HTML?
04:50
Setting up our Next.js web app
09:02
Editing our first component
09:10
Using variables in JSX
04:39
Applying a custom CSS style
03:30
Create a new array from another array using .map()
07:15
Generating a list of JSX elements with .map()
06:40
Hard-code game state for testing
03:51
Adding CORS
06:03
Making network requests to our backend with axios
14:03
Reactive variables
09:52
useEffect to only run actions once
09:24
Unique key props on list items
04:29
Setting up a new page and route
11:41
Handling button presses
08:27
Pass a new player from frontend to backend
09:56
Ternary operator
07:11
Success and error messages
11:14
Dynamically hide JSX elements
08:54
Backend polling with setInterval()
09:23
Start game button
02:31
Set up game page and route
04:50
Backend modifications to always start a new round
03:58
Starting a new round on every page render
09:47
Add useEffect() to initiate a call on every render
06:46
Setting up client page and route
05:01
Text input and submit guess button on client page
08:55
Send player guess to backend
12:35
Setting cookies
11:10
Reading cookies
04:58
Polling to check for round start
09:09
Page redirects using Next.js router
05:10
useEffect teardown functions
06:08
Game page countdown
06:57
Dynamically remove text on countdown
02:54
Hard-coding game state to test game page
05:23
Retrieve answers on round finish
06:36
Return JSX from other functions
04:25
Display final results Exercise Prompt
04:23
Display final results Exercise Solution
11:47
Display round answer
05:12
Triggering page refresh
05:19
Create game over page
13:05
Redirect to game over page when game finishes
12:23
Adding images
09:47
Clean up
08:27
Dynamically hide inputs on client page
08:25
Trigger page refresh when game starts
12:48
Demo of our final game — well done!
05:38

Deployment

14 lectures
Deployment Section Intro
02:56
Dynamic URLs via environment variables
06:33
Export Next.js app to static HTML
08:05
Statically serve HTML files in backend
04:43
Handler to reset game state
06:52
Install git (only necessary on Mac)
01:57
Create GitHub repository
06:40
Set up SSH key
04:39
Upload code to GitHub
11:32
Generate GitHub token
02:48
Sign up to AWS
08:17
Launch a rented AWS computer via EC2
10:48
Deploying our game to AWS
12:47
AWS clean up
03:18

Outro/Goodbye

1 lectures
Goodbye and Thank You!
05:25

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Node.js - The Complete RESTful API Masterclass (2024)

Node.js - The Complete RESTful API Masterclass (2024)

1.699.000 VND
50.000 VND
Full Stack Web & Mobile App Development | Mern Stack Project

Full Stack Web & Mobile App Development | Mern Stack Project

1.699.000 VND
50.000 VND
Complete C# Unity Game Developer 2D

Complete C# Unity Game Developer 2D

180 VND
50.000 VND
Little Adventurer: Learn to make a 3D action game with Godot

Little Adventurer: Learn to make a 3D action game with Godot

1.099.000 VND
50.000 VND
The Complete JavaScript Course 2024: From Zero to Expert!

The Complete JavaScript Course 2024: From Zero to Expert!

185 VND
50.000 VND
Selenium WebDriver with Java -Basics to Advanced+Frameworks

Selenium WebDriver with Java -Basics to Advanced+Frameworks

140 VND
50.000 VND
Flutter Bloc cho Mobile, Web, PC - Tôi chọn bạn

Flutter Bloc cho Mobile, Web, PC - Tôi chọn bạn

65 VND
50.000 VND
Prometheus | The Complete Hands-On for Monitoring & Alerting

Prometheus | The Complete Hands-On for Monitoring & Alerting

90 VND
50.000 VND
The Complete PL/SQL Bootcamp : "Beginner to Advanced PL/SQL"

The Complete PL/SQL Bootcamp : "Beginner to Advanced PL/SQL"

90 VND
50.000 VND
The Complete Oracle SQL Bootcamp (2024)

The Complete Oracle SQL Bootcamp (2024)

120 VND
50.000 VND
Electron From Scratch: Build Desktop Apps With JavaScript

Electron From Scratch: Build Desktop Apps With JavaScript

35 VND
50.000 VND
Building Recommender Systems with Machine Learning and AI

Building Recommender Systems with Machine Learning and AI

90 VND
50.000 VND
ROS For Beginners (ROS Noetic, Melodic, Kinetic)

ROS For Beginners (ROS Noetic, Melodic, Kinetic)

100 VND
50.000 VND
Complete C# Unity Game Developer 3D

Complete C# Unity Game Developer 3D

120 VND
50.000 VND
Spring Framework 6: Beginner to Guru

Spring Framework 6: Beginner to Guru

99 VND
50.000 VND
Flutter &Firebase: Uber-Like Multi-Vendor Shop App with Chat

Flutter &Firebase: Uber-Like Multi-Vendor Shop App with Chat

50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi