Table of Contents
Making an Image Gallery
-
Setup
Brian introduces the exercise and instructs students to choose photos to add to their image galleries. -
Image Gallery HTML
Brian begins coding the HTML for the image gallery. -
Image Gallery Styling
Brian adds CSS to the image gallery to improve its appearance and structure elements on the page. -
Styling Q&A
Brian fields student questions about the CSS used in the image gallery so far. -
Adding Buttons
Brian codes the navigation buttons into the image gallery. -
Adding Interaction
Brian sets up the file to accept JavaScript and explains how a browser loads style and script resources. -
Next Button
Brian codes the next button to allow the user to progress forward in the image gallery. -
Edge Case
Brian codes the logic to disable the next button when the user reaches the last item in the gallery. -
Previous Button
Brian codes the previous button to work similarly to the next button, going in the opposite direction. -
Image Gallery Q&A
Brian answers a student question about the add method. -
Image Gallery Review
Brian presents ideas about extra functionality that can be added to the image gallery.
Third-Party Libraries
-
Third-Party Libraries
Brian explains how third-party libraries can be a useful tool for developers. -
Swiper Gallery
Brian teaches how to implement the third-party library Swiper by following documentation. -
Swiper Gallery HTML
Brian codes the HTML for the image gallery using the Swiper documentation as a guide, reviewing link and script tag placement. -
Swiper Gallery JavaScript
Brian begins implementing the JavaScript for the Swiper gallery. -
Swiper Gallery Buttons
Brian codes the Swiper buttons and demonstrates some of the capabilities of the newly created gallery. -
Exploring Documentation
Brian explores the Swiper API, adding features to the gallery based on the documentation. -
Popmotion
Brian introduces the Popmotion library and begins to set up the HTML and CSS to implement an animation. -
Implementing Popmotion
Brian implements the spring animation from the Popmotion library. -
Debugging Popmotion
Brian debugs an overlap issue in Chrome. A point is made about how to approach launching code across browsers. -
Popmotion Functions
Brian analyzes the behavior of the code used for a few Popmotion functions. -
Portfolio Interaction Challenge
Brian challenges students to add an element of interactivity to their current portfolios and then makes a change to the Popmotion animation.
AJAX
-
AJAX & JSON
Brian introduces AJAX and JSON and gives a few ways they are commonly used on the web. -
Requesting from an API
Brian demonstrates how to request data from an API, using dog.ceo as an example. -
Viewing the Response
Brian investigates the API response in a browser and defines terminology students may come across. -
Handling the Response
Brian verifies the response from the API, then handles the data using JavaScript.
Dog App
-
Dog App Exercise
Brian introduces the exercise, and shows how to construct an animation using CSS. -
CSS Animations
Brian creates and modifies different types of animations in CSS using the transform and filter properties. -
Loading Spinner
Brian outlines the timing for starting and stopping the display of the loading spinner. -
Populating the Dropdown
Brian populates a dropdown list using an array of all of the breeds returned from the API. -
change Event
Brian walks students through usage of the change event to detect dropdown selections, and lays out a plan fo the rest of the exercise. -
Implementation Review and Q&A
Brian reviews what the finished application will do and fields a question about strings from the audience. -
Fetching Data Solution
Brian live codes the solution for retrieving the correct data from the dog.ceo API, and displaying the result to the page. -
Template Strings Q&A
Brian goes into further detail about how template strings can be used in JavaScript. -
Loading Spinner Solution
Brian codes a spinning dog emoji into the webpage that appears while the dog photo is loading. -
Load Event Solution
Brian modifies the loading spinner functionality to display the spinner until the moment the image has loaded. -
Additional Suggestions and Q&A
Brian offers additional suggestions for the Dog App, discusses semicolon usage, and answers a question about setting styles using JavaScript.