Build Tic Tac Toe With JavaScript - Tutorial

Learning web development can be tough and boring, but it doesn't have to be. In this video we take a look at creating an advanced JavaScript tic tac toe game. This is a great project for anyone that wants to create a fun project while learning advanced JavaScript and CSS concepts.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/J...
CodePen Code: codepen.io/WebDevSimplified/p...
JavaScript Defer Attribute Tutorial: • What Is The Fastest Wa...
Why I Do Not Use Class Selectors In JS Article: blog.webdevsimplified.com/201...
CSS Variables Tutorial: • CSS Variables Tutorial
Array Destructoring Tutorial: • Why Is Array/Object De...
🧠 Concepts Covered:
- Advanced CSS Hover Effects
- Advanced JS Game Logic
- CSS Not Selector
- CSS Shape Building
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#TicTacToe #WDS #JavaScript

[@jakecooley7603]

Right when I thought I was getting the hang of CSS!

[@chikatikah3838]

Same here lol

[@abdulrehmanjavaid549]

same

[@echoptic775]

@@depression_isnt_real how?

[@piglo318]

I swear

[@edvinas5555]

Who is a css?

[@nathanwijayasekara]

Best way to remove the side borders is by not putting borders at all but just use gird-grap to create the lines. No need to separating selecting the elements and removing them. .board { display: grid; grid-gap: 5px; grid-template-columns: repeat(3, auto); background-color: black; } .cell { background-color: white; width: var(--cell-size); height: var(--cell-size); cursor: pointer; display: flex; justify-content: center; align-items: center; position: relative; }

[@itahirk]

Such a tricky project made so simple. Thank you so much Kyle.

[@rajab4187]

I left it out in my college exam In c++

[@piyushgargdev]

I made same project using ReactJS - kzbin.info/www/bejne/pqiVnKWKf7F5bLs

[@trevormuhoni]

me:iam wondering why iam thinking of learning css again, kyle:This is why

[@nicholasdejong7112]

we need more people like this man! He is shaping a new vision to help beginners do what they want!

[@chasec4897]

I never thought Id find the day Id finish a youtube tutorial. Been trying to learn programing for years, and recently came across a really good web development course, got the fundamentals and finally really learn't web development and wanted to create a tic tac toe game just curious of the logic. I managed to do my own, but I had started this one before I started my own, and had to come back to see how this one was created because I was fasinated by the design and how good the tutorial is. Mine came nowehere close to how good this is. Thank you so much man !!!

[@kebab4640]

may I ask, what web development course you took? I know how to do the javascript but the css was honestly the most difficult.

[@chasec4897]

@@kebab4640 Hi Mate, CSS I found the hardest. Funnily enough, I mastered js and react but right this moment Im once again going through my old courses on css. I had purchased a course on udemy advanced css by Jonas. Its extremely good for responsiveness, and flex box any many things. But these have been at me for years, Im pretty sure net ninja has it all covered as well. Just keep practising, and don't rush things, and very imp experiment.

[@josephonuoha3219]

@@chasec4897I’m finding it hard mastering JavaScript

[@nkosinathimazibuko2561]

This is my first year coding and I have to say that this is by far the most impressive thing I have seen

[@cameronrowe2032]

Kyle knows his onions! His designs are so thorough, and his use of ES6 functionality and CSS is masterful in its elegance. Great tutorial, with a lot of material illustrated clearly and accurately in application towards delivering a nice little application :) .

[@dalilapramenkovic8597]

Thank you! You've made this so easy to understand. This really is web dev simplified!

[@Billy_98]

Thank you,man! This clip was amazing!

[@kenchang3456]

This is such a timely topic for me as my wife wants me to help her create a math game proof of concept and this will be a great foundation. Thank you very much for the detailed explanation.

[@blank-ui4lp]

every single time I watch your videos I need to stand back and question everything I know, because of how incredibly clean and easy the code you teach is to learn thank you so so much!

