• Thursday , 2 April 2020

Build Tic Tac Toe With JavaScript – Tutorial

Code Canyon



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: https://github.com/WebDevSimplified/JavaScript-Tic-Tac-Toe
CodePen Code: https://codepen.io/WebDevSimplified/pen/MWYGogW
JavaScript Defer Attribute Tutorial: https://youtu.be/BMuFBYw91UQ
Why I Do Not Use Class Selectors In JS Article: https://blog.webdevsimplified.com/2019-10/do-not-use-class-selectors-in-javascript
CSS Variables Tutorial: https://youtu.be/oZPR_78wCnY
Array Destructoring Tutorial: https://youtu.be/NIq3qLaHCIs

🧠 Concepts Covered:

– Advanced CSS Hover Effects
– Advanced JS Game Logic
– CSS Not Selector
– CSS Shape Building

🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified

#TicTacToe #WDS #JavaScript

Original source

3d Ocean

Related Posts

26 Comments

  1. Odysseas Pap
    March 10, 2020 at 06:32

    Oh my god Array.prototype.every() and classList.contains() are freaking lifesavers.. I got lots of code on old projects to change haha

  2. mare meaxi
    March 10, 2020 at 06:32

    what does algorithms need to know to make AL ?

  3. Clemens H
    March 10, 2020 at 06:32

    Very Amazing tutorial. I'm asking me how do you get this ideas the way you are programming. I mean If I see your tutorial I'm understanding what you are doing but by my self I would never write such code without getting inspired with tutorials like that. So I think you have to be some kind of hyper intelligent to develope those applications without watching tutorials. Or is there any trick ?

  4. GTGamer YouTube
    March 10, 2020 at 06:32

    Wow this is amazing!

  5. Clemens H
    March 10, 2020 at 06:32

    Hey,
    don't you have to write const variable in uppercase in Javascript?

    In Java and PHP thats the case

  6. Basic Coding With Adam
    March 10, 2020 at 06:32

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

  7. Basic Coding With Adam
    March 10, 2020 at 06:32

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

  8. vatras23
    March 10, 2020 at 06:32

    Hi Guys.
    What extensions do I need for VS Code to work yours? Because when i start VS i have no autofill at all.

  9. Rashed Arman
    March 10, 2020 at 06:32

    I followed along and created the game but as soon as i finished i wasn't able figure out how & why i created XD

  10. jimbo
    March 10, 2020 at 06:32

    Nooooooo. 🙁 I want to know how to redesign this exact game but have multiple mode options. (4×4, 5×5, etc) HARDCODING IS NOT BEST PRACTICES.

  11. Radoslav Tsanev
    March 10, 2020 at 06:32

    Great video, Kyle!! I even upgraded it so I can play with a computer, but still not that good player.

  12. Hiç Bile
    March 10, 2020 at 06:32

    Hi Kyle, thank you for all those great videos like this one! I feel much more self-confident in coding JS after I started to watch your videos. You're an excellent teacher!

  13. Imagine about
    March 10, 2020 at 06:32

    "our exes and our hoes"

  14. Manish Kumar
    March 10, 2020 at 06:32

    Addeventlistener not working ,plz help

  15. pengfei jia
    March 10, 2020 at 06:32

    Great Video. My question is why the click event listener has to be removed in the startGame() since the listener is set up with once: true?

  16. TheRealBwoi
    March 10, 2020 at 06:32

    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.

  17. Pokemaxi Gaming
    March 10, 2020 at 06:32

    Bro, beautiful Video
    You are width your mind just on the next level
    I would build this seite much more harder xD gg

  18. Keith Wilson
    March 10, 2020 at 06:32

    this tutorial is awesome ….. but as I'm finding out, as a beginner, js on the front end is pretty useless (in terms of adding anything of practical value to a web page)… js on the server side is where it has become most useful these days… if js hadn't transitioned to back end and mobile apps, it probably would would've become obsolete by now… !

  19. WANG YIFEI
    March 10, 2020 at 06:32

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

  20. Edwin ThatsNotMyName
    March 10, 2020 at 06:32

    Looks like a non react version of the react tutorial

  21. Usama Iftikhar Butt
    March 10, 2020 at 06:32

    there is no error in this code. why…………..❓❓❓❓❓

    func();

    function func() {

    console.log(';)');

    }

  22. Usama Iftikhar Butt
    March 10, 2020 at 06:32

    why you create functions that having only one line of code…..🤔🤔🤔🤔

  23. Usama Iftikhar Butt
    March 10, 2020 at 06:32

    sir please make part 2 in which add functionality for one player also…………………..

  24. Usama Iftikhar Butt
    March 10, 2020 at 06:32

    sir thank u so much

  25. Usama Iftikhar Butt
    March 10, 2020 at 06:32

    wow amazing tutorial…. i love this channel

  26. Mr. Commentator
    March 10, 2020 at 06:32

    I want to make a Dots and Bones game. How would you go about structuring it?
    We can make divs and show only corner points. Whenever someone selects two corners we add a border there.
    What do you think?

Leave A Comment

You must be logged in to post a comment.