Web Development Bootcamp HTML CSS JS REACT NODE MERN STACK

Learn how to structure content with H1 to H6 headings and paragraphs for better SEO, plus practical tips on VS Code autocomplete, copy/paste shortcuts, and lorem text plugins.

Learn to customize VS Code with extensions like Prettier for auto formatting, Lorem ipsum for dummy text, and themes, while using shortcuts and the command palette for efficient coding.

Learn how to structure a proper HTML document with doc type, html, head and body sections, and implement head elements like viewport, title, and meta description to boost SEO.

Create a valid html document with doctype, head, and body, apply inline css to color headings, and switch to a separate style.css with a red color class linked for reuse.

Learn to style HTML pages with CSS by applying styles to body and headings, using class and ID selectors, and adjusting colors, backgrounds, font sizes, and text decoration.

Focus on fundamental concepts and syntax, use online resources to master building full stack web applications, and learn to write HTML and CSS comments to keep code readable.

Learn to use Google fonts to enhance websites by adding fonts via the head or css import, then apply font-family to headings from h1 to h6.

Learn to display images in HTML using the img tag with src and alt attributes, manage local and external sources, and apply CSS for responsive, SEO-friendly images.

Apply CSS and media queries to make images responsive, using a web dev image class to switch from 50% width on large screens to 100% width on small screens.

Apply 100 pixel padding inside a div and 50 pixel margin outside to see how padding creates space inside the div and margin creates space outside in CSS.

learn how to create unordered and ordered HTML lists using ul, ol, and li, add hr and br elements, and style with a class named example.

Learn to create clickable links with the anchor tag, wrapping text, divs, or images with href attributes. Open links in the same page or a new tab using target _blank.

Learn border styling and hover effects in css for images and divs, including border thickness, styles, hover changes, border radius, box shadow, centering, and clickable links.

Learn to apply background color and text shadow to divs, use box shadow on images, and create reusable classes for center-aligned text, preparing for gradient backgrounds and image backgrounds.

Learn to set a background image using CSS by sourcing a photo from Pixabay, placing it in the images folder, and applying background-size: cover with centered text.

Learn how to create a parallax image background where the image stays fixed while content scrolls, using a simple HTML structure and CSS styling to center and scale the image.

Learn to apply gradient backgrounds with CSS background-image and linear-gradient, using multiple colors like tomato and orange to enhance div content and overall page appearance.

Learn to build HTML forms with name, email, password fields, radio buttons, checkboxes, and a submit button, and understand form structure and basic CSS styling later.

Style an HTML form with CSS by centering a 50% width wrapper, adding a light background and padding. Target labels as blocks and differentiate text inputs from radios and checkboxes.

Learn to add icons to web pages with Font Awesome, set up the CDN, and apply class names while managing version differences.

Learn header and footer basics, including the footer tag, copyright text, and the love symbol with Font Awesome, using semantic HTML for SEO in head. Explore bootstrap for responsive layout.

Learn bootstrap, a popular css framework, to build responsive pages with grids, margins, padding, and images. Create navigation, buttons, forms, tables, carousels, modals, and deploy to GitHub for hosting.

Learn Bootstrap via CDN and understand when to include Bootstrap CSS and JavaScript in your HTML, or download the bundle locally, then build responsive layouts using rows and grids.

Learn to download Bootstrap manually and load CSS and JS from a local directory, compare with CDN options, choose minified CSS for production, and style a button using Bootstrap classes.

Master responsive layouts using bootstrap grid: container, row, and column classes within a 12-column system; learn to create two- or three-column layouts and how they collapse on small screens.

Explore Bootstrap layout basics by building containers, rows, and columns, applying padding, background colors, and text colors, and using offset and md sizing to create balanced, responsive grids.

Style divs and texts by applying margins, paddings, and colors, and use Bootstrap utilities for display size, bold font weight, and centered text.

Learn to make images responsive with Bootstrap by using container, row, and columns, applying image-fluid or thumbnail classes, and downloading royalty-free images from Pixabay for local use.

Create and style buttons with Bootstrap classes, anchor tags, and layout options. Build and customize lists using list groups, list items, bullets, and padding.

Design bootstrap forms using container, row, and column layouts to center inputs. Create email and password fields, a checkbox, and a login form with bootstrap 5 styling.

Create bootstrap tables in HTML by using container, row, and the table class; define thead and tbody with th and td, then apply table-striped or dark variants.

