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

freeCodeCamp.org

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

⭐️ 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

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

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

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

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path