Learn JavaScript: Full-Stack from Scratch

Start learning JavaScript in the browser console, store values with let, work with numbers and strings, and manipulate the page by updating document properties like title and background color.

learn how to define and call functions in JavaScript, use parameters and arguments to customize output, and create examples like greet and triple me with return values.

Explore JavaScript objects, their properties and methods, and how to nest objects using dot notation. Learn through a practical cat object example and browser event handling with addEventListener.

Learn how JavaScript arrays function as collections, create arrays of numbers, strings, or objects, and use built-in methods like push and splice, index access, and console logging.

Master conditional logic in JavaScript by using if statements to output messages based on a strawberry count. Explore boolean values, comparison operators, and how true and false drive code execution.

Explore higher-order functions by accepting and returning functions, illustrated with create multiplier for each. Learn how maps and filters rely on the concept and distinguish returning vs mutating values.

Explore mutating versus returning in JavaScript arrays, using push to modify the original array and map or filter to create new values without mutation, with real pet data examples.

Learn how scope governs access to variables and how context governs objects in JavaScript, exploring global and block scopes, let vs var, and the scope chain.

Explore scope and context in JavaScript, showing how the this keyword varies between object methods and standalone functions, using drive car and breathe examples to illustrate this behavior.

Explore anonymous functions and arrow functions in the browser, learn to use event listeners, single-line syntax, and this behavior, plus a quick look at function hoisting.

Explore arrow functions, function hoisting, template literals, and semicolon usage in JavaScript, and learn how hoisting works, how template literals simplify strings, and when automatic semicolon insertion applies.

Build a functional to-do app from HTML and JavaScript by handling form submission, preventing default behavior, and dynamically inserting list items using insertAdjacentHTML and template literals.

Build a to-do app by auto clearing the input, refocusing after submit, and deleting items. Explore data persistence challenges and how server-side storage with Node and MongoDB supports full-stack development.

Understand what a server is and why browsers cannot be trusted for sensitive actions, as servers handle requests, responses, and authentication. Learn how Node.js lets JavaScript run outside the browser.

Explore how Node.js extends JavaScript beyond the browser with file creation and network listening, then install the long term support version and verify with node -v in the interactive environment.

Set up a text editor, create a JavaScript file in a folder, and save your work. Run the file with node in the built-in VS Code terminal.

Build a basic Node server that listens on port 3000 and responds with hello world or welcome messages, routing by request URL to home or about.

Learn how to build a basic express web server with node to receive and validate form data, using npm install express and require to import express, an unopinionated minimalist framework.

Learn to build an express server from scratch, handle get and post requests, and process form data using request.body to validate user input.

Explore the request–response cycle and why MongoDB is the missing ingredient for full-stack JavaScript apps. Preview two projects—a to-do list with permanent storage and a social journal with real-time chat.

Explore how databases store and query data by previewing a sample pet database, then start building your own cloud MongoDB Atlas database to learn CRUD.

Install docker desktop and run docker-compose up to spin up a local MongoDB instance, then connect with MongoDB Compass using the provided connection string and view atlas cloud account screens.

Learn how crud (create, read, update, delete) drives database interactions in MongoDB Atlas, including creating databases and collections, inserting documents, querying, updating, and deleting records.

Begin building a simple to-do app by setting up a Node.js project with Express, creating a server, rendering a basic HTML template, and handling form submissions to log input data.

Automate Node app restarts with nodemon by adding a watch script in package.json and running npm run watch, saving time on code changes.

Connect a Node.js app to a MongoDB database using the official driver, async/await, and a DB variable to insert a document into the items collection.

Learn to read data from a MongoDB collection in a node app using find and toArray, then render results with map and a template literal, for dynamic updates.

Edit a database item through an in-page interface and send the update to a node server with Axios, preparing for the MongoDB update in part two.

Update a database item by sending new text and its id from the client to a node server, then perform find one and update on items collection using MongoDB.

Delete one MongoDB document by sending an axios request with the item ID to a node server after user confirmation, then remove the item from the UI.

Intercept the create form submission with browser JavaScript, post with axios to create an item, and render it at end of the list using a template, without a page reload.

Master client-side rendering by moving html generation to the browser, sending the raw items array from the server, and rendering the list with the item template.

Add basic password protection with Express middleware so visitors authenticate before accessing the app, and sanitize inputs with sanitize-html to prevent malicious code.

