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
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😊
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!
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.
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.
I'm Gonna start learning javascript and backend development and suddenly got notification...........this came as a Gift.....Love you Guyz.....Love from India...❤❤
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.
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
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.
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!
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
@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.
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
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.
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.
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
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
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.
@@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
@@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
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 :)
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
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
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.
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!!!
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
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 ❤👍🙏
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..
@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?
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.
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.
I think freecode camp should create a full playlist for FullStack Web development course in RUclips . Because i a self thaught web developer i found that their is no playlist on youtube which have proper structure of web dev .
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!
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.
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.
I found a video to explain the key and password thing: ruclips.net/video/hZUNMYU4Kzo/видео.html But I'm struggling to figure out how to post data to MongoDB with curl.
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
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?
The course is really good. I have just completed HTML and CSS but on JavaScript is where the problem is. I feel like the JavaScript is meant for people who have some history and already have had an introduction to JS. Please make a JavaScript tutorials for absolute beginners. I am finding it hard to understand.
@@salmajahanlipi183 I just found a way about it. I broke down JavaScript into more learnable and usable concepts: DOM, Event handlers, HTTP requests etc. It's jow easier with practice.
The course was amazing you both did great!! but i wish its was on a VS or any local programe thats will help us better specially the backend part, its will be better if we know how to creat a secret key, and also i was confused that where i can finde the URL...etc
Totally agree. I'm stuck with posting data to MongoDB because he's using the url for the replit thing. That's the only complaint I have. Otherwise really good
@@shivenshekar8652 I was scrolling to the comment looking for this answer. If anybody knows it, please help us. So far, I've tried localhost:8000 and it didn't work
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
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?
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!!!!!
Have you got a job?
thank you for your comment that is exactly what i was searching for
wow， are you a full stack developer?
is this course updated?? just done following a outdated course that drove me crazy
@@juneh5748 doubt it. Do people still use '.onclick' instead of 'addEventListener('click', (function))
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
you saved my time in the meantime thank u
you are great please complete it as possible
I've added to this in my comment
I am not able to add links.. It's showing refused to connect
@@nandan3722 see my comment, I have added some
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😊
Thanks!
Damn Jeff!!
Hello friend
Finaly finished it! I have an interview on monday, wish me luck!
Good luck bro✌🏿✌🏿
How did the interview go ??
It went really well! I got my first Internship
@@rianreboucas7341 Oww that’s good to know. I know you gonna kill it. Go hard bro.
@@rianreboucas7341awesome, can you give me a map of what did you study and how long dose it take for you to get this internship?
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
thx!
hero
Thanks!
thanks man
HERO
The best channel on RUclips!
Great people.... This channel helped me a lot when i just started.
I can't express my gratitude
Traversymedia is also one of my favourite.
@@ashutoshdash140 do you work nowadays?
Great mentor makes great learner's ❤️
@@HimanshuKumar-yh7ox telugu
Congratulations, Beau and Tomi on getting this course up 🎉
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!
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.
I added time stamps for the video in my comment below
Do you write notes of this lecture or simply just watch it?.. or trying to code at same time what you learn??
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.
bro i keep making notes of every single heading cuz i'm really bad in memorizing
@@smitpatel9722
I'm Gonna start learning javascript and backend development and suddenly got notification...........this came as a Gift.....Love you Guyz.....Love from India...❤❤
❤
It's been a year what are you doing now, and what did this mini course lead you to?
Today marks my initiation into coding🎉. Congratulations to me on my new journey
How has your journey been so far?
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.
How'd it go?
@@amaanullah13 lmfaooo
did you make a progress?
Working for nasa as lead dev to busy to read your comments @amaanullah13
The course really helped me brush up my HTML and CSS,Thanks for putting it out there😇
@Abdullah kamal No,how's the movie app creation section btw?
It's been a year what are you doing now, and what did this mini course lead you to?
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.
So cool! I have confidence to call myself a junior full stack developer now!
Than you beau. I cant believe there are people like you in this world.
This has got to be one of the best full stack tutorials on RUclips. Thanks :)
The best channel to learn and grow in Computer science 100 Thanks 👍💯🙂😁😊
Wow! I'm absolutely Beginner i really get very single thing in these courses,
I really appreciate you 🙏💯
What would we do without this channel 👍
Best channel of youtube SO FAR.
Guys, u r my heroes. God bless u
Just learnt it for free without paying any thing
Thanks a lot free code camps
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
So we can start from this youtube to learn ?
@@anshukumar-ud6yiwe need to learn abt a thing which is older that this replit thing
@@fop7441from where to learn
@@anshukumar-ud6yi you can learn from this channel but you yourself also have to do little studying alone to fully understand
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.
Love you guys. Doing amazing work for community ❤️
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!
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
@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.
I added time stamps for the video in my comment below
can we personally host my project like the movie one ?
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
Finally completed the links
Best time stamps in the comment section
@@koolganja finally some recognition 😂 thank you!
Tnx
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
hello, nothing is happening when I click the buttons, on Replit nor or VS code, help
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.
bro can u tell me how to get api for img and search api plz
I think overall Javascript section in the frontend project is poorly explained.
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.
this i why i love the internet, thank you guys, a great course !
The channel which made me a techie... Thank you team..
4:20:36
I have learnt a lot from this channel, thanks for the upload
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
What happened bro
Stopped at Feb 27 😭
lock in bro 🤣
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 🙏❤️
I added time stamps for the video in my comment below
thanks for this tutorial!
I'M new and its already working for me
HTML , CSS , JS and Frontend were good
But the back-end part was very hard to comprehend
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
CSS for 3 months? try JS then
Thank you . i learned a lot and this is better than many other cources
The best instructor on RUclips on most languages right here
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.
Probably?? Watch d course pls
I added time stamps for the video in my comment below
@@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
@@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
You are doing a great service to the Mankind.
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 :)
whats ur stack
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
any frameworks
I added time stamps for the video in my comment below
I am gonna learn this 1 hour a day for 7 day.
Point of correction at 3:07:35 use "padding" instead of "passing". That's why the spacing between the links didn't work.
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
wow I really enjoyed that javascript part, it was really fun and packed with information! I also loved the way you taught.
Thank you for this video and I have been following to you for more than 8 months
day 01 - 43:31
day 02 - 01:04:44
day 03 - 01:27:15
day 04 - 02:00:07
day 05 - 02:14:30
dont give up
@@tz9422 yes will continue thank you :)
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.
Have you seen this freelancing course? ruclips.net/video/4TIvB8zDFio/видео.html
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!!!
This channel making everyone have a chance againt the AI taking over in the future. Much respect
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
@@axumitedessalegn3549 lol. you obviously dont know a thing about programming
@@DrPepperCooled4090 the keyword you are looking for is far future. But thanks for assuming.
@@axumitedessalegn3549 still no
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 ❤👍🙏
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..
Not shallow at all bro, good luck!
I have learned a lot from this Chanel. U guys are the best
@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?
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.
how did you get it to accept an entry?
very instructive i want to becoome rich so very useful. thanks. 👍
This course is pure gold
Thank you very much for this amazing resource (and, specially, for making it available for free)!
i think using someone that sounds like me to teach full stack development makes me really interested in webdev
2025 is going to be my dream come true
Always wanted to go into web development
The very thing I was looking for today....🔥
Thank you finally I placed the Google ❤️
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!
I added time stamps for the video in my comment below
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.
This is great tutorial to get start with backend. Simple and clear explaination.
Very nice tutorial, I'm enjoying it. Thank you!
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.
Great course and super useful to beginners!
javascript is so complicated 😭
This is the you tube channel l have been looking for finally l have found it.
FreeCodeCamp is tremendously amazing as usual!
This is a great video. I used it to learn basic web dev.
I think freecode camp should create a full playlist for
FullStack Web development course in RUclips .
Because i a self thaught web developer i found that their is no playlist on youtube which have proper structure of web dev .
This guy is splendid teacher
Thanks for watching! Check out my other channel for quick software tutorials: ruclips.net/user/beau
The movies App does not work on VS Code :(
I love your channels sir 😍😍🤩🤩🥰🤩🤩😍😍😍🤩🤩🤩🤩🤩🤩🤩🤩
Beau, For frontend section, only use vanilla CSS and vanilla JS, right?
get the live server extention and run it with that@@EliaszSobinski
Love you code camp!!🥰😘
They did it, history is being made
Just a quick note. You put two semicolons at line 196 in the JavaScript tutorial. (Check at timeframe 4:21:31).
VS code would have been a much better option for coding... since nobody uses replit for real projects
Replit is the sponsor and it's easy to show changes in tutorial, I think)
@@РамильЗарипов-ь5й yeah maybe but i’d still prefer the real life version
@@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
@@PosiTr0n yea
@@РамильЗарипов-ь5й Live Server Extenson can help with it in VS Code. It applies changes automatically on saving.
It is the most easily understandable tutorial on web development I have found and I am currently enjoying it and coding through it
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!
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.
exactly as i am unable to fetch the api link as i have api key but then after i am facing issue.
Please if can help then solve my issue
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.
I found a video to explain the key and password thing:
ruclips.net/video/hZUNMYU4Kzo/видео.html
But I'm struggling to figure out how to post data to MongoDB with curl.
@@aspirant6243 make sure you form in the html file has the id = "form" took me an hour to figure out
The world need to understand that how Amazing there contribution is for us
Freecode camp is making the future look real to me, unlike before I had no hope
100%! Don't give up! Feel the fear, feel the self-doubt and do it anyways! You can do it 💛
@@oliviacinnamon5060 Thank you for the encouragment
Thanks for this great course, guys!!
Hello this video was really helpful. Plz make a video on data structures and algorithms
Guys this is super great thanks for your effort
Free Code Camp is a paradise
This is a beautiful piece, Thanks for this.
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
Wdym center tag in html5?
@@MrAarsan center tag in html 5 is no longer valid, instead u should use text-align center in the css.
Wow this really helped me to learn NodeJS
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?
You could go for a website and then create an electron app for it
@@boody8844 how
I love how age is just a number here and everyone can do this
The course is really good. I have just completed HTML and CSS but on JavaScript is where the problem is. I feel like the JavaScript is meant for people who have some history and already have had an introduction to JS. Please make a JavaScript tutorials for absolute beginners. I am finding it hard to understand.
There are already many vdos on javascript for beginners in this channel
@@salmajahanlipi183 I just found a way about it. I broke down JavaScript into more learnable and usable concepts: DOM, Event handlers, HTTP requests etc. It's jow easier with practice.
OMG the golden nugget! I love you guyz
The course was amazing you both did great!!
but i wish its was on a VS or any local programe thats will help us better specially the backend part, its will be better if we know how to creat a secret key, and also i was confused that where i can finde the URL...etc
Totally agree. I'm stuck with posting data to MongoDB because he's using the url for the replit thing. That's the only complaint I have. Otherwise really good
Were you able to figure out how to find the url?
@@shivenshekar8652 I was scrolling to the comment looking for this answer. If anybody knows it, please help us. So far, I've tried localhost:8000 and it didn't work
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
tq
Awesome
thank you
❤🎉
Thanks a tone❤
I love this channel. The best channel.
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?
Even I've started doing this project in vs code. How far you have gone?
Have you figured anything, I'm struggling with this part too. Im surprised no one has posted a solution
@@seizetheday6790 I didn't figure it out. I found a different tutorial which I linked above
What tutorial?...it seems the message was deleted@@oyvindknustad