Complete JavaScript, jQuery and React Bootcamp Hands-On

Complete JavaScript, jQuery and React Bootcamp – Hands-On, available at $54.99, has an average rating of 4.47, with 170 lectures, based on 393 reviews, and has 56998 subscribers.

You will learn about Understand the Document Object Model (DOM) Manipulate Web Page Components using the DOM Learn how to Embed Internal and External JavaScript Learn the Foundations of JavaScript Variables Learn to Work with Objects in JavaScript Learn the different Data Types in JavaScript Learn to Compute and Work with Arithmetic Operators Learn to Generate Random Numbers in JavaScript Learn to Work with Arrays including Multi Dimensional Arrays Learn to Splice, Sort, and Join Arrays Learn to Work with JavaScript Loops (For, While, Do-While) Learn to Work with Functions and Events in JavaScript Learn to Embed jQuery Library into Web Development Projects Explore jQuery Syntax and Selectors Learn to Work with jQuery Events Learn to Toggle Components in jQuery Learn to Animate Objects in jQuery Learn to Work with Callback Functions in jQuery Learn how to Build Interactive Navigation Components in jQuery Learn the Get Content Method in jQuery Learn to Build Front-End UI Elements using React Library Explore the Foundations of React Understand the Tools Required for React Projects Learn to use Code Pen for Testing Front-End Development Projects Learn to work with Components, Props, and Callbacks in React Learn to work with Events and the React State Hook Learn to Debug React Projects Learn Global, Dynamic, and Inline Styling of React UI Components Work with the React Key Property, and React Lifecycle Events Learn Conditional Rendering in React Deploy React Projects to Netlify, and Surge Learn the Foundations of JSON Server and Fetch API Learn to Build a Calculator, Connect-4 Clone, and a Fully Customized E-Commerce Site in React Understand React Router Build an E-Commerce Search Feature using React Learn to Validate Forms in React This course is ideal for individuals who are Students interested in working with Popular JavaScript Libraries or Students interested in Building Interactive UI Components using React and jQuery or Students interested in Mastering Front-End Development using JavaScript It is particularly useful for Students interested in working with Popular JavaScript Libraries or Students interested in Building Interactive UI Components using React and jQuery or Students interested in Mastering Front-End Development using JavaScript.

Enroll now: Complete JavaScript, jQuery and React Bootcamp – Hands-On

Summary

Title: Complete JavaScript, jQuery and React Bootcamp – Hands-On

Price: $54.99

Average Rating: 4.47

Number of Lectures: 170

Number of Published Lectures: 170

Number of Curriculum Items: 170

Number of Published Curriculum Objects: 170

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

Understand the Document Object Model (DOM)

Manipulate Web Page Components using the DOM

Learn how to Embed Internal and External JavaScript

Learn the Foundations of JavaScript Variables

Learn to Work with Objects in JavaScript

Learn the different Data Types in JavaScript

Learn to Compute and Work with Arithmetic Operators

Learn to Generate Random Numbers in JavaScript

Learn to Work with Arrays including Multi Dimensional Arrays

Learn to Splice, Sort, and Join Arrays

Learn to Work with JavaScript Loops (For, While, Do-While)

Learn to Work with Functions and Events in JavaScript

Learn to Embed jQuery Library into Web Development Projects

Explore jQuery Syntax and Selectors

Learn to Work with jQuery Events

Learn to Toggle Components in jQuery

Learn to Animate Objects in jQuery

Learn to Work with Callback Functions in jQuery

Learn how to Build Interactive Navigation Components in jQuery

Learn the Get Content Method in jQuery

Learn to Build Front-End UI Elements using React Library

Explore the Foundations of React

Understand the Tools Required for React Projects

Learn to use Code Pen for Testing Front-End Development Projects

Learn to work with Components, Props, and Callbacks in React

Learn to work with Events and the React State Hook

Learn to Debug React Projects

Learn Global, Dynamic, and Inline Styling of React UI Components

Work with the React Key Property, and React Lifecycle Events

Learn Conditional Rendering in React

Deploy React Projects to Netlify, and Surge

Learn the Foundations of JSON Server and Fetch API

Learn to Build a Calculator, Connect-4 Clone, and a Fully Customized E-Commerce Site in React

Understand React Router

Build an E-Commerce Search Feature using React

Learn to Validate Forms in React

Who Should Attend

Students interested in working with Popular JavaScript Libraries

Students interested in Building Interactive UI Components using React and jQuery

Students interested in Mastering Front-End Development using JavaScript

Target Audiences

