Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB)
September 3, 2024 2024-09-03 7:27Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB)
Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB)
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 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
Comments (37)
@beau
Next learn JavaScript DOM Manipulation: https://youtu.be/IWRS_AM2fiE
@JohnSmith-op7ls
Don’t learn Mongo first. This nonsense about pushing NoSQL DBs as some first go-to when you need a DB is just wrong.
The as majority of the time you’re dealing with structured data and a NoSQL DB, especially Mongo, is going to add all sorts of complexity once you realize you picked the wrong too for the job.
If you must go with NoSQL you’re probably better off with Casandra anyhow.
Use the right tool for the job. If your data is structured and relational, use a RDBMS.
@MiH_004
good
@AbdiGis-111
wow you are fast in your speech but beginners need slowly and slowly
@antonlavrentev
The idea is good, but execution is not the best, especially in js section. They explain the simple things in detail, but for more complex stuff they just say something like "and here I go with this method/function/etc" without much explanation about what methods/special words/syntax they use and how it works. Basically js section suffers from standard programming courses problem "Here how we display "Hello world", next lets make the operation system core".
Html, css parts and starting js part (game) are good and helpful, but if you want to learn practical js coding for building websites it's better to look for another video, this one is just confusing.
And if you already have the knowledge want to refresh your memory this video will be helpful.
@hollahoops3882
What pre requiste requirements are there before taking this course?
@OdionShalom
Thank you so much.
Does it coding reflect same for coding a website for shopping?
@rrnox6099
August 2024
For anyone struggling to get MongoDB CRUD functions working:
In the "reviewsDAO.js" file, replace the second line with "const ObjectId = mongodb.ObjectId;", and for each reference of ObjectId, make sure to add a "new" keyword before the reference. Doing these steps worked for me.
@user-di6py8kc1b
42:03
@nomalware2811
Day 1 of Web development
@emmanuelfemi9571
Well detailed
@ricstan6795
This is amazing!
@isaacambi
I struggled to understand the javascript part. It was too clunky
@MrNova001-y1s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page M</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="Movie">
<a class="active" href="#">Movie Site</a>
<div class="Search-Container">
<form role="search" id="form">
<input type="search" id="query" name="q" placeholder="Search…">
</form>
</div>
</div>
<div style="padding-left: 16px;">
<section id="section">
<!– <div class="row">
<div class="column">
<div class="card">
<center>
<img src=".vscode/png/movie3.jpg" class="thumbnail" alt="Movie Thumbnail">
</center>
<h3>Movie Title</h3>
</div>
</div>
</div>–>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
@MrNova001-y1s
What's wrong with my code all the movie showing left side.
@AImasias
LOL i thought it was Blue screen of Death Lmao 37:21
My heart fell💀
@elsxie
2:35:03
@noorulhudahashmi9587
day 21 in realm of web development
@lymaanda
17:33 attributes
@noorulhudahashmi9587
day 15th in realm of web development
@flaykaz
i realy dont know why that mine cant do the search feature… my code all the same i rrly dont get it, (the api keys is also mine)
@SleepyAizawa69
Noice
@noorulhudahashmi9587
day 12 in realm of web development
@Galal_edits
3:07:47 padding not passing 😂🚶🏻♂
@clay_001-xb6rr
confidently here at 2024 kenyans here hello😄tomi ft baeu nice teachers wow
@independentnavbcdeveloper3342
i tried to run sa backend but it takes forever. what counld be the problem here?
@dunyaaurislamtv3468
The other speaker English accent is not good.
@Frfr680
When I set the opacity to 0.5 with the body selector in css, only the content of my webpage becomes semi transparent and not the background is this normal?
@noorulhudahashmi9587
day 5 in realm of web development
@noorulhudahashmi9587
day 4 of learning
@omargomaa3703
Didnt understand the movie app part . So many things unexplained
@Abdur_Rehman10.
The movie database API is unable to load, what should I do now as I do not have an API link???
@noorulhudahashmi9587
day 3 of learning…… i will give my attendence every single day to leave my journey here of becpmin web developer
@kritikavaryani3182
not getting title names
@reemislam2742
hey this an awesome video it is the best👏👏👏👍👍👍
@moshetelesh2503
The first guy really sucks at explaining
@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