Intermediate Coders: Use Javascript To Make Web Apps And Art

Learn SVG, JSX, JavaScript, React Router, ES6, webpack, CSS, Redux, refactoring & more in this epic web development!

What you'll learn
Learn to create simple vector art with code!
Gain hands-on training with real projects
Build beautiful, well-functioning web apps
And so much more
Requirements
Basic understanding of HTML, CSS and JavaScript is highly helpful. To get a fast introduction, enroll in our "Kids Coding -Introduction to HTML, CSS and JavaScript" course.
An Internet connection to follow along in the free text editor JS Bin.
No SVG knowledge is required.
Illustrator CC or another graphic editing software
Modern web browser
This course was recorded on a Mac computer, but you can use a PC.
Description
"This guy knows his stuff. Really good course. Has a ton of content! I watch this all the time. His SVG knowledge is impressive. I also liked the React stuff." - Daniel S.Do you want to take the next steps in your web development career or programming hobby? This course is for you. This course is project-based so you will not be learning a bunch of useless coding practices. At the end of this course you will have real world apps to use in your portfolio. We feel that project based training content is the best way to get from A to B. Taking this course means that you learn practical, employable skills immediately.In Part 1, you will learn hands-on how to create SVG animations in the browser using HTML & CSS. Together with your expert instructor Chris Veillette of Mammoth Interactive, you will:Recognize why you should use SVGs for web development.Create SVG shapes.Embed SVG on a web page.Make a landscape scene entirely with code!In Part 2, you will master the fundamentals of React and Redux by developing apps. You will learn how to do all of the following, and more!Lay out a web app in a logical wayUse JSX, a pre-processor that adds XML syntax to JavaScriptBuild a single-page app using React RouterCode in ES6 and JavaScriptUse webpack, a bundler for codeTransition from webpack 1.0 to webpack 2.0Write modular CSSUse Redux, a predictable state container for JavaScript appsRefactor code (alter code to make it simpler and more efficient)Fix bugs and handle errorsThe beauty of taking an online course like this is the ability to replay any of the lectures at any time. There is no time limit or final tests. You get to learn at your own pace with a practical model method of learning.One of the best features is that you can watch the courses at any speed you want. This means you can speed up the or slow down the video if you want to.You can use the projects you build in this course to add to your LinkedIn profile. Give your portfolio fuel to take your career to the next level.Learning how to code is a great way to jump in a new career or enhance your current career. Coding is the new math and learning how to code will propel you forward for any situation. Learn it today and get a head start for tomorrow. People who can master technology will rule the future.

Overview

Section 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

Section 2: Code web apps in JavaScript

Lecture 58 What Everyone Should Know about React

Lecture 59 Quick Win! Example

Lecture 60 Top 10 Things You Will Learn

Lecture 61 Webpack Version Demystified

Section 3: React and JSX

Lecture 62 Setting Up React and Installing Packages

Lecture 63 Alternate Methods of Rendering

Lecture 64 Invoking Functions

Lecture 65 Setting Styles on Elements

Lecture 66 Source Code 01: Setup

Section 4: Components

Lecture 67 Virtual DOM and Classes

Lecture 68 ES6 Webpack Dev Server

Lecture 69 React Components

Lecture 70 Splitting Another Component

Lecture 71 React Component Validators

Lecture 72 Source Code 02: Components

Section 5: React States

Lecture 73 React States Introduction

Lecture 74 Extract Button to Separate Component

Lecture 75 Reusing a Component

Lecture 76 Split Component into Subcomponents

Lecture 77 Creating a Timer

Lecture 78 componentWillUnmount

Lecture 79 Webpack Hot Reloading

Lecture 80 Source Code 03: States

Section 6: React Event Handling

Lecture 81 React Event Handling Introduction

Lecture 82 Simple Event Handling

Lecture 83 Getting Values

Lecture 84 Using Events to Influence App Display

Lecture 85 Splitting Function into Components

Lecture 86 Source Code 04: Event Handling

Section 7: React Routers

Lecture 87 Props.children

Lecture 88 React Router Introduction

Lecture 89 Direct URL

Lecture 90 Wildcard

Lecture 91 IndexRoute

Lecture 92 Making a Name Profile

Lecture 93 Nested Routes

Lecture 94 User Profile

Lecture 95 React Router Redirects

Lecture 96 Making Parameters Optional

Lecture 97 Making Profile and Calling on History

Lecture 98 Back Button

Lecture 99 activeClassName

Lecture 100 Active Inline Styles

Lecture 101 Navlinks Components

Lecture 102 Source Code 05: React Routers

Section 8: React Slight Refactoring

Lecture 103 Improving Layout

Lecture 104 Additional Refactoring

Lecture 105 Source Code 06 & 07: Refactoring and Product Component

Section 9: React Product Components

Lecture 106 Making a Web Store Example

Lecture 107 Building out the Project

Lecture 108 Routing to Products

Lecture 109 Rendering Product Profile

Lecture 110 Adding Images to Web App

Lecture 111 Reusing Component

Section 10: React CSS

Lecture 112 Basic CSS Framework

Lecture 113 Organizing Information with CSS Grids

Lecture 114 CSS Modules

Lecture 115 CSS Styling

Lecture 116 Adding Menu to Navigation Bar

Lecture 117 Making a Background

Lecture 118 Adding Margins to Products

Lecture 119 Styling Name List