Push your app onto the internet using Render's free plan, connect GitHub, install dependencies, and launch a live web service with a public URL to share.

Explore organizing code, unique data per user, and input validation as you upgrade from a simple to-do app to a full stack project with browser, server, database, and Express.

Run the finished product of the complex app with Docker Desktop and Docker Compose, then view it at localhost:8080 and inspect data with MongoDB Compass.

Learn to scaffold a brand new express app, configure ejs views, serve static css from a public folder, and enable automatic restarts with node mon.

Learn how to organize an express app by creating a dedicated router file, exporting it with module.exports, and mounting it on the app to handle routes like / and /about.

Learn to organize an express app with a controllers folder, exporting functions for users, posts and follows, and route them via a dedicated router, illustrating the mvc pattern.

Explore the mvc pattern by building a user model as a constructor blueprint, validating form data through the model, and wiring express to parse request.body.

Add validation to user model by implementing a validate function, populating an errors array for blank fields, length checks, email validation with validator, alpha-numeric username rules, and controller error handling.

Enforce that username, email, and password are strings, clean up data by trimming and lowercasing username and email, and ignore bogus properties.

Connect to a MongoDB database once in a reusable db module, save validated user data into the users collection with insert one, and prepare for login.

Learn to use environment variables with a dot env file and the dot env package to replace hard coded connection strings and port settings, enabling secure, environment specific configuration.

Learn to implement a login feature by posting to /log in and validating the username and password against the database, returning congrats or invalid username password.

Discover how promises replace traditional callbacks to manage unknown timing in JavaScript, learning to create and use resolve and reject, and chaining with then and catch.

Coordinate multiple asynchronous events with promises, moving beyond callbacks to then and catch for clearer, flatter code. Explore async/await and arrow functions for cleaner control flow and error handling.

Learn how to hash user passwords with bcrypt in a node app, store only hashed values in MongoDB, and update login checks with bcrypt compare to protect credentials.

Explore how sessions identify and trust subsequent requests by storing user data in req.session after login, using cookies to persist the session, and personalizing the home page.

Learn how to secure cookies with same-site strict settings in session options to prevent CSRF attacks, using http only, a defined max age, and vigilance over subdomains.

Persist and visualize sessions by storing them in MongoDB with connect-mongo, wire in the db client, and render a personalized hello with EJS using request.session.user.

Learn to implement a sign-out flow by destroying the user session via a /log out post route, then redirect to the home page for a seamless guest experience.

Learn to implement flash messages in an express app using session-based messages after failed logins. Display a one-time red error box for invalid username and password in the home page.

This lecture enhances user registration with flash-based error reporting on the page, integrates reg errors into the template, and adds server-side validation with asynchronous checks for username and email.

Learn to convert the user validate and register flows into promises, using async/await and then/catch to ensure username and email checks complete before redirecting and logging in.

Learn to add user profile photos via Gravatar by hashing emails with MD5 to generate avatar URLs, display in the top-right menu and posts.

Enable logged in users to create posts by wiring a post model and controller to render create post template, with a reusable must be logged in middleware and header include.

Implement a middleware that exposes the current user via res.locals for all templates, enabling access to username and avatar in header and footer includes without duplication.

Learn how to save posts to a database by wiring a create post form to a protected post route, with a post model handling cleanup, validation, and a promise-based insert.

Implement a durable author field for posts by storing the MongoDB object ID from the current session data, updating the post model and controller to use the user ID.

Design and implement a post viewing page by creating an ejs template, wiring a route /post/:id, and rendering a real post from the database.

Learn to view a single post by id: async controller with try/catch, validate the id, fetch by id, and render the post template with title, date, and body.

Set up a 404 page for posts, then fetch a post’s author details using MongoDB's aggregate with $lookup to join posts and users and project the author username and gravatar.

Shape post objects by converting the author to a username and gravatar avatar using posts.map, while omitting sensitive fields and rendering dynamic author data in the user interface.

Learn how to build a user profile screen with dynamic routing and data rendering using ejs templates, including profile avatars, usernames, and profile posts integration.

Learn to fetch posts by author id and render them in the author's profile view, wiring the post model, controller, and template to display a dynamic posts list.

Learn how to enable editing posts for their owners by implementing a visitor id, owner check, and conditional display of edit and delete options in templates and routes.

