Complete Javascript, Xml, Ajax And React Bootcamp - Hands-On

Master Front-End Web Development Complete with Interactive, Asynchronous Page Updates using JS, Ajax, and React

What you'll learn
Understand the importance of the Document Object Model (DOM)
Learn how to manipulate the DOM
Learn to work with JavaScript Arithmetic Operators and Variables
Learn to work with JavaScript Data Types and Arrays
Understand various types of JavaScript Loops (For-In, For, Do-While, While)
Work with JavaScript Objects and Functions
Learn the importance of Operator Precedence
Work with JavaScript Events
Build Interactive Web Pages using HTML, CSS, JavaScript
Understand the XML Schema
Learn to how to Parse XML Files
Learn the purpose of Asynchronous JavaScript And XML (AJAX)
Learn how to use AJAX Call Functions
Build a Search Suggest Feature using AJAX
Build a Auto Populated Select Menu using AJAX
Explore the Foundations of React
Understand the Tools Required for React Projects
Build an E-Commerce Search Feature using React
Learn to Build a Calculator, Connect-4 Clone, and a Fully Customized E-Commerce Site in 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
Hello and welcome to this exciting new course, where we explore some of the most powerful front-end development languages used in modern web development. In this course you will learn to harness the power of JavaScript, XML, AJAX, and React to build highly interactive web pages from scratch. We start with an introduction into the document object model, followed by an in-depth guide to the essentials of JavaScript. In the JavaScript section you will learn a number of concepts instrumental towards your journey as a developer. This includes working with variables, arithmetic operators, objects, functions, arrays, events, and loops. You will also learn the importance of JavaScript placement, while working with both internal and external JavaScript code components. Students learn the importance of operator precedence when performing simple and complex arithmetic operations. Furthermore, you will have the opportunity to work with conditional statements to perform comparisons between different operations. Once you have a handle on the foundations, we’ll dive into a number of JavaScript development projects where you will have an opportunity to apply your new skills with practical hands-on exercises. This includes building an automated background color changer, and photo gallery complete with mouse overs and image transitions.In the second section of the course we will explore XML and AJAX to demonstrate the power of asynchronous page updates. This means building web components that automatically update on a web page, without having to manually refresh. You will have an opportunity to work with both XML and AJAX in conjunction with JavaScript to build modern web app components such as a search suggest feature, and a pre-populated select menu.Once you have a foundational understanding of JavaScript and AJAX, we will dive into working with React, a powerful JavaScript library used for front-end UI development. The React section 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, de-structuring, 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.

Overview

Section 1: Intro to the Document Object Model

Lecture 1 DOM Introduction

Lecture 2 DOM Manipulation

Section 2: JavaScript Development

Lecture 3 Introduction

Lecture 4 JS Placement

Lecture 5 External JavaScript

Lecture 6 JavaScript Output

Lecture 7 JavaScript InnerHTML

Lecture 8 JavaScript Commenting

Lecture 9 JavaScript Constants

Lecture 10 JavaScript Variables Introduction

Lecture 11 JavaScript Assignment Operator

Lecture 12 JavaScript Arithmetic Operations

Lecture 13 JavaScript Arithmetic Operations Continued

Lecture 14 JavaScript Operator Precedence

Lecture 15 JavaScript Data Types

Lecture 16 JavaScript Objects

Lecture 17 JavaScript Object Output

Lecture 18 JavaScript Strings

Lecture 19 JavaScript String Length

Lecture 20 JavaScript Special Characters

Lecture 21 JavaScript Random Numbers

Lecture 22 JavaScript Min and Max Function

Lecture 23 JavaScript Math Round Function

Lecture 24 JavaScript Arrays

Lecture 25 JavaScript Array Attributes

Lecture 26 JavaScript Arrays - Pop - Push - Shift - Unshift

Lecture 27 JavaScript Changing and Deleting Elements

Lecture 28 JavaScript Splicing an Array

Lecture 29 JavaScript Sorting an Array

Lecture 30 JavaScript Joining Arrays

Lecture 31 JavaScript Conditional Statements

Lecture 32 JavaScript Comparisons

Lecture 33 JavaScript Booleans

Lecture 34 JavaScript For Loops

Lecture 35 JavaScript For-In Loop

Lecture 36 JavaScript While Loops

Lecture 37 JavaScript Do-While Loop

Lecture 38 JavaScript Break and Continue

Lecture 39 JavaScript Functions

Lecture 40 JavaScript Events

Lecture 41 JavaScript Project 1 - BG Color Changer

Lecture 42 JavaScript Project 2 - Photo Gallery