Learn to build responsive navigation with flexbox, using nav bar and nav link classes, and see it collapse to a hamburger menu on small screens.

Create a Bootstrap carousel image slider with indicators, autoplay, and navigation controls. Configure image sources, set autoplay interval, and style height by linking a CSS file.

Demonstrate how to implement a bootstrap modal triggered by a button, including the bootstrap script and a header, body, and footer, with close options and code from the official docs.

Learn to deploy a static HTML, CSS, JS site by pushing code to GitHub, creating a repository, and using git in terminal or VS Code to publish and share.

Master terminal basics and git workflows to initialize a repository, add and commit changes, connect a remote origin, push to GitHub, and clone or pull projects for public access.

Learn to host a static site on GitHub Pages by creating a new branch, pushing changes, and viewing the live site at GitHub.io, with optional custom domain settings.

Push code changes to GitHub by editing files, then staging with git add and committing with git commit. Merge main into the GitHub pages branch and push to reflect updates.

Apply bootstrap themes to instantly change your site’s appearance using BootsWatch free themes, via CDN or download of minified CSS, then swap the bootstrap CSS in index.html.

Learn JavaScript, the core web technology powering front end and back end. Build interactive interfaces and server-side APIs with Node.js, Express, and popular frameworks like React and Vue.js.

Write and load JavaScript in HTML by creating an HTML page, adding a script tag or external index.js, and using console.log to run code.

Explore core JavaScript concepts—variables, strings, functions, and objects—and learn when to use let, const, or var, with practical examples and tips to leverage ChatGPT.

Explore strings in JavaScript, a primitive data type enclosed in quotes, and learn common manipulations such as length, toUpperCase, indexOf, and replace.

Explore the numbers primitive in JavaScript, learn how integers and floating point values work, and perform addition, subtraction, multiplication, and division with practical examples.

Explore how JavaScript objects store related data and functionality as properties and methods. Access properties with dot notation, invoke methods with parentheses, reference this, and index arrays from zero.

Display a person object’s information on the page by targeting a div using get element by ID on the document, then update inner HTML and concatenate properties and methods.

Explore how JavaScript operators work, from arithmetic and assignment to comparison (double vs triple equals) and logical operators, with practical examples using variables ten and five.

Master if else statements and boolean logic to control code flow using comparison operators, else if chains, and real-world examples like age checks and banking app balances.

Master loops in JavaScript, including for and while, with automatic stop at ten, then map arrays and access items and indices for rendering in React.

In this web development bootcamp, create a person object with name, age, and gender, then use a for-in loop to render its keys and values into the page.

Explore how functions in JavaScript act as reusable blocks of code. Create, invoke, and return values using the function keyword, arguments, and examples like add, multiply, and on click alerts.

Learn about arrow functions, which resemble regular functions but are shorter; single statements omit braces and return, while multi-line bodies use them, and they lack their own this.

Develop a dynamic greeting app with HTML and JavaScript by capturing the user name and time input, deriving the hour, and displaying good morning, good afternoon, or good evening.

Learn to use template literals in JavaScript, replacing plus concatenation with backticks and ${variable} expressions to build dynamic strings with natural spacing.

Learn about arrays in JavaScript as a data structure for storing multiple values, access elements by zero-based index, and manipulate with push, pop, and loops like for, forEach, and map.

Display an array of fruit items on the page by building an unordered list and creating list items with JavaScript, using getElementById or querySelector and append.

Explore JavaScript objects as key value stores for data and functions. Access properties with dot or bracket notation and build methods like greet, add, and subtract.

Learn to use the new keyword, constructor function, and prototype to dynamically create multiple person objects and share methods via the prototype.

Learn how to define JavaScript classes with the class keyword, compare to prototype-based constructor functions, and instantiate with new to produce the same output.

Explore regular expressions in JavaScript to perform pattern matching and string manipulation, using slash-delimited patterns, global and case-insensitive flags, and replace operations in HTML documents.

Explore the browser object model and document object model, revealing window, document, and methods like window.open, window.alert, and querySelector to interact with the page and current URL.

Explore the document object model (DOM) by accessing document elements, changing body and title, and wiring a button to change background color with vanilla JS; compare jQuery and Vue.js.

Build a pure JavaScript to-do app that stores items in local storage, supports add and remove, and demonstrates DOM manipulation, with plans to recreate it in jQuery and Vue.js.

Build a todo app with plain JavaScript, featuring a form input and submit button that saves todos in local storage and renders them in an unordered list.

