[#Script #Coding] Frontend Web Development: In-Depth Project Tutorial (HTML, CSS, JavaScript, TypeScript, React)

Posted on Thursday April 20, 2023 by Eric Brooks

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

By freeCodeCamp.org
Published: Apr 04, 2023

“
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

[READ MORE]

”

Proudly powered by WordPress

EricBrooks.Com^® is licensed under a Creative Commons License.

Disclaimer: The views expressed herein are solely those of Eric Brooks. They do not necessarily reflect those of his employers, friends, contacts, family, or even his pets (though my cat, Puddy, seems to agree with me on many key issues.). In accordance to my terms of use, you hereby acknowledge my right to psychoanalyze you, practice accupuncture, and mock you incessantly with every visit. As the user, you also acknowledge that the author has been legally declared a "Problem Adult" by the Commonwealth of Pennsylvania, and is therefore not responsible for any of his actions. ALSO, the political views and products advertised on this site may/may not reflect the views of Puddy or myself, so please don't take them as an endorsement. We just need to eat.

Connect