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

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

Видео Let's build a Vanilla HTML/CSS/JS Tic Tac Toe game! канала Zach Gollwitzer