How to learn JavaScript from scratch

Where to write and run code#

The fastest option is the console in the browser's developer tools: press F12 and open the Console tab. For files you need a code editor and a page that loads the script:

<script src="app.js" defer></script>

Install Node.js — you will need it to run JavaScript outside the browser (node app.js), install packages with npm and run tests. Create a Git repository for your exercises right away. If you have not learned HTML yet, the plan in how to learn HTML and CSS from scratch fits well alongside this one.

Stage 1: the language (4–5 weeks)#

Declaring variables with let and const (leave the old var for reading other people's code), data types, strings and template literals, conditions, loops, functions — declarations, arrow functions, default parameters. Then arrays and their methods (map, filter, reduce, find), objects, destructuring, spread.

Spend separate time on the places where JavaScript behaves unexpectedly:

console.log("5" + 3);        // "53" — adding a string concatenates
console.log("5" - 3);        // 2 — subtraction converts to a number
console.log(0.1 + 0.2 === 0.3); // false — floating-point error
console.log(typeof null);    // "object" — a historical quirk of the language

An everyday rule: compare with strict ===, not ==.

Stage 2: the page and events (3–4 weeks)#

The DOM is the tree of page elements your script works with. Finding elements (querySelector), changing text and classes, creating new elements, event handlers (addEventListener) for clicks, input and form submission. Exercises: a click counter, a dark theme toggle, a to-do list where you add and remove items, saving the list to localStorage.

Stage 3: async code and the network (3 weeks)#

The event loop, callbacks, promises, async/await, handling errors with try/catch. Requests to a server with fetch and parsing JSON. Practice: a weather or movie search app on a public API, with a loading indicator and an error message when the network is down.

Stage 4: tooling and the next step#

import/export modules, packages from npm, a bundler (Vite, for example), the ESLint linter, Prettier for formatting. Tests with Vitest or Jest: start with pure functions that take data and return a result without touching the page. After that you can choose a framework — React, Vue or Svelte — or move into backend development with Node.js. Picking up a framework before you are confident in the language itself is a common reason for code that "works, but nobody knows why".

Portfolio projects#

• a to-do list with "all / active / done" filters and saving;
• a quiz with a timer, a score and a results table;
• an app on a public API with search and pagination;
• a small <canvas> game — snake or breakout.

Publish each project on a free static hosting such as GitHub Pages and put the link in the repository README.

Checking yourself#

• Predict what a snippet prints before running it, then check in the console. Wrong predictions make up your list of topics to review.
• Write tests for your data-processing functions and keep them green.
• Turn on ESLint and deal with every warning.
• Open your project on a slow connection (the Network tab can simulate one) and make sure the user sees clear messages.

Step-by-step plan

1. Week 1 — setupBrowser console, an editor, Node.js, a repository for exercises.
2. Weeks 2–6 — the languageVariables, functions, arrays and objects, array methods, type coercion.
3. Weeks 7–10 — DOM and eventsChanging the page, handlers, forms, localStorage; a to-do list.
4. Weeks 11–13 — async codePromises, async/await, fetch, an app on a public API.
5. Weeks 14–16 — tooling and testsModules, npm, a bundler, ESLint, tests; choosing a framework or Node.js.

Check yourself

Sources

• The Modern JavaScript TutorialA free, detailed tutorial with tasks
  free
• MDN Web DocsReference for the language, the DOM and browser APIs
  free
• Node.jsThe JavaScript runtime outside the browser and its documentation
  free
• The Odin ProjectA free full-stack curriculum built around projects
  free

Was this helpful?

Yes No