Build a Single Page Application with jQuery & AJAX
4.4 (75 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
555 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Build a Single Page Application with jQuery & AJAX to your Wishlist.

Add to Wishlist

Build a Single Page Application with jQuery & AJAX

Learn one of the coolest techniques on the web and begin building quick, interactive, and attractive websites today!
4.4 (75 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
555 students enrolled
Created by Ian Schoonover
Last updated 3/2017
English
Curiosity Sale
Current price: $10 Original price: $60 Discount: 83% off
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • 14 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create a single page application (SPA) with jQuery and AJAX
  • Implement AJAX into any existing or future web applications
  • Understand how to make HTTP requests (GET, POST, PUT, & DELETE ) with AJAX
  • Have quick access to a coding mentor (me) via the Q&A boards
View Curriculum
Requirements
  • You should have a basic understanding of JavaScript fundamentals
  • Knowing jQuery is a plus, but certainly not required!
  • Have Node and NPM installed (instructions included in the first section of this course)
  • You should know how to build a basic CRUD app with Node's Express (or some other MVC) framework (if you don't, that's fine too, the Express app is already built for you)
  • What you will learn in this course may also be applied to frameworks like Django and Rails or any client-side project that has full access to a REST API
Description

Hi and welcome to Build a Single Page Application with jQuery & AJAX!

So you've learned HTML, CSS, & JavaScript, but now you are wondering what to learn next so you can advance your web development skills.

Well look no further! Join me in this quick, easy-to-follow, step-by-step course and get started learning the ins-and-outs of AJAX with jQuery, today!

What will we be building?

We're going to take a simple CRUD application, made with Node's Express framework, and refactor it into a single page application using jQuery & AJAX (I've already created the Express app for you, so you can jump right into learning AJAX).

You can then use this knowledge to integrate AJAX into any of your current or future web projects.

If you don't know Express or jQuery then you can still follow along, but I would highly recommend learning those technologies beforehand to get the most out of this course. You can learn Express and jQuery (along with a myriad of other modern web technologies) from Colt Steele in his "The Web Developer Bootcamp" course on Udemy.

What makes this course unique?

Coming from a bootcamp background, both as a student and instructor, I know how important it is for each student to get the attention they need in order to be successful. That is why I am always happy to offer additional support to anyone struggling with the topics in my course.

As many of my current students can tell you, I am highly attentive and answer all questions from the Q&A board as quickly as possible (some as quick as a few minutes, but most within 12 - 24 hours).

I am always listening to feedback from my students and constantly updating the course curriculum accordingly. So if you see something that is missing, please do not hesitate to send me a message about it and I will be sure to respond in a timely fashion.

Who is the target audience?
  • This course is for anyone who is interested in building really cool websites!
  • Anyone who wants to learn to build seamless single page applications (SPA) with AJAX
  • Novice to mid-level web developers with a basic understanding of JavaScript
  • Also recommended for anyone who has completed Colt Steele's "The Web Developer Bootcamp" (or any similar course)
Students Who Viewed This Course Also Viewed
Curriculum For This Course
27 Lectures
01:56:10
+
Introduction
3 Lectures 06:34

Welcome to Build a Single Page Application with jQuery & AJAX!

Preview 00:44

Learn what AJAX stands for and how we will be using it in our project by reviewing the before and after versions of the to do list application.

Preview 04:26

Run through this check list to be sure you have everything you need before working through the course lectures in the following sections

Preview 01:24
+
AJAX Basics
6 Lectures 31:29

Learn how to make a simple HTTP GET request with jQuery's AJAX $.get() method and get back JSON data from an API (server)

Preview 09:25

Review what you've just learned and use these resources to explore the topics in more detail

Preview 00:32

Learn how to send data to an API (server) via a POST request with jQuery's AJAX $.post() method

Preview 07:48

Review what you've just learned and use these resources to explore the topics in more detail

Preview 00:14

Learn how to update and delete resources from a database by sending PUT & DELETE requests to an API (server) via jQuery's $.ajax() method

Preview 13:07

Review what you've just learned and use these resources to explore the topics in more detail

Preview 00:23
+
Building a Single Page Application
13 Lectures 48:52

Refactor your to do list application by moving the new to do item form from the new.ejs view to the index.ejs view where it will live along side our list of to do items

Creating a To Do Item - Part 1
08:19

Review what you've just learned and use these resources to explore the topics in more detail

Creating a To Do Item - Part 1 - Resources
00:31

Send form data via a POST request to our API (server) then get back the newly created item and append it to the DOM with jQuery

Creating a To Do Item - Part 2
07:05

Review what you've just learned and use these resources to explore the topics in more detail

Creating a To Do Item - Part 2 - Resources
00:22

Refactor the to do list application by moving the edit form from the edit.ejs view to the index.ejs view where it will be hidden until we toggle it with an edit button

Editing a To Do Item - Part 1
07:04

Review what you've just learned and use these resources to explore the topics in more detail

Editing a To Do Item - Part 1 - Resources
00:27

Note about "Editing a To Do Item - Part 2"
00:49

Send the edit to do item form data via a PUT request to our API (server) then update the DOM with the response data that we get back

Editing a To Do Item - Part 2
08:34

Review what you've just learned and use these resources to explore the topics in more detail

Editing a To Do Item - Part 2 - Resources
00:57

Add a submit listener to the delete button/form and send a DELETE request to the API (server) to remove the item from the database and then remove the item from the DOM after receiving a successful response from the server

Deleting a To Do Item
07:52

Review what you've just learned and use these resources to explore the topics in more detail

Deleting a To Do Item - Resources
00:32

Tidy up the app by refactoring our JavaScript and index.ejs view code

Updating/Refactoring Your Code
05:40

Review what you've just learned and use these resources to explore the topics in more detail

Updating/Refactoring Your Code - Resources
00:37
+
Bonus Content
5 Lectures 30:07

Learn how to transpile the ES6 template literal syntax using gulp and babel.

Transpile Template Literal Syntax with Babel, using Gulp
01:32

Search Functionality
00:09

Refactoring your Express app into a REST API and decoupling the client-side code into its own Microservice

Microservice Refactor
00:42

Decouple the front-end from the back-end by turning your client-side code into its own microservice and the server into an API.

Microservice Refactor - Part 1
12:33

Microservice Refactor - Part 2
15:10
About the Instructor
Ian Schoonover
4.7 Average rating
417 Reviews
3,227 Students
2 Courses
Full Stack Developer and Coding Instructor

Note To Students: I will be out of town and unable to answer questions in the Q&A boards until August 11th

Ian has been enveloped in technology since childhood. By age 13 he was building websites and graphics for his online gaming teams. This hobby eventually turned into a profession.

He has taught web development at several popular bootcamps, including General Assembly, Galvanize, iXperience, DevMountain, and Tech Talent South.

Ian truly enjoys helping others learn to code. Feel free to send him a message if you have questions about changing careers or learning a new skill.