In the previous lesson you saw what JavaScript is and where it runs. Now comes the practical part: preparing your workstation. A good environment does not make you a better programmer, but a bad one will cost you hours on problems that have nothing to do with programming. In this lesson you will install and configure the four tools you will use throughout the course —browser, editor, Node.js and version control—, you will learn how to organize the folders of a web project, and you will end up with the skeleton of Nómada Tasks, the Taller Nómada application, up and running.

1. What you need and why
2. The browser and its developer tools
3. The code editor: Visual Studio Code
4. Live Server: seeing changes instantly
5. Node.js and npm
6. The folder structure of a web project
7. Creating the Nómada Tasks skeleton
8. Git: an introductory note on version control
9. Common Mistakes and Tips
10. Exercises
11. Conclusion

These are the pieces of the environment and the role each one plays:

Good news: everything is free and cross-platform (Windows, macOS and Linux). You do not need a powerful computer.

Any modern browser will do. In this course the examples and menu descriptions use Google Chrome, but Firefox and Edge have equivalent tools with almost identical names.

The DevTools (developer tools) are the panel where you inspect the page and run JavaScript. To open them:

To jump straight to the console: Ctrl + Shift + J (Windows/Linux) or Cmd + Option + J (macOS).

The DevTools have many tabs. These are the three that matter right now:

Console is your workbench. You can type JavaScript straight into it and press Enter to run it:

One detail that throws people off at first: if you type an expression, the console shows its result; if you type console.log(...), it shows whatever you passed in. On top of that, the console marks the returned value with < or ←, so you can tell it apart from what you printed.

Sources gives you a golden check: if your js/app.js does not appear in the file tree, the browser has not loaded it, and that is why "nothing works". It is almost always a mistyped path.

Network confirms the same thing from another angle. If you reload the page with that tab open and see your file in red with status 404, the path is wrong.

These three tabs are introduced here just to get you oriented. Serious debugging —breakpoints, stepping through code, inspecting variables— is covered in Debugging JavaScript.

The browser keeps copies of files to speed things up. Sometimes you save a change, reload and still see the old code. The fixes:

• Force a reload: Ctrl + Shift + R (or Cmd + Shift + R on macOS).
• In DevTools, in the Network tab, tick the Disable cache checkbox and leave DevTools open while you work.

You could write JavaScript in Notepad, but that would be like cooking without heat. Visual Studio Code (VS Code) is free, lightweight and the de facto standard.

1. Download it from code.visualstudio.com.
2. Install it with the default options.
3. On Windows, accept the "Add to PATH" option so you can open it from the terminal with code ..

You install them from the extensions icon in the sidebar (or Ctrl + Shift + X):

Later on you will add style and code-quality tooling such as ESLint and Prettier, but that comes in Code Quality: ESLint, Prettier and Conventions. For now, the lighter the environment, the better.

Open the settings with Ctrl + , and look for these options:

An important habit: open the project folder, not individual files (File → Open Folder...). VS Code needs to know the root folder in order to resolve paths, search the whole project, and let Live Server work properly.

You can open an index.html by double-clicking it, but then the address will be file:///C:/.... That mode has real limitations: JavaScript modules will not load, requests to servers fail for security reasons, and certain browser APIs are disabled.

Live Server solves this: it starts a local server and serves your project at http://127.0.0.1:5500.

To use it:

1. Open the project folder in VS Code.
2. Right-click on index.html → Open with Live Server.
3. The browser opens. Every time you save a file, the page reloads by itself.

Always use Live Server. It will spare you baffling errors later on.

Node.js is an environment that lets you run JavaScript outside the browser, directly on your computer. npm (Node Package Manager) ships with it and is used to install tools and libraries.

Two specific uses, and it is worth not mixing them up:

1. Running standalone .js files from the terminal. When you want to try out an idea without setting up a web page, you type node test.js and see the result in the terminal. It is extremely fast for practicing.
2. Installing development tools. From Module 8 onwards you will use Jest for testing and Cypress for end-to-end tests. Those tools are installed with npm.

