Complete Front-End Project: Build a Game
Table of Contents
IntroductionBrian Holt gives an overview of the course content, reviews the course prerequisites, and covers the setup instructions.
Hello WorldBrian 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 ProcessBrian 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 StyleBrian 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.
Editor SetupBrian 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.
LintingBrian 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 CheckingBrian demonstrates how to set up the testing framework Jest, and informs students about what to do if they fall behind.
Organizing Your CodeBrian 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 ProjectBrian demonstrates how to start the project by live coding the index.html page, and by adding the project dependencies to the package.json.
Debugging ESLintBrian demonstrates how to check that ESLint is installed correctly on the VS Code editor.
State MachineBrian 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.
Building the UI: HTMLBrian 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: CSSBrian 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 ElementsBrian 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 ButtonsBrian 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 ConstantsBrian explains that it is best practice to separate the interface from the state handling in an application, and demonstrates how to separate the two.
Adding New StatesBrian 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 FunctionsBrian 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 StatesBrian 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.
RefactoringBrian 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 ActionBrian 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 StatesBrian finishes the application by adding code that resets all of the states, and allowing users to start a new game.