Configurando tu Ambiente

¡Hora de preparar tu máquina para programar!

Lo Que Necesitarás

Un editor de código (VS Code)
Un navegador (Chrome o Firefox)
Carpetas organizadas

¡Eso es todo! Vamos a configurar cada uno.

Instalando VS Code

VS Code (Visual Studio Code) es el editor de código más popular del mundo. ¡Es gratis!

Paso a paso:

Ve a code.visualstudio.com
Haz clic en Download
Instala como cualquier programa

Primera Configuración

Abre VS Code e instala extensiones esenciales:

Haz clic en el icono de Extensiones (cuadrados en el lado)
Busca e instala:
- Spanish Language Pack (si prefieres español)
- Live Server (para ver cambios en tiempo real)
- Prettier (formatea código automáticamente)

Configurando el Navegador

Chrome DevTools

Presiona F12 (o clic derecho → Inspeccionar) para abrir DevTools.

Pestañas útiles:

Elements: ver HTML/CSS de la página
Console: ejecutar JavaScript, ver errores
Network: ver peticiones

¡Practica: abre cualquier sitio y presiona F12 para explorar!

Organización de Carpetas

Crea una estructura organizada:

Documentos/
└── proyectos/
    └── aprendiendo/
        ├── html-basico/
        ├── css-basico/
        └── javascript-basico/

Tip: Abrir carpeta en VS Code

Archivo → Abrir Carpeta
Selecciona tu carpeta
Ahora tienes acceso a todos los archivos en el lado

Tu Primer Archivo

En VS Code, con la carpeta abierta
Clic derecho → Nuevo Archivo
Nombre: index.html
Escribe ! y presiona Tab

VS Code autocompletará a:

html

<!DOCTYPE html><html lang="es"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body> </body></html>

¡Esta es la estructura básica de HTML!

Probando con Live Server

Clic derecho en index.html
"Open with Live Server"
¡El navegador abre automáticamente!
Cualquier cambio que hagas se actualizará en tiempo real

Resumen

✅ VS Code instalado con extensiones
✅ Navegador configurado para desarrollo
✅ Carpeta organizada creada
✅ Primer archivo HTML funcionando

¡En la próxima lección, crearemos tu primera página HTML real! 🚀