Create a dynamic edit post screen by routing /post/:id/edit, fetch and prefill post data, render an edit form with save updates, and handle errors with a 404 fallback.

Submit the edit form to post /post/{id}/edit, perform permission checks and validation, and use promise-based model update with flash messages on success or error.

Update posts in the database using a promise, validate IDs and ownership, perform a find by ID and a subsequent update, with flash messages.

Enforce owner-only access to the edit post screen, add back-to-post permalink, and protect routes with must be logged in. Redirect with dynamic post ID and enable markdown rendering for formatting.

Expose a markdown filter in templates, use the marked package to render user content, and sanitize output with sanitize-html to prevent XSS while preserving bold, headings, and lists.

Learn to let users delete their own posts by implementing a guarded delete flow with dynamic post ids, login checks, and a complete EJS route, controller, and model delete.

Build a live search interface with browser-side JavaScript, showing real-time results as users type, while organizing code into modules with main.js and search.js, using import/export, bundled by webpack and babel.

Learn to implement a browser-side search overlay with a JavaScript class, handling click events to open and close a full-screen search interface, and injecting HTML into the page.

Implement a live search by focusing the input when the overlay opens, showing a loader on typing, debouncing input, and sending an Axios post to /search with the search term.

Implement a backend post search by adding a /search route, linking controller and model, using MongoDB text index on title and body, sorting by text score, and removing author id.

Learn to power a live search by turning raw JSON post data into dynamic HTML, render results, and manage loader and results area with a 750 ms delay.

Transform raw post data into dynamic HTML for search results using map and template literals, render avatars, titles, authors, and dates, and adjust the delay to 750 milliseconds.

Explore front end HTML sanitization to prevent cross site scripting by using DomPurify, an extra defense when rendering user generated content, even if back end sanitization fails.

Enable following users by linking author names and avatars to profiles, adding a dynamic follow button and route, and wiring a follow model and controller with login checks.

Implement a follow feature by building a follow model with create, cleanup, and validate methods, inserting a document with author id and followed id into MongoDB.

Learners implement a reusable profile data function to determine if the current visitor follows a profile and toggle the follow button across profile, followers, and following pages.

Implement stop following functionality by adding a remove follow route and delete method with validation to prevent non-followers from unfollowing and users from following themselves. Hide the stop/start following button on your own profile using shared profile data, and update followers and following counters on the profile screen.

Implement and wire the profile screen to show posts and enable dynamic followers and following lists with routes like /profile/:username/followers and /profile/:username/following, rendering the profile-followers template.

Implements a profile followers screen using a get followers by ID method, a MongoDB aggregate (match, lookup, project), and an ejs template to display followers' usernames and avatars.

Finish the user profile screen by adding a following route, updating the controller, and implementing a profile following view that lists who the user is following with dynamic navigation.

Fetch real post, follower, and following counts in parallel using Promise.all and array destructuring in shared profile data. Pass counts to the profile shared template for rendering.

Build a dynamic home feed that shows posts from followed users via a get feed function, async controller logic, and a MongoDB aggregation, including an empty feed message.

Learn to implement a chat feature's user experience: show a bottom-right chat box on icon click, inject HTML, toggle visibility, and prepare for real-time data with a first-open connection.

Learn to implement real-time chat with socket.io, sending messages from the client via frontend JavaScript and broadcasting them to all connected users.

Implement a real-time chat with socket.io by sending browser messages to the server and broadcasting them to all connected users.

Finish the chat feature by rendering server messages into a chat log with usernames and avatars, wired via socket.io and session data.

Finish the chat by using socket broadcast to exclude the sender and align messages to the right; include a welcome event with username and avatar and add sanitization.

Learn to make the title tag dynamic by passing a title property from post and profile screens, and render it in header.js using EJS.

Add real-time, browser-based validation to the registration form, while preserving server-side checks. Create a registration form module that injects live messages above fields and balances immediate and delayed checks.

Learn to implement client-side live username validation with immediate checks and delayed validation, including alphanumeric constraints, length limits, and dynamic error messages in a registration form.

Implement live form validation by checking username and email availability with axios post to does username exist and does email exist routes, display validation errors, and track field uniqueness.

Implement live form validation for registration by adding an email-existence check in the user model, enforcing email format, username rules, and password length to prevent submission until checks pass.