Learn full-stack web development in this full course for beginners. First, you will learn the basics of HTML, CSS, and JavaScript. Then, you will learn how to put everything together to create a frontend movie search app. Finally, you will learn how to create a backend API to create movie reviews and connect the frontend to the backend. The backend uses Node.js, Express, and MongoDB. 🔗 Get started with Replit: https://join.replit.com/web-students ✏️ Tomi Tokko and Beau Carnes developed this course. Tomi's channel: https://www.youtube.com/CodeWithTomi Beau's channel: https://www.youtube.com/beau ⭐️ Code ⭐️ JavaScript RPG Code: https://github.com/beaucarnes/course-code/tree/main/javascript-rpg Frontend Movie App (and starter for connecting to backend): https://replit.com/@TomiTokko/MoviesApp Backend Reviews API: https://github.com/beaucarnes/course-code/tree/main/review-backend 🏗 Replit provided a grant to make this course possible. ❤️ Try interactive Fullstack courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Fullstack (Made possible by a grant from our friends at Scrimba) ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Introduction ⌨️ (0:02:42) Learn HTML ⌨️ (1:26:27) Learn CSS ⌨️ (3:15:49) Learn JavaScript ⌨️ (4:52:01) Create Frontend Movie App ⌨️ (5:44:04) Create Backend Reviews API ⌨️ (6:49:32) Connect Frontend with Backend 🎉 Thanks to our Champion and Sponsor supporters: 👾 Nattira Maneerat 👾 Heather Wcislo 👾 Serhiy Kalinets 👾 Erdeniz Unvan 👾 Justin Hual 👾 Agustín Kussrow 👾 Otis Morgan -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news
ADVERTISEMENT
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!!!!!
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 and on helping out
The best channel on YouTube!
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!
Finaly finished it! I have an interview on monday, wish me luck!
i am a complete beginner in this field ,2025 ,anyone around the comment section to wish me luck and like my comment ,so when i get my first job ,i can always comeback to check
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
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!
Congratulations, Beau and Tomi on getting this course up 🎉
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.
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.
I'm Gonna start learning javascript and backend development and suddenly got notification...........this came as a Gift.....Love you Guyz.....Love from India...❤❤
The course really helped me brush up my HTML and CSS,Thanks for putting it out there😇
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 am just starting this course on my journey to being a web developer. Friends wish me luck, hoping to return here with my testimonies.
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
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 🙏❤️
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 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..