Web Development Bootcamp HTML CSS JS REACT NODE MERN STACK

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.

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.

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

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.

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

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.

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.

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

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

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.

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.

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.

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

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.