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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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 global CSS file for the game board and game circle, import it into React components, and convert inline styles to CSS for centralized styling.

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.

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.

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.

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.

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.

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.