Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Intermediate Coders: Use JavaScript to Make Web Apps and Art
Rating: 4.4 out of 5(25 ratings)
313 students

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!
Created byMammoth Interactive, John Bura
Last updated 11/2018
English

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

Course content

23 sections • 226 lectures • 24h 40m total length

  • What is an SVG?8:27
  • Introduction Continued6:50
  • Creating Rectangle and Circles4:25
  • Creating Lines3:01
  • Stretch to fit graphics with viewBox7:07
  • Polygon Element Part 13:33

    Use the polygon element to draw shapes by listing points as x,y coordinates, connect them with lines, fill the interior, and apply stroke for triangles and other polygons.

  • Polygon Element Part 22:26
  • Polygon Element Part 33:29
  • Polygon Element Part 44:33
  • viewBox Attributes4:57
  • viewBox Attributes Continued2:24
  • Path Elements7:10
  • Path Elements Continued2:55
  • Bezier Curves Part 17:01
  • Bezier Curves Part 25:12
  • Bezier Curves Part 32:44
  • Bezier Curves Part 46:03

    Learn how to build more complex Bezier curves in SVG using path d, cubic 'C' commands, and successive 's' reflections, then optionally add lines to shape intricate graphics.

  • Quadratic Bezier Curves4:01
  • Arcs8:57

    Explore SVG arcs in JavaScript by using the path 'a' command with rx and ry radii, x-axis rotation, and the large-arc and sweep flags to draw circular or elliptical curves.

  • Arcs Continued5:05
  • SVG-edit and Illustrator6:24

    Explore SVG edit, an online SVG editor, to create simple SVGs, adjust fills and text, and export as SVG or PNG; note that complex shapes are hard to code.

  • Styling Inline SVG8:10
  • SVG in IMG tag6:42

    Explore loading scalable vector graphics in an img tag or as a background, export SVG assets, and control sizing with inline styles to build dynamic, text-heavy logos and web UI.

  • SVG in Background IMG5:15
  • Modifying Inline SVG11:53
  • SVG with Javascript10:20
  • Adding Trees6:17

    Create pine trees by exporting a triangle path, grouping it as pine, and using SVGA's use with xlink to place 20 trees at random coordinates.

  • Creating Trees11:46
  • Creating Trees Continued3:26
  • Remove Button7:04
  • Adding Other Tree Types15:17
  • Sorting Trees8:40
  • Sorting Trees Continued4:31

    Leverage data-y-axis attributes to store y coordinates and access them with element.dataset.yAxis for sorting by y axis, enabling reusable tree rendering.

  • Refactoring JavaScript6:09
  • Refactoring JavaScript Continued7:03
  • Saving as SVG8:52

    Implement client-side saving of SVGA as an SPG file by wiring a save button and file name input, creating a blob, and triggering a browser download.

  • Saving as SVG Continued5:48

    Create and download an SVG file from blob data using object URLs, a dynamic download link, and a delayed revoke of the URL to release resources.

  • Save as PNG7:21

    Learn to save your app art as a png file by drawing on a canvas, creating a downloadable image, and adding a name validation check for unnamed files.

  • Downloading Images8:04
  • Refactoring Part 15:18

    Refactor a function to do one thing, convert to a draft format, return the draft, and trigger a download after arrival, using callback and promise patterns with an SVGA URL.

  • Refactoring Part 26:15
  • Refactoring Part 33:37
  • Main Functionality14:12

    Refactor the main functionality into a tree generator object initialized on dom content loaded, encapsulating variables to create oak and pine trees sorted by y axis on the terrain.

  • Main Functionality Continued3:37
  • Testing Cross-Browser Compatibility13:43
  • Checking DOMcontentload2:39
  • Styling Part 110:12
  • Styling Part 27:13

    Adjust button widths and input alignment for full-width use, then implement media queries to improve mobile responsiveness. Center controls and use flex wrap to reflow with breakpoints.

  • Styling Part 36:10
  • Modal for PNG Part 18:01
  • Modal for PNG Part 26:27
  • Modal for PNG Part 36:18
  • More JavaScript Refactoring6:40
  • Styling Modal Further9:33
  • Adding Size Reset Button8:30
  • Outro1:29
  • ($1000 value!) Source Code0:02

    Get here - source files from the projects of this section.

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

Who this course is for:

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

Report abuse