[@TheSparkyack]

This was a great film. Works great with great explanation! Keep the videos coming!

[@foochertyi3714]

Note: If your having a problem in 25:06 in CSS part, unable to hide the winning-message Solution: Try removing the ' display: flex; ' in side the winning-message and add it inside the ' winning-message .show '

[@OShaunB]

thanks

[@deepakantoj432]

in 12:20 why does adding [ display : flex ] on .cell{ } show the before and after divs. why not without it ?

[@aaronlauretani8921]

Clear and detailed explanations, and extremely well-organized. Great video.

[@derekprieur5258]

Great tutorial! Your style gives me a good mix of learning new things (especially in the CSS of this video) and allowing me to try to implement the current part first before I watch you do it

[@utsikko]

So super effective and straight to the point! Awesome!

[@tremolony4924]

I'm not skilled enough to create these projects on my own... BUT this is what I have learnt by following along & making your Clock, Quiz & Tic Tac Toe Projects - Debugging skills are getting faster & way more effective - Recognizing patterns & having a somewhat better understanding of wtf is going on - Implementing your logic & workflow Thanks so much & I hope to become a great Programmer / Web Developer & one day give back to the community in anyway I can.

[@arvsnacs422]

Same here. Ive done the clock, quiz, calculator, and now im trying to understand this. Im a self learner and no background just youtube and google.

[@tremolony4924]

@@arvsnacs422 Keep pushing!!! Don't give up

[@arvsnacs422]

@@tremolony4924 sometimes i get discourage because when i do the project again i cant run it right. And sometimes wonder how did they come up with that approach and did they did it a day or what. I dont expect but I will try to learn and get there someday.

[@tremolony4924]

​@@arvsnacs422 Yes I agree. It can be discouraging when the project doesn't work... Most people give up when it gets too difficult... Keep learning & keep doing small projects. It takes time but eventually you will improve :)

[@ainederrick8948]

I like how you get what I'm thinking about and put it in code, with so much ease.

[@Brandon-sr4qp]

I really enjoyed the use of different CSS selectors, thanks for that. I came for the JavaScript, but I stayed for the styles. Lol

[@carterjm]

You are really good man. I love how CSS can be used in place of JavaScript.

[@leeyahav4754]

that checkWin function is amazing with the logic , I would not thought about doing this function by my self thnx a lot . that project has tought me a lot

[@roseboutique-womensalterat1216]

wow, great project. I'm very impressed with the use of advanced CSS and what it can do for a website. It helped me a lot to code my tic-tac-toe game. great tutorial, indeed very high quality coding skills ....

[@TThessful]

Thank you for great tutorials! You are really good at this :)

[@mattc3265]

Nice video Kyle, you always put out great material!

[@thefunnyoz]

Such a joy to watch you code and explain these projects and topics! Thank you!

[@RameenFallschirmjager]

Hello Kyle. These days your face has become one of my own family! Every time I see you a new video, I feel genuine happiness!

[@WebDevSimplified]

Thank you so much! That really means a ton.

[@RameenFallschirmjager]

@@WebDevSimplified Thank you brother❤ I hope someday I can appreciate you in a tangible way. Words are not enough to show gratitude for your immense contribution.

[@wd1534]

@@WebDevSimplified Hi Kyle! Is it possible to make this game playing remotely with a friend? 2 remotely players? Somebody is interested to develop this functionality with me? Any help is welcome!

[@ferzinhaN]

That's so sweet😄

[@stevehollis544]

so so good - I learned loads from this

[@KumarAcademy]

You are GEM:))

[@TheRealBwoi]

The real question is how do you make an NxN Tic Tac Toe game with dynamic win conditions? Love your videos. Extremely clear and thorough. You're my go to reference when I get stuck at work and the answer isn't on Stack Overflow.

[@minnuss]

On 8:50, for top and bottom border lines, you can do : .cell:nth-child(1n+1) { border-top: none; } .cell:nth-child(1n+7) { border-bottom: none; }

