Programación Para Tontos


Developer tools (DevTools) are your best friend when something isn't working. No more "I don't know why it's broken": now you'll know exactly where to look.

## Step 1: open them

Press `F12` or right-click the page → "Inspect". A panel will open with several tabs: Elements, Console, Network, among others.

## Step 2: the Elements tab

Here you see the page's real HTML (including changes made by JavaScript). Click any element on the page and it'll get highlighted here automatically. You can edit HTML and CSS right there to experiment, no fear needed: reloading the page puts everything back to normal.

## Step 3: the Console tab

This is where your `console.log()` calls show up, and more importantly, JavaScript errors in red. An error message almost always tells you the exact file and line where something went wrong. Read it, don't fear it: most of the time it literally tells you what to do.

```js
console.log('Variable value:', myVariable);
console.error('Something went wrong here');
console.table([{ name: 'Ana' }, { name: 'Luis' }]);
```

`console.table()` displays arrays of objects as a tidy table, much easier to read than a wall of plain text.

## Step 4: the Network tab

Here you see every request your page makes (images, CSS files, `fetch` calls). If a request shows up in red or says "failed", that's the first place to look when your `fetch` "isn't working".

## Step 5: set a breakpoint

In the "Sources" tab, click the line number in your code to pause execution right there. You can inspect every variable's value at that exact moment, like pausing a movie to check a single frame.

## What did you just learn?

- How to open DevTools and what each main tab is for.
- How to read a console error instead of fearing it.
- How to use a breakpoint to pause your code and examine it step by step.


Learn to use the console, inspector, and network tab in your browser to debug your code.

Tutorial: use browser DevTools to find bugs


Your page only lives on your computer until you publish it. Today you'll put it on the actual internet, with a real URL you can send to your mom, for free, in minutes.

## Step 1: make sure your project is on GitHub

If you followed the "push your first project to GitHub" tutorial, this part is already done. If not, do that first: Netlify needs to connect to a repository.

## Step 2: create a Netlify account

Go to [netlify.com](https://www.netlify.com/) and sign up using your GitHub account (the "Sign up with GitHub" button saves you a step).

## Step 3: connect your repository

1. Click "Add new site" → "Import an existing project".
2. Choose GitHub and authorize access.
3. Select your repository from the list.

## Step 4: configure the build (for a simple HTML site, there's barely anything to configure)

If your project is just static HTML/CSS/JS, leave the "Publish directory" as `.` (the root) or `public` if that's where you organized your files, and leave the build command empty. Click "Deploy site".

## Step 5: wait for the deploy and visit your site

In under a minute, Netlify will give you a URL like `random-name-123.netlify.app`. Open it: your page is now public, on the internet, for anyone with a connection.

## Bonus: automatic republishing

From now on, every time you `git push` to your main branch, Netlify will detect the change and republish your site automatically. No clicking anything again. It's basically magic, but with logs.

## What did you just learn?

- How to connect a GitHub repository to Netlify.
- How to publish a static site for free in minutes.
- That every `git push` can automatically republish your site.


Push your project to GitHub and publish it live on the internet in under 5 minutes with Netlify.

Tutorial: publish your first site for free with Netlify


Until now your JavaScript only lived inside the browser. Node.js lets you run JavaScript directly on your computer, without opening a single tab.

## Step 1: install Node.js

Go to [nodejs.org](https://nodejs.org/) and download the "LTS" version (Long Term Support, the most stable one). Install it like any other program, clicking "Next" on everything.

## Step 2: confirm it installed

```bash
node --version
npm --version
```

If you see two version numbers (something like `v20.11.0`), you've got Node and npm (its package manager) installed. If you get a "command not found" error, restart your terminal, it sometimes needs to "find out" something new got installed.

## Step 3: write your first script

Create a file called `greeting.js`:

```js
const name = 'World';
console.log(`Hello, ${name}, from outside the browser`);

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, n) => total + n, 0);
console.log(`The sum is: ${sum}`);
```

## Step 4: run it

```bash
node greeting.js
```

You'll see the result directly in your terminal. No `console.log` trapped in the browser's dev tools: this runs on your computer like any other program.

## Why does this matter?

Node.js is what powers tools like this very site under the hood (Next.js runs on Node), backend servers written in JavaScript, and basically the entire package ecosystem you'll install with `npm install` from now on.

## What did you just learn?

- How to install Node.js and confirm it works.
- How to run a `.js` file directly from the terminal.
- That JavaScript is no longer stuck in the browser, and that opens a lot of doors.


Install Node.js and run JavaScript outside the browser, straight from the terminal.

Tutorial: install Node.js and run your first script


Freshly installed VS Code works fine, but with a few tweaks it becomes a tool that feels custom-built for you. Let's set it up in ten minutes.

## Step 1: install essential extensions

Open the extensions tab (the squares icon in the sidebar, or `Ctrl/Cmd + Shift + X`) and install:

- **Prettier**: automatically formats your code so it always looks tidy.
- **ESLint**: warns you about errors and bad practices as you type.
- **Live Server**: opens your HTML in the browser with auto-reload every time you save.

## Step 2: turn on format-on-save

Open settings (`Ctrl/Cmd + ,`), search for "format on save" and enable it. Or add this directly to your `settings.json`:

```json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```

From now on, every time you save a file, Prettier will tidy it up for you. No more arguing with your team about tabs vs. spaces.

## Step 3: turn on auto-save (for those who forget to save)

```json
{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}
```

With this, VS Code saves your files automatically one second after you stop typing. Less "why isn't my change showing up?" and more peaceful coding.

## Step 4: learn two shortcuts that will change your life

- `Ctrl/Cmd + P`: search for and open any file in the project by name.
- `Ctrl/Cmd + Shift + F`: search for text across every file in the project, not just the current one.

## What did you just learn?

- Which extensions to install first (Prettier, ESLint, Live Server).
- How to enable auto-format and auto-save.
- Two keyboard shortcuts you'll use every day, forever.


Install key extensions and settings in VS Code to code faster and more comfortably.

Tutorial: set up VS Code like a total pro


The terminal looks like it's straight out of a hacker movie, but it's really just a way to give your computer instructions by typing text instead of clicking. Let's lose the fear with the commands you'll actually use.

## Step 1: where am I?

```bash
pwd
```

`pwd` (print working directory) tells you which folder you're currently standing in. It's the "you are here" of a mall map, but for your file system.

## Step 2: what's in here?

```bash
ls
```

`ls` (list) shows the files and folders inside wherever you are. On Windows with PowerShell, the equivalent command is `dir` (or `ls` also works in newer versions).

## Step 3: move between folders

```bash
cd Documents
cd ..
cd /
```

`cd` (change directory) moves you to another folder. `cd ..` goes up one level (to the "parent" folder). `cd /` takes you to the root of the whole system. No mouse, no double-click, just text.

## Step 4: create folders and files

```bash
mkdir my-project
cd my-project
touch index.html
```

`mkdir` creates a new folder. `touch` creates an empty file (on Windows with PowerShell, use `New-Item index.html` instead).

## Step 5: clear the screen when you can't stand the mess anymore

```bash
clear
```

(On Windows: `cls`). It doesn't delete anything from your project, it just visually clears the terminal. Use it freely whenever the screen starts feeling like a window covered in sticky notes.

## What did you just learn?

- How to know where you are (`pwd`) and what's there (`ls`).
- How to move between folders with `cd`.
- How to create folders (`mkdir`) and files (`touch`) without touching the mouse.


Lose your fear of the terminal by learning the commands you'll actually use every day.

Tutorial: the terminal for beginners - your first commands


When you start in web development, you hear HTML, CSS, and JavaScript all the time, but it's not always clear what each one does. Let's use a house analogy.

## HTML: the structure

HTML (HyperText Markup Language) is the **skeleton** of the house: the walls, the doors, the rooms.

```html
<h1>My house</h1>
<p>This is the living room.</p>
```

## CSS: the decoration

CSS (Cascading Style Sheets) is the **paint, furniture, and decoration**. It defines colors, sizes, and layout.

```css
h1 {
  color: teal;
  font-size: 2rem;
}
```

## JavaScript: the electricity and interaction

JavaScript is what makes things **work and react**: turning on a light when you flip a switch, opening the garage door, etc.

```js
document.querySelector('button').addEventListener('click', () => {
  alert('You clicked!');
});
```

## Summary

| Language   | Main role                 |
| ---------- | -------------------------- |
| HTML       | Structure and content       |
| CSS        | Appearance and layout       |
| JavaScript | Behavior and interaction    |

With these three, you can already build any web page. In the next tutorial we'll build your first page from scratch.


The house analogy to finally understand what each web language is for.

Herramientas

Tutorial: use browser DevTools to find bugs

Tutorial: publish your first site for free with Netlify

Tutorial: install Node.js and run your first script

Tutorial: set up VS Code like a total pro

Tutorial: the terminal for beginners - your first commands

HTML, CSS and JavaScript: what does each one do?