Students interested in working with Popular JavaScript Libraries

Students interested in Building Interactive UI Components using React and jQuery

Students interested in Mastering Front-End Development using JavaScript

Welcome to the JavaScript, jQuery, and React Bootcamp. In this course you will learn how to use JavaScript along with two powerful JavaScript libraries to build dynamic, interactive web pages. We start with introducing students to the document object model (DOM) which defines the logical structure of HTML documents. From there we dive into JavaScript to demonstrate various methods in which DOM elements can be manipulated to add interactivity to static components. The JavaScript section starts right from the basics, which includes JavaScript placement, and data output. From there we move on to variable declaration, arithmetic operations, operator precedence, data types, and objects. Once the foundations are covered, we move on to more complex operations using Arrays, Conditional Statements, JavaScript comparison operators, booleans and loops. Here students will learn to unleash the true power of JavaScript to render different outcomes based on user interaction. We will explore the use of functions to efficiently handle repetitive tasks and JavaScript events to handle output based on actions and occurrences. The section will conclude with a hands-on project where students will implement their knowledge to build a web based photo gallery and background color changer.

In the second section of this course, students will learn to work with jQuery – a powerful JavaScript library designed to simplify HTML DOM tree traversal and manipulation. jQuery is ultra lightweight, feature rich, and cross-platform compatible. It’s one of the easiest libraries to work with for building out JavaScript features on an HTML web page. jQuery is excellent for event handling, CSS animations, and Ajax integration for asynchronous UI state changes. Similar to the JavaScript section, the jQuery module begins with the foundations. This includes instructions on embedding jQuery to a web page, and an intro into jQuery syntax. Students will learn to work with jQuery selectors, events, and toggling. From there we dive into animations using fades, slides, and the jQuery animate function. Students also learn about chaining, draggable objects, callback functions, the get content method, toggling classes, and filtering. By the end of the jQuery module, you will know how to build stunning animated web pages with ease.

In the last section of this course we’ll explore React – a cutting edge JavaScript library for building state-of-the art user interface components. You’ve likely seen React in action on some of the hottest web apps developed by fortune 500 companies. For example, Netflix, Facebook, and AirBnB all use React for their front-end UI. As a matter of fact, React was developed by Meta alongside a community of independent developers. Until this day, React remains free and open-source so it has plenty of support and documentation. Unlike jQuery which interacts with the document object model directly, React works through a “virtual” DOM. React is unaware of changes made to the DOM outside of React and determines updates based on its own internal representations. React is best for creating reusable code blocks for UI components and layering them on top of each other to minimize the number of times the DOM needs to be re-rendering on state changes.

The React section of this course starts off with a hands-on project where you’ll learn how to work with functional React components, props, Callback functions, OnClick Events, and the React State hook to build a fully functional calculator. From there we will dive into project number two, where you will build a connect-4 clone. Here we will cover more intermediate concepts including passing props, destructuring, passing arguments to click events, various styling methods, and handling callbacks. You will also learn about the React key property, React lifecycle events, and conditional rendering. By the end you will have built a complete multi and single player connect-4 game board with built-in AI capabilities.

In the final section of the course we further unleash the power of React by building out a complete e-commerce site with multiple product categories, a product showcase, shopping cart feature, and much more. Here, we introduce a number of integral new concepts including: JSON server, Fetch API, and installing React router. These essential building blocks will be used to render the product categories, style the product list, and configure the product details page. From there we dive into styled components, refactoring the shop layout, and exploring the concept of “context” in React. In the final stages of the project students will configure the shopping cart basket, and the checkout feature. We will also implement a product search feature, followed by in-depth exercises on validating input forms in React.

As you can see this course covers a tremendous bit of ground. Best of all it’s co-authored by Tim Maclachlan – a renowned senior full-stack developer with over 20 years of commercial development experience. As a multi-faceted developer, Tim specializes in algorithmic, analytical and mobile development. To date, he’s written hundreds of applications and worked in a number of industries from commercial aviation and military, to banking and finance. Tim has a genuine passion for teaching others how to become better coders and looks forward to interacting with his students.

With that said, we hope you’re just as excited about this course as we are, if so – hit that enroll button and let’s get started.

Course Curriculum

Chapter 1: Intro to the Document Object Model (DOM)

Lecture 1: DOM Introduction

Lecture 2: DOM Manipulation

Chapter 2: JavaScript Development

Lecture 1: Introduction

Lecture 2: JS Placement

Lecture 3: External JavaScript

Lecture 4: JavaScript Output

