Learn JavaScript: the beginner’s guide (free course, 30-day plan)

JavaScript is the only programming language that every browser runs natively. Learning JavaScript therefore means learning to bring a web page to life: reacting to a click, validating a form, loading data without reloading the page. This guide is the front door to Gekkode’s JavaScript tutorial: it tells you where to start, in what order to move forward, how much time to allow and how to check that you are making progress.

It is written for complete beginners as well as for anyone who has already copied and pasted JavaScript without really understanding it. No programming background is needed. The course is free, and every chapter ends with an exercise.

Why learn JavaScript today

Three practical reasons, with no sales pitch:

• It is everywhere on the web. A brochure site, an online shop, a business application: as soon as a page does anything more than display text, there is JavaScript behind it. It is the language of the browser, and the browser is the most widespread runtime environment in the world.
• It does not stop at the browser. With Node.js, the same language writes servers, command-line tools and automation scripts. You do not learn one language for the front end and another for everything else.
• The learning loop is immediate. You write three lines, you reload the page, you see the result. No compilation, no complicated installation: a text file and a browser are enough to get started.

Code assistants have changed one thing: they write passable JavaScript quickly. They have changed nothing about the fact that you need to understand that code to fix it, review it and make it evolve. The basics remain the best investment.

What you need to know before you start

The bare minimum, nothing more:

• A little HTML and CSS. Knowing what a tag, an attribute and a class are. If you do not, one day on the basics of HTML is enough to follow this course; you do not need to master page layout.
• A code editor. Visual Studio Code is free and highlights JavaScript with no configuration. Any plain-text editor works too.
• A recent browser with its developer console (the F12 key). The console is your first tool: it shows results and, above all, errors, with the number of the offending line.

You do not need to install Node.js, npm or a framework for the twelve chapters. Those tools come once you already know how to program.

The course step by step: twelve chapters in order

The programme follows a deliberate progression: each chapter uses only what the previous ones introduced. Allow twenty to forty minutes per chapter, exercise included.

1. Introduction to JavaScript: where to put a script in an HTML page, the script tag, a first “Hello World” and the console.
2. Variables and data types: let, const, strings, numbers, booleans, undefined and null.
3. Operators and expressions: arithmetic, comparison (=== rather than ==), logic, concatenation and template literals.
4. Conditions: if, else, switch and the ternary operator.
5. Loops: for, while, for…of and forEach on arrays.
6. Functions: declaration, parameters, return value, arrow functions and variable scope.
7. Objects: create, read, change, loop over and delete properties.
8. The Math object: rounding, random numbers, minimum and maximum.
9. Manipulating the HTML page: select an element, change its text and its classes, create and remove elements (the DOM).
10. Events: react to a click, to typing, to a form being submitted, with addEventListener.
11. ES6 modules: split the code into files with import and export.
12. Final project: a guessing game: everything above, assembled into a small game you can play in the browser.

The full table of contents, with your progress, stays visible in the left-hand column of every chapter.

Your first JavaScript program, with comments

Before chapter 1, here is what a complete JavaScript program looks like. Do not try to understand everything: just spot the five ideas the course is going to detail.

// 1. Data: an array of objects
const panier = [
  { nom: 'Clavier', prix: 49.9, quantite: 1 },
  { nom: 'Souris', prix: 19.5, quantite: 2 },
];

// 2. A function: a reusable calculation
function totalHT(articles) {
  let total = 0;
  for (const article of articles) {        // 3. A loop
    total += article.prix * article.quantite;
  }
  return total;
}

// 4. A condition
const ht = totalHT(panier);
const fraisDePort = ht >= 50 ? 0 : 4.9;

// 5. Some output
console.log(`Total HT : ${ht.toFixed(2)} €`);
console.log(`Frais de port : ${fraisDePort.toFixed(2)} €`);
console.log(`Total TTC : ${((ht + fraisDePort) * 1.2).toFixed(2)} €`);

Output in the console:

Total HT : 88.90 €
Frais de port : 0.00 €
Total TTC : 106.68 €

Data, a function, a loop, a condition, some output: every program, however huge, is made of these building blocks. Chapter 2 starts with the first one, variables.

A thirty-day learning plan

This plan assumes one hour a day, five days a week. Nothing about it is compulsory: it is a pace that leaves time to practise without forgetting what you saw the day before.

Two rules make this plan work: redo the previous chapter’s exercise before opening the next one, and write every example yourself rather than copying it.

Five exercises for beginners

To do in the browser console or in an exercices.js file. The solutions only use chapters 1 to 7.

1. Converter: write a function celsiusVersFahrenheit(c) that returns the converted temperature (formula: c * 9 / 5 + 32). Check that celsiusVersFahrenheit(100) returns 212.
2. Odd or even: for every number from 1 to 20, print “even” or “odd” in the console. Hint: the % operator gives the remainder of a division.
3. The largest: write maximum(tableau), which returns the largest value in an array of numbers, without using Math.max.
4. Counting vowels: write compterVoyelles(texte); “JavaScript” must give 3.
5. Address book: create an array of three { nom, ville } objects, then print one sentence per person with a template literal.

Solutions to exercises 1, 3 and 4:

function celsiusVersFahrenheit(c) {
  return c * 9 / 5 + 32;
}
console.log(celsiusVersFahrenheit(100)); // 212

function maximum(tableau) {
  let max = tableau[0];
  for (const valeur of tableau) {
    if (valeur > max) {
      max = valeur;
    }
  }
  return max;
}
console.log(maximum([3, 17, 8, 42, 5])); // 42

function compterVoyelles(texte) {
  let total = 0;
  for (const lettre of texte.toLowerCase()) {
    if ('aeiouy'.includes(lettre)) {
      total += 1;
    }
  }
  return total;
}
console.log(compterVoyelles('JavaScript')); // 3

If exercise 3 put up a fight, that is normal: it asks you to keep a value in memory during a loop. That is exactly the skill chapter 5 builds.

How long does it take to learn JavaScript?

The question comes up every time someone starts, and the honest answer depends on what you call “learning”:

• Reading and changing an existing script: one to two weeks at an hour a day.
• Writing a small interactive program on your own (a form, a calculator, a simple game): three to four weeks, which is the goal of this course.
• Being self-sufficient on a real project, with remote data and a framework: several months of regular practice.

What makes the difference is not the number of hours but how regular they are. Thirty minutes every day beats four hours on a Sunday.

JavaScript, Python or TypeScript?

Python is easier to read at the very beginning and excellent for data and scripts. But if your goal is the web, there is no way around JavaScript: no other language runs in the browser. The two are not mutually exclusive; start with the one that matches what you want to build.

TypeScript is JavaScript with types. You learn it afterwards, not instead: everything you will see here still holds in TypeScript, and types make far more sense once you have run into the errors they prevent.

Free resources to carry on

• The MDN documentation (French edition): the reference to keep open; every method is explained there with examples.
• javascript.info, in English: the most complete online course, useful as soon as you want to dig into a point.
• Gekkode’s JavaScript articles for what comes next: classes, bind, call and apply, converting a string to a number, validating an email address with a regex.
• And once the language is under your belt, the Vue 3 tutorial to discover a framework.

For a working method, the article 5 tips for learning effectively rounds off this guide.

Frequently asked questions

Do I need to install anything? No. A text editor and a browser are enough for the twelve chapters.

Are Java and JavaScript the same thing? No. They are two unrelated languages; the name is a historical accident from 1995.

Can you learn JavaScript without knowing HTML? Chapters 1 to 8 need almost no HTML. From chapter 9 onwards, being able to read an HTML page becomes necessary.

Which browser should I use? A recent version of Chrome, Firefox, Edge or Safari. They all have a developer console and run the modern JavaScript used in this course.

Where do I start? With chapter 1, Introduction to JavaScript: twenty minutes to display your first message in a web page.