What you are not going to do yet is write a server with Node.js. Here it is just a supporting tool.

1. Go to nodejs.org and download the LTS version (Long Term Support), which is the stable, recommended one.
2. Install it with the default options.
3. Close and reopen the terminal (otherwise it will not find the command).

Open a terminal (in VS Code: Ctrl + ` or Terminal → New Terminal) and run:

You should see two version numbers, something like v22.11.0 and 10.9.0. The exact numbers do not matter as long as Node is version 18 or higher.

If it answers "command not found" or "is not recognized as a command", the installer did not add Node to your PATH: restart the terminal and, if the problem persists, reinstall making sure to tick the relevant option.

You do not need to be a terminal expert, but four commands will be enough:

And the one you will use most:

Heads-up: node runs the file relative to the folder you are standing in. If it tells you "Cannot find module", it is almost always because you are in the wrong folder. Check where you are before blaming the code.

A simple web project has a very conventional structure. Sticking to it saves you trouble and makes your code understandable to anyone else.

The practical rules:

• index.html goes in the root. It is the name servers look for by default when they open a folder.
• One folder per resource type: css/, js/, and later on img/ for images.
• Lowercase names, no spaces, no accents and no special characters. Use hyphens to separate words: task-list.js, never Task List.js or résumé.js. Web servers distinguish uppercase from lowercase and unusual characters cause problems in URLs.
• Relative paths from index.html: js/app.js means "the js folder sitting next to this HTML file".

Let's get the Taller Nómada project set up. You will keep extending it throughout the course.

You can do it from the file explorer or from the terminal:

On Windows, with PowerShell:

Then open it in VS Code (File → Open Folder..., or code . from the terminal).

Create index.html in the root with this content:

Let's go over the lines that matter:

• <!DOCTYPE html> tells the browser to use the modern standard. Without it, the browser falls back to an old compatibility mode.
• lang="en" states the language of the content: useful for search engines and screen readers.
• <meta charset="UTF-8"> allows accented characters. If you skip it, you will see "Nómada" instead of "Nómada".
• <link rel="stylesheet" href="css/styles.css"> loads the stylesheet.
• <script src="js/app.js"></script> loads your JavaScript. Note that the tag is closed with </script> even though it is empty: that is mandatory.

In the next lesson you will see in detail why the <script> goes there and what alternatives exist.

A minimal set of styles so the page does not look sad. This is not a CSS course, so this is plenty:

And now the piece we actually care about:

1. Right-click on index.html → Open with Live Server.
2. In the browser, open the DevTools (F12) and go to the Console tab.
3. You should read: Nómada Tasks: environment ready.

If you see that message, your environment is up and running: the editor saves, the server serves, the browser executes and the console reports. If you do not see it, check in the Network tab whether app.js shows up with status 404 (mistyped path) and make sure the folder is named exactly js.

Git is a version control system: it takes snapshots of the state of your project so you can browse the history, compare changes and go back when you break something. And you will break things: it comes with the job.

Without Git, version management ends up looking like app.js, app_v2.js, app_final.js, app_final_GOOD.js. With Git, you get an orderly history with an explanatory message for every change.

Download Git from git-scm.com and install it. Then configure yourself once and for all:

The mental model is simple:

There are folders that must never be stored in the history, above all node_modules/ (where npm installs dependencies: thousands of files that regenerate themselves). Create a file called .gitignore in the root:

With that in place, Git will ignore those files even though they exist in your folder.

Git is worth a whole course of its own (branches, merges, remote repositories, GitHub). Here it is enough to create the repository and make a commit at the end of each module. It is an excellent habit and gives you a safety net from day one.

Common mistakes

• Opening the HTML by double-clicking instead of using Live Server. The file:// address blocks modules and requests. If something "works in the examples but not on your machine", this is the first thing to check.
• Mistyped paths in src. js/app.js is not the same as JS/app.js or /js/app.js. On many servers, case matters. Always check in the Network tab.
• Forgetting <meta charset="UTF-8">. Accented characters show up as odd symbols. It is the prime suspect when "Nómada" looks like "Nómada".
• Writing <script src="..."> without the closing tag. <script src="js/app.js" /> does not work in HTML: you have to close it with </script>.
• Installing Node.js and not restarting the terminal. The command is not recognized until you open a new terminal.
• Putting the project in a path with spaces or accents. A folder such as C:\My Projects\Programación\ causes trouble with some tools. Use simple paths: C:\dev\nomada-tasks.
• Storing node_modules/ in Git. Thousands of useless files in the history. That is what .gitignore is for.

Tips

• Leave the DevTools open while you code. If an error appears and you are not looking at the console, as far as you are concerned it never happened.
• Always work with the project folder open in VS Code, never with loose files.
• Make a commit at the end of every module of the course. You will end up with a history of your own learning.
• Learn four VS Code shortcuts and your life will change: Ctrl + P (open a file by name), Ctrl + Shift + F (search the whole project), Alt + ↑/↓ (move a line), Ctrl + / (comment out).
• Do not install twenty extensions on day one. Each one adds noise and opinions. Start with Live Server and add the rest once you know what you are missing.

Run these checks and note down the result of each one:

1. Open your browser's DevTools and locate the Console, Sources and Network tabs.
2. In the console, run 12 * 3 and check that it answers 36.
3. In a terminal, run node --version and npm --version.
4. In a terminal, run git --version.
5. Run console.log('Hello, Taller Nómada') in the browser console.

If any of them fails, fix it before moving on: the rest of the course depends on it.

Create the project structure from scratch:

1. A nomada-tasks folder with the css and js subfolders.
2. An index.html in the root with the language set to English, the UTF-8 character set, the title "Nómada Tasks · Taller Nómada", an <h1> and the links to css/styles.css and js/app.js.
3. A css/styles.css with at least one rule.
4. A js/app.js that prints this message to the console: Nómada Tasks: environment ready. Team: Marta, Iván and Lucía.
5. Open it with Live Server and check the message in the console.

Deliberately cause these three failures, observe what happens and explain how you would detect each one:

1. Change src="js/app.js" to src="js/application.js" and reload.
2. Delete the <meta charset="UTF-8" /> line and reload.
3. Write the line console.log('unclosed); in app.js (the closing quote is missing) and reload.

For each case, answer: what do you see on the page? what do you see in the console? which DevTools tab would you use to confirm it?

Exercise 1

The expected results:

The undefined that appears under the message confuses a lot of people. console.log prints text but does not return any value, and the console always shows the returned value. It is not an error.

Exercise 2

Final structure:

Contents of js/app.js:

And the index.html would be the one shown in section 7.2. The success check is reading the message in the Console tab after opening the page with Live Server.

Exercise 3

The important lesson from case 3: a syntax error stops the entire file from running, not just the faulty line. The browser has to read the whole file before executing it, and if it cannot understand it, it executes nothing.

You now have a professional workstation. You know how to open the DevTools and what the Console, Sources and Network tabs are for; you have VS Code with Live Server and a handful of useful extensions; you have installed Node.js and npm and you know how to run a file with node file.js; you know the conventional folder structure of a web project (index.html in the root, css/ and js/); and you have taken your first steps with Git by creating a repository and a first commit.

And, most importantly, you have created the Nómada Tasks skeleton, the Taller Nómada project that will grow with you throughout the course. Right now it only prints a message to the console, but it is already a real project with its HTML, its CSS and its JavaScript.

In the next lesson, Your First JavaScript Program, you will move from "the environment works" to "I have written a program": you will look closely at console.log, the different ways of including a script in a page (and what defer and async mean), how to run code with Node.js, and how to read an error message without panicking. Your first program will print the summary of a Taller Nómada task.