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
