Skip to main content

​
Two ways to run JavaScript

Throughout this course, you’ll run JavaScript in two places:

​
Browser console (for quick experiments)

Open any browser, press F12 (or Cmd+Option+J on Mac), and click the Console tab. Type JavaScript directly and press Enter. 
// Try this right now in your browser console:
const greeting = "Hello from the console!";
console.log(greeting); // "Hello from the console!"
The browser console is perfect for testing one-liners, checking syntax, and experimenting with small ideas.

​
VS Code + Node.js (for everything else)

For anything more than a quick test, you’ll write code in VS Code and run it with Node.js. You’ll set this up in the next section.
hello.js
const name = "Sarah";
console.log(`Welcome to JavaScript, ${name}!`);

node hello.js
# Welcome to JavaScript, Sarah!
Use the browser console to quickly verify how something works. Use VS Code + Node.js for writing actual code you want to keep.

​
Where code runs in this course

Different sections run code in different places. This is normal:
WhereUse it for
Browser ConsoleQuick JavaScript experiments and syntax checks
Node.js (node file.js)JavaScript fundamentals practice
Browser + HTML pageDOM and browser API lessons
React + ViteComponents, JSX, state, effects, and full-stack frontend work

​
Code along with every example

Every lesson leads with working code. You’ll get the most out of this course by typing each example yourself — not copying and pasting. Why typing matters:
  • You catch syntax differences between Python and JavaScript faster
  • Your hands learn the patterns (semicolons, curly braces, const)
  • You’ll notice things you’d skip when just reading
Copying and pasting code is the fastest way to learn nothing. Even if it feels slow at first, type it out. After a few lessons, the JavaScript syntax will feel natural.
  1. Read the example once — don’t try to memorize it
  2. Type it yourself — don’t paste
  3. Run it — confirm it works
  4. Break one thing on purpose — change something small and observe the result
  5. Explain it in one sentence — what problem does this concept solve?

​
How each lesson is structured

Every lesson follows the same pattern:
  1. What and why — 2-3 sentences explaining the concept
  2. Code examples — working code you can run immediately
  3. Explanation — brief explanation after the code, not before
  4. Tips and warnings — best practices and common gotchas
  5. Common mistakes — things that trip people up, with fixes
  6. What’s next — link to the next lesson
Code examples show output as inline comments: 
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

​
Learning tips

Don’t memorize syntax. You’ll look things up constantly — every developer does. Focus on understanding what each concept does and when to use it. The syntax will stick through repetition. Break things on purpose. When a code example works, change something and see what breaks. Remove a semicolon. Forget an await. Use = instead of ===. The error messages teach you more than the working code. Skip what you already know. If you already understand variables and data types from another language, skim those lessons and jump to what’s new. The sections are designed to build on each other, but you don’t need to read every word. Use the companion repo. The FastAPI + React repository is a real, working application. Before Section 8, just browse the structure. In Section 8, use it deeply: trace one request from React → API client → FastAPI route → response.

​
How to know you’re ready to move on

You don’t need perfection. Move on when you can say:
  • I can run the example without guessing
  • I can change one part and predict the result
  • I can explain what problem this concept solves
  • I know when I’d use it in a FastAPI + frontend workflow

​
What’s next?

Time to set up your development environment. Let’s install Node.js.

Installing Node.js

Get JavaScript running on your machine