Acelera tu aprendizaje de JavaScript con un entorno sólido: terminal, Google Chrome actualizado, Visual Studio Code con Live Server y Code Runner, y Node.js. Con estos recursos podrás escribir, ejecutar y depurar tu código con fluidez, mientras construyes un proyecto real: un sistema de notas en Markdown listo para tu portafolio.
¿Qué herramientas necesitas para iniciar con JavaScript?
Configurar bien tu espacio marca la diferencia. Trabajarás desde el navegador y desde el editor para construir, probar y mejorar tu proyecto sin fricción.
- Terminal en Windows, Mac o GNU/Linux para dar instrucciones al sistema.
- Navegador: Google Chrome en su última versión y siempre actualizado.
- Editor: Visual Studio Code (o basados en este como Cursor o Windsor).
- Extensiones: Live Server para servidor local y recarga en tiempo real. Code Runner para ejecutar JavaScript (y otros lenguajes) sin crear archivos extra.
- Node.js: ejecutar JavaScript desde la terminal y correr scripts.
- Conocimientos previos: HTML, CSS, Terminal y Git & GitHub para avanzar con soltura.
¿Por qué Visual Studio Code y sus extensiones?
- Visual Studio Code organiza, previsualiza y ejecuta código en un solo lugar.
- Live Server levanta un servidor en el puerto 5500 con vista en tiempo real.
- Code Runner ejecuta fragmentos y muestra resultados sin configurar scripts adicionales.
¿Qué aporta Node.js en la terminal?
- Permite ejecutar JavaScript fuera del navegador.
- Facilita correr scripts y utilidades que usarás más adelante.
¿Cómo estructurar tu carpeta de trabajo y proyecto?
Ordenar tu espacio acelera cada entrega. Crea una carpeta principal, por ejemplo Develop, y dentro clasifica tus proyectos: personales, laboratorio o cursos. Desde la terminal, crea y prepara el proyecto de JavaScript.
- Crear la carpeta del proyecto con nombre claro.
- Inicializar npm con configuración por defecto.
- Inicializar Git para versionar cambios.
- Abrir el editor desde la terminal.
mkdir notas-md
cd notas-md
clear
npm init --js
git init
code .
¿Cómo iniciar el proyecto con npm y Git?
- npm init --js: genera package.json con valores por defecto.
- git init: crea el repositorio para rastrear la historia de cambios.
- code .: abre el proyecto en Visual Studio Code para empezar a trabajar.
¿Cómo crear la primera app y vincular HTML, CSS y JavaScript?
Aplica buenas prácticas desde el inicio. Crea una carpeta src y tres archivos clave: index.html, app.js y styles.css. Usa la abreviatura html:5 para generar la base del documento.
<!-- src/index.html -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>notas markdown</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>notas markdown</h1>
<p>aplicación para gestionar notas en formato markdown.</p>
<script src="app.js"></script>
</body>
</html>
Enlaza el JavaScript con la etiqueta script y los estilos con link tipo stylesheet. Luego valida que el script se cargue correctamente con la consola.
// src/app.js
console.log("hola mundo");
console.log("el script se ha cargado correctamente");
- Con Code Runner puedes seleccionar y ejecutar fragmentos de código y ver resultados inmediatos.
- Con Live Server haz clic derecho sobre index.html y ábrelo para visualizar tu app en el navegador.
- Verás la app corriendo en el puerto 5500 y los cambios se reflejarán en tiempo real.
Para verificar la ejecución en el navegador, usa las developer tools:
- Abre el inspector y entra a consola para ver los mensajes de console.log.
- Revisa la conexión entre estilos y app.js para confirmar que todo carga bien.
- Explora pestañas como source, network, memory y application para entender el comportamiento y mejorar tu implementación.
Objetivo del proyecto: construir un sistema de notas con Markdown que permita crear, actualizar, eliminar y mostrar notas en ese formato. Al final podrás publicarlo en internet y añadirlo como tu primer proyecto de portafolio.
¿Tienes dudas o quieres compartir cómo organizaste tu carpeta de trabajo? Comenta qué parte ya configuraste y qué te gustaría optimizar en tu flujo con VS Code y Live Server.
