In this video, I will show you how to build a Tic Tac Toe game in HTML, CSS, and JavaScript. We will start by creating the basic structure of the game, and then we will add some styling to make it look more appealing. We will also add some functionality, such as a way to keep track of the score and a way to reset the game.
By the end of this video, you will have learned how to build a Tic Tac Toe game in HTML, CSS, and JavaScript. This is a great way to learn the basics of web development and to get started with game development.
Here are some of the things we will cover in this video:
- How to create the basic structure of the Tic Tac Toe game
- How to add some styling to the Tic Tac Toe game
- How to add functionality to the Tic Tac Toe game, such as keeping track of the score and resetting the game
I hope you enjoy this video!
🔗 Key Links 🔗
- Github: https://github.com/coding-in-public/tic-tac-toe-vanillajs
- Demo App: https://codinginpublic.dev/projects/tic-tac-toe/
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
0:23 Project setup
6:07 Styling the game board
13:20 Game functionality
25:11 Change color on turn
27:55 Adding hover states
32:35 Improve winning function
36:54 Improve hover and focus states
38:56 Adding confetti
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: https://github.com/microsoft/cascadia-code
- Theme: https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-material-theme
- Icons: https://marketplace.visualstudio.com/items?itemName=BeardedBear.beardedicons
