Use code to make a web graphic
What is an SVG?
Introduction Continued
Creating Rectangle and Circles
Creating Lines
Stretch to fit graphics with viewBox
Polygon Element Part 1
Polygon Element Part 2
Polygon Element Part 3
Polygon Element Part 4
viewBox Attributes
viewBox Attributes Continued
Path Elements
Path Elements Continued
Bezier Curves Part 1
Bezier Curves Part 2
Bezier Curves Part 3
Bezier Curves Part 4
Quadratic Bezier Curves
Arcs
Arcs Continued
SVG-edit and Illustrator
Styling Inline SVG
SVG in IMG tag
SVG in Background IMG
Modifying Inline SVG
SVG with Javascript
Adding Trees
Creating Trees
Creating Trees Continued
Remove Button
Adding Other Tree Types
Sorting Trees
Sorting Trees Continued
Refactoring JavaScript
Refactoring JavaScript Continued
Saving as SVG
Saving as SVG Continued
Save as PNG
Downloading Images
Refactoring Part 1
Refactoring Part 2
Refactoring Part 3
Main Functionality
Main Functionality Continued
Testing Cross-Browser Compatibility
Checking DOMcontentload
Styling Part 1
Styling Part 2
Styling Part 3
Modal for PNG Part 1
Modal for PNG Part 2
Modal for PNG Part 3
More JavaScript Refactoring
Styling Modal Further
Adding Size Reset Button
Outro
($1000 value!) Source Code
Code web apps in JavaScript
What Everyone Should Know about React
Quick Win! Example
Top 10 Things You Will Learn
Webpack Version Demystified
React and JSX
Setting Up React and Installing Packages
Alternate Methods of Rendering
Invoking Functions
Setting Styles on Elements
Source Code 01: Setup
Components
Virtual DOM and Classes
ES6 Webpack Dev Server
React Components
Splitting Another Component
React Component Validators
Source Code 02: Components
React States
React States Introduction
Extract Button to Separate Component
Reusing a Component
Split Component into Subcomponents
Creating a Timer
componentWillUnmount
Webpack Hot Reloading
Source Code 03: States
React Event Handling
React Event Handling Introduction
Simple Event Handling
Getting Values
Using Events to Influence App Display
Splitting Function into Components
Source Code 04: Event Handling
React Routers
Props.children
React Router Introduction
Direct URL
Wildcard
IndexRoute
Making a Name Profile
Nested Routes
User Profile
React Router Redirects
Making Parameters Optional
Making Profile and Calling on History
Back Button
activeClassName
Active Inline Styles
Navlinks Components
Source Code 05: React Routers
React Slight Refactoring
Improving Layout
Additional Refactoring
Source Code 06 & 07: Refactoring and Product Component
React Product Components
Making a Web Store Example
Building out the Project
Routing to Products
Rendering Product Profile
Adding Images to Web App
Reusing Component
React CSS
Basic CSS Framework
Organizing Information with CSS Grids
CSS Modules
CSS Styling
Adding Menu to Navigation Bar
Making a Background
Adding Margins to Products
Styling Name List
React CSS Styling Continued
Extract to Separate File
Extract to Separate File (Continued)
Source Code 08: CSS
Redux
Redux Introduction Part 1
Redux Introduction Part 2
Redux Introduction Part 3
Redux Introduction Part 4
Redux Store
Redux Store (Continued)
Redux Store Subscribe
Subscribe (Continued)
Combine Reducers
Source Code 09 & 10: Introduction & Adding Redux
Adding Redux to React
Adding Redux to React Part 1
Adding Redux to React Part 2
Adding Redux to React Part 3
Adding Redux to React Part 4
Delete Names
Babel and Spread Operators
Redux Actions & Refactoring
Action Creators
Profile Page
Dispatch and onEnter
Refactor into Separate Files
Refactor (Continued)
Product Page
Product Profile Page
Source Code 11: Action Creators & Refactor
Redux State in createStore
Initial State in createStore
Initial State Continued
Add Generated Names with Faker
Source Code 12: createStore
Middleware & Async Dispatch
Fake Backend and Middleware
Thunk Middleware
Thunk Checking State
Get Profile Part 1
Get Profile Part 2
Get Profile Part 3
Get Profile Part 4
Get Names Refactor
Add Random Name
Random Name Continued
Source Code 13: Middleware & Async Dispatch
Redux Refactor, Log & Error Handling
Refactor Name Reducers
Using Actions
Error Handling Part 1
Error Handling Part 2
Error Handling Part 3
Source Code 14: Refactor, Log & Error Handling
Products Lists and Profiles
Product List
Product List Continued
Product Profile
Product Profile Continued
Error Handling Refactor
Error Handling Refactor Continued
Source Code 15: Lists & Profiles
Loading Spinner & Error
Loading Spinner
Loading Spinner Continued
Error Component
Source Code 16: Loading Spinner & Error
Adding User-Written Reviews
Adding Reviews
Adding Reviews Continued
Adding Reviews Finale
Adding User Reviews
Refining Review Containers
Refining Review Containers Continued
Refining Review Containers Finale
Source Code 17: User-Written Reviews
Prototype & Refactor Error Handling
Adding Prototypes
Adding Prototypes Continued
Action Types
Refactoring Error Handling
Error Handling Continued
Source Code 18: Prototype & Refactor Errors
Migrate to Webpack 2 & Build Production
Migrating to Webpack 2
Hot Reloading
Hot Reloading Continued
HTML Webpack Plugin
Simple Production Build
Dev Config File Update
Source Code 19: Updating to Webpack 2 & Building
Styling an App
Final Styling Part 1
Final Styling Part 2
Final Styling Part 3
Final Styling Part 4
Final Styling Part 5
Styling NavBar
Styling Product List
Styling Product List Continued
Styling Product List Finale
Styling Product Profile
Styling Profile Continued
Styling Review
Styling Review Continued
Styling Continued
Styling Namelist
Styling Namelist Continued
Styling Namelist Finale
Styling Layout Footer
Footer Continued
General Layout Styling
Layout Styling Continued
Font Work and More Styling
Source Code 20: Styling App
Epilogue
React and Redux Final Thoughts
Please rate this course
Bonus Lecture: Community Newsletter