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:

🧠 Concepts Covered:

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

🌎 Find Me Here:

#TicTacToe #WDS #JavaScript

[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;
}

[jakecooley]

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

[tremolony]

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.

[itahirk]

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

[nicholasdejong]

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

[chasec]

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 !!! <3 Subscribed, and turned on the bell!

[tooveralls]

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 '

[blank-uilp]

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!

[cameronrowe]

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 :) .

[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;
}

[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!

[Brandon-srqp]

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

[kenchang]

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.

[trevormuhoni]

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

[leeyahav]

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

[TheSparkyack]

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

[dalilapramenkovic]

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

[basiccodingwithadam]

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

[noahkusaba]

Does anybody understand why the X and O's at 12:20 were invisible?
Why would display:flex fix anything here, aren't flexboxes for repositioning elements? I don't see how anything could be overlapping to hide the X marks, so I don't understand how everything suddenly became visible? I also noticed if you don't use the cell.x.before & after pseudo elements, the marks are clearly visible. Clearly something weird is going on with the pseudo elements, so if somebody knows could they explain it?

[lunarmoon]

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