How to Build Tic Tac Toe with JavaScript, HTML and CSS - Tutorial
Vložit
- čas přidán 27. 08. 2024
- In this video we are going to make the classic game Tic Tac Toe using JavaScript HTML and CSS. Throughout this tutorial we will touch on many topics.
CSS topics such as: How to create a Tic Tac Toe board using CSS grid layout. Css positioning with absolute. We will also be using flex layout in several areas of the application.
JavaScript topics such as: How to access and manipulate HTML elements from JavaScript, Arrow functions, destructuring objects, event handling(click event), arrays, adding sound via the Audio class and much more.
I will also touch on a few productivity tips in VS Code such as multiple cursors and using the live server extension.
I hope that you enjoy the tutorial. If you do please subscribe like and share.
GitHub Link:
github.com/Cod...
Try it here
codingwith-ada...
Destructing objects tutorial:
• Destructuring javascri...
Thanks for doing a video like this! I'm currently training to become a brand new web developer with HTML, CSS, and JS. I'm still in the middle of learning all the basic fundamentals, but after watching this video all the way through I can finally see how all the fundamental building blocks of the languages can come together and produce a complete game like this. It's really helped make a lot of stuff finally "click" as I continue to study!
You’re welcome! I’m really glad to hear that this video is helping! Congratulations on your journey to become a web developer! Keep on practicing and learning!!!
So underrated, your videos helped me a lot throughout my coding experiences, thank you very much!
Thank you Dominic! I really appreciate your comment. It’s comments like yours that keep me going on CZcams! I’m really happy the tutorials are helping.
This helped so much, Thank You Adam. Very easy to follow!!
You’re welcome! Glad the tutorial was helpful and easy to follow 😁
Thank you so much for this! I have an assignment to create a tic tac toe game and your vid is a great guide for my understanding!
You’re welcome! I’m really glad the video helped with your assignment.
Very cool video, Adam. Great explanation and overall good job 👍
Thank You Unanimous 85!
this was super helpful thank u!!!
You’re welcome! Glad the video helped!
@@CodingWithAdam i was just curious about how to change the message from "winner is o!" to what message i want. For example i want to do "humanity has won"
Thanks a lot man you saved me
You’re welcome!
very informative...really liked it...
Awesome glad you enjoyed it! 😀
I can't get my strike through line to show when there is a winning combo. Any advice?
Sorry to hear that I would take a look at the completed solution linked in the description. I only tested in chrome so it could be a browser specific issue.
how to put the code in chrome
3:42 how did u make them multiple instantly?
It’s a neat trick. It’s the duplicate line shortcut in vscode
Select the line that you want to duplicate.
If you want to copy the line to the line above itself, press Shift + Alt + Up Arrow Key.
If you want to copy the line to the line below itself, press Shift + Alt + Down Arrow Key
@@CodingWithAdam thank you so much! you are very underrated.
Thank you! 😊
Hey when same player is on 4,5,6 in which the line doesn't match it still says win its a bug
I’m not sure if I understand correctly does it do it in the demo here codingwith-adam.github.io/tic-tac-toe/index.html
I am not undrestand
Sorry to hear that… keep trying 😁
I won't run 🤧🤧🤧🤧
Sorry to hear that. Have you checked the console for errors in chrome?