Most JavaScript tutorials are taught by developers. This series is taught by a designer, and it's tailored for designers.
We'll only be covering stuff that's applicable to you as a designer. We'll leave out everything else.
Rather than sit, and try to digest boring definitions, we'll dive right into building an interactive HTML prototype, and have fun learning JS together along the way.
I'm Dave Martin. I'm currently the a product lead at Automattic. Before that, I was interim-CEO of WordPress.com, VP of product at Help Scout, the Creative Director and Growth Lead at Automattic, and prior to that, I was the sole designer for a number of years at Campaign Monitor.
What are you waiting for? Let's get started...
Global Nature of JS
Anonymous Functions
Blocking Nature of JS
Ready Function
Alert Function
Console.log()
Running JS in the Console
Selecting elements in the DOM
Grab the code, and follow along
Focus function
Select function
Grab the value of a field
Intro to functions
Grab the code, and follow along
JavaScript templates
For loops
Append function
Storing data in variables
HTML function
Grab the code, and follow along
Onclick Event
addClass() & removeClass()
toggleClass() & hasClass()
Store Selectors in Vars
Mouseover & Focus Events
Grab the code, and follow along
Variables
Objects
Array Push
Comments
Dynamic Template Data
Random Array Value
Random Numbers
Randomized Usernames
Grab the code, and follow along
Show Modal
CSS Function
Closest Function
Prop Function
Hide Modal
Multiple Elements Selected
Event Object
Stop Propagation
Grab the code, and follow along
JS Templates v2
Update Modal Details
Array Length
Random Card Details
Data Property v2
Grab the code, and follow along