💻 Freimel Jerez WebApp
← Volver al curso

00. Instalar Visual Studio Code (VS Code)

Preparación — Curso HTML5 desde cero — Freimel Jerez

Antes de aprender HTML, necesitamos una herramienta para escribir código. La mejor para empezar es Visual Studio Code (VS Code): es gratis, rápido y funciona en Windows, Mac y Linux.

⬇️ 1) Descargar VS Code (oficial)

Descárgalo desde la página oficial de Microsoft:

✅ Descargar Visual Studio Code

Consejo: descarga siempre desde la web oficial para evitar instaladores falsos.

🪟 2) Instalación en Windows (paso a paso)

  1. En la página de descarga, elige Windows.
  2. Si te aparecen opciones, elige User Installer (recomendado).
  3. Abre el instalador y presiona Next (Siguiente).
  4. Acepta la licencia y vuelve a presionar Next.
  5. En las opciones, marca si puedes:
    • Add to PATH (Agregar al PATH) ✅
    • Add "Open with Code" (Abrir con Code) ✅ (opcional)
    • Create a desktop icon (Icono) (opcional)
  6. Presiona Install (Instalar) y espera.
  7. Al finalizar, presiona Finish y abre VS Code.

🍎 3) Instalación en Mac

  1. Descarga la versión para Mac desde la web oficial.
  2. Abre el archivo .zip o instalador.
  3. Arrastra Visual Studio Code a la carpeta Applications.
  4. Ábrelo desde Applications. Si macOS pregunta permisos, acepta.

🐧 4) Instalación en Linux

En Linux tienes varias formas:

🧩 5) Extensión recomendada: Live Server

Live Server te permite ver tu página en el navegador y se actualiza sola cada vez que guardas.

Link oficial de la extensión: Live Server (Marketplace)

  1. Abre VS Code
  2. Haz clic en Extensions (icono de cuadritos) o presiona Ctrl + Shift + X
  3. Busca: Live Server
  4. Instala la extensión (autor: Ritwick Dey)
  5. Reinicia VS Code si te lo pide

📁 6) Crear tu carpeta del curso (muy importante)

Vamos a trabajar ordenados. Crea una carpeta en tu PC, por ejemplo:

CursoHTML5/
  index.html
  css/
    styles.css
  img/

Luego en VS Code:

  1. Ve a File → Open Folder…
  2. Selecciona la carpeta CursoHTML5
  3. Ya puedes crear archivos dentro

🧪 7) Tu primer archivo HTML

Crea un archivo llamado index.html y pega esto:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi primera web</title>
</head>
<body>
  <h1>Hola Mundo</h1>
  <p>Ya tengo VS Code instalado ✅</p>
</body>
</html>

🚀 8) Cómo usar Live Server (“Go Live”)

  1. Abre tu index.html
  2. Abajo a la derecha te debe aparecer Go Live
  3. Haz clic en Go Live
  4. Se abrirá el navegador con tu web (normalmente http://127.0.0.1:5500)
  5. Cuando guardes cambios, el navegador se actualiza solo ✅

Si no te aparece “Go Live”, revisa que Live Server esté instalado y que abriste una carpeta (Open Folder), no solo un archivo suelto.

🎥 Video: instalación paso a paso

Mira el video completo. Después pasamos a la primera lección del curso.

✅ Checklist final

Listo. Ya estás preparado para comenzar HTML5 desde cero. Vamos a la lección 01 🚀