Neon
Using JavaScript in Websites
3 hours, 2 minutes
CC
Course Description
Learn how to incorporate JavaScript into your websites by first seeing how to use third-party libraries and then creating two projects: an image carousel that uses JavaScript code, and then an application that retrieves data about dog breeds from an API.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
Close
Course Details
Published: September 8, 2019
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Making an Image Gallery
Section Duration: 40 minutes
-
Brian introduces the exercise and instructs students to choose photos to add to their image galleries. -
Brian begins coding the HTML for the image gallery. -
Brian adds CSS to the image gallery to improve its appearance and structure elements on the page. -
Brian fields student questions about the CSS used in the image gallery so far. -
Brian codes the navigation buttons into the image gallery. -
Brian sets up the file to accept JavaScript and explains how a browser loads style and script resources. -
Brian codes the next button to allow the user to progress forward in the image gallery. -
Brian codes the logic to disable the next button when the user reaches the last item in the gallery. -
Brian codes the previous button to work similarly to the next button, going in the opposite direction. -
Brian answers a student question about the add method. -
Brian presents ideas about extra functionality that can be added to the image gallery.
Third-Party Libraries
Section Duration: 56 minutes
-
Brian explains how third-party libraries can be a useful tool for developers. -
Brian teaches how to implement the third-party library Swiper by following documentation. -
Brian codes the HTML for the image gallery using the Swiper documentation as a guide, reviewing link and script tag placement. -
Brian begins implementing the JavaScript for the Swiper gallery. -
Brian codes the Swiper buttons and demonstrates some of the capabilities of the newly created gallery. -
Brian explores the Swiper API, adding features to the gallery based on the documentation. -
Brian introduces the Popmotion library and begins to set up the HTML and CSS to implement an animation. -
Brian implements the spring animation from the Popmotion library. -
Brian debugs an overlap issue in Chrome. A point is made about how to approach launching code across browsers. -
Brian analyzes the behavior of the code used for a few Popmotion functions. -
Brian challenges students to add an element of interactivity to their current portfolios and then makes a change to the Popmotion animation.
AJAX
Section Duration: 21 minutes
-
Brian introduces AJAX and JSON and gives a few ways they are commonly used on the web. -
Brian demonstrates how to request data from an API, using dog.ceo as an example. -
Brian investigates the API response in a browser and defines terminology students may come across. -
Brian verifies the response from the API, then handles the data using JavaScript.
Dog App
Section Duration: 1 hour, 3 minutes
-
Brian introduces the exercise, and shows how to construct an animation using CSS. -
Brian creates and modifies different types of animations in CSS using the transform and filter properties. -
Brian outlines the timing for starting and stopping the display of the loading spinner. -
Brian populates a dropdown list using an array of all of the breeds returned from the API. -
Brian walks students through usage of the change event to detect dropdown selections, and lays out a plan fo the rest of the exercise. -
Brian reviews what the finished application will do and fields a question about strings from the audience. -
Brian live codes the solution for retrieving the correct data from the dog.ceo API, and displaying the result to the page. -
Brian goes into further detail about how template strings can be used in JavaScript. -
Brian codes a spinning dog emoji into the webpage that appears while the dog photo is loading. -
Brian modifies the loading spinner functionality to display the spinner until the moment the image has loaded. -
Brian offers additional suggestions for the Dog App, discusses semicolon usage, and answers a question about setting styles using JavaScript.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops