Back to Browse

Let's build a Vanilla HTML/CSS/JS Tic Tac Toe game!

9.2K views
Feb 20, 2023
5:50:52

This is part of my Frontend Web Development Course for Beginners. Learn the basics of HTML, CSS, and JavaScript to build a solid foundation for web development. You can find resources and other information for this video at the Full Stack Foundations link below: - Video Link: https://www.fullstackfoundations.com/courses/frontend-web-development-for-beginners/javascript-to-react-tic-tac-toe-project - Course Home: https://www.fullstackfoundations.com/courses/frontend-web-development-for-beginners - Course Repo: https://github.com/zachgoll/fullstack-roadmap-series ------------------------------------------------------------------------------------- Connect with me: - Twitter: https://www.x.com/zg_dev - Full Stack Foundations: https://www.fullstackfoundations.com ------------------------------------------------------------------------------------- Timestamps: 0:00 - Intro 1:13:52 - JavaScript intro 1:15:59 - MVC pattern explanation 1:21:29 - Connect JavaScript to HTML 1:25:23 - Setting up application namespace 1:42:55 - Scaffolding out the event listeners 1:55:30 - Defining a “game move” 1:58:14 - Handling a player move with JS 2:04:20 - What is “state”? 2:09:15 - Showing player icon based on current player 2:18:12 - Calculating a game winner based on moves 2:42:17 - Summary of game move handler function 2:45:03 - Opening modal when game is over 2:52:11 - Setting the turn indicator 3:00:07 - Refactoring our game to use the MVC pattern 3:10:43 - Setting up ES6 modules in the browser 3:15:54 - Refactoring the View 3:29:11 - Improving our menu toggle button 3:53:46 - Creating the “state” Store class 4:45:45 - Implementing “new round” button 5:04:20 - Saving game state to LocalStorage 5:20:59 - Making our view “Reactive” (intro to how React works) 5:38:05 - BONUS - creating a custom state change event 5:45:35 - BONUS - Delegating event listeners

Download

1 formats

Video Formats

360pmp4600.8 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

Let's build a Vanilla HTML/CSS/JS Tic Tac Toe game! | NatokHD