In this frontend web development project tutorial, you will improve your skills with HTML, CSS, JavaScript, TypeScript, & React. This video is a "sequel" to the Frontend Developer Bootcamp video we posted by the same creator. However, as long as you have a basic understanding of HTML, CSS, and JavaScript, you can start with this tutorial. 🎥 Web Development Bootcamp: https://www.youtube.com/watch?v=zJSY8tbf_ys ✏️ Created by @zachgoll Section 1: Build a Tic Tac Toe game with Vanilla HTML/CSS/JS Section 2: Refactor that game to use an MVC pattern and explore why this pattern is helpful Section 3: Refactor the game to TypeScript, learning how to setup TypeScript from scratch and why it is useful Section 4: Refactor the game to React + TypeScript, explaining how to setup React from scratch and exploring why React is useful and what problems it solves over a Vanilla approach 💻 Code: https://github.com/zachgoll/tic-tac-toe-subscriber-refactor 🔗 Post referenced in the course: https://www.zachgollwitzer.com/posts/scripts-commonjs-umd-amd-es6-modules 🔗 Another post referenced: https://www.zachgollwitzer.com/posts/imperative-programming ❤️ Try interactive Frontend courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Frontend (Made possible by a grant from our friends at Scrimba) ⭐️ Chapters⭐️ ⌨️ (0:00:00) Introduction, resources, and prerequisites ⌨️ (0:07:50) Project setup and VSCode extensions ⌨️ (0:19:29) Build the UI with HTML and CSS ⌨️ (1:14:20) Add JavaScript interactivity to the project ⌨️ (3:01:19) Introduction to the MVC pattern ⌨️ (5:51:56) Refactoring app with TypeScript ⌨️ (5:54:46) Setting up TypeScript from scratch, what are benefits? ⌨️ (6:35:56) Start of refactor from Vanilla JavaScript to TypeScript ⌨️ (7:52:25) Why should you refactor your app to React? ⌨️ (8:01:37) The many ways to set up a React app ⌨️ (8:06:52) Setting up React from scratch ⌨️ (8:51:45) Initializing TypeScript in a React app from scratch ⌨️ (9:00:56) Refactoring vanilla app to React app 🎉 Thanks to our Champion and Sponsor supporters: 👾 Nattira Maneerat 👾 Heather Wcislo 👾 Serhiy Kalinets 👾 Erdeniz Unvan 👾 Justin Hual 👾 Agustín Kussrow 👾 Otis Morgan -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news
ADVERTISEMENT
Hello again FCC friends!! Thank you so much for taking the time to watch this course and thank you FCC for having me on the channel. I said it before, but FCC was one of the resources I used when I started to learn programming and it has opened countless doors for me. For any of you doubting yourself on the journey, just keep going! It will pay off and you’ll be glad you stuck with it. This stuff is challenging, so I hope this video gets you just a little bit closer to your goals :)
At this point these lessons should be integrated/replaced from normal school curriculum
First a video of minimal APIs and now a full frontend course this is all what i need for my college classes, keep it up!
Hello! I'm from Ukraine. And I am very grateful to the developers of this course. Thanks to him, I not only learned about HTML, CSS, JavaScript, but also improved my English. Thank you
I'm starting in this world, studying HTML and CSS and I'm loving it! Next step: JavaScript!
You all need to change the name of your channel to the free university.. billions of love and respect from Pakistan ❤❤
Thank you so much! I appreciate that you took into consideration the viewing experience on smaller screens by scaling your screen accordingly. Often, tutorial creators overlook the fact that their viewers may be watching on mobile devices. They record their tutorials on 4K monitors with small font sizes, which can be frustrating to watch on smaller screens or with a poor internet connection or lower resolution.
Thank you teacher you made Javascript easy Thank you for your effort I will start this video now 🎉😊
Exactly what I was looking for! Just in time!
Good job💓💓💓
Wow! I never knew there was a sequel to that video. 😯 That bootcamp was my first step in my developer journey, and I'm really grateful for all 21 hours of it. I already know typescript, react, next.js, expressjs etc, but I don't mind watching this video again just for the nostalgia. 😅 Thank you so much Zach ❤
13:25 1st session
Looks like a fun tutorial I saved it!
Thank you for this! 🎉
Hello! Thank you for this video, I'm learning a lot about web programming with you. I think you can use the modulo operator to simplify a bunch of things : - Have next player from current player : let next = (current % 2) + 1 (This solution will still work with games with more than 2 players) - Get the current player from the move array : let current = (moves.length % 2) + 1 (Again, this will still work with games with more than 2 players, just replace the 2 by the number of players) I hope to learn a lot other things on your channel. Good work!
Please also make on backend
Nice to see tutorials not made by psychopaths who use tiny fonts on 1080p and higher res displays
I haven't learned anything about React or Typescript. However, I've gone through the entire course by Zach, posted here previously and, have been learning HTML, CSS and JS for several months. Can I watch this course or will it be problematic for me?
We want more project videos like this This is literally amazing! The best video I have ever seen for the project.
This course really hooked me up, I started with the HTML part and after the JavaScript part I really got it!, this is an impressive masterclass for a naive programmer like me, now I feel pro!