Intermediate Coders Use Javascript To Make Web Apps And Art

Learn SVG, JSX, jаvascript, 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 jаvascript is highly helpful. To get a fast introduction, enroll in our "Kids Coding -Introduction to HTML, CSS and jаvascript" 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 jаvascriptBuild a single-page app using React RouterCode in ES6 and jаvascriptUse webpack, a bundler for codeTransition from webpack 1.0 to webpack 2.0Write modular CSSUse Redux, a predictable state container for jаvascript 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 jаvascript
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 jаvascript
Lecture 35 Refactoring jаvascript 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 jаvascript 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 jаvascript
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 jаvascript.


Homepage

https://www.udemy.com/course/intermediate-coders-use-javascript-to-make-web-apps-and-art/