Complete Front-End Project: Build a Game (2020)

Learn to architect a full-featured front-end project from scratch while building a game with vanilla JavaScript, HTML, and CSS. Throughout the course, you’ll learn tips to organize your front-end code, manage application state using state machines, and automate writing better code using tools like ESLint, Parcel, and Prettier. Have fun using professionally made art to build a digital pet game!

Published: May 26, 2020

Table of Contents
Introduction
Introduction
00:00:00 - 00:09:21
Introduction
Brian Holt gives an overview of the course content, reviews the course prerequisites, and covers the setup instructions.
The Project
00:09:22 - 00:20:08
The Project
Brian gives an overview of both the pet game and technological requirements, explains that the project is built in Vanilla JavaScript, and demonstrates what the final project looks like.
Frontend Infrastructure
Hello World
00:20:09 - 00:31:35
Hello World
Brian gives a tour of the project repository, demonstrates how to not index specific files by adding them to a gitignore file, and gives a review of the main git commands needed for this course.
Build Process
00:31:36 - 00:45:29
Build Process
Brian demonstrates how to install and use the webpack bundler to start a build process, including testing and dev scripts, and starts the first steps of the project.
Code Style
00:45:30 - 00:50:40
Code Style
Brian argues that to ensure code quality, it is best practice for teams to use the same linter rules. This allows developers to avoid code reviews that enforce arbitrary stylistic coding standards.
Code Formatting
00:50:41 - 00:56:47
Code Formatting
Brian introduces Prettier, a code formatter for JavaScript in the form of an npm package, and demonstrates how to install it.
Editor Setup
00:56:48 - 01:01:22
Editor Setup
Brian introduces editor setups that make code more readable, and creates an .editorconfig file that contains most of the editing rules the project follows. An editor file is useful because it enforces the same linting and formatting rules across different editors.
Linting
01:01:23 - 01:08:59
Linting
Brian demonstrates how to code an esltintrc.json file containing all of the linting rules that the project follows, and shows how to turn on and off specific linting rules.
Testing & Type Checking
01:09:00 - 01:10:54
Testing & Type Checking
Brian demonstrates how to set up the testing framework Jest, and informs students about what to do if they fall behind.
Architecture
Organizing Your Code
01:10:55 - 01:16:23
Organizing Your Code
Brian explains that large code bases are difficult to organize and navigate through, and encourages to organize code for deletability. By optimizing a code base for delitability, any dead code that is no longer used gets deleted immediately and maintains the code's readability.
Init the Project
01:16:24 - 01:31:09
Init the Project
Brian demonstrates how to start the project by live coding the index.html page, and by adding the project dependencies to the package.json.
Debugging ESLint
01:31:10 - 01:35:25
Debugging ESLint
Brian demonstrates how to check that ESLint is installed correctly on the VS Code editor.
State Machine
01:35:26 - 01:43:36
State Machine
Brian explains that a finite state machine occurs when the behavior of a system can only be at one specific state at a time, and gives an overview of the different finite states that the fox pet goes through during a game.
The Game
Building the UI: HTML
01:43:37 - 01:51:17
Building the UI: HTML
Brian starts live coding the digital pet game by first creating an HTML file and then using Emmet in VS Code as a shortcut to efficiently create HTML code, forming the main elements needed.
Building the UI: CSS
01:51:18 - 02:08:36
Building the UI: CSS
Brian live codes the CSS file of the digital pet game project, and demonstrates how to build out the stying in an organized and efficient way.
Unhiding Elements
02:08:37 - 02:14:30
Unhiding Elements
Brian demonstrates how to unhide an element and modify it, explains the steps to follow to modify CSS, and answers a question from the audience about how the game's animations work under the hood.
Interacting with the UI: Adding Buttons
02:14:31 - 02:25:09
Interacting with the UI: Adding Buttons
Brian live codes a buttons.js file that allows users to interact with the digital pet game, and builds functions and closures to select buttons.
Interacting with the UI: Creating Constants
02:25:10 - 02:30:26
Interacting with the UI: Creating Constants
Brian explains that it is best practice to separate the interface from the state handling in an application, and demonstrates how to separate the two.
States
Adding New States
02:30:27 - 02:41:56
Adding New States
Brian demonstrates how to create new states, and refactors the gameState.js file by adding new actions that the fox pet can execute once it is awake.
Adding Helper Functions
02:41:57 - 02:52:15
Adding Helper Functions
Brian live codes helper functions to be able to modify the DOM of the application, and adds conditionals to modify the state of the weather in the game.
Transitioning Between States
02:52:16 - 03:06:29
Transitioning Between States
Brian improves the game by adding day and night states to the game, and associating different actions that the fox pet can do during the two states.
Refactoring
03:06:30 - 03:13:55
Refactoring
Brian refactors the gameState.js file by adding logic statements to various states, and adds the different timers for the fox to switch from one state to the next: from awake tu hungry.
Building a New Action
03:13:56 - 03:25:25
Building a New Action
Brian adds a new functionality to the code of the fox pet game by reusing functions that are already available to allow the pet to do more, and adding another layer of difficulty to the game.
Resetting States
03:25:26 - 03:33:49
Resetting States
Brian finishes the application by adding code that resets all of the states, and allowing users to start a new game.
Wrapping Up
Wrapping Up
03:33:50 - 03:39:23
Wrapping Up
Brian wraps up the course, reviews the course material, and gives examples of challenges students can work on to enhance or change the game.

also You can find my other helpful Programming-posts
(if old file-links don't show activity, try copy-paste them to the address bar)