Lecture 120 React CSS Styling Continued

Lecture 121 Extract to Separate File

Lecture 122 Extract to Separate File (Continued)

Lecture 123 Source Code 08: CSS

Section 11: Redux

Lecture 124 Redux Introduction Part 1

Lecture 125 Redux Introduction Part 2

Lecture 126 Redux Introduction Part 3

Lecture 127 Redux Introduction Part 4

Lecture 128 Redux Store

Lecture 129 Redux Store (Continued)

Lecture 130 Redux Store Subscribe

Lecture 131 Subscribe (Continued)

Lecture 132 Combine Reducers

Lecture 133 Source Code 09 & 10: Introduction & Adding Redux

Section 12: Adding Redux to React

Lecture 134 Adding Redux to React Part 1

Lecture 135 Adding Redux to React Part 2

Lecture 136 Adding Redux to React Part 3

Lecture 137 Adding Redux to React Part 4

Lecture 138 Delete Names

Lecture 139 Babel and Spread Operators

Section 13: Redux Actions & Refactoring

Lecture 140 Action Creators

Lecture 141 Profile Page

Lecture 142 Dispatch and onEnter

Lecture 143 Refactor into Separate Files

Lecture 144 Refactor (Continued)

Lecture 145 Product Page

Lecture 146 Product Profile Page

Lecture 147 Source Code 11: Action Creators & Refactor

Section 14: Redux State in createStore

Lecture 148 Initial State in createStore

Lecture 149 Initial State Continued

Lecture 150 Add Generated Names with Faker

Lecture 151 Source Code 12: createStore

Section 15: Middleware & Async Dispatch

Lecture 152 Fake Backend and Middleware

Lecture 153 Thunk Middleware

Lecture 154 Thunk Checking State

Lecture 155 Get Profile Part 1

Lecture 156 Get Profile Part 2

Lecture 157 Get Profile Part 3

Lecture 158 Get Profile Part 4

Lecture 159 Get Names Refactor

Lecture 160 Add Random Name

Lecture 161 Random Name Continued

Lecture 162 Source Code 13: Middleware & Async Dispatch

Section 16: Redux Refactor, Log & Error Handling

Lecture 163 Refactor Name Reducers

Lecture 164 Using Actions

Lecture 165 Error Handling Part 1

Lecture 166 Error Handling Part 2

Lecture 167 Error Handling Part 3

Lecture 168 Source Code 14: Refactor, Log & Error Handling

Section 17: Products Lists and Profiles

Lecture 169 Product List

Lecture 170 Product List Continued

Lecture 171 Product Profile

Lecture 172 Product Profile Continued

Lecture 173 Error Handling Refactor

Lecture 174 Error Handling Refactor Continued

Lecture 175 Source Code 15: Lists & Profiles

Section 18: Loading Spinner & Error

Lecture 176 Loading Spinner

Lecture 177 Loading Spinner Continued

Lecture 178 Error Component

Lecture 179 Source Code 16: Loading Spinner & Error

Section 19: Adding User-Written Reviews

Lecture 180 Adding Reviews

Lecture 181 Adding Reviews Continued

Lecture 182 Adding Reviews Finale

Lecture 183 Adding User Reviews

Lecture 184 Refining Review Containers

Lecture 185 Refining Review Containers Continued

Lecture 186 Refining Review Containers Finale

Lecture 187 Source Code 17: User-Written Reviews

Section 20: Prototype & Refactor Error Handling

Lecture 188 Adding Prototypes

Lecture 189 Adding Prototypes Continued

Lecture 190 Action Types

Lecture 191 Refactoring Error Handling

Lecture 192 Error Handling Continued

Lecture 193 Source Code 18: Prototype & Refactor Errors

Section 21: Migrate to Webpack 2 & Build Production

Lecture 194 Migrating to Webpack 2

Lecture 195 Hot Reloading

Lecture 196 Hot Reloading Continued

Lecture 197 HTML Webpack Plugin

Lecture 198 Simple Production Build

Lecture 199 Dev Config File Update

Lecture 200 Source Code 19: Updating to Webpack 2 & Building

Section 22: Styling an App

Lecture 201 Final Styling Part 1

Lecture 202 Final Styling Part 2

Lecture 203 Final Styling Part 3

Lecture 204 Final Styling Part 4

Lecture 205 Final Styling Part 5

Lecture 206 Styling NavBar

Lecture 207 Styling Product List

Lecture 208 Styling Product List Continued

Lecture 209 Styling Product List Finale

Lecture 210 Styling Product Profile

Lecture 211 Styling Profile Continued

Lecture 212 Styling Review

Lecture 213 Styling Review Continued

Lecture 214 Styling Continued

Lecture 215 Styling Namelist

Lecture 216 Styling Namelist Continued

Lecture 217 Styling Namelist Finale

Lecture 218 Styling Layout Footer

Lecture 219 Footer Continued

Lecture 220 General Layout Styling

Lecture 221 Layout Styling Continued

Lecture 222 Font Work and More Styling

Lecture 223 Source Code 20: Styling App

Section 23: Epilogue

Lecture 224 React and Redux Final Thoughts

Lecture 225 Please rate this course

Lecture 226 Bonus Lecture: Community Newsletter

Anyone who wants to make art for web pages using code!,Developers who want to learn about React and Redux.,Coders who want to learn to build web apps.,Coders who want to learn JavaScript.