Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB)

[@ItsBajra]

44:01 create a link 45:00 new tab 46:00 absolute & relative url 47:16 link email 48:30 Title 50:40 Favicon 51:56 Tables 54:35 Table Data 57:00 ordered List 58:25 description list 59:42 block and inline elements 1:04:45 Iframes 1:07:35 Symbols 1:10:58 html forms 1:17:15 checkboxes 1:19:38 submit 1:21:10 Action 1:22:45 submit method 1:24:19 setting up html locally CSS 1:26:19 Syntax 1:32:52 Comments 1:37:07 Selectors 1:40:32 Class in html elements 1:46:21 Backgrounds 1:51:36 Margins 1:59:35 Borders 2:17:31 Height & Width 2:20:39 Outlines 2:23:48 Styling text 2:38:53 Fonts 2:43:29 Icons 2:46:15 Tables 2:54:08 Display & Visibility 2:56:14 Combinators 3:01:14 Dropdown Menu 3:13:36 Attribute Selectors JS 3:15:52 Intro 3:16:37 Starter code 3:18:53 Create a variable 3:20:44 Var vs Let 3:24:12 eg html query selector 3:24:36 Const variable 3:27:14 Comments 3:28:00 Initialize buttons 3:29:29 Create function 3:31:07 Test/Console 3:36:25 Update text/ button text 3:38:45 Escape characters 3:40:50 Create object 3:45:24 Passing data into function 3:53:57 If-else statement 4:01:00 String concatenation 4:07:58 Array shift method 4:12:09 Display html element 4:16:30 Else-if statement 4:22:05 == vs === 4:23:00 Tenary/conditional operator 4:25:18 Debug 4:26:59 Test game 4:28:48 Return function 4:41:18 While loop Frontend Movies App 4:52:30 Intro 4:53:02 HTML 5:03:09 CSS 5:15:23 JS 5:42:47 Summary Backend Movies API 5:44:05 Into 5:44:20 API diagram 5:44:38 Create Repl 5:45:33 JSON edit for ESN6 imports 5:47:27 Server.js 5:55:10 Index.js 5:55:43 MongoDB setup 5:59:26 Connect to Mongo 6:12:08 Route for testing 6:14:53 Test 6:17:27 Types of requests 6:20:50 Create ReviewsCtrl 6:29:55 Create ReviewsDAO 6:38:45 Test 6:39:22 Curl command 6:45:04 Curl POST 6:45:45 Curl GET 6:47:13 Curl PUT 6:49:07 Curl DELETE Connect Frontend and Backend 6:49:34 Intro 6:49:39 Fork frontend replit 6:58:12 URL object 7:10:28 Edit review function for button 7:15:33 Save function 7:19:47 Create review function 7:27:25 Delete review function props to @notsmart4896 and @ronz91 on helping out

[@Ai_SOMALI]

you saved my time in the meantime thank u

[@motionalname2225]

you are great please complete it as possible

[@ronz91]

I've added to this in my comment

[@nandan3722]

I am not able to add links.. It's showing refused to connect

[@ronz91]

@@nandan3722 see my comment, I have added some

[@MrAarsan]

To me, it just sounds like a friend trying to give us information and help. Not like trying to do work fast and earn money. That is the best thing about this channel😊

[@jeffspc88mx]

Thanks!

[@allstartv282k]

Damn Jeff!!

[@emomotimiwenapere9588]

Hello friend

[@notsmart4896]

HTML 02:44 Intro 44:01 Create a link 45:00 New Tab 46:00 Absolute & relative url 47:16 Link email 48:30 Title 50:40 Favicon 51:56 Tables 54:35 Table data 57:00 Ordered list 58:25 Description list 59:42 Block & inline elements 1:04:45 Iframes 1:07:35 Symbols 1:10:58 Html forms 1:17:15 Checkboxes 1:19:38 Submit 1:21:10 Action 1:22:45 Submit method 1:24:19 Setting up local html CSS 1:26:19 Syntax 1:32:52 Comments 1:37:07 Selectors 1:40:32 Class in html elements 1:46:21 Backgrounds 1:51:36 Margins 1:59:35 Borders 2:17:31 Height & Width 2:20:39 Outlines 2:23:48 Styling text 2:38:53 Fonts 2:43:29 Icons 2:46:15 Tables 2:54:08 Display & Visibility 2:56:14 Combinators 3:01:14 Dropdown Menu 3:13:36 Attribute Selectors JS 3:15:52 Intro 3:16:37 Starter code 3:18:53 Create a variable 3:20:44 Var vs Let 3:24:12 eg html query selector 3:24:36 Const variable 3:27:14 Comments 3:28:00 Initialize buttons 3:29:29 Create function 3:31:07 Test/Console 3:36:25 Update text/ button text 3:38:45 Escape characters 3:40:50 Create object 3:45:24 Passing data into function 3:53:57 If-else statement 4:01:00 String concatenation 4:07:58 Array shift method 4:12:09 Display html element 4:16:30 Else-if statement 4:22:05 == vs === 4:23:00 Tenary/conditional operator 4:25:18 Debug 4:26:59 Test game 4:28:48 Return function 4:41:18 While loop Frontend Movies App 4:52:30 Intro 4:53:02 HTML 5:03:09 CSS 5:15:23 JS 5:42:47 Summary Backend Movies API 5:44:05 - Into 5:44:20 - API diagram 5:44:38 - Create Repl 5:45:33 - JSON edit for ESN6 imports 5:47:27 - Server.js 5:55:10 - Index.js 5:55:43 - MongoDB setup 5:59:26 - Connect to Mongo 6:12:08 - Route for testing 6:14:53 - Test 6:17:27 - Types of requests 6:20:50 - Create ReviewsCtrl 6:29:55 - Create ReviewsDAO 6:38:45 - Test 6:39:22 - Curl command 6:45:04 - Curl POST 6:45:45 - Curl GET 6:47:13 - Curl PUT 6:49:07 - Curl DELETE Connect Frontend and Backend 6:49:34 - Intro 6:49:39 - Fork frontend replit 6:58:12 - URL object 7:10:28 - Edit review function for button 7:15:33 - Save function 7:19:47 - Create review function 7:27:25 - Delete review function

[@AhXiu0320]

thx!

[@belkr]

hero

[@anthonywilliams3822]

Thanks!

[@Engimran-kf2pn]

thanks man

[@guilhermepereira-up6fi]

HERO

[@nikolaiprophet]

I learned web development 5 years ago and i can say this course is a full refresher and reminder to what i knew and forgotten. Thanks a lot!!!!!

[@waleedqazi6239]

Have you got a job?

[@leylajudy]

thank you for your comment that is exactly what i was searching for

[@kennyxiao]

wow， are you a full stack developer?

[@juneh5748]

is this course updated?? just done following a outdated course that drove me crazy

[@simplyizustic6122]

@@juneh5748 doubt it. Do people still use '.onclick' instead of 'addEventListener('click', (function))

[@koladechris]

Congratulations, Beau and Tomi on getting this course up 🎉

[@brainy3429]

Just reminder to people like me (completely new to backend),PLEASE try to watch this two times if you don’t get things on the first time. I always get things on second time and I get better as I keep watching this and other backend related videos. Good luck!

[@StaticBlaster]

Yeah, the advantage of video over in class lectures is that you can rewind as many times as you like until it sinks in. Once you understand the nuts and bolts of it, I'm sure the subsequent topics fall into place and makes it easier to understand.

[@ronz91]

I added time stamps for the video in my comment below

[@smitpatel9722]

Do you write notes of this lecture or simply just watch it?.. or trying to code at same time what you learn??

[@brainy3429]

first of all, thanks for the reply cause this reminds me of how far I have come. Now that I have improved a lot, I would like to give a more advice. My old advice is true with pretty much everything you learn. Watch or do things again if you don't get em right away. Regarding this vid, this vid does not explain fundamentals. So you gotta do more. If you come across something that you don't understand, look it up to learn more about that. This vid should be used just an intro to web dev.

[@itsbrod]

bro i keep making notes of every single heading cuz i'm really bad in memorizing @@smitpatel9722

[@rianreboucas7341]

Finaly finished it! I have an interview on monday, wish me luck!

[@apoerakevin]

Good luck bro✌🏿✌🏿

[@apoerakevin]

How did the interview go ??

[@rianreboucas7341]

It went really well! I got my first Internship

[@apoerakevin]

@@rianreboucas7341 Oww that’s good to know. I know you gonna kill it. Go hard bro.

[@omidakbari1702]

​@@rianreboucas7341awesome, can you give me a map of what did you study and how long dose it take for you to get this internship?

[@ahmedsayed6829]

The best channel on KZbin!

[@ashutoshdash140]

Great people.... This channel helped me a lot when i just started. I can't express my gratitude

[@subratachatterjee6333]

Traversymedia is also one of my favourite.

[@kozimjonturgunov4183]

@@ashutoshdash140 do you work nowadays?

[@HimanshuKumar-yh7ox]

Great mentor makes great learner's ❤️

[@yourcas3310]

@@HimanshuKumar-yh7ox telugu

[@ankursinger102]

I'm Gonna start learning javascript and backend development and suddenly got notification...........this came as a Gift.....Love you Guyz.....Love from India...❤❤

[@explorer3771]

❤

[@1PercentDaily]

It's been a year what are you doing now, and what did this mini course lead you to?

[@AmmyJ]

Today marks my initiation into coding🎉. Congratulations to me on my new journey

[@stoyansarov2647]

How has your journey been so far?

[@SHAILVFX]

Thanks For this course who writes or design this course & thanks for Tomi Tokko and Beau Carnes who clearly explained each topics of frontend & backend for the peoples who cant afford to pay for paid courses but want to enter in I.T. field & want to do the job.🙏🙏. God bless you.

[@kitgary]

So cool! I have confidence to call myself a junior full stack developer now!

[@cikiface13]

1 month ago I decide to learn about coding, now this video comes up and I've never been so ready to learn. Thank you guys and god bless yall.

[@amaanullah13]

How'd it go?

[@Oliver_twist00]

@@amaanullah13 lmfaooo

[@kuzeygorgulu]

did you make a progress?

[@George-kb7sb]

Working for nasa as lead dev to busy to read your comments ​@amaanullah13

[@ronz91]

00:00 Intro 00:27 Concepts covered HTML 02:44 Intro 03:16 Replit setup 05:02 HTML explained 06:19 Elements 07:16 Title 07:25 Body 08:02 Tags 12:26 Heading tags 13:34 Paragraph tags 14:46 Link/a tags 17:40 Attributes 19:09 Insert image 25:14 Paragraphs 27:10 Break tag 28:10 Pre tag 29:24 HR tag 30:21 Formatting elements 31:30 Bold 32:36 Italix 34:04 Highlight 35:09 Strike-through 35:35 Underline 35:58 Small 36:13 Sub & Super script 37:25 Colours 40:40 Comments 44:01 Create a link 45:00 New Tab 46:00 Absolute & relative url 47:16 Link email 48:30 Title 50:40 Favicon 51:56 Tables 54:35 Table data 57:00 Ordered list 58:25 Description list 59:42 Block & inline elements 1:04:45 Iframes 1:07:35 Symbols 1:10:58 Html forms 1:17:15 Checkboxes 1:19:38 Submit 1:21:10 Action 1:22:45 Submit method 1:24:19 Setting up local html CSS 1:26:19 Syntax 1:32:52 Comments 1:37:07 Selectors 1:40:32 Class in html elements 1:46:21 Backgrounds 1:51:36 Margins 1:59:35 Borders 2:17:31 Height & Width 2:20:39 Outlines 2:23:48 Styling text 2:38:53 Fonts 2:43:29 Icons 2:46:15 Tables 2:54:08 Display & Visibility 2:56:14 Combinators 3:01:14 Dropdown Menu 3:13:36 Attribute Selectors JS 3:15:52 Intro 3:16:37 Starter code 3:18:53 Create a variable 3:20:44 Var vs Let 3:24:12 eg html query selector 3:24:36 Const variable 3:27:14 Comments 3:28:00 Initialize buttons 3:29:29 Create function 3:31:07 Test/Console 3:36:25 Update text/ button text 3:38:45 Escape characters 3:40:50 Create object 3:45:24 Passing data into function 3:53:57 If-else statement 4:01:00 String concatenation 4:07:58 Array shift method 4:12:09 Display html element 4:16:30 Else-if statement 4:22:05 == vs === 4:23:00 Tenary/conditional operator 4:25:18 Debug 4:26:59 Test game 4:28:48 Return function 4:41:18 While loop Frontend Movies App 4:52:30 Intro 4:53:02 HTML 5:03:09 CSS 5:15:23 JS 5:42:47 Summary Backend Movies API 5:44:05 - Into 5:44:20 - API diagram 5:44:38 - Create Repl 5:45:33 - JSON edit for ESN6 imports 5:47:27 - Server.js 5:55:10 - Index.js 5:55:43 - MongoDB setup 5:59:26 - Connect to Mongo 6:12:08 - Route for testing 6:14:53 - Test 6:17:27 - Types of requests 6:20:50 - Create ReviewsCtrl 6:29:55 - Create ReviewsDAO 6:38:45 - Test 6:39:22 - Curl command 6:45:04 - Curl POST 6:45:45 - Curl GET 6:47:13 - Curl PUT 6:49:07 - Curl DELETE Connect Frontend and Backend 6:49:34 - Intro 6:49:39 - Fork frontend replit 6:58:12 - URL object 7:10:28 - Edit review function for button 7:15:33 - Save function 7:19:47 - Create review function 7:27:25 - Delete review function 7:29:05 - Outtro Congrats on finishing :D

[@ronz91]

Finally completed the links

[@koolganja]

Best time stamps in the comment section

[@ronz91]

@@koolganja finally some recognition 😂 thank you!

[@Aniuser-p5m]

Tnx

[@jackianson]

This has got to be one of the best full stack tutorials on KZbin. Thanks :)

[@ayubgeilani]

Wow! I'm absolutely Beginner i really get very single thing in these courses, I really appreciate you 🙏💯

[@tarifkhantuber]

The course really helped me brush up my HTML and CSS,Thanks for putting it out there😇

[@tarifkhantuber]

@Abdullah kamal No,how's the movie app creation section btw?

[@1PercentDaily]

It's been a year what are you doing now, and what did this mini course lead you to?

[@nextlevel4529]

The best channel to learn and grow in Computer science 100 Thanks 👍💯🙂😁😊

[@hannahkhan6048]

Than you beau. I cant believe there are people like you in this world.

[@matt7836]

Best channel of youtube SO FAR. Guys, u r my heroes. God bless u

[@aclearns92]

Overall, this was an awesome tutorial. The only downside is the ball was dropped big time in the "Create Frontend Movie App" section. Once the talk of how to access APIs began, nothing was really explained. Felt like there was a huge miss on a teaching moment for viewers - especially for those learning about APIs for the first time. Other than this section, the tutorial was great!

[@richardlobos2466]

This is amazing! Why did I just learn about this now? Anyway, better late than never. Thank you so much to all the people behind this awesome YT channel.

[@varshakapil8224]

What would we do without this channel 👍

[@PraveenYvv1]

I'm a beginner since my first year of engineering right now I'm final year still I'm a beginner who have some basic Knowledge on HTML and some CSS concepts, but that thing is 2 years back right now I know nothing so as a final year job grasping aspirants i wanna start this course and I'm going to edit my day my day working progress here, hmm let me see if I get seriousness at least from now 27th Feb 00:00 - 13:49

[@prathameshdhanajigandule4299]

What happened bro

[@nt3264]

Stopped at Feb 27 😭

[@KingOfThePenguins]

lock in bro 🤣

[@sivanaikk]

Love you guys. Doing amazing work for community ❤️

[@codewithharris]

Point of correction at 3:07:35 use "padding" instead of "passing". That's why the spacing between the links didn't work.

[@Gojam12]

The best instructor on KZbin on most languages right here

[@akhileshp5011]

day 01 - 43:31 day 02 - 01:04:44 day 03 - 01:27:15 day 04 - 02:00:07 day 05 - 02:14:30

[@tz9422]

dont give up

[@akhileshp5011]

@@tz9422 yes will continue thank you :)

[@NwigweDestiny-w9k]

Just learnt it for free without paying any thing Thanks a lot free code camps

[@RaviKant-ms6px]

Completed. Just had a goal of writing this and learnt a lot. I went a bit slow since it was my first experience in full stack development and the course is just awesome. Thank you really for making this course engaging & fun and discussing each and every line of code with good practices to follow in future. Thank you @tomi and @beau

[@RaviKant-ms6px]

@ZORO You can do this but it will be difficult to follow after html and css part is done. So you can look for html and css and learn this afterwards in future.

[@ronz91]

I added time stamps for the video in my comment below

[@harshvardhansingh5507]

can we personally host my project like the movie one ?

[@jameskamau4115]

great content! one thing I noticed was that the code did not function when using button.innertext .... to change text once a button is clicked. Instead, use button.innerHTML and the code works correct. Hope this helps anyone who was stuck like me

[@RandomFandomMandem]

hello, nothing is happening when I click the buttons, on Replit nor or VS code, help

[@josephtanasi7677]

This tutorial was really good, but as a beginner there is so much left out when it comes to the back end, if your not using Replit you have to learn a ton of things on your own because Replit handles alot of the internals on its own

[@anshukumar-ud6yi]

So we can start from this youtube to learn ?

[@fop7441]

@@anshukumar-ud6yiwe need to learn abt a thing which is older that this replit thing

[@echomix7]

​@@fop7441from where to learn

[@Mr.grim10903]

​@@anshukumar-ud6yi you can learn from this channel but you yourself also have to do little studying alone to fully understand

[@stevemurimi1815]

Just a quick note. You put two semicolons at line 196 in the JavaScript tutorial. (Check at timeframe 4:21:31).

[@SeRoShadow]

I would recommend searching for a better structured tutorial since this one is rushed. This will give you outated examples, you will not learn things correctly this way. If you would ask a person that does this on daily basis, that is exactly what their opinion would be. My comment might get deleted, but just a heads-up for anyone seeing it. Good intentions though.

[@Benzema.org9]

Wow I have been learning css for 3 months now but I don't understand anything. But I came here just 2 days of watching this I understand it. Thanks for given people like me opportunity never to give up on our dreams

[@victormuuo235]

CSS for 3 months? try JS then

[@vaughanmacegan4012]

@6:41:40 after four days of typing the code and another 3 days of trying to debug the code - I finally got the database to accept an entry. Now, I am going to lay my weary head to rest, and I won't cry no more. That was an ordeal of great magnitude. This part of the course was not structured well, and while I finally got to grips with what the code was doing and can understand it in part, I did not "LEARN" how I would use it in a project I create - it would've been far better to 1. learn how to set up the database - 2. then place a single entry. Then 3, after that read the entry back. 4. update it - doing each section in sections testing and debugging as we went along. Really getting to grips with the very basics on using an online database before doing anything else. Rather than being hit over the head with a completed solution that we just type in and hope there are not too many errors. This would give us bite sized chunks of code and checkpoints to test code making it far easier to debug - at one point I was about to give up because nothing was going through to the database it wasn't until I saw the errors pop up on the console when I stopped the code running that I had a chance - up to that point everything was saying it was a success and nothing was going to the database. That how I would handle this lesson but what would I know, I am just an Instructor in Martial arts. I was rather disappointed with this section after a superb section on JavaScript - even that lesson would've been better breaking it into smaller sections to avoid that dreaded parser error in line 57. Also the deprecation warning took me aback how long will it be before the useNewUrlParser fails to work? Leaving the course broken. Does anyone know what I should use instead?

[@vaughanmacegan4012]

PS: After another 5-6 hours of debugging including getting help from another user on one of the code pages, for an error that I was getting in the code, I am getting "close" to finishing this chapter. Hopefully if the "Update" and "Delete" reviews work I'll be finished sometime later today :) I finished after another marathon debugging session so the post, update, delete, get, multiple gets on movieID all seem to work now - oh what fun that was.

[@dash7405]

how did you get it to accept an entry?

[@FunLau-u9e]

I love the creation of RPG game!! Thank you so much. But the later part of movie review backend, I'd say it's a bit overwhelming for beginner.

[@yannickstommel2366]

Overall i think this is a nice tutorial. Although in my opinion many important aspects do not get explained pretty good by Tomi. Some code is just written down without further explanation and there are also some parts that are written in a weird or unpractical style. For example: I would have loved to see how this API setup is really working and set up in the background. The API request we set up returns an object that contains all the movies with all the properties and you can see all of that in the console when we print the object. This would've made it much easier to understand, where the properties come from that you just copy pasted. Also an explanation where the API constants are found on the Website (APILINK, IMG_PATH, etc.). I eventually figured it all out by myself, which is fine though, but this way many people won't be able to reproduce this by their own. I think this tutorial is still good, i just wanted to point that out, because i haven't seen anyone talk about it. Keep it up.

[@sivajagan4177]

bro can u tell me how to get api for img and search api plz

[@AKThu-g4d]

I think overall Javascript section in the frontend project is poorly explained.

[@anf_ai]

i have learnt a very few of this course in my school but this video have a vast info about things which are used in web creation. this video is littrelly a master piece

[@chrmnlois]

thanks for this tutorial!

[@jenniferlorence185]

You Guys are SO CUTE. I already love the Course before the Course even begins, I love that Young Man working on making Something Productive with his life and I am Supporting it!!!

[@NotePortal]

wow I really enjoyed that javascript part, it was really fun and packed with information! I also loved the way you taught.

[@iragladoshuk]

this i why i love the internet, thank you guys, a great course !

[@sierrarequest]

I have learnt a lot from this channel, thanks for the upload

[@AG-cv7fx]

You are doing a great service to the Mankind.

[@faustipez]

I have no word for what freeCodeCamp is doing. I'm very happy and excited to start my learning path! Thank you very much from the deep of my heart 🙏❤️

[@ronz91]

I added time stamps for the video in my comment below

[@imranabbasi9920]

Great Course. Free Code Camp team you guys are doing really a great job. I have alreay learned your Python course. That was great experience for me ❤👍🙏

[@RawatDa2]

I think freecode camp should create a full playlist for FullStack Web development course in KZbin . Because i a self thaught web developer i found that their is no playlist on youtube which have proper structure of web dev .

[@tamerlanmustafayev8964]

3:49:00 I didn't understand how "update(location)" function and "update(locations)" function are the same? I mean does the "s" not affect the code?

[@maheshbadiyal4301]

Same with me bro, even I couldn't understand that

[@theindianguy007]

The channel which made me a techie... Thank you team..

[@salvyurbina]

4:20:36

[@jamesbrandtdasilva2297]

Very detailed and thoughtful. It's amazing how you took care to cover all detail possible in a video of this length. The amount of knowledge condensed in this video is incredible and it's divided in a very good format, like, if I know well my front end, but I want to learn how to set up a backend for a project, I can go to the Create Backend API and probably all the basics I need will be there.

[@davydo7566]

Probably?? Watch d course pls

[@ronz91]

I added time stamps for the video in my comment below

[@aarnavchauhan7840]

​@@ronz91Hey, is this video just to know what is exactly web development? Coz full stack I don't think can be done under 8 hours, on freecodecamp only there's 21 hour frontend course. Asking coz I am a complete beginner

[@ronz91]

@@aarnavchauhan7840 it does explain frontend and backend with examples. But they do not cover everything in detail and they use replit which means you do not have to set up a local server etc

[@EliaszSobinski]

I love how age is just a number here and everyone can do this

[@pratyushpahari2606]

Hello @freecodecamp !!! I request you to please make a complete course on how to start freelancing after learning any skill like Web-Developement. I want a complete and practical course on this topic as we as a beginner are not aware what should be the step by step process to start freelancing in any playform like Upwork, fiverr etc. after learning Web-development.

[@freecodecamp]

Have you seen this freelancing course? kzbin.info/www/bejne/aoWsp3Vur6l5n9E

[@MrASSKICKER1990]

currently learning web development from the ground up and ik its gonna get confusing so would recommend to subtitle the video since youtube innate subtitles sometimes show something completely unrelated.

[@luckyt96]

As a developer from another tech stack this was the perfect jumpstart into a new direction and i thank you so much for your advice. Maybe you make some kind of a series out of this for intermidiate and advanced where you maybe show bootstrap, react, vue, some other database, cloud, webkit, teplating, difference between vanilla js and ES or many other technologie to attach to the foundation :) Great thanks and keep on :)

[@kdiffin]

whats ur stack

[@kdiffin]

my stack rn is like localstorage with localforage api, react,client side routing with react-router, redux and typescript. I was wondering if i should learn this or try to learn a css framework now

[@GonzDark]

any frameworks

[@ronz91]

I added time stamps for the video in my comment below

[@WholeBodyHealthFast]

At 2:11:00, you had should switch bottom and left styles for the shortcut you proposed about only listing two instead of all 4.

[@CharlesSmall]

Thank you . i learned a lot and this is better than many other cources

[@nunojorge1877]

Thank you very much for this amazing resource (and, specially, for making it available for free)!

[@sumitsaini4449]

i made mine by following tobi but some of the movie images arent loading like among 50 almost 10 only show name and no photo...what do i do

[@vaughanmacegan4012]

