Frontend Web Development: In-Depth Project Tutorial (HTML, CSS, JavaScript, TypeScript, React)

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: ✏️ 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: 🔗 Post referenced in the course: 🔗 Another post referenced: ⭐️ 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: Read hundreds of articles on programming: