Build Tic Tac Toe With JavaScript - Tutorial

Опубликовано: 14 Январь 2025
на канале: How to Become a Developer

2,049

Beginner friendly build a Tic Tac Toe Game using plain HTML, CSS, and JavaScript. Learn how to set up your GitHub and Netlify account to deploy your game, ad features as score keeping, adding names to your players, starting and restarting game, event listeners, VS code extensions, susing CSS grid, emmet abbreviation, BEM naming convention, CSS variables, linking our script using the defer attribute, creating a pop-up modal, and many many more!

Build your next awesome project:
https://www.tubebuddy.com/quicknav/la...

GitHub Repo with Assets
https://github.com/Ade-mir/tic-tic-to...

Deployed Website
https://my-cool-tictactoe-game.netlif...

GitHub Account
https://github.com/

GitHub Desktop
https://desktop.github.com/

Visual Studio Code
https://code.visualstudio.com/

Google Fonts
https://fonts.google.com/specimen/Pop...

Netlify
https://www.netlify.com/

Chapters
00:00 What we are building / Finished Titc Tac Toe JavaScript Game
00:58 How to create a GitHub account & Download GitHub Desktop & Visual Studio Code
01:25 How to set up a GitHub Desktop repository
02:10 How to download GitHub repository assets
02:50 How to install Visual Studio Code extensions (Live Server & Prettier)
03:50 How to set up, connect, and test our project HTML, CSS, and JS files
07:00 How to create a Tic Tac Toe gameboard using CSS Grid
07:30 How to use Emmet Abbreviation to name div classes and id's
09:00 How to use the BEM naming convention to name HTML elements
10:20 How to style a CSS grid using grid-template-columns
11:29 How and why to convert between rem and px
14:30 How to create CSS color variables
22:10 What is Flex Wrap and how to use this CSS styling property
24:36 How to import a custom font from Google Fonts
28:45 How to create a CSS pointer cursor on hover
29:22 How to create an HTML player game score
33:00 Why you should use the defer attribute in our javascript script link
33:50 How to add CSS styling to our player game score
38:20 How to create a start game button
39:20 How to create a pop-up modal and submit button and a form
43:50 How to add CSS styling to input fields and buttons
46:30 How to create a button animation
47:20 How to create a modal background
53:00 How to style CSS forms and placeholder
55:16 How to use CSS Media Queries to create a responsive mobile design
58:52 How to set up JavaScript DOM elements using getElementById
01:01:29 How to use querySelectorAll in JavaScript
01:04:50 How to store our player name, score data, and game variables in a JavaScript object
01:08:57 How to create clicking functionality with addSquareClick function
01:13:30 How to removeEventListener in JavaScript
01:15:00 How to use and if statement to run code
01:17:00 How to create the incrementMove function by using JS modulus
01:22:37 How to create a function that checks if a player has won
01:26:00 How to use a for...of loop to determine if there exists a winning line
01:31:00 How to update the player scores
01:32:02 How to update the game when a player has won
01:34:35 How to check for a tie using Array.prototype.every()
01:38:40 Fixing a bug in our checkForWin() function
01:40:30 How to create continue, restart, and reset game functions using setTimout()
01:44:28 How to create the start game function and save the form input values
01:54:30 Testing our finished javascript tic tac toe game
01:57:03 How to deploy a JS game on Netlify for free

Hope you enjoyed this tutorial. Leave a like if you did, and feel free to subscribe for more tutorials like this in the future!