Lecture 5: JavaScript InnerHTML

Lecture 6: JavaScript Commenting

Lecture 7: JavaScript Constants

Lecture 8: JavaScript Variables Introduction

Lecture 9: JavaScript Assignment Operator

Lecture 10: JavaScript Arithmetic Operations

Lecture 11: JavaScript Arithmetic Operations Continued

Lecture 12: JavaScript Operator Precedence

Lecture 13: JavaScript Data Types

Lecture 14: JavaScript Objects

Lecture 15: JavaScript Object Output

Lecture 16: JavaScript Strings

Lecture 17: JavaScript String Length

Lecture 18: JavaScript Special Characters

Lecture 19: JavaScript Random Numbers

Lecture 20: JavaScript Min and Max Function

Lecture 21: JavaScript Math Round Function

Lecture 22: JavaScript Arrays

Lecture 23: JavaScript Array Attributes

Lecture 24: JavaScript Arrays – Pop – Push – Shift – Unshift

Lecture 25: JavaScript Changing and Deleting Elements

Lecture 26: JavaScript Splicing an Array

Lecture 27: JavaScript Sorting an Array

Lecture 28: JavaScript Joining Arrays

Lecture 29: JavaScript Conditional Statements

Lecture 30: JavaScript Comparisons

Lecture 31: JavaScript Booleans

Lecture 32: JavaScript For Loops

Lecture 33: JavaScript For-In Loop

Lecture 34: JavaScript While Loops

Lecture 35: JavaScript Do-While Loop

Lecture 36: JavaScript Break and Continue

Lecture 37: JavaScript Functions

Lecture 38: JavaScript Events

Lecture 39: JavaScript Project 1 – BG Color Changer

Lecture 40: JavaScript Project 2 – Photo Gallery

Lecture 41: JavaScript Project 2 – Completion

Chapter 3: jQuery Development

Lecture 1: Introduction to jQuery

Lecture 2: Embedding jQuery

Lecture 3: jQuery Syntax and Selector Intro

Lecture 4: jQuery ID Selector

Lecture 5: jQuery Class Selector

Lecture 6: jQuery Other Selectors

Lecture 7: External jQuery File

Lecture 8: jQuery Events Intro

Lecture 9: jQuery Events – mouseenter and mouseleave

Lecture 10: jQuery Events – mousedown and mouseup

Lecture 11: jQuery Multiple Event Handlers

Lecture 12: jQuery Hiding-Showing

Lecture 13: jQuery Toggle

Lecture 14: jQuery Fade In-Out

Lecture 15: jQuery Fade Toggle

Lecture 16: jQuery Fade To

Lecture 17: jQuery Slide Down

Lecture 18: jQuery Slide Up

Lecture 19: jQuery Slide Toggle

Lecture 20: jQuery Animate

Lecture 21: jQuery Animate – Multiple Params

Lecture 22: jQuery Animate – Relative Values

Lecture 23: jQuery Animate – Queue Functionality

Lecture 24: jQuery Stop Method

Lecture 25: jQuery Callback Functions

Lecture 26: jQuery Chaining

Lecture 27: jQuery Draggables

Lecture 28: jQuery Accordian Menu

Lecture 29: jQuery Get Content – text and html

Lecture 30: jQuery Get Content – Val

Lecture 31: jQuery Get Content – attr

Lecture 32: jQuery Set Content – text – html – val

Lecture 33: jQuery Set Attributes – attr

Lecture 34: jQuery Append and Preprend

Lecture 35: jQuery – After and Before

Lecture 36: jQuery Remove and Empty

Lecture 37: jQuery Filter Remove

Lecture 38: jQuery Add Class

Lecture 39: jQuery Remove Class

Lecture 40: jQuery Toggle Class

Chapter 4: React Developmepment

Lecture 1: Skills Required

Lecture 2: What is React?

Chapter 5: React Project: Build a Calculator in React

Lecture 1: Project Overview

Lecture 2: Hello React

Lecture 3: Tools Needed

Lecture 4: Code Pen

Lecture 5: Intro to JSX

Lecture 6: Functional Components in React

Lecture 7: Why Components?

Lecture 8: Intro to Props in React

Lecture 9: React Components, Props and Callbacks

Lecture 10: Building the Calculator Visuals

Instructors

YouAccel Training
8+ Million Enrollments, 70k+ Reviews. Register Today.

Rating Distribution

1 stars: 4 votes

2 stars: 14 votes

3 stars: 46 votes

4 stars: 130 votes

5 stars: 199 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!