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

✏️ Tomi Tokko and Beau Carnes developed this course.

⭐️ Code ⭐️

🏗 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

--

[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

[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

[brainy]

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!

[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😊

[notsmart]

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

[koladechris]

Congratulations, Beau and Tomi on getting this course up 🎉

[ankursinger]

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

[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.

[AmmyJ]

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

[tarifkhantuber]

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

[jackianson]

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

[richardlobos]

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.

[LuffyPortal]

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

[ronz]

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

[yannickstommel]

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.

[saltednuts]

i worked on this project a while ago couldnt finish it because there was some issues with my backend, im glad this is here so i can finish it

[sivanaikk]

Love you guys. Doing amazing work for community ❤️

[cikiface]

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.

[andreaskudumo]

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..

[nextlevel]

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