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.