[@deepakantoj432]

in 12:20 why does adding [ display : flex ] on .cell{ } show the before and after divs. why not without it ?

[@azizkhujakhujaev2598]

Hey Kyle thank you for the good video🤙🏼 I would like to ask you could you make video about your background how did you learn programming(front-end) which books did you read and courses did you used?! Thanks advance I do appreciate you job👍🏻

[@hansschenker]

Super CSS Combinators Exercise: Could fill a whole course on CSS Combinators! Thank's a lot Kyle for this carefully crafted presentation!!

[@LabhamJain]

After Watching This Video I've Realized Why Say I've Two Yrs Of Experience... You're A Great Man Kyle! Hats off 👏👏

[@ankitagarwal4914]

Thank you! You have provided a lot ! I have learned a lot from this tutorial.

[@harshsugandhi07]

Hey, you made the JavaScript part much much simpler than the normal one!!!

[@shubhamh7451]

INSANE. Pure genius!

[@ethanswedlund1886]

Can't say thanks enough for the helpful thorough informative lesson

[@rauts_arad]

Thanks Kyle!!! Awesome Tutorial!

[@rangabharath4253]

Thank you so much. Awesome as always 😀👍👌

[@wadebekker7108]

Thanks Kyle! I’m curious to know how you decided on which ‘const’ names have uppercase vs camel case. Much appreciated! Love your channel man.

[@nukez88]

I had a project in collage that I didn't mange to finish. It was a game called Nim. I was supposed to make the game so that you can play it against the PC (The class was virtual intelligence) ,but I didn't manage to make it smart enough so made something else. This seems pretty cool so I will try it . Thanks for the idea.

[@satyabratadash2858]

Thanks bro, I'm waiting for this project, hope you will come with these types of advance projects....... 👍👍👍

[@WebDevSimplified]

I plan to make more advanced projects like this in the future

[@satyabratadash2858]

@@WebDevSimplified thanks a lot ,,, we are waiting........

[@020amsterda020]

@@WebDevSimplified goat.

[@viewer9022]

Loved this one

[@basiccodingwithadam8125]

Your use of CSS in this video is that of a master. Kudos to you sir.

[@WebDevSimplified]

Thank you so much. I love how powerful CSS is now. It makes doing things like this so much easier then it used to be.

[@deepakantoj432]

in 12:20 why does adding [ display : flex ] on .cell{ } show the before and after divs. why not without it ?@@WebDevSimplified

[@Flora-ho4eo]

I love your tutorials. You're the best.

[@callmeFernie]

There's too much going on here! haha Thanks, Kyle! Much appreciate it

[@lordofdawn6871]

I love your videos because you explain very well thank you kyle :)

[@josephsanjivi795]

Hello Kyle, While declaring border-top: none in your CSS for the cells, you could just write nth-child(-n+3) instead of writing three lines. The same goes for border-bottom: none as well

[@gopalloharnew5948]

Awesome man !!!

[@lunarmoon999]

man I did this on my own and it had literally 20xs more code and was not nearly as clean as this LOL its so good to see it being done in a much more simplified way

[@bulaloitech]

Same, mine was around 110 lines of code for 2 player and 288 for computer

[@billyzman666]

Your videos are so great! thank you!

[@ivanamagden]

Fast paced, but awesome. You're great btw.

[@miscellaneouscell]

You have earned a subscriber! You an excellent teacher. I am very impressed.

[@shavetasidana5135]

always amazing got my project easily done thank you kyle(:

[@sunblossom422]

This was too good .thank you sir

[@iben1195]

Next Level CSS!

[@Wintastic]

thanks for this video, it helped me better understand when it's a good idea to define new functions.

[@Gormlessostrich]

Many thanks, Kyle!

[@uncleslo910]

Still valid, exceptional teaching skills, thank you.

[@tvo7781]

Great video as always. Thanks.

[@Chadner]

Awesome tutorial! 5 stars!

[@basiccodingwithadam8125]

Great video and a fun project that I want to try!

[@chnaka7518]

Just simple styles in the game.But learnt a lot more than expected

[@roney23jj]

wow!! i watched the video 5 times! great show & tell :-)

