Programación Para Tontos


Buttons that don't react to anything feel dead. With a couple of lines of CSS you'll make yours feel alive (no JavaScript needed, surprise).

## Step 1: the base button

```html
<button class="button">Click me</button>
```

```css
.button {
  background-color: #00e5bf;
  color: #0b1620;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-weight: bold;
  cursor: pointer;
}
```

## Step 2: add a smooth transition

```css
.button {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.button:hover {
  background-color: #20c9ac;
  transform: translateY(-2px);
}
```

`transition` tells the browser "when this property changes, animate it smoothly instead of jumping instantly". `:hover` defines what happens when the mouse is over it. The result: a button that "floats" slightly when hovered.

## Step 3: add an effect on click

```css
.button:active {
  transform: translateY(0) scale(0.97);
}
```

`:active` fires while you're holding the button down. That small shrink simulates the button really "sinking in" when pressed, like a physical button. Details like this are what make an interface feel polished instead of generic.

## What did you just learn?

- How to use `transition` to animate property changes.
- How to use `:hover` and `:active` to react to user interaction.
- That you can achieve a lot of "interactivity" without writing any JavaScript.


Bring your buttons to life with CSS transitions and transforms, without a single line of JavaScript.

Tutorial: animate a button with CSS transitions


Ever changed a color in CSS and had to find-and-replace it in fifteen different places? CSS variables exist exactly so that never happens to you again.

## Step 1: declare your variables

```css
:root {
  --color-bg: #0b1620;
  --color-surface: #101e27;
  --color-text: #ffffff;
  --color-accent: #00e5bf;
}
```

`:root` is like a global vault where you keep your colors. `--color-bg` is the variable's name (the `--` prefix is required).

## Step 2: use them in your styles

```css
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent);
}
```

`var(--color-bg)` tells CSS "use whatever value is stored in that variable". If you want to change your whole color scheme tomorrow, you only touch the `:root` block.

## Step 3: create an alternate light theme (optional, for the brave)

```css
[data-theme='light'] {
  --color-bg: #ffffff;
  --color-surface: #f2f2f2;
  --color-text: #111111;
}
```

```html
<body data-theme="light">
```

By adding `data-theme="light"` to the `<body>`, every variable automatically changes value and drags along any style that uses them. This is, essentially, magic disguised as CSS.

## What did you just learn?

- How to declare CSS variables with `:root` and `--name`.
- How to use them with `var(--name)`.
- How to swap an entire theme by editing just one place.


Use CSS custom properties to build a reusable dark theme across your whole page.

Tutorial: build your own dark theme with CSS variables


If your page looks perfect on your laptop but is a mess on your phone, you have half a page. Most of your visitors will arrive from a phone, so this isn't optional.

## Step 1: add the viewport (the step everyone forgets)

```html
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
```

Without this line, phones "pretend" to be a desktop screen and everything looks tiny. With it, the browser respects the device's real width. Copy it, paste it, never forget it.

## Step 2: design mobile-first

```css
.container {
  padding: 1rem;
  font-size: 1rem;
}
```

Starting with the mobile design forces you to prioritize what's essential. It's easier to add space on big screens than to remove it on small ones.

## Step 3: add styles for bigger screens

```css
@media (min-width: 768px) {
  .container {
    padding: 3rem;
    font-size: 1.25rem;
    max-width: 800px;
    margin: 0 auto;
  }
}
```

`min-width: 768px` means "apply this only if the screen is 768px wide or more" (tablets and computers). You can chain several media queries for different sizes.

## Step 4: test it in the browser

Open dev tools (F12), turn on device mode, and resize the window. If your layout adapts without breaking, congrats: it's responsive. If something overflows the screen, it's not a mystical bug, it's probably a fixed width (`width: 500px`) you forgot to make flexible.

## What did you just learn?

- Why the `viewport` meta tag is mandatory.
- How to design mobile-first and add styles progressively.
- How to use `@media (min-width: ...)` to adapt your layout.


Make your page look good on phone, tablet, and desktop with media queries.

Tutorial: responsive design with media queries


Before Flexbox, centering a box vertically in CSS was almost a rite of passage (with weird `position: absolute` tricks and extra math). Not anymore. Breathe.

## Step 1: turn a container into flex

```html
<div class="bar">
  <div class="logo">My Site</div>
  <div class="links">Home | Articles | Tutorials</div>
</div>
```

```css
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
```

With one line (`display: flex`) your direct children go from stacking vertically to lining up in a row. `justify-content` controls the horizontal axis, `align-items` the vertical one.

## Step 2: align cards in a row with even spacing

```html
<div class="cards">
  <div class="card">HTML</div>
  <div class="card">CSS</div>
  <div class="card">JavaScript</div>
</div>
```

```css
.cards {
  display: flex;
  gap: 1rem;
}

.card {
  flex: 1;
  padding: 2rem;
  background: #101e27;
  border-radius: 0.5rem;
  text-align: center;
}
```

`gap` adds spacing between the cards without manual margins (goodbye, `margin-right` on every card except the last one).

## Step 3: stack them into a column on small screens

```css
@media (max-width: 600px) {
  .cards {
    flex-direction: column;
  }
}
```

One more line and your cards go from a row to a column on narrow screens. Flexbox won't solve all your existential problems, but it will solve your alignment ones.

## What did you just learn?

- How to enable Flexbox with `display: flex`.
- How to align elements horizontally and vertically.
- How to switch from a row to a column based on screen size.


Learn Flexbox by building a navigation bar and a row of perfectly aligned cards.

CSS

Tutorial: animate a button with CSS transitions

Tutorial: build your own dark theme with CSS variables

Tutorial: responsive design with media queries

Tutorial: Flexbox step by step - align boxes without suffering