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

[@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 :)

[@ryuu5109]

Thank you so much again sir!, I learn a lot from your previous tutorial on javascript

[@ichiroutakashima4503]

Been waiting for this. I honestly learned a lot from your first video and the knowledge has been stuck since. Though I will be skipping a lot, I'll be jumping straight to your ReactJS tutorial instead.

[@trader2137]

now the MCDonalds kitchen doors are open to you

[@ttextinction7273]

Thank you Zack! You are a great teacher!

[@falokunemmanuel9577]

Thank you once again Zach… I have only about 2 hours left to be done with the first course.. Do you advise I start this new one or I take my time to improve on all what’s being thought in the first course ???

[@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!

[@oyesaurabh]

minimal APIs ??

[@lonleybeer]

@@oyesaurabh kzbin.info/www/bejne/onfSZIyvbbeibdk

[@PatsFerrer]

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

[@SwatejTech]

how's the progress?

[@СергейРоговой-л5п]

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

[@youngwolf1009]

This is so real ! My english level has increased like crazy thanks to coding tutorials

[@zachgoll]

You’re welcome!!

[@theway_up]

Слава Україні!!!

[@IrynaMiskevych]

@@theway_up героям слава

[@analis_s]

теж зараз вчусь Слава Україні!

[@safirehman8549]

You all need to change the name of your channel to the free university.. billions of love and respect from Pakistan ❤❤

[@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.

[@ReasoningBanking]

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

[@elgardenpostproduccion9172]

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!

[@juraijahmed1321]

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

[@akshayaileni5258]

I agree 💯

[@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!

[@hmlsnt5134]

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

[@bachxuanvu]

Quick tip that I just found: 1. To select a single line: Place your cursor anywhere on the line (Or use an Arrow key/ "Ctrl + Arrow") and press "Ctrl + L" (Control + L on a Mac) 2. To select multiple contiguous lines: Place your cursor anywhere on the first line, then press "Shift + Alt + Down Arrow" (Shift + Option + Down Arrow on a Mac) to extend the selection down to the next line. You can repeat this shortcut to select additional contiguous lines. 3. To select multiple non-contiguous lines: Place your cursor anywhere on the first line, then press "Ctrl + Shift + L" (Control + Shift + L on a Mac) to create multiple cursors, one for each line. You can then type or edit on all the lines at once. 4. To cancel selecting multiple lines: Press Esc

[@udanivindya3686]

thanks. i was seeking for 3rd option

[@bachxuanvu]

@@udanivindya3686Glad that I can help. Happy learning!

[@Ran_Do]

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

[@khalidabdirahman7838]

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

[@omoyajowotemidayo5382]

This is such an amazing content, really really covers thinking through solutions in a methodical yet no overwhelming way. Thank you.

[@see-it-for-yourself]

Exactly what I was looking for! Just in time!

[@vaughanmacegan4012]

Oh no he's back. I wonder if I have a problem this time around whether I'll get an answer. Personally, I would be happier if he went back to the old course and fixed up all the problems in it.

[@elsenorgato6856]

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

[@proexpert7417]

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

[@yaredhaile9322]

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

[@brassrootsmusic8340]

Thank you for this! 🎉

[@DevlogBill]

Looks like a fun tutorial I saved it!

[@sajibahmed0011]

Loved it❤ Tons of luv for you zach

[@marlon2080]

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

[@tchisama]

Good job💓💓💓

[@richardjonathan5117]

Great Job... Much blessings

[@bestAIUser]

The best channel

[@TheLadyBatly]

This was really helpful Thank you for sharing

[@edunjobiemmanuel4200]

Great job.. Imma check it out right away 🤗

[@thewalrusdragon9579]

It'd also be cool to see something like the JavaScript to TypeScript refactor you did with CSS to TailwindCSS as well

[@KEMO_ENKRED]

Great job ❤❤

[@rutikbhanushali957]

Great Explanation. Perfect tutorial for beginners.

[@dywa_varaprasad]

13:25 1st session

[@faffybee2148]

Very helpful

[@ban_droid]

If i have watched another front-end development full course in this channel for a nickel, i will have 10 nickels which is not much, but it just weird that happened multiple times. I hope the joke is understandable, my english is still very bad.

[@shwetak925]

Wow😍

[@Paiconejo]

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

[@vilmarvieira4829]

very nice

[@deed_it]

commit -m "Commit to this video and create, modify, innovate projects,until I master all of the concepts in this video"

[@shooterbaz24]

The react is osm!

[@026maheshkumars7]

Frontend web development involves building the user interface of a web application. It is a critical aspect of modern web development as users interact with the frontend of web applications directly. In this tutorial, we will build a simple todo list application using HTML, CSS, JavaScript, TypeScript, and React. HTML is used for structuring the content of web pages, CSS is used for styling the content, and JavaScript is used for adding interactivity to web pages. TypeScript is a superset of JavaScript that adds type safety to the codebase. React is a JavaScript library for building user interfaces. The project we will build is a todo list application that allows users to add, edit, and delete tasks from the list. The application will be responsive and work on all screen sizes. Setup: Before we start building the project, we need to set up our development environment. We will use Visual Studio Code as our code editor, Node.js as our JavaScript runtime environment, and npm (Node Package Manager) for managing packages. To set up our development environment, we need to install Visual Studio Code, Node.js, and npm. Once we have installed these tools, we can create a new project folder and open it in Visual Studio Code. We can initialize a new npm project by running the command npm init in the terminal. This will create a package.json file that will track the packages we install in our project. We can then install the required packages for our project by running the following commands in the terminal: lua Copy code npm install react react-dom npm install --save-dev typescript webpack webpack-cli ts-loader These commands will install React, React DOM, TypeScript, Webpack, Webpack CLI, and ts-loader packages. React and React DOM are required for building the user interface, TypeScript adds type safety to the codebase, and Webpack and ts-loader are used for bundling and compiling our code. HTML and CSS: The first step in building our todo list application is to create the HTML and CSS for the user interface. We will create a basic HTML file that includes the required elements for our application. We will create a div element with a class of container that will hold the todo list. Inside the container div, we will create a div element with a class of add-todo that will hold the input field and the add button. We will also create a ul element with a class of todo-list that will hold the todo items. Next, we will create the CSS for our application. We will use a CSS file to style the elements in our HTML file. We will add styles for the container, add-todo, input, add-button, and todo-list elements. We will use Flexbox to layout our elements. We will set the display property of the container element to flex and set the flex-direction property to column to stack the elements vertically. We will also set the align-items property to center to center the elements vertically. We will add styles for the add-todo element to position it at the top of the container. We will set the display property to flex, set the justify-content property to space-between to align the input field and the add button, and set the margin-bottom property to 20px to add some space between the add-todo element and the todo-list element. We will style the input element to set the font-size, padding, border, and outline properties. We will also set the flex-grow property to 1 to allow the input

[@vinoobharadwaj]

Bruh, tf is this 😂

[@026maheshkumars7]

@@vinoobharadwaj

[@naisunodansu]

Thankss!!!!

[@ashutoshdash140]

Thank you

[@mojoboingo1744]

As someone still doing Responsive Web Design and eyeing this year's CS50, this tutorial looks great but boy do I have no idea where to start with it

[@flopasen]

im using gpt-4 it's incredible

[@mojoboingo1744]

@@flopasen I really should have seen this answer coming. I have several prompts saved in my ChatGPT account but the enormity of the options stops me dead trying to figure out where to start.

[@flopasen]

@@mojoboingo1744 just use your creativity to ask it to generate something for you. the choices are unbounded so just pick one you want. if you're not sure, ask it about the most common industry standards

[@sehrishwaheed7953]

Please make a detailed course on apollo graphql i don't find any updated course anywhere

[@MinuRyu-u4f]

Very helpful thanks so much

[@mustafapanezai562]

I am watching your videos sir thanks 😊

[@FilipCodes]

Nice, chatgpt did this for me in couple of minutes but still nice 😂

[@huynahuyna5305]

Thank you so much guys Allah bless you. 😊

[@forgottenvy]

Nice to see tutorials not made by psychopaths who use tiny fonts on 1080p and higher res displays

[@ВысокаяБелкаизАвстрии]

Thank you so much!

[@rohulahadi3990]

🔥

[@Jeff--vq4zb]

1:51:20 now that is a cool VS Code trick.

[@yshp4436]

Please also make on backend

[@Britisheats]

Really enjoying the learning. I like the problem solving and creativeness to coding. It will be great once all the basic concepts stick and sink in. I moved onto javascript basics lately and it had me curious, from the more advanced coders among you. Do I need to be good at math? i am terrible at this. More creative minded but a calculator can be my friend if needed lol

[@tyrantula767]

No math needed other than for analyzing algorithms.

[@Junglee_6]

watching now . . . !

[@Idctrolley]

Cool one

[@taariqq]

Link to the previous part of the sequel?

[@GlobalYoung7]

thank you 👍

[@GsmForumtechs]

Nice lemme pass trough it

[@forellko8600]

Cool!

[@k-devs]

Wonderful video, thank you! I just ended with one doubt... what happened with MVC? It isn't necessary in React? Ps. I would love to see a video of Next.js. Thank you again, the best tutorial I've seen so far.

[@shubhampatankar1468]

Same add videos on data engineering from scratch ❤

[@markchristophercornelio8161]

2:00:00 2:10:00

[@wajeehsyedmuhammad4114]

what have you writen in line one of index.css

[@atifaslam655]

Make a video on react native (JavaScript )

[@InspireWithKhanh]

Hi freecodecamp thankyou for the video. Can you make videos about backend specifically with java language ?

[@Vicz-]

Appreciate the effort but would have been more efficient if you explained why you used certain methods to approach certain problems more like to understand your thought process

[@it-self-development2994]

what are prerequisities for this course?

[@Nodsaibot]

video starts at 19:00 Meat and potatoes at 1:14:00

[@midnightdemon9157]

im new to frontend about 3 months now and im struggling to find time to study and coding... so my question is how many hours i should learn coding each day in order to became a frontend developer... my goal is to achieve that in less than 1 year please tell me your thoughts ❤️

[@chelz.o]

you need to find time to study as well as practice . as you only get better by practicing . 15-20 hours a week

[@midnightdemon9157]

@@chelz.o ok thanks mate do you work as frontend ?

[@skillm3h4ppy1er]

@@midnightdemon9157 honestly just be consistent in how much you code cause everyone learns at different speeds etc. I'd say if you want to learn absolutely everything about FE development then you might to put in more hours but otherwise try for at least 1 hour everynight and take the time to learn. Concepts and stuff will stick way better when you're not putting yourself on a razor's edge trying to studing, work, maintain relationships etc

[@midnightdemon9157]

@@skillm3h4ppy1er im just trying to switch my career to frontend because im in 2nd year in college right now and the road is still far far far from me and i want to get a good job as fast as possible and became independent and what's the easiest and fastest way for good money and work at home : programming. and what's easiest programming career: frontend. in my opinion of course

[@Broonlyme]

Thanku sir

[@provavelmente]

No 1080p resolution on the video?

[@viru._.]

Hi can we pls have a pinescript masterclass

[@sosygmingmc5030]

FCC, PLEASE give us more Angular tutorials and projects!!!! ❤

[@nazar1744]

Hell no... Not the Angular crap

[@CreepyHollow]

I haven't learned anything about React or Typescript. However, I've gone through the entire course by Zach, posted here previously and, have been learning HTML, CSS and JS for several months. Can I watch this course or will it be problematic for me?

[@zachgoll]

Absolutely! This course gives a beginner-friendly introduction to React and TypeScript. You may have to do a little bit of research on your own, but I've tried to keep it focused on someone just getting started with both.

[@CreepyHollow]

@@zachgoll Thank you very much for taking the time to answer. I've stayed away from React and know nothing of TS, because I've been working on getting a solid grasp on HTML and CSS as well as JS (doing Frontend mentor challenges and building some pure JavaScript stuff) before diving in further. I will take that step now. About doing research, that's perfectly okay, I have come to realize that this is a big aspect of being a web developer.

[@PrinceKumar-hh6yn]

It would have been a little more convenient to find this video if It had the actual project hint in the TITLE of the video.

[@midnightdemon9157]

im learning frontend but with jQuery and my camp told me that jQuery is not dead and it's still in demande so guys what are your thoughts I'll be very happy to hear them ❤️

[@eazy2195]

jQuery is dead. At least for newer project. There are probably some older apps out there written in jQuery that would be too expensive or time consuming to refactor into something like React. But React is already 10 years old and most of the job posts i see look for React or Angular. jQuery like i said might be still used in some older projects and it's not impossible to get a job with it, but you'd be working in an essentially dead technology

[@midnightdemon9157]

@@eazy2195 so in your opinion programmers should learn react or angular and not jQuery ?

[@eazy2195]

@@midnightdemon9157 In my opinion, especially if you're only 3 months in. You should focus on learning Javascript itself, HTML and CSS. Things like jQuery, React, Angular or whatever framework/tool you might use is just built on top of Javascript. It just makes certain things easier, but if you don't understand basic JS then learning frameworks might just make things more confusing for you and you'll have gaps in your knowledge. Find a good course on JS. Find some projects that build a website with JS only, then you'll later understand why people use React

[@midnightdemon9157]

@@eazy2195 do you work as a frontend ?

[@eazy2195]

@@midnightdemon9157 yup

[@ergie23]

i didt watch first course, is there posiblle to see, how keyframes works ? or something that you cant unterstand, is there any explanation ?

[@Srirama7]

I kindly request to make video of full Stack development latest version please

[@JackSparrow-xd1vp]

Please also add course about jetpack compose android sir

[@samiralang5033]

❤❤❤

[@cyberprompt]

I've had issues when using a hidden class (display:none) with elements of display:flex, since my utility .hidden is a very low weight by itself and is usually overruled by something defined later for display, and I like to define it early and simple. Instead of using !important as a last resort, I used .modal:not(.hidden). Just thought how it almost reads like a sentence I'd suggest it. And thank you @zachgoll and FCC for helping people who want to help themselves!

[@criscrawford4615]

Is there any way we can get the code for the ts/react refactor? I'm stuck with a ts error and can't go on, and the only code I have is for the plain react refactor. "yarn dev" says it can't read App.tsx.

[@ballpen9157]

How about database?

[@parathonNGUx]

❤❤❤😮😍😍

[@loganjiang8711]

Can you upload English subtitles for youtube videos? I need to use a chrome plug-in to translate to understand. The automatically generated subtitles experience is very poor and the speed is very slow, which makes me unable to understand the content. I sincerely hope to upload English subtitles, thank you very much

[@LKBeastGamer]

why am i getting the following error message?---- Uncaught TypeError: App.$.menu is null

[@Fidal___X]

How to easily learn programming??

[@kim92se64]

2 h and 43 m watched Repeated 2 h & 20 m

[@therahul5304]

OG

[@cruseder-77k]

First

[@smilgazolyte6696]

Could you do it with Angular?

[@mohammadqamar8732]

HELLO,MY QUESTION IS ABOUT CHATGPT AI RESEVATION TO THREAT FREELANCE DEVELOPERS HOW MUCH AI CAN LOSS THE FREELANCING EARNINGS ?IT MAKE FREAK OUT AND IAM RELUCTANT TO LEARN MORE ABOUT WEB DEVELOPMENT,KINDLY GUIDE ME AND GIVE ME THE OVER ALL LOOK THAT WHAT IS ACTUALLY GOING TO HAPPEN WITH FREELANCERS AS A WEB DEVELOPER. THANKS QAMAR RAO

[@alphaoffrance617]

🙏 pray for me. 😢😢😢 I still want to learn but I am failed again and again.

[@udanivindya3686]

same here. keep going

[@alphaoffrance617]

@@udanivindya3686 . We both are in same chapter.

[@odiljonsobirov6140]

171

[@kent0n144]

um

[@andrews4379]

Dont like TypeScript

[@devchaudhari6727]

Nice course

[@026maheshkumars7]

mi vs rcb...rcb win