Build Tic Tac Toe using HTML + CSS + Javascript!

Let's build a Tic Tac Toe game from scratch using only HTML, CSS, and Javascript! This is a beginner-friendly tutorial that will guide you through building a complete tic tac toe game, with no shortcuts.
🗄 Resources:
Symbol used for x: ×
Symbol used for o: ○
Github Repo: github.com/ang...
🔑 Key Concepts:
- HTML
- CSS
- Javascript (JS)
- Flexbox
- CSS Grid
- event listeners
- event handlers
- querySelector and querySelectorAll
#HTML #CSS #JS

[@jolandal8283]

I was so pumped to click on your page and find out that you have a lot of other cool JS projects! I really enjoyed this project, I look forward to building the rest!

[@manuchehrqoriev]

Keep it up bro. Love your projects and appreciate your time that you spend to create such kinda JS projects

[@prakashgunjari1986]

Learnt a lot of Javascript and CSS, thank you for your time and effort to make this video.

[@RealMusicalPleasure]

I skimmed thru the video and what I really like about it is that you show your thought process. Most building tutorials basically just copy and paste debugged code with minimal explanation.
e.g. @47:00 onwards

[@AngleCoding]

thank you! I will keep this in mind in my future videos as well. Stay tuned for more content

[@01kmacias]

I'm having trouble understanding what the index number is doing in two lines of code? Could someone tell me what [1] and [2] referencing in the respective lines?
const location = classList[1];
if (classList[2] === "x" || classList[2] === "o") {
return;
}

[@lenilunderman3697]

please more mini projects! that was awesome!

[@janvijain4544]

sir, i have taken tutorial from many youtuber but u r best ...because every step is defined in detail and i m looking forward to more projects.

[@MundoJucora]

Thank you so much, please continue with these tutorials, you are a great teacher :)

[@KF_YK]

you are such a good teacher Justin! really benefited from your video! cheers

[@mcblend829]

My first javascript game 😃.... thank you sir a lot!

[@devdevloper9057]

Can you help me to display who is won, and game tie in below the board...using another display div?? and also how to play it with coputer and user???

[@Dev_Eli]

now I know how to code because of this. Thanks man!

[@Baggersproductions]

this is awesome, and free! amazing thank you bro

[@KOM-jh]

Why is my statusDiv not defined in console? This is what I have const statusDiv = document.querySelector('.status');

[@aboulayetchakoura5429]

That is really nice one. i did enjoy this video.

[@charlotteh2907]

when i try to to console log e.tagret.classlist it says it's undifined. so can't really get past that point even after comparing the code in the video to my own.

[@joelaul]

What determines whether we use a div or a header element for text generally?

[@monikasmierzchalska9077]

Thank you so much for your work, Awesome step by step explanations!

[@bumblebeesj6283]

Hey, how can i implement a list of questions, and if the player anwser wrong, the turn pass by the other player?

[@Unfavalen]

Can you create 4x4 please

[@mannysencion6033]

i dont get it. i code along and my code is broken even though im following every single step. smh

[@vishwajoshi5670]

AFTER WRITING .X::BEFORE CODE ..WHEN I CLICK ON ONE OF THE CELL... X does not shows up please help sir

[@benjamincatofficial]

Me after just changing the title: *it's already a masterpeice*

[@shandyhery6685]

Great programmer

[@22alison19]

this is amazing for me omg thank you very muchhh

[@darkgod7188]

I want to add background color, behind the game, can u please help, please.

[@darkgod7188]

Please sir

[@_kuba_9850]

in CSS: body { background-color: yourCoolor }

[@gauthamelango2987]

From reddit

[@gauthamelango2987]

hi please post projects on I frames with vanilla javascript alone

[@nov28tutorials49]

Can I have a link to have a done code for the whole tutorial

[@alinynovais7672]

Thanks a lot !!!

[@krrishchaudhary1085]

can you make a video to add vs computer option

[@omkarpatil9886]

Great!! Thanks... understood each and every line of code
Subscribers++;

[@rodrigosilva5715]

thank you , you help me a lot

[@kirtisharma3820]

what is e in function?

[@chauminh874]

why i can do (e)

[@kavitaanand8005]

I made this project, but it is not working 😑😑😑😑😑😑. Can you plz provide me code of the game in pdf format

[@deepaktomaryt6782]

He has given code ...check description link..

[@30secondsEmotions]

Is This for beginner

[@AngleCoding]

Yes!

[@schwartz478]

I can see some positives in make the view using pure CSS but technically it's better to make a tic-tac-toe class that does all the rules and the use the html5 canvas to draw out behavior. Don't want to be rude, but this video doesn't show good programming practices, don't make a tictactoe game this way

[@AngleCoding]

Why is it “technically” better to have classes and to use html 5? That’s like saying it’s better to use React+TS for a counter app, and to use redux to manage the counter state.
It’s perfectly fine to make a simple game like this