Complete JavaScript, jQuery and React Bootcamp - Hands-On

Explore how JavaScript enables client-side interactivity in web pages, with character counting, form validation, and a tic tac toe game, and contrast with server-side languages, objects, and variables.

Place JavaScript in the head to run after page load, then show a function that multiplies age by seven to compute dog years via a button's on click event.

Create an external JavaScript file, save it as dog age.js, and reference it in head with a script tag to run in the browser, improving maintainability and speed with caching.

Learn how to output data in JavaScript using document.write and window.alert, illustrated with a simple addition example and a live browser display.

Learn how innerHTML outputs data to an html element, using getElementById to display the result of six plus three in a paragraph and update it with new values.

Explore JavaScript commenting, including single line // and multi line /* */ comments, and observe how comments affect code execution with inner HTML examples in an HTML file.

Define JavaScript constants as fixed values like five and six, and output their sum as 11 in the browser, then show how converting a value to a string joins text.

Explore JavaScript variables as named containers that store numbers or strings, can change with inputs, and use unique identifiers like X, Y, Z to output results with getElementById.

Master the JavaScript assignment operator, using the equal sign to assign the right-hand value to the left-hand variable and observe how a number concatenates with a string.

Perform arithmetic operations in JavaScript using addition, subtraction, and multiplication on constants and variables. Learn to display results in the browser using DOM output by updating elements with IDs.

Explore division, increment, and decrement in JavaScript arithmetic. Declare DX as 100 divided by 50, then X from 5 to 6 and H to 4, displaying results in the browser.

Master JavaScript operator precedence by following the order of computations in arithmetic expression from brackets to exponents, then division, multiplication, addition, and subtraction, illustrated with a practical example.

Explore how JavaScript variables hold numbers, strings, arrays, and objects, with examples like age as a number, last name a string, cars an array, and person an object with properties.

Explore how JavaScript objects encapsulate properties like type, model, and color within a car object. Output properties like car.type or car.model with getElementById, then verify the results in a browser.

Output multiple properties from a person object in one line, using first name, last name, age, and eye colour; join values with plus signs and display via getElementById.

Master JavaScript strings by using single or double quotes to define text and store names like John Smith. See browser output on separate lines and learn quoting inside strings.

Determine a string's length using the built-in length property by outputting text.length to the inner html property, using a 26-letter sample and previewing in the browser to verify 26.

Learn to display quotes in JavaScript strings by using the backslash escape character. Apply this technique to ensure the browser renders quotes correctly and handles special characters in output.

Discover how to generate random numbers in JavaScript with Math.random(), which outputs values between zero and one, and display them on the page using document.getElementById.

Explore how the math min and math max functions locate the lowest and highest values in a list of numbers, with -150 as the min and 600 as the max.

Explore how to use the JavaScript Math.round function to round decimals to the nearest integer, with demonstrations of Math.floor and Math.ceil on values like 15.4 and 15.6.

Learn how JavaScript arrays store multiple values in a single variable, access items by a zero-based index (apple, grape), and use the length property to display the six items.

Explore outputting array values via a string method and customizing separators with the join method, using an asterisk with surrounding spaces, then refresh to see the changes.

Explore JavaScript array manipulation with pop, shift, and push as you remove the last element mango and the first element, then add cherry to the end and to the beginning.

Learn how to modify and delete array elements by index in JavaScript, such as updating the first element to kiwi and removing items to create gaps.

Use the splice method to add multiple items to an array, set the insertion index, and optionally remove elements. For example, insert lemon and banana after orange (index two).

Sort the cars array alphabetically in JavaScript using the sort method, then reverse the order with reverse, and preview the results in the browser.

Join two arrays using the concat method to combine a girls array and a boys array into a combined variable, then display the output with the getElementById method.

Explore JavaScript conditional statements, including if, else if, and else, by converting a numeric test score into letter grades. Handle range checks and error messages for scores above 100.

Explore JavaScript comparison operators, including equal to and not equal, through a test script that compares a variable to six and ten and displays true or false in the browser.

Explore how the boolean function tests values for truth across numbers and strings, with zero yielding false. See how getElementById outputs these results in the browser.

Master JavaScript for loops by using a counter to repeatedly output values, such as 0 to 10, on separate lines with adjustable start and end.

Demonstrate the JavaScript for-in loop by iterating a person object's properties, first name, last name, and age, and output each value, with browser testing showing John Smith and 30.

Explore how the while loop executes a block of code while a condition holds. Create a script that outputs a variable from zero up to 20 and increments by one.

Learn how the do while loop, a variation of the while loop, executes the block once, then increments and tests the condition, illustrated by a button click counter.

Explain how to use break and continue in JavaScript loops to exit or skip iterations, with a for loop from 0 to 9 stopping at 3.

Explore JavaScript functions as reusable blocks of code that perform tasks. They multiply A by B and return the result with arguments like 8 and 2 to yield 16.

Explore JavaScript events and how clicks, hover, and mouse out trigger code in an HTML document. See a date function update output with innerHTML when a button is interacted with.

Create a simple background color changer by defining a bg color array of eight hex codes and applying a random color to document.body.style.backgroundColor on each page refresh.

Develop a JavaScript and CSS photo gallery with a thumbnail strip that updates the main preview on hover, along with hover effects and CSS styling in a basic HTML page.

Create a centered page layout with a header, a preview image, and a thumbnails strip of five images; hover thumbnails to update the preview in real time.

Explore how jQuery simplifies web development by offering HTML and CSS manipulation, effects, animations, and AJAX capabilities, enabling you to harness modern JavaScript features.

Embed the jQuery library by loading it from Google's CDN and placing the script reference in the HTML page's head section.

Explore jQuery syntax to select elements with $, use a selector to query elements, and run actions inside a document ready event, demonstrated by hiding paragraph text on button click.

Use the jQuery id selector to hide a single element. Add an id to an h2 and update the script to hide only that element when the button is clicked.

Convert the id selector to a class in jQuery by replacing id with class and changing the # to a period, then save to hide the heading as before.

Learn jQuery selectors beyond id and class, including the universal (asterisk) and this selectors, and apply actions to all elements or the current button to see hide effects.

Place jQuery functions in an external JavaScript file named 'JQ functions JS'. Include this file in your main HTML document and preview in the browser to verify the functions work.

jQuery enables events in an HTML document, such as hiding text on a mouse click, with a document ready function and single or double click handling.

Explore jQuery events by implementing mouseenter and mouseleave on a paragraph, triggering alerts as the pointer enters or leaves the element using document.ready and a #p1 selector.

Learn how the mouse down and mouse up events trigger actions in jQuery, showing an alert when the mouse is pressed and when it is released.

Learn how to attach multiple events to a paragraph with jQuery, changing its background color on mouse enter to yellow, mouse leave to pink, and click to cyan.

Use jQuery to hide and show paragraph text by clicking the hidden and visible buttons, with a 1000 millisecond interval to toggle visibility.

Explore how to toggle a paragraph with a jQuery click event, hiding and revealing text over 1000 milliseconds to demonstrate the toggle action.

Learn sequential fade in and fade out effects with jQuery by applying timed intervals to four red boxes and toggling display none on page load.

Apply the fade toggle method to fade elements in and out with a single button, using fadeToggle and restoring display: none on page load.

See how the jQuery fadeTo method fades elements to a target opacity, with four blue squares and a fade button, a one-second duration, and opacity steps from 20% to 80%.

Create a jQuery slide down effect to reveal a hidden panel in an HTML document by clicking the top bar, using two divs with ids top bar and panel.

Use the jQuery slide up method to slide a panel up instead of down, remove the display none property, and ensure the panel is visible on page load.

Learn how to use the slide toggle method to switch between slide up and slide down in jQuery, updating the script and previewing the panel behavior in a browser.

Explore the jQuery animate method by moving a blue 160x160 square from left to right when you click start animation, using absolute positioning and a 1000 ms duration.

Add multiple parameters to the jQuery animate method to control position, opacity, and height. Preview in the browser to see opacity drop to zero and height toggle to zero.

Use jQuery animate to set width and height relative to an element's current size, scaling or contracting by a specified amount, such as 200 pixels, then preview in the browser.

Explore jQuery animate and the queue functionality by chaining four animations on the square div. Each call changes height, width, and opacity with a specified speed, demonstrating sequential animations.

Learn how the jQuery stop method halts animations, whether sliding, fading, or custom, before completion. Start a square moving 800px left in 300ms, then stop it with the stop button.

