Complete JavaScript, jQuery and React Bootcamp – Hands-On

Complete JavaScript, jQuery and React Bootcamp - Hands-On

Complete JavaScript, jQuery and React Bootcamp – Hands-On

Learn to Harness the Power of JavaScript, jQuery and React to Build Stunning Front-End User Interfaces.

Language: english

Note: 4.1/5 (45 notes) 16,042 students

Instructor(s): YouAccel Training

Last update: 2022-10-04

What you’ll 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

 

Requirements

  • No programming experience needed. You will learn everything you need to know.
  • Basic Computer Skills
  • Basic Knowledge of HTML & CSS

 

Description

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.


 

Who this course is for

  • 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

 

Course content

  • Intro to the Document Object Model (DOM)
    • DOM Introduction
    • DOM Manipulation
  • JavaScript Development
    • Introduction
    • JS Placement
    • External JavaScript
    • JavaScript Output
    • JavaScript InnerHTML
    • JavaScript Commenting
    • JavaScript Constants
    • JavaScript Variables Introduction
    • JavaScript Assignment Operator
    • JavaScript Arithmetic Operations
    • JavaScript Arithmetic Operations Continued
    • JavaScript Operator Precedence
    • JavaScript Data Types
    • JavaScript Objects
    • JavaScript Object Output
    • JavaScript Strings
    • JavaScript String Length
    • JavaScript Special Characters
    • JavaScript Random Numbers
    • JavaScript Min and Max Function
    • JavaScript Math Round Function
    • JavaScript Arrays
    • JavaScript Array Attributes
    • JavaScript Arrays – Pop – Push – Shift – Unshift
    • JavaScript Changing and Deleting Elements
    • JavaScript Splicing an Array
    • JavaScript Sorting an Array
    • JavaScript Joining Arrays
    • JavaScript Conditional Statements
    • JavaScript Comparisons
    • JavaScript Booleans
    • JavaScript For Loops
    • JavaScript For-In Loop
    • JavaScript While Loops
    • JavaScript Do-While Loop
    • JavaScript Break and Continue
    • JavaScript Functions
    • JavaScript Events
    • JavaScript Project 1 – BG Color Changer
    • JavaScript Project 2 – Photo Gallery
    • JavaScript Project 2 – Completion
  • jQuery Development
    • Introduction to jQuery
    • Embedding jQuery
    • jQuery Syntax and Selector Intro
    • jQuery ID Selector
    • jQuery Class Selector
    • jQuery Other Selectors
    • External jQuery File
    • jQuery Events Intro
    • jQuery Events – mouseenter and mouseleave
    • jQuery Events – mousedown and mouseup
    • jQuery Multiple Event Handlers
    • jQuery Hiding-Showing
    • jQuery Toggle
    • jQuery Fade In-Out
    • jQuery Fade Toggle
    • jQuery Fade To
    • jQuery Slide Down
    • jQuery Slide Up
    • jQuery Slide Toggle
    • jQuery Animate
    • jQuery Animate – Multiple Params
    • jQuery Animate – Relative Values
    • jQuery Animate – Queue Functionality
    • jQuery Stop Method
    • jQuery Callback Functions
    • jQuery Chaining
    • jQuery Draggables
    • jQuery Accordian Menu
    • jQuery Get Content – text and html
    • jQuery Get Content – Val
    • jQuery Get Content – attr
    • jQuery Set Content – text – html – val
    • jQuery Set Attributes – attr
    • jQuery Append and Preprend
    • jQuery – After and Before
    • jQuery Remove and Empty
    • jQuery Filter Remove
    • jQuery Add Class
    • jQuery Remove Class
    • jQuery Toggle Class
  • React Developmepment
    • Skills Required
    • What is React?
  • React Project: Build a Calculator in React
    • Project Overview
    • Hello React
    • Tools Needed
    • Code Pen
    • Intro to JSX
    • Functional Components in React
    • Why Components?
    • Intro to Props in React
    • React Components, Props and Callbacks
    • Building the Calculator Visuals
    • OnClick Events in React
    • Passing Parameters in Callback Functions
    • Using React State Hook
    • Implementing the calculator – Display
    • Implementing the calculator – Operators
    • Debugging in React
    • Project Summary
  • React Project: Build a Connect-4 Clone
    • Project Overview
    • Tools Needed
    • Creating the Game Board
    • Game Circle – OnClickEvent
    • Passing Props – Destructing – React Children
    • Passing Arguments to Click Events
    • Inline Styling
    • Square to Circle Component
    • Global Styling
    • Dynamic Styling
    • Dynamic Classes
    • Handling Callbacks
    • Using React State Hook (again)
    • Updating the Player Circle
    • Initializing the Game Board
    • React Key Property
    • Styling the Game Board – Header and Footer
    • Calculating the Winner
    • Displaying the Winner
    • Determining a Draw Condition
    • React Lifecycle Events
    • Initializing the Game
    • Suggesting a Move – Implementing a Computer Player
    • Smart Computer Player (Basic AI)
    • CSS Variables
    • Conditional Rendering
    • Deploy to Netlify
    • Deploy to Surge
    • Project Summary
  • React Project: Build an E-Commerce Site
    • Project Overview
    • Scaffolding the Project
    • Intro to JSON Server
    • Fetch API
    • Styling the Store
    • Rendering the Categories
    • Binding the Products
    • Refactor the Fetch API call
    • Dealing with errors in Fetch API
    • Tidy the Fetch API call
    • Styling the Product List
    • Installing React Router
    • Fixing the Key Warning
    • React Router – Detail Page
    • Fetch API – Get Product By Id
    • Product Description
    • Intro to Styled Components
    • Styled Components – Product Description
    • Dangerously Set HTML (yeah really)
    • Refactor the Categories
    • Refactor the Layout
    • Refactor the Home Page
    • Intro to Context in React
    • UseContext Hook and UseReducer Hook in React
    • Basket Layout
    • Implementing the Basket
    • Implementing Basket Icons
    • Implementing Basket Total
    • Finishing the Checkout
    • Checkout – Fixing the State
    • Implementing the Order Confirmation
    • Intro to Local Storage
    • Implementing Search Results
    • Better Searching with Debouncing
    • Validating Forms in React – Part 1
    • Validating Forms in React – Part 2
    • Validating Forms in React – Part 3
    • Validating Forms in React – Part 4
    • Project Summary

 

Complete JavaScript, jQuery and React Bootcamp - Hands-OnComplete JavaScript, jQuery and React Bootcamp - Hands-On

Time remaining or 791 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate