Complete JavaScript, XML, AJAX and React Bootcamp - Hands-On

Focused View

YouAccel Training

12:22:15

8 View

1. Intro to the Document Object Model

1. DOM Introduction.mp4

03:12

2. DOM Manipulation.mp4

01:17

2. JavaScript Development

1. Introduction.mp4

05:41

2. JS Placement.mp4

02:09

3. External JavaScript.mp4

01:50

4. JavaScript Output.mp4

01:41

5. JavaScript InnerHTML.mp4

01:03

6. JavaScript Commenting.mp4

01:48

7. JavaScript Constants.mp4

01:34

8. JavaScript Variables Introduction.mp4

04:31

9. JavaScript Assignment Operator.mp4

01:05

10. JavaScript Arithmetic Operations.mp4

03:43

11. JavaScript Arithmetic Operations Continued.mp4

03:45

12. JavaScript Operator Precedence.mp4

00:58

13. JavaScript Data Types.mp4

01:13

14. JavaScript Objects.mp4

01:42

15. JavaScript Object Output.mp4

01:22

16. JavaScript Strings.mp4

03:11

17. JavaScript String Length.mp4

00:41

18. JavaScript Special Characters.mp4

01:18

19. JavaScript Random Numbers.mp4

00:54

20. JavaScript Min and Max Function.mp4

01:05

21. JavaScript Math Round Function.mp4

01:38

22. JavaScript Arrays.mp4

02:14

23. JavaScript Array Attributes.mp4

01:28

24. JavaScript Arrays - Pop - Push - Shift - Unshift.mp4

02:04

25. JavaScript Changing and Deleting Elements.mp4

01:58

26. JavaScript Splicing an Array.mp4

01:35

27. JavaScript Sorting an Array.mp4

01:24

28. JavaScript Joining Arrays.mp4

01:04

29. JavaScript Conditional Statements.mp4

06:17

30. JavaScript Comparisons.mp4

02:26

31. JavaScript Booleans.mp4

01:21

32. JavaScript For Loops.mp4

02:40

33. JavaScript For-In Loop.mp4

00:46

34. JavaScript While Loops.mp4

02:08

35. JavaScript Do-While Loop.mp4

01:58

36. JavaScript Break and Continue.mp4

01:14

37. JavaScript Functions.mp4

01:53

38. JavaScript Events.mp4

01:18

39. JavaScript Project 1 - BG Color Changer.mp4

02:13

40. JavaScript Project 2 - Photo Gallery.mp4

02:24

41. JavaScript Project 2 - Completion.mp4

02:38

3. XML AJAX

1. Introduction to XML.mp4

04:40

2. XML Basics.mp4

04:22

3. XML Schema.mp4

02:03

4. XML Parsing.mp4

02:00

5. XML Parsing Continued.mp4

03:58

6. Introduction to AJAX.mp4

01:49

7. AJAX Search Suggest Tutorial.mp4

05:27

8. AJAX Database Select Menu Tutorial.mp4

09:18

4. React

1. Skills Required.mp4

00:56

2. What is React.mp4

04:42

5. Build a Calculator in React

1. Project Overview.mp4

00:58

2. Hello React.mp4

06:23

3. Tools Needed.mp4

01:02

4. Code Pen.mp4

04:40

5. Intro to JSX.mp4

04:05

6. Functional Components in React.mp4

05:31

7. Why Components.mp4

03:02

8. Intro to Props in React.mp4

03:51

9. React Components, Props and Callbacks.mp4

04:16

10. Building the calculator visuals.mp4

11:01

11. OnClick Events in React.mp4

05:46

12. Passing Parameters in Callback Functions.mp4

04:28

13. Using React State Hook.mp4

04:42

14. Implementing the calculator - Display.mp4

07:27

15. Implementing the calculator - Operators.mp4

10:11

16. Debugging in React.mp4

05:09

17. Project Summary.mp4

01:49

6. React Project Build a Connect-4 Clone

1. Project Overview.mp4

01:27

2. Tools Needed.mp4

00:53

3. Creating the Game Board.mp4

11:49

4. Game Circle - OnClickEvent.mp4

05:33

5. Passing Props - Destructing - React Children.mp4

06:57

6. Passing Arguments to Click Events.mp4

09:18

7. Inline Styling.mp4

05:39

8. Square to Circle Component.mp4

13:11

9. Global Styling.mp4

06:36

10. Dynamic Styling.mp4

03:52

11. Dynamic Classes.mp4

03:40

12. Handling Callbacks.mp4

05:52

13. Using React State Hook (again).mp4

14:24

14. Updating the Player Circle.mp4

17:05

15. Initializing the Game Board.mp4

08:12

16. React Key Property.mp4

02:04

17. Styling the Game Board - Header and Footer.mp4

11:09

18. Calculating the Winner.mp4

13:30

19. Displaying the Winner.mp4

14:33

20. Determining a Draw Condition.mp4

05:43

21. React Lifecycle Events.mp4

03:16

22. Initializing the Game.mp4

06:15

23. Suggesting a Move - Implementing a Computer Player.mp4

11:55

24. Smart Computer Player (Basic AI).mp4

19:00

25. CSS Variables.mp4

07:06

26. Conditional Rendering.mp4

08:15

27. Deploy to Netlify.mp4

06:00

28. Deploy to Surge.mp4

02:39

29. Project Summary.mp4

02:34

7. React Project Build an E-Commerce Site in React

1. Project Overview.mp4

01:53

2. Scaffolding the Project.mp4

03:57

3. Intro to JSON Server.mp4

04:00

4. Fetch API.mp4

10:33

5. Styling the Store.mp4

04:07

6. Rendering the Categories.mp4

10:48

7. Binding the Products.mp4

08:05

8. Refactor the Fetch API call.mp4

08:49

9. Dealing with errors in Fetch API.mp4

08:25

10. Tidy the Fetch API call.mp4

02:21

11. Styling the Product List.mp4

13:00

12. Installing React Router.mp4

06:07

13. Fixing the Key Warning.mp4

03:56

14. React Router - Detail Page.mp4

12:24

15. Fetch API - Get Product By Id.mp4

08:55

16. Product Description.mp4

05:25

17. Intro to Styled Components.mp4

13:00

18. Styled Components - Product Description.mp4

03:07

19. Dangerously Set HTML (yeah really).mp4

04:07

20. Refactor the Categories.mp4

08:23

21. Refactor the Layout.mp4

05:25

22. Refactor the Home Page.mp4

05:50

23. Intro to Context in React.mp4

08:53

24. UseContext Hook and UseReducer Hook in React.mp4

17:59

25. Basket Layout.mp4

11:11

26. Implementing the Basket.mp4

06:22

27. Implementing Basket Icons.mp4

04:36

28. Implementing Basket Total.mp4

07:50

29. Finishing the Checkout.mp4

01:07

30. Checkout - Fixing the State.mp4

12:31

31. Implementing the Order Confirmation.mp4

06:43

32. Intro to Local Storage.mp4

13:07

33. Implementing Search Results.mp4

14:23

34. Better Searching with Debouncing.mp4

07:36

35. Validating Forms in React - Part 1.mp4

08:47

36. Validating Forms in React - Part 2.mp4

09:15

37. Validating Forms in React - Part 3.mp4

08:11

38. Validating Forms in React - Part 4.mp4

07:55

39. Project Summary.mp4

02:45

Description

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

Who is this for?

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

What You Need to Know?

No programming experience needed. You will learn everything you need to know.

Basic Computer Skills

Basic Knowledge of HTML & CSS

More details

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.

Who this course is for:
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

User Reviews

Rating

average 0

Total votes0

Focused display

YouAccel was founded in 2015 with the mission to be one of the most interactive e-learning platforms on the web. YouAccel is now a leading provider in online training, serving a global audience of over 2 million passionate learners. This includes 6+ Million enrollments, across 50 best-selling courses. YouAccel offers courses across numerous industries from Programming & IT to Business, Marketing, Design, and Productivity.The e-learning experience provided by YouAccel is Dynamic. Each course is streamed in High Definition with corresponding assignments, quizzes, and exams that are delivered and graded electronically. All YouAccel courses are taught by certified educators that have numerous years of work experience in the field for which they provide instruction. The courses can be taken at one's own pace and are offered at several levels including beginner, intermediate and advanced. Taking the experience to a new personalized level, free support is available to all students who register for a course. All courses come with a certificate of completion and no age restrictions apply.YouAccel strongly believes that the future of online learning will be through open community-based initiatives, where everyone’s voice is equally heard. This is exactly what YouAccel strives to achieve – an inclusive environment, where students have control over the direction of course content. YouAccel courses are continuously updated based on feedback from students and engaged community members. YouAccel instructors encourage communication at every step of the learning process. To date, hundreds of contributors around the globe have invested both time and resources, to ensure YouAccel courses meet the highest level of quality. YouAccel instructors are world renowned and many of them have been featured in mainstream publications such as Forbes, Mashable, Entrepreneur, and PBS among others.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.