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

Overview

This course teaches learners how to build a Tic Tac Toe game using HTML, CSS, JavaScript, TypeScript, and React. By the end of the course, students will be able to refactor the game to use an MVC pattern, TypeScript, and React. The course covers setting up TypeScript and React from scratch and explains the benefits of using these technologies. The intended audience for this course is individuals with a basic understanding of HTML, CSS, and JavaScript who want to enhance their frontend web development skills.

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