Lecture 43 JavaScript Project 2 - Completion

Section 3: XML | AJAX

Lecture 44 Introduction to XML

Lecture 45 XML Basics

Lecture 46 XML Schema

Lecture 47 XML Parsing

Lecture 48 XML Parsing Continued

Lecture 49 Introduction to AJAX

Lecture 50 AJAX | Search Suggest Tutorial

Lecture 51 AJAX | Database Select Menu Tutorial

Section 4: React

Lecture 52 Skills Required

Lecture 53 What is React?

Section 5: Build a Calculator in React

Lecture 54 Project Overview

Lecture 55 Hello React

Lecture 56 Tools Needed

Lecture 57 Code Pen

Lecture 58 Intro to JSX

Lecture 59 Functional Components in React

Lecture 60 Why Components?

Lecture 61 Intro to Props in React

Lecture 62 React Components, Props and Callbacks

Lecture 63 Building the calculator visuals

Lecture 64 OnClick Events in React

Lecture 65 Passing Parameters in Callback Functions

Lecture 66 Using React State Hook

Lecture 67 Implementing the calculator - Display

Lecture 68 Implementing the calculator - Operators

Lecture 69 Debugging in React

Lecture 70 Project Summary

Section 6: React Project: Build a Connect-4 Clone

Lecture 71 Project Overview

Lecture 72 Tools Needed

Lecture 73 Creating the Game Board

Lecture 74 Game Circle - OnClickEvent

Lecture 75 Passing Props - Destructing - React Children

Lecture 76 Passing Arguments to Click Events

Lecture 77 Inline Styling

Lecture 78 Square to Circle Component

Lecture 79 Global Styling

Lecture 80 Dynamic Styling

Lecture 81 Dynamic Classes

Lecture 82 Handling Callbacks

Lecture 83 Using React State Hook (again)

Lecture 84 Updating the Player Circle

Lecture 85 Initializing the Game Board

Lecture 86 React Key Property

Lecture 87 Styling the Game Board - Header and Footer

Lecture 88 Calculating the Winner

Lecture 89 Displaying the Winner

Lecture 90 Determining a Draw Condition

Lecture 91 React Lifecycle Events

Lecture 92 Initializing the Game

Lecture 93 Suggesting a Move - Implementing a Computer Player

Lecture 94 Smart Computer Player (Basic AI)

Lecture 95 CSS Variables

Lecture 96 Conditional Rendering

Lecture 97 Deploy to Netlify

Lecture 98 Deploy to Surge

Lecture 99 Project Summary

Section 7: React Project: Build an E-Commerce Site in React

Lecture 100 Project Overview

Lecture 101 Scaffolding the Project

Lecture 102 Intro to JSON Server

Lecture 103 Fetch API

Lecture 104 Styling the Store

Lecture 105 Rendering the Categories

Lecture 106 Binding the Products

Lecture 107 Refactor the Fetch API call

Lecture 108 Dealing with errors in Fetch API

Lecture 109 Tidy the Fetch API call

Lecture 110 Styling the Product List

Lecture 111 Installing React Router

Lecture 112 Fixing the Key Warning

Lecture 113 React Router - Detail Page

Lecture 114 Fetch API - Get Product By Id

Lecture 115 Product Description

Lecture 116 Intro to Styled Components

Lecture 117 Styled Components - Product Description

Lecture 118 Dangerously Set HTML (yeah really)

Lecture 119 Refactor the Categories

Lecture 120 Refactor the Layout

Lecture 121 Refactor the Home Page

Lecture 122 Intro to Context in React

Lecture 123 UseContext Hook and UseReducer Hook in React

Lecture 124 Basket Layout

Lecture 125 Implementing the Basket

Lecture 126 Implementing Basket Icons

Lecture 127 Implementing Basket Total

Lecture 128 Finishing the Checkout

Lecture 129 Checkout - Fixing the State

Lecture 130 Implementing the Order Confirmation

Lecture 131 Intro to Local Storage

Lecture 132 Implementing Search Results

Lecture 133 Better Searching with Debouncing

Lecture 134 Validating Forms in React - Part 1

Lecture 135 Validating Forms in React - Part 2

Lecture 136 Validating Forms in React - Part 3

Lecture 137 Validating Forms in React - Part 4

Lecture 138 Project Summary

Students interested in learning JavaScript,Students interested in mastering Responsive Front-End development,Students interested in building Mobile Responsive UI Components,Students interested in learning the Foundations of JavaScript, AJAX, and React,Students interested in building user interfaces using React,Students interested in learning the Foundations of Asynchronous web page components,Students interested in Building Interactive Web Pages