Skip to the content

JavaScript tutorial for beginners

Last updated: By Lukas Brandt4 min read

HTML gives a page its structure and CSS gives it its looks. JavaScript is the third piece: the language every browser runs, and the one that makes a page respond when someone clicks, types or waits for data to arrive. This course teaches it from the ground up in eleven short lessons, with nothing more than a browser and a text editor.

Who it is for

You should be able to write a simple HTML page, style it with a few CSS rules and tell a class from an id. If that sounds shaky, spend an evening with our CSS tutorial first, because these lessons lean on selectors and classes from the very first example. No programming experience is assumed. Variables, functions, conditions and loops are explained when they first show up, always through code that changes a real page rather than through abstract puzzles.

The lessons

Work through them in order. Each one builds on the code of the one before, and the last lesson pulls everything together.

  1. Accessing HTML elements: find elements with getElementById, querySelector and querySelectorAll, and keep them in const variables.
  2. Changing CSS properties: write styles with element.style, read them with getComputedStyle, and switch looks with classList.
  3. Handling events: addEventListener, the event object, form submits and the mistakes everyone makes once.
  4. DOMContentLoaded and anonymous functions: when your script runs, what defer changes, and the short functions you hand to listeners.
  5. Functions: declarations, parameters, default values and return, with a small clock speed calculator.
  6. If statements and conditional logic: if, else if and else, the comparison operators, and why === is the safe default.
  7. Arrays: lists of values and the methods you will use every day, from push and includes to map and filter.
  8. Loops: for, for...of, forEach and while, plus break, continue and how to choose.
  9. Relational properties: moving from an element to its parent, children and siblings, and closest for event delegation.
  10. AJAX with XMLHttpRequest: loading JSON in the background, first the classic way, then with fetch and async/await.
  11. Creating a mini quiz: a small project that uses all of the above, with the complete code.

What you need

  • A current desktop browser. Chrome, Edge, Firefox and Safari all run the examples, and there is nothing to install.
  • A plain-text editor for saving .html and .js files. A code editor with syntax colors makes typos easier to spot, but it is not required.
  • The developer console, which is already built into your browser.

Three ways to practice

The developer console

The console is a box in your browser's developer tools where you type a line of JavaScript, press Enter and see the result at once. In Chrome and Edge, press F12, or Ctrl+Shift+J on Windows and Linux (Cmd+Option+J on a Mac) to open the console directly. Firefox uses Ctrl+Shift+K (Cmd+Option+K on a Mac). In Safari, turn on the developer features in the Advanced settings, then press Cmd+Option+C.

Try a few lines right here, on this page:

2 + 3 * 4                                // 14, multiplication first
document.title                           // the text in this browser tab
document.querySelectorAll('h2').length   // how many h2 headings this page has

The console is also where error messages land, with a file name and line number attached. Keep it open whenever you work on a script; most bugs announce themselves there before you notice anything wrong on the page.

The online editor

Our online HTML editor renders the HTML, CSS and JavaScript you type in a frame beside the code, which suits short experiments. Every lesson ends with a "Try it" suggestion written for it. The editor runs your page in a sandboxed frame, so the one exercise that needs a separate file and a server, the JSON request in lesson 10, explains a workaround.

Files on your disk

For anything longer, make a folder with an index.html and an app.js, connect them like this and open the HTML file in your browser:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Practice page</title>
  <script src="app.js" defer></script>
</head>
<body>
  <h1>Practice page</h1>
</body>
</html>

Save the script, then refresh the page to run the new version. Lesson 4 explains what defer does; for now it is enough to know that it makes the script wait until the page has been read.

Parts links can earn us a commission. As an Amazon Associate I earn from qualifying purchases.

How the lessons are written

The code is modern JavaScript as current browsers run it: const and let instead of var, addEventListener instead of onclick attributes, and fetch next to the older XMLHttpRequest. Old habits appear only where you are likely to meet them in someone else's code, with a sentence on why they fell out of use.

Type the examples instead of pasting them when you have the patience. A missing bracket that you find and fix yourself teaches more than a perfect copy, and the console will point you at the line. Lesson 1 starts with the step every script needs before it can do anything else: getting hold of an element on the page.

All lessons

  1. Accessing HTML elements with JavaScript

    Find elements on a page with getElementById, querySelector and querySelectorAll, keep them in const variables and read their text before you change anything.

  2. Changing CSS properties with JavaScript

    Change styles from JavaScript with element.style and camelCase names, read final values with getComputedStyle and switch looks cleanly with classList.

  3. Handling events with addEventListener

    Make a page react to clicks, typing and form submits with addEventListener, the event object and preventDefault, plus the mistakes that trip up beginners.

  4. DOMContentLoaded, defer and anonymous functions

    Run scripts only after the HTML is ready with DOMContentLoaded or a defer script, and write anonymous and arrow functions for listeners you use once.

  5. Functions, parameters and return values

    Write your own JavaScript functions with parameters, default values and return, then build a small clock speed calculator from a bus speed and a multiplier.

  6. If statements and conditional logic

    Make decisions in JavaScript with if, else if and else, compare values with === and the other operators, and learn which values count as truthy or falsy.

  7. JavaScript arrays and their common methods

    Store lists in JavaScript arrays, add and remove items with push, pop and splice, search with includes and find, and reshape lists with map, filter and join.

  8. Loops with for, for...of, forEach and while

    Repeat code with JavaScript loops, from the classic for loop to for...of, forEach and while, with break, continue and a short guide to picking the right one.

  9. Relational properties for parents, children and siblings

    Move around the DOM from any element with parentElement, children, firstElementChild, nextElementSibling and closest, then use them for event delegation.

  10. AJAX with XMLHttpRequest and fetch

    Load JSON without reloading the page, first with the classic XMLHttpRequest and its status codes, then with fetch and async await, plus why file pages fail.

  11. Creating a mini quiz in JavaScript

    Build a three question multiple choice quiz from an array of objects, render it with createElement, check the answers on submit and show the score.