Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Let's build a Vanilla HTML/CSS/JS Tic Tac Toe game!
Play lesson

Course: Frontend Web Development for Beginners - Let's build a Vanilla HTML/CSS/JS Tic Tac Toe game!

4.0 (0)
6 learners

What you'll learn

This course includes

  • 56.5 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

This is part of my Frontend Web Development Course for Beginners. Learn the basics of HTML, CSS, and JavaScript to build a solid foundation for web development. You can find resources and other information for this video at the Full Stack Foundations link below: - Video Link: https://www.fullstackfoundations.com/courses/frontend-web-development-for-beginners/javascript-to-react-tic-tac-toe-project - Course Home: https://www.fullstackfoundations.com/courses/frontend-web-development-for-beginners - Course Repo: https://github.com/zachgoll/fullstack-roadmap-series ------------------------------------------------------------------------------------- Connect with me: - Twitter: https://www.x.com/zg_dev - Full Stack Foundations: https://www.fullstackfoundations.com ------------------------------------------------------------------------------------- Timestamps: 0:00 - Intro 1:13:52 - JavaScript intro 1:15:59 - MVC pattern explanation 1:21:29 - Connect JavaScript to HTML 1:25:23 - Setting up application namespace 1:42:55 - Scaffolding out the event listeners 1:55:30 - Defining a “game move” 1:58:14 - Handling a player move with JS 2:04:20 - What is “state”? 2:09:15 - Showing player icon based on current player 2:18:12 - Calculating a game winner based on moves 2:42:17 - Summary of game move handler function 2:45:03 - Opening modal when game is over 2:52:11 - Setting the turn indicator 3:00:07 - Refactoring our game to use the MVC pattern 3:10:43 - Setting up ES6 modules in the browser 3:15:54 - Refactoring the View 3:29:11 - Improving our menu toggle button 3:53:46 - Creating the “state” Store class 4:45:45 - Implementing “new round” button 5:04:20 - Saving game state to LocalStorage 5:20:59 - Making our view “Reactive” (intro to how React works) 5:38:05 - BONUS - creating a custom state change event 5:45:35 - BONUS - Delegating event listeners

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere