
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.

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


**Git** is a tool that saves the history of changes to your code, like a giant "Ctrl+Z" with superpowers. **GitHub** is a website where you can store that history in the cloud and share it with others.

## The three commands you'll use most

```bash
git add .
git commit -m "Explain what you changed"
git push
```

1. `git add .` — marks the files you changed to be saved.
2. `git commit -m "..."` — saves a "snapshot" of those changes with a message.
3. `git push` — uploads that snapshot to GitHub so it's backed up.

## Why should I use Git from the start?

- You can undo mistakes without fear.
- You can see exactly what changed and when.
- It's the standard way programming teams work.

## Your first repository

1. Create a folder for your project.
2. Run `git init` inside it.
3. Create a GitHub account and a new repository.
4. Follow GitHub's instructions to connect your local folder to the remote repository.

You don't need to understand everything at once. With these three commands you can already start versioning your projects.


Learn what Git is, what GitHub is, and the three commands you'll use 90% of the time.

Git and GitHub for beginners: a drama-free guide


A **variable** is like a labeled box where you store something to use later. The label is the variable's name, and what's inside is its value.

```js
let age = 25;
let name = 'Sofia';
let isStudent = true;
```

## Common data types

- **Number** (`25`): for counting or calculating.
- **Text/string** (`'Sofia'`): for words and phrases, always in quotes.
- **Boolean** (`true`/`false`): for yes/no answers.
- **List/array** (`[1, 2, 3]`): a box holding several things in order.
- **Object** (`{ name: 'Sofia', age: 25 }`): a box with several inner labels.

## Why does the type matter?

If you treat a number like text, weird things can happen:

```js
console.log('5' + 1); // '51' (text gets glued together)
console.log(5 + 1);   // 6   (numbers get added)
```

Knowing what type of data is in each "box" avoids many common beginner mistakes.

## Try it yourself

Try declaring three variables about yourself: your name, your age, and whether you like coding (`true` or `false`). That small exercise is already programming.


Understand variables and data types using labeled boxes instead of abstract theory.

Variables and data types explained with analogies

Programación Para Tontos


In this tutorial you'll build your first web page from scratch, no frameworks or complicated tools: just a text editor and a browser. Yes, really, it's that easy. No, you don't need a PhD.

## Step 1: create the project folder

Create a folder called `my-first-page` and open a new file called `index.html`. Naming a folder: difficulty level, zero.

## Step 2: write the basic structure

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My first page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my first web page.</p>
  </body>
</html>
```

Save the file and double-click to open it: you already have a working web page in your browser. Congratulations, you're technically a "web developer" now (maybe don't put that on your resume just yet).

## Step 3: add some styles

Create a `styles.css` file in the same folder:

```css
body {
  font-family: sans-serif;
  background-color: #0e1e25;
  color: #ffffff;
  text-align: center;
  padding: 4rem;
}

h1 {
  color: #00e5bf;
}
```

Reload the page in the browser: you should see the dark background and the teal-colored title. If you see something else, don't panic: check that you actually saved the file (we've all been there, no judgment).

## Step 4: add an image and a link

```html
<img src="https://placekitten.com/300/200" alt="A cat" />
<p>
  Learn more at
  <a href="https://developer.mozilla.org/en-US/">MDN Web Docs</a>.
</p>
```

## What did you just learn?

- How to structure a page with HTML.
- How to link a CSS file to style it.
- How to add images and links.

In the next tutorial we'll bring this page to life with JavaScript, because a pretty page that can't do anything is just... an expensive poster.


Follow these steps and build your first working web page in under 20 minutes.

Tutorial: your first web page with HTML and CSS


Now that you have a page with HTML and CSS, let's add a button that reacts when someone clicks it. Relax, nothing's going to explode, it's just JavaScript.

## Step 1: add a button to your HTML

In your `index.html` file, inside `<body>`, add:

```html
<button id="greet-button">Say hi</button>
<p id="message"></p>
<script src="script.js"></script>
```

## Step 2: create your JavaScript file

Create `script.js` in the same folder:

```js
const button = document.querySelector('#greet-button');
const message = document.querySelector('#message');

button.addEventListener('click', () => {
  message.textContent = 'Hi! You just ran your first JavaScript.';
});
```

## Step 3: test it in the browser

Open `index.html`, click the "Say hi" button, and watch the message appear. If nothing happens, check the browser console before blaming your computer, it's almost always a typo (we know from experience, no judgment). You just:

1. Selected HTML elements from JavaScript.
2. Listened for an event (`click`).
3. Dynamically changed the page's content.

## Bonus challenge

Update the script so that, instead of a fixed message, it greets using the value of a text field:

```html
<input id="name" type="text" placeholder="Your name" />
```

```js
const input = document.querySelector('#name');

button.addEventListener('click', () => {
  message.textContent = `Hi, ${input.value || 'friend'}!`;
});
```

Congratulations! You just combined HTML, CSS, and JavaScript in a single project. Hold onto that ego boost, you earned it (even if there's a stray console.log hiding in there somewhere).


Add interactivity to your web page with your first JavaScript script, step by step.

Tutorial: your first JavaScript script

Every page that "does something" with what you type (a login, a search box, a contact form) starts with the same tag: `<form>`. Today you'll build one, and no, you don't need to know backend yet.

## Step 1: the form structure

```html
<form>
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Send</button>
</form>
```

Each `<input>` has an `id` that matches its `<label>`'s `for`. That's not decoration: it's how the browser (and screen readers) know which field belongs to which label.

## Step 2: use the right input type

```html
<input type="email" /> 
<input type="number" />
<input type="date" />
<input type="checkbox" />
```

Using `type="email"` instead of `type="text"` gives you free validation from the browser. Zero lines of JavaScript, zero effort, maximum elegance.

## Step 3: mark required fields

The `required` attribute stops the form from submitting if the field is empty. Try it: leave the name blank and click "Send". The browser will politely scold you, so you don't have to.

## What did you just learn?

- How to structure a form with `<form>`, `<label>`, and `<input>`.
- Why the right input type saves you work.
- How to mark required fields without writing any JavaScript.

This form doesn't send data anywhere yet (that needs a server), but later we'll validate and improve it with JavaScript.

Learn to build functional HTML forms to collect name, email, and messages.

Easy coding. For everyone. Even for you.

Latest articles

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

Git and GitHub for beginners: a drama-free guide

Variables and data types explained with analogies

Latest tutorials

Tutorial: your first web page with HTML and CSS

Tutorial: your first JavaScript script

Tutorial: HTML forms to ask the user for data

Browse by category