# What You Can Build with JavaScript

JavaScript runs in every web browser and, with Node.js, on computers and servers too, so it powers games, maps, chat apps, browser extensions and the six projects you'll build in this course.

Novice · JavaScript · Web Development · Updated November 1, 2026

## After this lesson you can

- Name things people build with JavaScript and say where each one runs, in a browser or in Node.js
- Tell whether a job on a web page belongs to JavaScript, HTML or CSS

## Key takeaways

- JavaScript is the programming language that makes web pages respond to what you do. Every browser, on every phone and computer, can run it.
- Node.js runs JavaScript outside the browser, on your own computer or on a server, for tools, scripts and the back end of websites.
- On a web page, HTML holds the content, CSS sets how it looks, and JavaScript makes it respond.
- In this course you build six projects, from a Rock, Paper, Scissors game to a typing-speed game online, and then an app of your own.

Think about the last website that did something the moment you touched it: a heart that turned red when you liked a post, a map that slid along as you dragged it, a search box that guessed the word before you finished typing it. None of those pages reloaded. A program written in **JavaScript** was running inside the page, watching what you did and answering right away.

If you've ever wondered "when am I ever going to use this?", this lesson is the answer for the whole course. JavaScript is the one programming language every web browser understands, so it's behind almost every interactive thing you use on a screen. By the end of the course, you'll have built six of those things yourself.

## Things you use every day

JavaScript isn't only for web pages. Here's a small sample of what people build with it:

| What | A real example | Where its JavaScript runs |
|---|---|---|
| Browser games | Word games like Wordle, puzzle games like 2048 | In the browser |
| Maps you can drag | Google Maps, which loads the next piece of map as you drag | In the browser |
| Chat and work apps | The desktop apps for Slack, Discord and VS Code, built with web technology | On your computer, in a browser built into the app |
| Browser extensions | Ad blockers, grammar checkers, coupon finders | In the browser |
| Phone apps | Apps built with React Native, a JavaScript toolkit for phones; Discord's phone app is one | On the phone |
| The back end of websites | The servers that answer when you sign in, search or check out; Netflix and PayPal have both written about moving parts of theirs to Node.js | On a server, in Node.js |

A **programming language** is a way of writing instructions that a computer can follow. JavaScript is one of the most used in the world, and it's the only one that runs in every web browser without installing anything.

