JavaScript is the part of frontend that most designers try to avoid for as long as possible. Then they need interactivity, or a form that does something, or a component that changes based on state, and avoidance stops being an option.
The resources below are for designers who want to become productive with JavaScript without necessarily becoming developers.
Starting From Zero
javascript.info — javascript.info
The most complete free JavaScript tutorial available. Starts from fundamentals and goes through advanced concepts. Well-structured, with exercises that test understanding rather than just syntax recall. This is the right starting point before anything else.
Eloquent JavaScript — eloquentjavascript.net
Free online book. More conceptual than javascript.info and better for understanding how to think about programming rather than just how to write code.
freeCodeCamp JavaScript Algorithms and Data Structures — freecodecamp.org
Free, structured, with exercises that run in the browser. Good for building baseline fluency through repetition.
Once You Have the Basics
JavaScript30 by Wes Bos — javascript30.com
Thirty projects in thirty days using vanilla JavaScript with no frameworks. Free. The projects are practical enough to build real intuition rather than toy familiarity.
You Don't Know JS — github.com/getify/You-Dont-Know-JS
Free on GitHub. Deep dives into JavaScript's actual behavior rather than surface-level usage. The Scope and Closures book is the most useful for someone trying to move past basic competence.
For React Specifically
react.dev — react.dev
The official documentation, rewritten in 2023. Thinking in React is the most important single piece of writing for understanding how React works conceptually.
Scrimba React Course — scrimba.com/learn/learnreact
Interactive video tutorials where you can edit code directly in the video. Free tier covers the core course.
For Animation and Visual Interaction
GSAP — gsap.com/docs
The standard library for complex web animation. Better than CSS for anything involving sequencing, timelines, or scroll-triggered effects.
Motion (formerly Framer Motion) — motion.dev
Animation library for React. Declarative syntax that fits naturally into component-based thinking.
Three.js Journey — threejs-journey.com
Paid course for learning Three.js and WebGL. The most structured path into 3D and interactive experiences on the web.
References Worth Keeping Open
Can I Use — caniuse.com
Browser compatibility tables for web features. Check here before using any newer JavaScript or CSS feature in production.
Devhints — devhints.io
Cheat sheets for languages, frameworks, and tools. The JavaScript and ES6 sheets are useful to have bookmarked for quick syntax reference.
What to Build First
A working to-do list without a tutorial. Not because to-do lists are interesting, but because building one from scratch forces you to understand state, user input, DOM manipulation, and data persistence, all in one small project.
After that, build something you actually want to use. The motivation gap between tutorial projects and real projects is where most people stop. Build the thing you would actually use.
Discussion
Loading comments...