Learn how the jQuery callback function ensures that code and animations run sequentially, preventing simultaneous events such as hiding an element before an alert appears.

Explore jQuery chaining by triggering a color change and two sequential actions—slide up and slide down—on the same element, all executed in two-second steps with one click.

Learn to create draggable elements using jQuery UI by applying the draggable interaction to a blue 150px div, with the jQuery and jQuery UI scripts loaded in the head.

Build an interactive accordion menu with jQuery and jQuery UI by wiring a div with id accordion to the accordion method, featuring three headings and panels.

Explore how jQuery manipulates the DOM by retrieving content with text and html methods, using two buttons to show text and HTML from a paragraph with italics and bold tags.

Use the jQuery .val() method to get an input's value and alert it. Click the get value button on an input with id name and default value John Smith.

Learn to use the jQuery attr method to retrieve attribute values, as a button click outputs the link url in an alert, with the html containing the button and link.

Demonstrates using text, html, and val methods to set content via three buttons that reset text one, text two to bold text line, and the name input to Jane Willis.

Use the jQuery attr method to set or change a link's href. Hover the link to preview the updated href, then click the change button to apply the new href.

Demonstrate jQuery append and prepend by clicking buttons to append text to a paragraph and add list items to an ordered list, or prepend content before existing text.

Learn how to use jQuery's after and before methods to insert content around an element by clicking buttons, manipulating text before or after an image.

Discover how the jQuery remove method deletes a targeted element and its contents from the page. Compare it with the empty method, which clears only the element's contents.

Remove HTML elements with jQuery filters by clicking a button to delete paragraphs using remove method. Explore how the example targets paragraphs by classes and IDs, demonstrating the filter approach.

Use jQuery to add class attributes to elements, selecting h1, h2, and p, and click to apply red and big classes that color text and enlarge line three.

Apply jQuery to remove a class from headings and paragraphs, replacing add with remove in the script and button label, and observe the red class disappear on refresh.

Use jQuery's toggleClass to switch between addClass and removeClass, replacing removeClass with toggleClass and updating the button label, reusing the same button to trigger both events.

This course requires basic JavaScript knowledge, including arrow functions and destructuring, plus HTML and CSS basics, and a strong desire to learn React.

React is a lightweight JavaScript library for building user interfaces, not a full framework. It uses a virtual dom for fast updates and supports websites, mobile apps, and desktop apps.

Launch the first React project by building a basic calculator in a single file, with minimal CSS for buttons and a collection of functions to drive the app.

Build a minimal hello world React page by creating an index HTML file, loading React and ReactDOM, and rendering a hello element into a root div.

Identify and install the essential tools for development, including Node.js and a code editor like Visual Studio Code or Sublime, across Windows, macOS, and Linux.

Learn to build React elements in CodePen's three-pane editor (html, css, and js) with a live render, and test a calculator project using Babel to preprocess JavaScript.

Learn how jsx embeds html inside JavaScript to create cleaner, readable code and enable reactive elements, with babel translating features and curly braces for expressions that prevent injection attacks.

Turn a simple React expression into a functional component that returns JSX to power your first projects, like a basic calculator, and learn function or arrow syntax.

Explore functional components in React and see how reusable building blocks like product cards and sections create scalable interfaces.

Explore props in React by passing properties from a parent to a child, render them with JSX and curly braces, and handle primitives, functions, and objects.

Build a component-based React app with a root component and reusable child components, using props and one-way data flow. See how a parent passes a callback to a child.

Build a basic calculator ui by creating a calculator component and calc button subcomponents, passing values via props, and using className with css grid for layout and a display.

Learn to wire up onClick events in React by capitalizing the second word, passing callback functions through props, and wiring buttons to handle number and operator actions with alerts.

Discover how to pass values through React callbacks by sending functions from parent to child via props, handling on click, and returning the button value back to the parent.

Learn how to manage component state in React using the useState hook, initialize and update a calculator display, and understand how state updates trigger efficient DOM re-renders.

Store a JSON object in React state to track current and total, concatenate digits on button presses, clear the initial zero, and render the current value for display.

Learn to implement calculator operators in a React app by creating a do calculation function, handling plus, minus, multiply, divide buttons, updating the total, and wiring equals and clear actions.

Debug React apps by inserting debugger statements and console logs to inspect state, fix undefined pre-op values, and streamline operator handling in a calculator project.

