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

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

Let's build a Vanilla HTML/CSS/JS Tic Tac Toe game! Transcript and Lesson Notes

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

Quick Summary

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

Key Takeaways

  • Review the core idea: 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
  • Understand how javascript fits into Let's build a Vanilla HTML/CSS/JS Tic Tac Toe game!.
  • Understand how vanilla javascript fits into Let's build a Vanilla HTML/CSS/JS Tic Tac Toe game!.
  • Understand how html fits into Let's build a Vanilla HTML/CSS/JS Tic Tac Toe game!.
  • Understand how css fits into Let's build a Vanilla HTML/CSS/JS Tic Tac Toe game!.

Key Concepts

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

Lesson FAQs

What is Let's build a Vanilla HTML/CSS/JS Tic Tac Toe game! about?

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

What key concepts are covered in this lesson?

The lesson covers javascript, vanilla javascript, html, css.

What should I learn before Let's build a Vanilla HTML/CSS/JS Tic Tac Toe game!?

Review the previous lessons in Course: Frontend Web Development for Beginners, then use the transcript and key concepts on this page to fill any gaps.

How can I practice after this lesson?

Practice by applying the main concepts: javascript, vanilla javascript, html, css.

Does this lesson include a transcript?

Yes. The full transcript is visible on this page in indexable HTML sections.

Is this lesson free?

Yes. CourseHive lessons and courses are available to learn online for free.

Continue Learning

Course Hive

Continue this lesson in the app

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

Related Lessons

Related Courses

FAQs

Course Hive
Download CourseHive and keep learning anywhere
Get App