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.

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

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

--

[zachgoll]

Hello again FCC friends!! Thank you so much for taking the time to watch this course and thank you FCC for having me on the channel. I said it before, but FCC was one of the resources I used when I started to learn programming and it has opened countless doors for me. For any of you doubting yourself on the journey, just keep going! It will pay off and you’ll be glad you stuck with it. This stuff is challenging, so I hope this video gets you just a little bit closer to your goals :)

[BoburMamadzhanov]

Thank you so much!
I appreciate that you took into consideration the viewing experience on smaller screens by scaling your screen accordingly. Often, tutorial creators overlook the fact that their viewers may be watching on mobile devices. They record their tutorials on 4K monitors with small font sizes, which can be frustrating to watch on smaller screens or with a poor internet connection or lower resolution.

[algomius]

Hello!

Thank you for this video, I'm learning a lot about web programming with you.

I think you can use the modulo operator to simplify a bunch of things :
- Have next player from current player : let next = (current % 2) + 1 (This solution will still work with games with more than 2 players)
- Get the current player from the move array : let current = (moves.length % 2) + 1 (Again, this will still work with games with more than 2 players, just replace the 2 by the number of players)

I hope to learn a lot other things on your channel. Good work!

[ReasoningBanking]

We want more project videos like this
This is literally amazing!
The best video I have ever seen for the project.

[elgardenpostproduccion]

This course really hooked me up, I started with the HTML part and after the JavaScript part I really got it!, this is an impressive masterclass for a naive programmer like me, now I feel pro!

[lonleybeer]

First a video of minimal APIs and now a full frontend course this is all what i need for my college classes, keep it up!

[see-it-for-yourself]

Exactly what I was looking for! Just in time!

[hmlsnt]

Thanks for making this video Zach and FCC for showing this awesome content. I learned a lot from completing this.

[proexpert]

We want more videos like this. Thank you Zach!!!

[marlon]

Thank you so much Zach. Great tutorial as always 🤘🤘

[Ran_Do]

Bruh I’m currently working through the last 20 hr video Zach put out. This is epic.

[yaredhaile]

i love this channel i wanna thank you for what you doing fcc. you are changing lives for the better.

[khalidabdirahman]

Thank you teacher you made Javascript easy
Thank you for your effort
I will start this video now 🎉😊

[elsenorgato]

THE BEST COURSE I'VE EVER FOUND IN INTERNET. THANK YOU FCC

[edunjobiemmanuel]

Great job.. Imma check it out right away 🤗

[juraijahmed]

At this point these lessons should be integrated/replaced from normal school curriculum

[rutikbhanushali]

Great Explanation. Perfect tutorial for beginners.

[Paiconejo]

Thats a great video! congratulations, hes a very good teacher! thanks!

[PatsFerrer]

I'm starting in this world, studying HTML and CSS and I'm loving it! Next step: JavaScript!

[dxxdgpd]

Hello! I'm from Ukraine. And I am very grateful to the developers of this course. Thanks to him, I not only learned about HTML, CSS, JavaScript, but also improved my English. Thank you