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 Course Website https://btholt.github.io/project-fox-game-site/ Course Code Repo https://github.com/btholt/project-files-for-fox-game 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.