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

Overview

Embark on a comprehensive 10-hour frontend web development project tutorial that takes you through building a Tic Tac Toe game using various technologies and frameworks. Start with vanilla HTML, CSS, and JavaScript to create the game's foundation. Progress to implementing the Model-View-Controller (MVC) pattern, understanding its benefits in structuring code. Transition the project to TypeScript, learning how to set it up from scratch and exploring its advantages. Finally, refactor the game using React and TypeScript, gaining insights into React's setup process and its problem-solving capabilities compared to vanilla approaches. Dive deep into each technology, exploring their unique features and best practices while building a practical, interactive web application.

Syllabus

⌨️ Introduction, resources, and prerequisites
⌨️ Project setup and VSCode extensions
⌨️ Build the UI with HTML and CSS
⌨️ Add JavaScript interactivity to the project
⌨️ Introduction to the MVC pattern
⌨️ Refactoring app with TypeScript
⌨️ Setting up TypeScript from scratch, what are benefits?
⌨️ Start of refactor from Vanilla JavaScript to TypeScript
⌨️ Why should you refactor your app to React?
⌨️ The many ways to set up a React app
⌨️ Setting up React from scratch
⌨️ Initializing TypeScript in a React app from scratch
⌨️ Refactoring vanilla app to React app