Websites & Frontend

JavaScript: Bring it to life

Make your pages think, react and do things.

10 chapters · 36 lessons · free

Try a free lesson Create your free account

What you will learn

1. Hello, JavaScript

Print your first message and learn to read your first error.

Talk to the console Try it console.log(...) prints whatever is inside the brackets. Text goes in quotes.
The missing quote Debug JavaScript shows an error with a line number when it cannot read your code. Read it: it is a clue.

2. Variables & Types

Give names to values. Text, numbers and yes/no.

Boxes with names Exercise let makes a variable you can change. Give variables clear names, like score and not x.
Kinds of values Exercise Strings need quotes, numbers do not, and true/false are their own type. "42" in quotes is text, not a number.
Mixing values into text Exercise Template literals are the easy way to build sentences from values. Change age and the sentence updates.
The value that will not change Debug const for values that never change, let for values that do. The error told you exactly what happened.
Quick check Quiz Name a value, know its type, and put it in a sentence: you can now store and show information.

3. Decisions

Make your code choose with if and else.

Yes or no questions Exercise Comparisons produce booleans. Use === to test equality: a single = means something else.
If this, then that Exercise if and else let a program react differently to different data. That is what makes programs feel smart.
Two conditions at once Exercise && needs both, || needs one. Try setting hasTicket to false and see what happens.
The door that always opens Debug = puts a value in, === asks a question. Inside an if, you almost always want ===.
Quick check Quiz Comparison + if/else + &&/||: the toolbox of every decision in code.

4. Functions

Package code into reusable tools.

Your first function Exercise Functions are how you avoid repeating yourself. Define once, call as often as you like.
Inputs and outputs Exercise Parameters go in, return sends the result out. The caller can print it, store it or use it in more math.
Arrow functions Exercise Arrow functions are everywhere in modern code, especially for short helpers.
The function that gives nothing back Debug If a function prints undefined, check that it uses return.
Quick check Quiz Define, give inputs, return a result. Functions are the building blocks of every program.

5. Arrays, Loops & Objects

Handle lists of things without repeating yourself.

A list of things Exercise Arrays hold lists. push adds, length counts, and array[0] reads the first item. You can change a const array with push, because the array itself stays the same.
Repeat without repeating Exercise A for loop has three parts: where to start, when to stop, and how to step. Change 5 to 1000 and it still works.
Transform and filter Exercise map transforms, filter selects, and both leave the original array untouched. You can chain them.
Things with properties Exercise Arrays are for lists, objects are for describing one thing. Real data is often an array of objects.
One step too far Debug For arrays, the loop pattern is for (let i = 0; i < array.length; i++). Memorize it.
Quick check Quiz Arrays, loops and objects are how programs deal with real data.

6. The DOM

Reach into the page and change it from JavaScript.

Reach into the page Exercise Find an element, then change its properties. Almost everything interactive works this way.
Change how it looks Exercise element.style.property = value changes the look. For bigger changes, it is neater to switch a CSS class instead.
Make new elements Exercise Create, fill, append. This is how apps show lists of messages, products and search results.
Quick check Quiz Find, change, create: the three moves of DOM programming.

7. Events

React to clicks, typing and key presses.

React to a click Exercise Events are how pages become interactive: something happens, your function runs.
React to typing Exercise input.value always holds the current text. Events plus the DOM give you live interfaces.
The button that was not found Debug When you see an error about null, check your selector against the HTML first.
Quick check Quiz Listen for an event, run a function, change the page. That loop powers every web app.

8. Final Project

Build a real interactive app. A to-do list or a color palette maker.

Stage 1: add tasks Exercise Event + read input + create element + append: the core of most interactive pages.
Stage 2: tidy up Exercise Always think about what users might do: empty input, extra spaces. return exits a function early.
Stage 3: mark as done Exercise Variables, decisions, functions, arrays of things, the DOM and events: all in one small app. Next idea: save the tasks with localStorage.

9. JavaScript exam

Ten questions about everything in this course. Pass with 8 right answers.

The JavaScript exam Exam Variables, types, decisions, functions, arrays, loops, the DOM and events: you can make pages come alive.

10. Final project

Bring a shopping-list app to life with JavaScript, add your own touch, and send it for review.

A shopping list that works Final project Selecting elements, listening to events, creating elements and keeping the page in sync: real front-end development.

How the course works

You learn by doing: each lesson explains one idea, then you write real code in the editor and see the result right away. The first lesson is free to try without an account; sign up to save your progress and continue.

Try it
Change working code and see the result immediately.
Exercise
Complete a task. A checklist confirms each requirement as you type.
Debug
Fix code that is broken on purpose, and learn why it failed.
Quiz
Check your understanding at the end of a chapter.