Build Tic Tac Toe With JavaScript - Tutorial
HTML-код
- Опубликовано: 2 июн 2024
- 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
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
Right when I thought I was getting the hang of CSS!
Same here lol
same
@@depression_isnt_real how?
I swear
Who is a css?
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;
}
we need more people like this man! He is shaping a new vision to help beginners do what they want!
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 !!!
may I ask, what web development course you took? I know how to do the javascript but the css was honestly the most difficult.
@@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.
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 :) .
This is my first year coding and I have to say that this is by far the most impressive thing I have seen
Such a tricky project made so simple. Thank you so much Kyle.
I left it out in my college exam
In c++
I made same project using ReactJS - ruclips.net/video/pw2krTJLF6Y/видео.html
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.
Thank you! You've made this so easy to understand. This really is web dev simplified!
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.
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.
@@arvsnacs422 Keep pushing!!! Don't give up
@@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.
@@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 :)
Thank you,man! This clip was amazing!
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
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!
me:iam wondering why iam thinking of learning css again,
kyle:This is why
Clear and detailed explanations, and extremely well-organized. Great video.
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 ....
So super effective and straight to the point! Awesome!
This was a great film. Works great with great explanation! Keep the videos coming!
I like how you get what I'm thinking about and put it in code, with so much ease.
I really enjoyed the use of different CSS selectors, thanks for that. I came for the JavaScript, but I stayed for the styles. Lol
Nice video Kyle, you always put out great material!
Thank you for great tutorials! You are really good at this :)
After Watching This Video I've Realized Why Say I've Two Yrs Of Experience...
You're A Great Man Kyle! Hats off 👏👏
You are really good man. I love how CSS can be used in place of JavaScript.
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.
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👍🏻
Such a joy to watch you code and explain these projects and topics! Thank you!
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
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
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 '
thanks
in 12:20 why does adding [ display : flex ] on .cell{ } show the before and after divs.
why not without it ?
so so good - I learned loads from this
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;
}
in 12:20 why does adding [ display : flex ] on .cell{ } show the before and after divs.
why not without it ?
Thanks Kyle!!! Awesome Tutorial!
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.
Can't say thanks enough for the helpful thorough informative lesson
Thank you! You have provided a lot ! I have learned a lot from this tutorial.
Thank you so much. Awesome as always 😀👍👌
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.
I love your tutorials. You're the best.
Super CSS Combinators Exercise: Could fill a whole course on CSS Combinators! Thank's a lot Kyle for this carefully crafted presentation!!
I love your videos because you explain very well thank you kyle :)
Hey, you made the JavaScript part much much simpler than the normal one!!!
Your videos are so great! thank you!
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.
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!
You have earned a subscriber! You an excellent teacher. I am very impressed.
always amazing got my project easily done thank you kyle(:
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!
Thank you so much! That really means a ton.
@@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.
@@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!
That's so sweet😄
Fast paced, but awesome. You're great btw.
Still valid, exceptional teaching skills, thank you.
thanks for this video, it helped me better understand when it's a good idea to define new functions.
INSANE. Pure genius!
Great video and a fun project that I want to try!
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.
that assumes that X always starts
Your use of CSS in this video is that of a master. Kudos to you sir.
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.
in 12:20 why does adding [ display : flex ] on .cell{ } show the before and after divs.
why not without it ?@@WebDevSimplified
So detailed tutorial
Just Amazing!
Great video as always. Thanks.
wow!! i watched the video 5 times! great show & tell :-)
Thanks bro, I'm waiting for this project, hope you will come with these types of advance projects....... 👍👍👍
I plan to make more advanced projects like this in the future
@@WebDevSimplified thanks a lot ,,, we are waiting........
@@WebDevSimplified goat.
Loved this one
thanks sir, learned new cool stuff watching this video
wow amazing tutorial.... i love this channel
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
There's too much going on here! haha Thanks, Kyle! Much appreciate it
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
Awesome man !!!
Awesome tutorial! 5 stars!
Excellent video, thank you
Just simple styles in the game.But learnt a lot more than expected
I only started coding a few weeks ago, but I don't think that programmers say this lot Kyle's favorite sentence: "which is exactly what we want" 😂. Great videos btw. How much time does it take for you to create a program like this for the first time?
Great explanation. Thank you 🤏
Thanks Kyle, your videos are awesome! I am new to JavaScript if you have a full class please let me know, i want in!
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 !!!
Accessible and helpfull.
Nice teacher and nice work!
Best channel on youtube :)
You're awesome, thank you!
MAAAN keep it up, great work great developer very nice very helpful... Keep with you amazing work!
Thank you, so amazing
Many thanks, Kyle!
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
Same, mine was around 110 lines of code for 2 player and 288 for computer
You deserve wayyy more subscribers
You are GEM:))
thank you kyle.. you are awesome.
Thank you so much for your help. Before this video, this game was too difficult to program.
Bro,Your Video is so amazing
thank you so much man!
First comment after I become a big fan of Kyle. Really good job for each video. Thx a lot for ur great job !
You are very welcome!
Thanks, good luck!
Fantastic content and production quality, thank you for this!
Next Level CSS!
Well Explained.. Thanks..
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 ?
Thanks for the help 👍
Thank You so much!
33:30 I've been learning JS for 2month. My head started burning with that part 🤦♂️
Never give up.
enjoy the process of understanding, there's always going to be something that you don't understand. But be concious about the progress
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?
Thank you so much brother you are awesome
every(), some() contain() what the hell is this ... i never come acress this method kyal ..(By The Its Really awsome)
learn a Lot .. Love from India ....Keep it up
Nice. I would like to see it implemented with ES6 classes.
Excellent video...
Awesome!!