Projects with JSON and APIs
4.5 (50 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.
1,587 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Projects with JSON and APIs to your Wishlist.

Add to Wishlist

Projects with JSON and APIs

Learn how to access JSON data through APIs and then manipulate the data in your application.
4.5 (50 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.
1,587 students enrolled
Created by Komar Academy
Last updated 7/2017
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Integrate Google Maps into your projects
  • Style your Google Maps with the MapOptions property
  • Understand how JSON data and APIs work
  • Fetch and manipulate JSON data from APIs
  • Create projects on CodePen
View Curriculum
  • Nothing, just have a willingness to learn.

In this course we will take a step-by-step approach to learning how to handle JSON data, how to connect to APIs, and how to work with Google Maps. We will learn how to create a CodePen account and cover the basic set up of the apps and then we will dive right into coding our applications! We will start with creating basic HTML elements and then move to using the jQuery getJSON() method to grab JSON data. In the final lectures, we will build a "Location App" that uses the Google Maps API. Along the way you will learn several important topics, including: 

  • HTML and CSS
  • for loops
  • objects
  • JSON
  • APIs
  • Google Maps API
  • jQuery

And much more!

There are only two things that you need to take this course: an internet connection and a computer. There is no need to download any paid software or set up complex development environments.

The course is about 2 hours long and is structured in a step-by-step manner, from simple to more difficult concepts. We build the various applications from the ground up and cover each new feature one at a time - so you will never feel overwhelmed with the content.

With the knowledge gained in this course you can move forward and build more complex applications, and use the main "Location App" you created at the end of this course to add to your portfolio.

I hope to hear from you soon, and look forward to having you in my course!

Who is the target audience?
  • Beginners in HTML, CSS and JavaScript
  • Students with very limited knowledge of JSON and APIs
Compare to Other JSON Courses
Curriculum For This Course
24 Lectures
Course Introduction
2 Lectures 00:47

Overview of the course learning goals.

Preview 00:28
Getting Started with CodePen
2 Lectures 07:12

Sign up for a free account on the website.

Preview 02:30

Get comfortable using the editor/ interface. This is where we will be spending most of our time.

Preview 04:42
Creating Your Location App
2 Lectures 10:41

Create some very basic HTML structure for our app.

Preview 07:05

Add some very basic CSS styling to our app.

Adding Some CSS
10 Lectures 48:53

Learn what an API is.

What is an API

Some students have been running into issues with their content not loading, even though they followed my lectures and their code looks identical to mine. In this video I explain how to fix a common issue you may run into in the future projects.

A Common Problem You May Face

Create a simple app that utilizes an API.

Sunset API Part 1

Finish working on the app from the previous lecture.

Sunset API Part 2

Learn more about the jQuery.getJSON() method and use it to build another simple app.

jQuery getJSON Method

Finish the app that we started in the previous lecture.

Continuing with Birds API

Use the Reddit API to fetch some photos and display them in our app.

Reddit API Part 1

Continuation of the Reddit API app.

Reddit API Part 2

Some links to help you understand how flexbox works.


We'll go over the general aspects of an API and wrap up this section.

APIs Overview
Finishing our App
6 Lectures 42:44

We will use an API to grab the users IP address.

Using API to get IP

We will use a custom CSS library to include a nice flag for the user in our app.

Getting the Country Flag

The main highlight of our project, the Google Map will be added.

Adding the Google Map

We will add the API key for our Google Map.

Adding the API Key

Let's add some nice stylistic touches to make it look better.

Styling our App

Finish up our app!

Final Touches
2 Lectures 03:48

Back in lecture 6 I told you I would show you how to include Google Fonts in your projects, so here it is. It's really quite simple and easy to implement.

Bonus: Adding Google Fonts

Final Lecture
About the Instructor
Komar Academy
4.4 Average rating
587 Reviews
20,392 Students
2 Courses
Learn the best of web development and technology online

Based in Ontario, Canada, we are a group of professionals dedicated to creating high quality web development courses. Our content is created with the student in mind.  We take care in ensuring the content we create is understandable, relevant and aimed at taking you from novice to expert.

Self-education is the most prominent type of education there is. It shows that you are motivated and willing to explore outside the traditional boundaries of a brick-and-mortar classroom. Anyone serious about learning more about a specific topic would be a fool not to utilize the vast array of information found on the web.