Explore how to build a basic React calculator using components, props, callback functions, and the useState hook, with ideas to extend features like decimals, memory, and percentages.

Build a Connect Four–style game in React with a customizable grid, click-to-play counters, and a computer opponent option; supports two players or player versus computer, with a four-in-a-row win condition.

Install node.js and a code editor to begin React development. Download node.js from nodejs.org, select the installer for your platform, and install Visual Studio Code.

Bootstraps a React project using Create React App, installs dependencies, and launches a development server. Then builds a minimal game board component and wires it into the app.

Create a 16-circle game board by building a reusable game circle component in React. Attach an on click event to emit a message via alert for each circle.

Learn how to pass props from a parent to a child component, destructure them for easy access, and use React children to render red and blue circles.

Learn to pass parameters to React on click events using arrow functions, including id and value, while handling the event object and preventing immediate execution.

Explore inline styling in React by passing color props from a parent to child components and applying dynamic styles using camelCase CSS properties like backgroundColor.

Create a 4x4 game board in React using CSS grid, 16 circles sized 100px, styled with a style object, center the board, and move styles to a CSS file.

Create a global CSS file for the game board and game circle, import it into React components, and convert inline styles to CSS for centralized styling.

Leverage dynamic styling in React by computing background color from the id with mod-2 check for odd or even, using a ternary expression, eliminating the need to pass color props.

Learn to swap inline styles for dynamic css classes by applying odd and even classes with red and blue backgrounds, using template literals and a ternary expression in React-style components.

Learn to implement callbacks in React by passing an on circle clicked prop from the game board to game circles and handling the click in the parent.

Use the React use state hook to manage a 16-element game board initialized with zeros. Update on circle clicks for players and track idle, in progress, and finished states.

Learn to update the player circle colors by managing state with a render helper and a current player toggle, while avoiding array mutation and using a spread copy.

Learn to update React state immutably using the previous state and map, and initialize a 16-circle game board with helper functions.

Learn to render circles in React with a map and fix the unique key warning by assigning a unique key to each circle using its id.

Style the game board by adding a header and footer, color, rounded corners, and a drop shadow, and display the current player and a new game button.

Dynamically display the current player's turn and implement a winner check for a four-by-four grid using ten winning combinations, updating state immutably to declare a winner.

Learn to detect a winner in a tic-tac-toe game, copy the board to avoid mutating state, manage game states, and update the header with the winning message.

Add an isDraw function to detect a draw by counting zeros on game board using reduce. If none remain, set the state to draw and show 'game is a draw'.

Learn how React lifecycle events work with hooks, focusing on useEffect for first-load behavior and component did update, including dependency arrays and updates triggered by state or props changes.

Use React hooks to initialize the game on mount, resetting the board to empty circles and starting with player one.

Introduce a suggest button to let players invoke a random valid computer move, wired via a helper function and new event handlers, enhancing the game with a computer option.

Develop a basic AI that blocks imminent wins across horizontal, vertical, and diagonal lines, using a get position function and move checks to choose optimal moves.

Define and apply css variables at the root to theme colors across the app using var(--name). Adjust background, panel, board, and player colors for quick, consistent styling.

Demonstrate conditional rendering in React to display appropriate game button, either new game or suggest, based on progress, win, or draw. Compare inline conditions with a render function.

learn to deploy your react app for free on netlify by signing up, adding a new site, and dropping the build folder into the deploy box, then test locally.

Deploy your app to Surge by installing Surge globally, running the Surge command pointed at your build folder, and using the provided default domain to publish for free.

Build a functional React game by using useState and useEffect, passing props, and applying dynamic styling, while exploring enhancements such as game history, board size, and a timer.

Build an e-commerce site with a product list, categories, view a product, add to basket, and manage a dynamic cart with no page refresh, auto-updating totals, and a basic checkout.

Bootstraps a new React project with create React app to build a mini ecommerce store and learn REST APIs using a JSON Server as a fake backend.

Set up a React project with json server, create a db.json with categories and products as a mock rest API server, run on port 3001, and test endpoints locally.

Learn to fetch JSON data with the Fetch API, store it in state, and render categories in a React app using useEffect and useState, handling promises and unique keys.

Apply custom styles to transform the app into an e-commerce store by removing default styles, pasting provided CSS, and styling the left categories panel, header, section, and main area.

