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!

4.70 (23 reviews)
Udemy
platform
English
language
Web Development
category
305
students
24.5 hours
content
Nov 2018
last update
$49.99
regular price

What you will 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

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 way

  • Use JSX, a pre-processor that adds XML syntax to JavaScript

  • Build a single-page app using React Router

  • Code in ES6 and JavaScript

  • Use webpack, a bundler for code

  • Transition from webpack 1.0 to webpack 2.0

  • Write modular CSS

  • Use Redux, a predictable state container for JavaScript apps

  • Refactor code (alter code to make it simpler and more efficient)

  • Fix bugs and handle errors

The 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.

Content

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

Screenshots

Intermediate Coders: Use JavaScript to Make Web Apps and Art - Screenshot_01Intermediate Coders: Use JavaScript to Make Web Apps and Art - Screenshot_02Intermediate Coders: Use JavaScript to Make Web Apps and Art - Screenshot_03Intermediate Coders: Use JavaScript to Make Web Apps and Art - Screenshot_04

Reviews

Gregory
July 8, 2020
Why is the packaging so extreme with this series? The intro plays dramatic orchestra music at top volume, then shows a starfield going into warp drive. Then the outro is a figure triumphantly scaling a mountain. It's way too much, super annoying. The instructor and the videos themselves are actually great. Calm, clear, detailed. Thanks for making this series. Just please ask the good people doing promo at Mammoth to chill the f out.
Bella
November 23, 2019
Perhaps, ask this question later in the course. Ideally halfway through, not right after the introduction.
Richard
June 25, 2019
The intron and ending is unnecessary and too loud. The course is very repetitive put that's fine, I can advance forward as I need. Better to be too thorough than not enough.
Daniel
February 8, 2019
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. Again, there is a ton of stuff in this course. Bypass the other ones, just buy this. Do I have to watch the intro every time though? lol

Charts

Price

Intermediate Coders: Use JavaScript to Make Web Apps and Art - Price chart

Rating

Intermediate Coders: Use JavaScript to Make Web Apps and Art - Ratings chart

Enrollment distribution

Intermediate Coders: Use JavaScript to Make Web Apps and Art - Distribution chart
1633008
udemy ID
4/6/2018
course created date
6/6/2021
course indexed date
Bot
course submited by