[@namalashivacharan2789]

You explained it very well. I just want to give simple suggestion. To get initial hover effect, you just need to add x_class to board class.

[@YuriG03042]

that assumes that X always starts

[@angelpeace2350]

Thank you, so amazing

[@sergiomedina5520]

Thank you so much for your help. Before this video, this game was too difficult to program.

[@technonessteam7511]

So detailed tutorial Just Amazing!

[@demarco6967]

thanks sir, learned new cool stuff watching this video

[@uimonk]

thank you kyle.. you are awesome.

[@ValeyValeAventuras]

Thanks Kyle, your videos are awesome! I am new to JavaScript if you have a full class please let me know, i want in!

[@sunblossom422]

Hats off mannn 🙌

[@usama57926]

wow amazing tutorial.... i love this channel

[@DaK1ller]

thank you so much man!

[@jit3191]

Excellent video, thank you

[@topellasrinivasarao1125]

You are Really Talented and you deserve more than 1M subs Good Luck .BTW Small projects playlist is best for me to learn something new while quarantined. I Said you deserve more subs cuz lotta channels out there recommend their own sh*t instead the real content but you are unlike 'em ensures quality of content Again Good Luck Love from India

[@marytsach6450]

Accessible and helpfull. Nice teacher and nice work!

Very nicely done! Though, personally, I'd use inline SVG for drawing the board, as well as the noughts and crosses. But that's just a personal preference: my main reason for this is the fact I abhor using any more CSS than absolutely necessary to get things working. I find SVG perfectly suited for tasks such as these, as it gives me much more versatility, and I find it easier to maintain and tweak later.

[@85percentcocoa]

exactly my thoughts. SVG is best suited for a non real-time game, and CSS is best kept to a minimum. it is much easier to use JS to handle dynamic changes in CSS, rather than to do acrobatics with HTML and CSS and query gimnastics which are useless for most projects. BUT, this video is VERY good as a learning tool, it takes you to places you may not think of and it does it brilliantly. so, thank you WDS, you really are helpful!

[@TechnoDB]

Awesome!!

[@Dinostorm]

Best channel on youtube :)

[@nicholasjoiles8999]

Great explanation. Thank you 🤏

[@deansprivatearchive]

I was waiting for you to put placeMark into a function, and I had no idea what I was gonna do if you didn't. Good Kyle!

[@wiffec]

MAAAN keep it up, great work great developer very nice very helpful... Keep with you amazing work!

[@lilitvardanyan2275]

Thank You so much!

[@Manamir1995]

Thanks, good luck!

[@GarySSBM]

Fantastic content and production quality, thank you for this!

[@joel_mathew]

Web Dev Simplified : makes a quiz website in 26 minutes . also Web Dev Simplified :makes tic tac toe in 41 minutes. by the way love your videos

[@johni_z8332]

Thanks mate👍

[@maskman4821]

this game has a lot to do with css, kind of complicated, but good to learn all the basic, and it is a good game, a great tutorial, Mr. Kyle is a mater !!!

[@memoryleakerz]

You're awesome, thank you!

[@zainabalhaidary]

You deserve wayyy more subscribers

[@BipinKumar-yq5ho]

Bro,Your Video is so amazing

[@wangyifei5431]

First comment after I become a big fan of Kyle. Really good job for each video. Thx a lot for ur great job !

[@WebDevSimplified]

You are very welcome!

[@kevinneel07]

Thanks for the help 👍

[@neevbadu3611]

Well Explained.. Thanks..

[@maker._]

Too good. 🔥🔥🔥

[@364679493]

parfait thank you!

[@Bahadurpk]

Excellent video...

U R genius bro!