Now, I really enjoyed the first 2 chapters of this course! Absolutely brilliant!!! However I have run into a problem with the 3rd chapter regarding the Movies project I have gotten up to @5:34:56 where I have the following code: function returnMovies(url){ fetch(url).then(res => res.json() ) .then(function(data)){ console.log(data.results); data.results.forEach(element => { const div_card = document.createElement("div"); const div_row = document.createElement("div"); const div_column = document.createElement("div"); const image = document.createElement("img"); const title = document.createElement("h3"); const center = document.createElement("center"); title.innerHTML = $(element.title); image.src= IMG_path + element.poster_path; center.appenChild(image); div_card.appendChild(center); divcard.appendChild(center); div.column.appendChild(div_card); div.row.appendChild(div_column) section.appenChild(div_row) }); }); } And this code will not run, Replit says it cannot parse, something about devtools.js: 57 so there is something wrong with my code, but I cannot see it. If anyone can fix my code here is a big thankyou in advance.

[@vaughanmacegan4012]

I found the error but only after letting the AI Autocomplete "guess" the lines of code that should come next. Otherwise I never wouldve found it. Sure enough there was an error in the code displayed. It was this line here: .then(function(data)){ where there is a second closing bracket. Now why didn't I see this earlier ... because this was a "tutorial trust me" line of code, because, I have NEVER, NEVER, come across a line of JS that starts with a "dot then" and was expecting this of all things to be correct especially in the middle of the callback from hell. I have never seen a double callback function before either. I wouldn't even know how to construct one left to my own devices. Oh well, at least it seems this part of the code is working properly now. I shudder to think what will happens when we add the onclick or event listener and pass the url into the function.

[@محارب-ه4ذ]

HTML , CSS , JS and Frontend were good But the back-end part was very hard to comprehend

[@rischio7678]

Hope there were similar channels like this for practical electronics and practical mechanical machinery design (with concepts).

[@diegoavendanohernandez9908]

This course is pure gold

[@VictorAndrew-l5d]

I'M new and its already working for me

[@metadrino]

So this comment may come out a bit shallow to some people, but y'all have no idea how much of a confidence boost it is for a black African aspiring to make it in tech seeing another black man (probably African too judging from the accent), who has already made it.. My doubts and fears have been allayed a bit.. Would be interesting to hear a bit more about his journey..

[@documentaryleaguedood]

Not shallow at all bro, good luck!

[@yifanzhang6613]

Did a pretty good job at front end. Back end is extremely confusing with minimal explaination.

[@MrDestroys]

This channel making everyone have a chance againt the AI taking over in the future. Much respect

[@axumitedessalegn3549]

Lol sorry to burst your bubbles but there is an AI that already writes HTML, and javascript code. The far future is fundemental research and everything else is run by an AI

[@DrPepperCooled4090]

@@axumitedessalegn3549 lol. you obviously dont know a thing about programming

[@axumitedessalegn3549]

@@DrPepperCooled4090 the keyword you are looking for is far future. But thanks for assuming.

[@DrPepperCooled4090]

@@axumitedessalegn3549 still no

[@akandeadeshina7974]

This guy is splendid teacher

[@laughforafricavideos393]

i think using someone that sounds like me to teach full stack development makes me really interested in webdev

[@thecasualfriday8770]

idk if this is just me, but i was having issues with the tests at around 6:40:00 . Was having issues with anything involving the mongoDB ObjectId. For GET and PUT I get {"error":{}}, and DELETE says "success" but does not actually delete any entries from the database. After a couple hours of trying to find the source of the issue, I finally just copy and pasted the source code provided in the description of this video. Turns out, the source code doesn't seem to work either.

[@ManavPate3345]

Did u get the solution?

[@thecasualfriday8770]

@@ManavPate3345 no, i never did. i moved on to the Odin Project

[@ManavPate3345]

@@thecasualfriday8770 I solved it actually import { ObjectId } from "mongodb" should be the import statement and need to instantiate the new ObjectId: const objId = new ObjectId(reviewId) before return await reviews.findOne({ _id: objId })

[@beau]

Thanks for watching! Check out my other channel for quick software tutorials: kzbin.info

[@EliaszSobinski]

The movies App does not work on VS Code :(

[@S-Lomar]

I love your channels sir 😍😍🤩🤩🥰🤩🤩😍😍😍🤩🤩🤩🤩🤩🤩🤩🤩

[@rolco6536]

Beau, For frontend section, only use vanilla CSS and vanilla JS, right?

[@uttkarshtewari2532]

get the live server extention and run it with that@@EliaszSobinski

[@goner007]

I am gonna learn this 1 hour a day for 7 day.

[@paulbelfrage]

I started doing the JS in VS Code instead. I found that it did not work untill I added inside

[@laligagging]

OMG thank you. I watched the video for 5.5 hours and spent another 45 minutes racking through each line of code again and again. This made it work!!!!!

[@seizetheday6790]

Since you used VScode did you figure out how to get the url that he shows on replit, and uses for the API_LINK in the movie.js around 6:53:41?? Also in which file did you put the

[@fabiodrizzt]

I didn't know that was still being used in HTML5

[@muhammadtabish9896]

HTML/CSS section is a little bit bored but content is amazing and after that I get more and more interest ...You guys are superb!

[@ronz91]

I added time stamps for the video in my comment below

[@vaughanmacegan4012]

I just finished a FrontEnd course before doing this course and there was a lot of repetition with the first section but there was some stuff that other course didn't cover, so I am glad I went through that section. And some things that other course talked about became clearer because of the different explanation used.

[@vikingAxe]

⚠ When i edit or delete a review, there is no change after page reloads. On inspect element's console it show: access to fetch at from origin has been blocked by cors policy. no 'access-control-allow-origin' header is present on the requested resource. if an opaque response serves your needs, set the request mode to no cors Adding new reviews work fine✅

[@chandradevpandey881]

The very thing I was looking for today....🔥

[@cozyhomeharmony]

Thank you for this video and I have been following to you for more than 8 months

[@oyvindknustad]

This is so close to being perfect. The only complaint I have is that it's only for this Replit thing. Everyone is using VS Code in the real world (or something like it) not Replit. I have no idea how to check if the API i wrote in VS Code works or not. That is my review. If anyone can give me a clue how to do that, it would be much appreciated. UPDATE: I got to 6:53:26 where he uses the url in replit as the apiLink in the movie.js file. Is there somebody who can help me with this, as I'm doing it in vscode?

[@Zilla-g1q]

Even I've started doing this project in vs code. How far you have gone?

[@seizetheday6790]

Have you figured anything, I'm struggling with this part too. Im surprised no one has posted a solution

[@oyvindknustad]

@@seizetheday6790 I didn't figure it out. I found a different tutorial which I linked above

[@Theo_nite]

What tutorial?...it seems the message was deleted​@@oyvindknustad

[@mohamedyoutubeamongusetaut5818]

very instructive i want to becoome rich so very useful. thanks. 👍

[@HadokenThrower]

Can I include freeCodeCamp projects that I've followed along with/completed to my github? Also, thanks for this video, now I know that I'll never make it as a software developer.

[@livea404life]

Thanks for the tutorial. but TBH as a beginner, the Movie App part is too hard for me. There are too many grammar and functino usage have not been used before this part.

[@Felix-dh9tl]

VS code would have been a much better option for coding... since nobody uses replit for real projects

[@РамильЗарипов-ь5й]

Replit is the sponsor and it's easy to show changes in tutorial, I think)

[@Felix-dh9tl]

@@РамильЗарипов-ь5й yeah maybe but i’d still prefer the real life version

[@PosiTr0n]

@@Felix-dh9tl i used replit to learn and test the things i was learning in this video but when i wanna build the project, i use VS code

[@Felix-dh9tl]

@@PosiTr0n yea

[@MuhammadOsamaAhmedEB_]

@@РамильЗарипов-ь5й Live Server Extenson can help with it in VS Code. It applies changes automatically on saving.

[@bryansuarez2396]

The tag is deprecated in HTML5 no? In this case one would just style the image to make it centered using the CSS file that's linked to the index.html file correct?

[@arjunr1222]

It is the most easily understandable tutorial on web development I have found and I am currently enjoying it and coding through it

[@danielayala3170]

Very nice tutorial, I'm enjoying it. Thank you!

[@causeaftereffect]

44:01 create a link 45:00 new tab 46:00 absolute&relative url 47:16 link email 48:30 Title 50:40 Favicon 51:56 Tables 54:35 Table Data 57:00 ordered List 58:25 description list 59:42 block and inline elements 1:04:45 Iframes 1:07:35 Symbols 1:10:58 html forms 1:17:15 checkboxes 1:19:38 submit 1:21:10 Action 1:22:45 submit method 1:24:19 setting up html locally

[@causeaftereffect]

CSS 1:26:19 Syntax 1:32:52 comments 1:37:07 selectors 1:40:32 class in html element 1:46:21 Backgrounds 1:51:36 margins

[@codingmo314]

@@causeaftereffect thanks alot, but what about after margins, does css ends there or something else:??

[@causeaftereffect]

@@codingmo314 I'm there currently. I'll update when I go through the next topics

[@ronz91]

I added time stamps for the video in my comment below

[@raffigeiling7940]

Hi i hope some one can help me. Im going to become crazzy. (Sorry for my bad english) At min 5:10:41 i should write alight-items: center (At my programm this command did not exist) and if i open the finished programm in the files the comand is red too. The Demo ist wrong look at the background boxes. I hope some one can help me. Für die die deutsch besser können und da mein Englisch nicht gerade gut ist: Bei der oben angegeben min sollte man alight-items: Center schreiben bei diesen Kommentaren wird im Programm gesagt den gibt es net und in der Demo wo fertig ist wird auch dort das rot markiert. Somit passen die Hintergrund Boxen nicht und auch in der der Demo. Kann mir vll bitte jemand helfen? Thx

[@qkowowstoipet1442]

align , not alight ?

[@SmartSombie-m6e]

2025 is going to be my dream come true Always wanted to go into web development

[@xianglin1218]

Hey guys, I’m a junior, I basically know the difference between website and web application. If I wanna develop a document site, but I wish to let people to create and login and the possibility for posting chatting etc.(something like Facebook but more into a documentation) Should I go for a website or a web application?

[@boody8844]

You could go for a website and then create an electron app for it

[@SwampDe]

@@boody8844 how

[@Prakashraj.official]

Thank you finally I placed the Google ❤️

[@RicoSweets210]

Such a great tutorial. Just wish this couldve been done using vscode or intellij to understand more about .env file for api key/secrets storage.. Im having difficulty understanding how to link that all up with the project. But overall its a great course when using replit.

[@aspirant6243]

exactly as i am unable to fetch the api link as i have api key but then after i am facing issue.

[@aspirant6243]

Please if can help then solve my issue

[@ahnmichael1484]

If you're still working on this, feel free to post your question - I'm following along with the video while working in VS Code! I've gotten the .env file to work.

[@oyvindknustad]

I found a video to explain the key and password thing: kzbin.info/www/bejne/nou4f4CPipl-sNE But I'm struggling to figure out how to post data to MongoDB with curl.

[@spencnar700]

@@aspirant6243 make sure you form in the html file has the id = "form" took me an hour to figure out

[@anthonytiet2209]

Ahh! thank you so much for the content. I am supplementing my coding education with freecodecamp and the odin project. There are some details that this video taught that Odin project didnt show. I learned so much in the first 20 minutes of the video. Thanks again!

[@rafaelcristan69]

FreeCodeCamp is tremendously amazing as usual!

[@subramanianchenniappan4059]

Great . I thought of buying similar course in udeny . You saved me usd 10😍😍

[@kylegivler8372]

5:20:00 very disappointed to see the API key in the script file... And no warning that you should never do this, you should protect your API keys and you should never check them into source control. This is addressed later at 6:00:00 but I think its important to have people thinking about security and secrets from the start of their coding journey. It was also super weird to see the center tag being used, its not even valid html5. Also thank you, its always good to have free web dev content, appreciate the effort of everyone at freeCodeCamp

[@MrAarsan]

Wdym center tag in html5?

[@lightgami]

@@MrAarsan center tag in html 5 is no longer valid, instead u should use text-align center in the css.

[@Narendra_AI]

44:01 create a link 45:00 new tab 46:00 absolute & relative url 47:16 link email 48:30 Title 50:40 Favicon 51:56 Tables 54:35 Table Data 57:00 ordered List 58:25 description list 59:42 block and inline elements 1:04:45 Iframes 1:07:35 Symbols 1:10:58 html forms 1:17:15 checkboxes 1:19:38 submit 1:21:10 Action 1:22:45 submit method 1:24:19 setting up html locally CSS 1:26:19 Syntax 1:32:52 Comments 1:37:07 Selectors 1:40:32 Class in html elements 1:46:21 Backgrounds 1:51:36 Margins 1:59:35 Borders 2:17:31 Height & Width 2:20:39 Outlines 2:23:48 Styling text 2:38:53 Fonts 2:43:29 Icons 2:46:15 Tables 2:54:08 Display & Visibility 2:56:14 Combinators 3:01:14 Dropdown Menu 3:13:36 Attribute Selectors JS 3:15:52 Intro 3:16:37 Starter code 3:18:53 Create a variable 3:20:44 Var vs Let 3:24:12 eg html query selector 3:24:36 Const variable 3:27:14 Comments 3:28:00 Initialize buttons 3:29:29 Create function 3:31:07 Test/Console 3:36:25 Update text/ button text 3:38:45 Escape characters 3:40:50 Create object 3:45:24 Passing data into function 3:53:57 If-else statement 4:01:00 String concatenation 4:07:58 Array shift method 4:12:09 Display html element 4:16:30 Else-if statement 4:22:05 == vs === 4:23:00 Tenary/conditional operator 4:25:18 Debug 4:26:59 Test game 4:28:48 Return function 4:41:18 While loop Frontend Movies App 4:52:30 Intro 4:53:02 HTML 5:03:09 CSS 5:15:23 JS 5:42:47 Summary Backend Movies API 5:44:05 Into 5:44:20 API diagram 5:44:38 Create Repl 5:45:33 JSON edit for ESN6 imports 5:47:27 Server.js 5:55:10 Index.js 5:55:43 MongoDB setup 5:59:26 Connect to Mongo 6:12:08 Route for testing 6:14:53 Test 6:17:27 Types of requests 6:20:50 Create ReviewsCtrl 6:29:55 Create ReviewsDAO 6:38:45 Test 6:39:22 Curl command 6:45:04 Curl POST 6:45:45 Curl GET 6:47:13 Curl PUT 6:49:07 Curl DELETE Connect Frontend and Backend 6:49:34 Intro 6:49:39 Fork frontend replit 6:58:12 URL object 7:10:28 Edit review function for button 7:15:33 Save function 7:19:47 Create review function 7:27:25 Delete review function

[@muhdkhairulamirinum3985]

tq

[@junaid8bpytjunaid287]

Awesome

[@SLTeenTails]

thank you

[@HandyDelisma]

❤🎉

[@Shakthi_edits]

Thanks a tone❤

[@ahmedmoussa7519]

I have learned a lot from this Chanel. U guys are the best

[@mansigupta4514]

Hello this video was really helpful. Plz make a video on data structures and algorithms