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

35 Comments

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

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

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

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

  5. 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) 😎😎🤺🤺🎹🎹🎻🎻🎺🎺🎷🎷🎶🎶

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

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

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

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

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

Leave A Reply

Please enter your comment!
Please enter your name here