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/zizyo
⭐️ Code ⭐️
JavaScript RPG Starter: https://replit.com/@BeauCarnes/JavaScript-RPG-Starter
JavaScript RPG Complete: https://replit.com/@BeauCarnes/JavaScript-RPG
Frontend Movie App (and starter for connecting to backend): https://replit.com/@TomiTokko/MoviesApp
Live demo of frontend app: https://moviesapp.tomitokko.repl.co/
Backend Reviews API: https://replit.com/@BeauCarnes/review-backend
Frontend connected to backend: https://replit.com/@BeauCarnes/htmlfrontend
🏗 Replit provided a grant to make this course possible.
⭐️ 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
source
Thanks for watching! Check out my other channel for quick software tutorials: https://www.youtube.com/beau
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 complain about it. Keep it up.
Im gonna try this out and see if i can do it.
For someone who knows nothing about web devellopement would you recommend to watch this video
Cuz if i watched 7 hours even speed up and nothing changed im gonna be so desperate
New achievement
I Watched 300 ads because of this video
Could you please throw more light on "title attribute"?
I didn't understand that part. I practicalized with my phone but there was nothing on the webview.
Hello, this a great tutorial for beginners like me. Thank you so much. I am having trouble however in the part where Tomi Tokko shows how to bring an image into the code. He doesn’t say right click or left, also how did he paste it?
I downloaded this video because it got lot of views and good comments. Its really good for beginners. But i finish creating the website and i couldn't post online to show my works. Because you this video didn't say so. Can someone help?
So cool! I have confidence to call myself a junior full stack developer now!
BROOOOOOO…..JUST MIND BLOWING…..I CAME ONCE AGAIN….THIS CHANNEL IS NEVER GIVING ME A MOMENT TO STAY OFFLINE ❤❤❤❤
Can I land a job with this ?
That black dude teaching html is a Nigerian
Day 1:Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB)
Day 2: practice course projects
Day 3: watch OTHER YouTube Course projects and practice
Day 4: watch another different YouTube Course projects and practice
Day 5: watch another different YouTube Course projects and practice
Day 6: Build your Own project based on the course.
Day 7: Teach someone (rubber ducky method) 😎😎🤺🤺🎹🎹🎻🎻🎺🎺🎷🎷🎶🎶
last JS 4:06:02
5:16:34
Is it possible to do this project in visual studio and if yes can someone please guide me?
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
Thank you! I found it very useful
An Exemplary Guide to HTML, CSS, and JS: A Refreshing Learning Experience. The way HTML structures, CSS styles, and JS powers websites was exceptionally explained. A truly invigorating learning encounter that demystified web development. Kudos to the insightful teaching.
It is the most easily understandable tutorial on web development I have found and I am currently enjoying it and coding through it
bro the nigerian kid is still a teenager wow
5:15:22 my favorite part
Hello – Thank you for these tutorials. I cant seem to get the web page to work. Nothing is loading. I reviewed all the codes line by line, but still no avail.
I really can't keep up. This is a really detailed explanation but still my small brain can't understand anything.
Can someone explain how to get the links @5:20:20?
Great tutor here,…
This is the best ever
HTML
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
please where can I get the full javascript code for the rpg game. I'm trying to pro-check mine, I probably wrong something wrong and i am not getting it from the video
❤🎉
Ok i will skip all that curl part all i get is error
Please can someone help me? After uploading my image to replit I now have a file named image.jpg however, when I linked it with img tag and wrote src="image.jpg" it didn't show the image on web browser. Please how can I fix this.
Cant run my code on java script despite all of my code is correct , please help.
Dont expect to understand the material after watching this. If a person is a good coder it doesnt mean that person is a TEACHER. You need a total different approach and that would mean this tutorial will have 400 hours MINIMUM as a guide. Best would be 400 to 500 hours with guidance, no solo tours
is that a full stack devlopper beause i didn't saw backend language someone help me and don't forget like the comment
I'm about to start this course. How is it recommended to go through this course?