tic tac toe html css javascript tutorial

Many would have us believe that?s because they are serious programmers who don?t want to waste time on CSS fluff, however, my dear Cheryl or Larry or whoever you may be, YOU are secure in your abilities and you know that presentation is a big part of the experience of your product. Many programmers are loathe to write CSS. If you open a live server of the document and check your dev tools, you should see your message in the console. Be the person you needed when you were little.’) I am Your Console AMA: Test that your main.js is linked up by writing this line of code in main.js:Ĭonsole.log(‘Your JS is linked up. This way, it can safely be included at the top of our HTML document. Link up your CSS and JavaScript by including them in the head of the HTML:Įmpowering Tic Tac Toe for the Good of HumanityĪ note on that defer in the tag: the word defer will tell the browser to wait to execute that JS block until the DOM is fully parsed. Make an HTML boilerplate by typing ! + enter if you?re in VS Code (which you are because I told you to be and we can?t do this tutorial if we can?t trust each other, now can we?)

Win Logic: align 3 in a row, in a column, or diagonally.

In the event that there are no longer available spaces and no one has won, a tie is declared. A winner is declared when one player can align 3 of their markings in a row, in a column, or diagonally.

Tic-Tac-Toe is a two-player game played on a 3 x 3 grid. If you get stuck, break it down smaller, girl!

Small steps can get you just about anywhere if you?ve got enough time. Start by creating a directory in your computer titled, Cheryl?s Tic-Tac-Toe and create these child directories: js, css and these three files: index.html, css/style.css, and js/main.js.Īlways start any programming task by clarifying what you want to do and then breaking it down into small steps.

The internet (and since you?re reading an online tutorial, you?re halfway there! Way to go!).

Take your time and let me know how it works out.ĮDIT: If you get really stuck, here?s the completed code: This tutorial is 100% vanilla JavaScript with minimal CSS and HTML. This tutorial is meant for absolute beginners. Tic-Tac-Toe is a great starter project for any new programmer!

Tic tac toe html css javascript tutorial