Create a dedicated category component in React, destructure props, and render categories using map with keys, while guarding against undefined results and preparing an on-click to fetch products.

Binds category clicks to fetch and display products for each category, passes a click handler to child components, renders the products list, and plans error handling and loading states.

Refactor fetch calls into a reusable fetcher utility, using async/await with a base URL, to fetch categories and products and update state, with error handling.

Implement a try-catch around fetch calls and return a structured response with an error message and data, then update the user interface to show fetch errors and centralize api urls.

tidy the fetch API call by checking response status, throwing an error on not ok (like 404), and handling it in catch to display a precise message to the user.

Style the product list with CSS grid to three columns using assets and a database, and build a category product component that renders title, image, specs, features, stock, and price.

Install react router v6 and wrap your app with a browser router to enable client-side navigation from the product list to a product detail page, avoiding full page reloads.

Add a unique key to every mapped element in React lists, using product id for products and index-based keys for category features.

Implement dynamic routes with React Router, using URL parameters for product details, a Link component for titles, and the use navigate hook to access product detail, basket, and checkout pages.

Read the product id from the url with useParams, fetch the product by id from a json server, and render it on the detail page.

Fetch a product by ID to power the product detail page, rendering image, title, description, specs, price, stock, and add-to-basket in a three-column layout.

Learn how styled-components encapsulate CSS inside React components using tagged template literals, and how to install, import, and create custom styled components for product details.

Learn to use styled components to separate CSS from markup, applying a description component that spans the full width, and address routing to preserve header, footer, and layout.

Explore rendering HTML in React with the dangerously set in HTML attribute, using a markup function returning { __html: ... }, to safely apply bold markup to descriptions.

refactor the categories to use links and react router category routes, fetch products by category id, and render them while preserving the gray layout and fixing image paths.

Refactor the website by moving product rendering into a category component, convert categories to React Router links, and implement a layout with an outlet to render routes in main area.

Refactor the home page by moving routing to a main app and layout component, pass categories via props, and add a home route with basket and home links.

Explore how to use react context to share cart state across components, creating a cart context with a provider and initial cart items to enable global state.

Build a cart system in react by creating a cart context and reducer; use useContext and useReducer to add to cart, manage cart items with dispatch, and handle product payload.

Extend cart reducer with remove, increase quantity, decrease quantity, and clear methods, expose them via a cart context and provider, and render the shopping basket with items, total, checkout.

Retrieve cart items from the context, render them with a cart helper, display quantity and price, show an empty basket message, link to products, and plan quantity controls.

Import the up, down, and trash icons with width 20, place them in the basket, and add click handlers to navigate to checkout, clear the basket, and adjust quantities.

Implement a running basket total using reduce to sum item prices times quantities, and enhance the header with white links and home/cart icons, plus CSS tweaks for a cleaner layout.

Complete the checkout page by validating user inputs and handling checkout details. Learn to persist the shopping basket across page refreshes and browser sessions, creating a reliable ecommerce flow.

Learn to fix a React shopping basket by introducing local state, syncing with context, and updating via immutable array operations to auto-refresh the cart and support quantity changes.

Fix React cart reducers by returning a new array with filter, then implement a checkout page with name, email, addresses, and navigate to an order confirmation route with useNavigate.

Persist the shopping cart across page refreshes and browser sessions by using local storage, with session storage as an alternative, and serialize cart data with JSON.

Add a top search bar and a search results page, using use search params to pass the query and fetch matching products, then display results with future debouncing.

Apply debouncing to search inputs with a 500ms timeout and a useEffect cleanup to limit API calls and show no results when none match.

Learn to validate a checkout form in React by turning inputs into controlled components with useState, handling onChange and submit, and using required and browser validation before custom validation.

Master client-side form validation in React by enabling a disabled confirm button until name, email, and shipping address are filled, and by adding visual feedback for required fields.

Learn to validate forms in React by adding asterisks for required fields and red borders, using styled-components and a conditional invalid prop controlled by an errors object.

Explore using the on blur event to set a touched flag for name, email, and shipping address, and display red error indicators when validation fails, with careful state updates.

Advance your React skills by building an ecommerce store with React writer, stylized components, context, useReducer, useContext, mock JSON server API, local storage, and fetch API.