Intermediate Coders: Use JavaScript to Make Web Apps and Art

Course Curriculum

Chapter 1: Use code to make a web graphic

Lecture 1: What is an SVG?

Lecture 2: Introduction Continued

Lecture 3: Creating Rectangle and Circles

Lecture 4: Creating Lines

Lecture 5: Stretch to fit graphics with viewBox

Lecture 6: Polygon Element Part 1

Lecture 7: Polygon Element Part 2

Lecture 8: Polygon Element Part 3

Lecture 9: Polygon Element Part 4

Lecture 10: viewBox Attributes

Lecture 11: viewBox Attributes Continued

Lecture 12: Path Elements

Lecture 13: Path Elements Continued

Lecture 14: Bezier Curves Part 1

Lecture 15: Bezier Curves Part 2

Lecture 16: Bezier Curves Part 3

Lecture 17: Bezier Curves Part 4

Lecture 18: Quadratic Bezier Curves

Lecture 19: Arcs

Lecture 20: Arcs Continued

Lecture 21: SVG-edit and Illustrator

Lecture 22: Styling Inline SVG

Lecture 23: SVG in IMG tag

Lecture 24: SVG in Background IMG

Lecture 25: Modifying Inline SVG

Lecture 26: SVG with Javascript

Lecture 27: Adding Trees

Lecture 28: Creating Trees

Lecture 29: Creating Trees Continued

Lecture 30: Remove Button

Lecture 31: Adding Other Tree Types

Lecture 32: Sorting Trees

Lecture 33: Sorting Trees Continued

Lecture 34: Refactoring JavaScript

Lecture 35: Refactoring JavaScript Continued

Lecture 36: Saving as SVG

Lecture 37: Saving as SVG Continued

Lecture 38: Save as PNG

Lecture 39: Downloading Images

Lecture 40: Refactoring Part 1

Lecture 41: Refactoring Part 2

Lecture 42: Refactoring Part 3

Lecture 43: Main Functionality

Lecture 44: Main Functionality Continued

Lecture 45: Testing Cross-Browser Compatibility

Lecture 46: Checking DOMcontentload

Lecture 47: Styling Part 1

Lecture 48: Styling Part 2

Lecture 49: Styling Part 3

Lecture 50: Modal for PNG Part 1

Lecture 51: Modal for PNG Part 2

Lecture 52: Modal for PNG Part 3

Lecture 53: More JavaScript Refactoring

Lecture 54: Styling Modal Further

Lecture 55: Adding Size Reset Button

Lecture 56: Outro

Lecture 57: ($1000 value!) Source Code

Chapter 2: Code web apps in JavaScript

Lecture 1: What Everyone Should Know about React

Lecture 2: Quick Win! Example

Lecture 3: Top 10 Things You Will Learn

Lecture 4: Webpack Version Demystified

Chapter 3: React and JSX

Lecture 1: Setting Up React and Installing Packages

Lecture 2: Alternate Methods of Rendering

Lecture 3: Invoking Functions

Lecture 4: Setting Styles on Elements

Lecture 5: Source Code 01: Setup

Chapter 4: Components

Lecture 1: Virtual DOM and Classes

Lecture 2: ES6 Webpack Dev Server

Lecture 3: React Components

Lecture 4: Splitting Another Component

Lecture 5: React Component Validators

Lecture 6: Source Code 02: Components

Chapter 5: React States

Lecture 1: React States Introduction

Lecture 2: Extract Button to Separate Component

Lecture 3: Reusing a Component

Lecture 4: Split Component into Subcomponents

Lecture 5: Creating a Timer

Lecture 6: componentWillUnmount

Lecture 7: Webpack Hot Reloading

Lecture 8: Source Code 03: States

Chapter 6: React Event Handling

Lecture 1: React Event Handling Introduction

Lecture 2: Simple Event Handling

Lecture 3: Getting Values

Lecture 4: Using Events to Influence App Display

Lecture 5: Splitting Function into Components

Lecture 6: Source Code 04: Event Handling

Chapter 7: React Routers

Lecture 1: Props.children

Lecture 2: React Router Introduction

Lecture 3: Direct URL

Lecture 4: Wildcard

Lecture 5: IndexRoute

Lecture 6: Making a Name Profile

Lecture 7: Nested Routes