Build a client-side to-do app with plain JavaScript by rendering todos, adding delete functionality, and persisting data to local storage using JSON stringify and parse.

Build a todo app using jQuery, including CDN setup, a form with input and add button, and rendering tasks from local storage with JSON parse/stringify.

Learn how to display tasks, store them in an array and in local storage, and remove tasks with a jQuery delete button, updating the UI and data.

This lecture provides an overview of building a todo app with Vue.js, comparing it to plain JavaScript and demonstrating core concepts such as data binding, v-model, v-for, and v-on.

Build a Vue.js to-do app using v-model for two-way binding, add and delete todos in a reactive array, and persist them with localStorage loaded on mount.

Learn how to install Node.js, verify your version, and run JavaScript in the Node.js repl, while exploring Node.js's role in full-stack development with React and APIs.

Compare browser and Node.js environments by highlighting window and document versus Node.js's process, showing how inner width, location href, and cwd reveal JavaScript behavior on client and server.

Set up a node.js project, create modules, and export functions with module.exports; then import them using require and optional destructuring to reuse code across files.

Master building a basic Node.js server with the http core module, handling request and response objects, and serving endpoints like /api/products on localhost port 8000.

Discover how to install and use npm packages to generate random jokes in your app, manage dependencies with package.json, and leverage node_modules.

Learn to create a basic express server in node by installing express, defining routes with app.get, sending responses with res.send or res.json, and running on port 8000.

Install Node Mon, set a start script in package.json, and run npm start to auto restart the server on code changes, eliminating manual restarts.

Explore how Node.js uses an event loop to handle many requests with a non-blocking, asynchronous model on a single thread, via callbacks.

See how the Node.js event loop handles an fs.readFile callback, with immediate logs first and file data logs later, illustrating event loop behavior and error driven development.

Explore synchronous versus asynchronous programming in Node.js, using fs.readFileSync and fs.readFile with callbacks to demonstrate execution order, non-blocking behavior, and the importance of error handling on a single thread.

Explore React and Next.js to build modern web apps. Learn reusable UI components, declarative state management, and the virtual dom for efficient updates, enabling fast, scalable full-stack development with Node.js.

learn why react and next.js dominate widely used front-end development, with server-side rendering and code splitting in next.js, reusable components, a fast virtual dom, and declarative programming.

Set up a new React project with Next.js by installing node and npm, creating a pages-based app, writing a simple hello world component, and configuring dev, build, and start scripts.

Learn how to build a web page from reusable React components, including navigation and footer, and use Next.js page-based routing to create pages like home, about, and contact.

Learn to pass props to a shared navigation component to show page-specific messages on home, about, and contact pages. Use destructuring, default values, and data or blocks for dynamic UI.

Learn how to use the useState hook to create and manage component state, map over a users array, and update state with the spread operator to add new users.

Demonstrates using npm packages with React to create random users by installing random name and nano ID, importing and destructuring them, and rendering new IDs and names on click.

Use the useEffect hook to fetch data on component mount, retrieve users from json placeholder, and store them in state for rendering.

Learn conditional rendering and state changes in React by showing a loading indicator while fetching data, then render the user list with inline styling.

Break code into smaller reusable React components, like loading and users list, to map and display users, pass props with sensible defaults, and keep the architecture clean and modular.

Learn to create a global layout in Next.js by using _app.js to render a shared navigation and footer across all pages, importing components once and applying bootstrap globally.

Learn to create and organize static assets with a public folder, add a styles.css, import it in app.js, and style the navigation with flex and space-between.

Learn how to serve images in a React/Next.js app by placing files in the public directory, referencing them as /images/your-image.jpg, and centering with flexbox using inline styles.

Learn to implement a global state with React context by creating a user context provider and wrapping the entire application. Access data across pages using use context and user context.

Click the users list to view individual profiles, using Next.js dynamic routing with /user/[id] and the useRouter hook to read router.query.id and fetch the corresponding user data.

Fetch user details using a route query in a React app, using useEffect and useState to fetch data from the json placeholder API, and display name, username, email, and address.

Explore the difference between client side rendering and server side rendering, and how Next.js enables server side rendering for better SEO by rendering data on the first load.

Master server side rendering with get server side props to fetch the user data on the server before the page loads, improving seo and ensuring content is present at load.

Learn how to use the head component in Next.js to set meta title and meta description for better seo, and see how these tags appear in page source.

Learn how to incorporate bootstrap via CDN links in a Next.js app, using the head component to apply a stylesheet globally. Build layouts with container, row, and card classes.

Explain the shift from pages to app directory in next.js 13, and demonstrate building a data-fetching app that contrasts server-rendered components with client-side features activated by use client.

Set up Next.js 13 project with latest dependencies and dev scripts. Implement an app directory layout to apply metadata and use server components by default.

Fetch data from an API in Next.js 13 app directory using an async function, map users to display names, with server components by default and no useEffect or getServerSideProps.

Learn how to access root params in app directory server components to fetch and display a user by id from the URL, using dynamic routing and server-side data fetching.

Create an app loading file named loading to display a default loading state during data fetch and page navigation in Nexus 13. Caching speeds subsequent loads.

Turn a server component into a client component with 'use client', create a components/clock.js, and build a clock using useState and useEffect with setInterval to show current time via toLocaleTimeString.

Gate the clock with a window check to fix the text mismatch between server and client rendering, showing the clock only on the client and removing the warning.

Start a full stack JavaScript blog project building create, read, update, delete features with protected routes, backed by Node.js and MongoDB and React frontend using Next.js 13 and JWT login.

Build a Node.js api with express and MongoDB, create server.js, install mongoose, jsonwebtoken, bcrypt, nodemon, and expose a root endpoint returning the current time as json on port 8000.

Install and apply the Morgan logging middleware to express routes, viewing endpoint, method, status, and latency in the terminal as requests are received.

Connect to MongoDB by choosing a local install or Atlas, obtain a connection string, configure env vars, and use mongoose to establish and verify the database connection.

Organize an express app by moving routes to a routes directory and exporting them as middleware with app.use. Dynamically load route files using fs and readDirectorySync, prefixing with api.

Learn to move route callback logic into dedicated controllers and export functions for clean imports. Build a scalable API structure with routes, middleware, and authentication readiness.

Build an authentication system by implementing a register post route at /api/register, testing with Postman, and using Express.json middleware to access the request body and prepare for user creation.

Create a mongoose user model with name, email, password, and role, applying trimmed, lowercase, required, and unique fields, while enabling timestamps and preparing bcrypt hashing for passwords.

Learn to implement password security with bcrypt by creating helper functions that hash passwords with salt. Compare plain and hashed passwords during registration and login.

Register a new user by hashing the password, saving the user to the database, and returning a json web token so the user can log in immediately.

Implement robust registration validation in a MongoDB Atlas setup, enforcing required name, email, and password (trimmed, with min length), plus email format checks and duplicate checks.

Generate and send a JWT token on user registration using a secret, include the user ID in the payload, set a one-day expiry, and omit the password from the response.

Implement a login flow with a post login route, validate credentials by email, compare passwords, issue a JWT token, and handle errors with try-catch for a secure authentication process.

protect routes for logged-in users and admins by creating two middlewares using jwt verification; pass token via authorization header; attach decoded user to request for access control.

Implement an is admin middleware to protect admin routes by checking request.user, finding the user by ID, returning 401 when not admin, and granting access to admins.

Define a blog schema in Mongoose with title, slug (generated from the title, lowercase, unique, indexed), content as an object, and posted by referencing the user, plus timestamps.

Build a blog creation route with express, handling form data and image uploads using formidable. Secure the route with sign-in and admin checks for the /api/blog/create endpoint.

Validate required title, content, image, and category, extract them from the request, generate a slug with slugify, and save the blog to the database.

Create a blog with image upload by slugifying the title, checking for duplicate titles, and saving the image in an uploads folder using the blog id as filename.

Configure express static to serve the uploads directory at /api/uploads, making uploaded images publicly accessible. Access images by their file name and id in the browser or via postman.

Fetch a single blog by slug using a dynamic route param. Define get blog/:slug, read req.params.slug, query the blog model with findOne by slug, and return it.

Create a public get route to fetch all blogs, populate the posted by field with the author's name, and sort by created date so newest appear first.

Update blog and image workflows empower admins to modify posts via a slug-based put route, unlinking images, handling form data with formidable, and saving updates to title, content, and category.

Create a delete route guarded by admin middleware that deletes a blog by slug, uses find one and delete, removes the associated image file, and returns a blog deleted successfully.

Resize uploaded blog images with sharp to 1200px width for faster load times. Validate images and apply resizing during create and update, reducing from megabytes to a few hundred kilobytes.

Learn to configure cross-origin resource sharing with a cors middleware, enable secure interactions between a React frontend and a Node server, and build a real-world blog dashboard with authentication.