![A collage of things built with JavaScript: a word game, a map being dragged, a chat window, a browser extension's popup, a phone app and a server, each labeled with where its code runs](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/e5bf6785af4d4a718a2cb500a3d1eceb.webp)

## Where JavaScript runs: the browser and Node.js

A recipe on its own doesn't make dinner: it needs a kitchen. JavaScript is the same. A program is the recipe, and it needs somewhere to run.

- **The browser.** Every browser (Chrome, Edge, Firefox, Safari) has a **JavaScript engine** built in: the part that reads JavaScript and carries it out. That's why a page's JavaScript works on any phone or computer with no setup.
- **Node.js.** In 2009, a developer took Chrome's JavaScript engine out of the browser and wrapped it in a program of its own, named **Node.js** (people say "Node"). With Node, JavaScript runs on your own computer, in a terminal, or on a server.

The engine plus everything around it that a program can use is called a **JavaScript runtime**. A browser and Node.js are both runtimes. They speak the same language, so this one-line program runs the same way in both:

```javascript
console.log("Hello from The Daily Grind!");
```

```text
Hello from The Daily Grind!
```

`console.log` prints a line of text. You'll write it yourself in *Your First JavaScript Program*, and run it in a browser in *JavaScript on a Web Page*.

## Three jobs on one web page

A web page is like a house:

- **HTML** is the walls and the rooms: the content and what each piece is, such as a heading, a paragraph or a button.
- **CSS** is the paint and the furniture: how it looks, such as colors, fonts and spacing.
- **JavaScript** is the wiring: what happens when you flip a switch, such as a menu that opens or a total that adds up as you shop.

Here's a peek at what that wiring looks like. When someone clicks a coffee shop's button, this code changes the button's words. Don't worry about reading it yet: by Module 4 you'll write code like this yourself.

```javascript
const button = document.querySelector("button");

button.addEventListener("click", () => {
  button.textContent = "Added to your order!";
});
```

This course is about JavaScript. It never assumes you know HTML or CSS: when a project needs a web page, the page comes ready-made in its starter files, and Module 4 teaches the little HTML and CSS that JavaScript works with. If you'd like to go deeper, the HTML in Depth and CSS in Depth courses cover them fully.

## What you'll build in this course

Each module ends with a project, called a **mini-capstone**: something real that puts the whole module to work. Each one is its own project, with its own starter files.

- **Rock, Paper, Scissors** (Module 1). A game in the browser that a friend can play against the computer, with a score and first-to-five wins.

  ![The Rock, Paper, Scissors game in a browser: three big buttons, the computer's pick, and a running score of 3 to 2](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/e0349e417f6d4310bd681fb09b591789.webp)

- **My Music Wrapped** (Module 2). Your own "year in music", like the summaries streaming apps share every December: your top songs and artists, and how many minutes you listened.

  ![A My Music Wrapped page with stat cards: total minutes listened, a top 5 songs list, a top artist and a listening personality](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/de3740b89b5d4fc19281085a0b6673c3.webp)

- **Virtual Pet** (Module 3). A pocket pet that lives in your browser and gets hungry, sleepy and happy, depending on how you look after it.

  ![A virtual pet on screen with meters for hunger, energy and happiness, and buttons to feed it, play with it and put it to sleep](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/5abd2258bc0d467faff9f1e23d415062.webp)

- **Photo Gallery** (Module 4). A gallery of your own photos with filter buttons, a full-screen view you can move through with the arrow keys, and favorites that are still there tomorrow.

  ![A photo gallery of thumbnails with filter buttons above them, and one photo open full screen with a heart marking it as a favorite](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/e48dd7d483784b1daffa25227bed0db9.webp)

- **Trivia Night** (Module 5). A timed trivia game for game night, with real questions loaded from the internet and a countdown on every question.

  ![A trivia question with four answers, a 15-second countdown and the score so far](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/2b07f07624f74e959710d735df3a7688.webp)

- **Typing Speed Game** (Module 6). A typing test that measures your words per minute, keeps a high-score table, and lives online at a link you can send to a friend.

  ![A typing test showing a sentence to type, the letters typed so far, 62 words per minute and a high-score table](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/b2ae5a24e9ce4796971db8f10edd848f.webp)

- **Your own app** (the final capstone). An app you design, such as a recipe box, a habit tracker or a movie watchlist, online and ready to show anyone who asks what you can do.

  ![A gallery of three possible final apps: a recipe box, a habit tracker with a streak chart and a movie watchlist](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/e514511e4a044bb5901572f12e4174a0.webp)

**Try it.** JavaScript is already on your computer, inside your browser. Open any web page in Chrome or Edge, press **F12** (on a Mac, **Cmd+Option+J**), and click the **Console** tab. Click next to the `>` sign, type `3 * 4.75`, and press Enter. The answer, `14.25`, is what three lattes cost at $4.75 each. That was JavaScript, running in your browser. *JavaScript on a Web Page* shows you around the Console properly.

## Check yourself

2 questions to try on the lesson page.

## So what

JavaScript runs in every browser and, with Node.js, everywhere else, so what you learn in this course works on any phone, any computer and any server. Six projects from now, you'll have built things people can play with.

## Key terms

- [JavaScript](https://www.ask-codey.com/glossary/javascript)
- [Node.js](https://www.ask-codey.com/glossary/node-js)
- [JavaScript Engine](https://www.ask-codey.com/glossary/javascript-engine)
- [JavaScript Runtime](https://www.ask-codey.com/glossary/javascript-runtime)

## Cheat sheets

- [What You Can Build with JavaScript](https://www.ask-codey.com/cheat-sheets/javascript-what-you-can-build-cheat-sheet)

Source: https://www.ask-codey.com/lessons/javascript-what-you-can-build