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.
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 --><!DOCTYPEhtml><htmllang="es"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>notas markdown</title><linkrel="stylesheet"href="styles.css"/></head><body><h1>notas markdown</h1><p>aplicación para gestionar notas en formato markdown.</p><scriptsrc="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.jsconsole.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.
Genial, deberían hacer esto con todos los cursos. En especial con N8N y herramientas que hoy en día son tan tendencia!
Herramientas necesarias 💻
1. Terminal 🖥️: puedes usar la opcion predeterminada de tu OS o descargar una (yo te recomiendo Warp tiene muchas funcionalidades con AI)
2. Navegador 🛜: te recomiendo Google Chorme, desde este navegadores haremos todos los ejemplos del curso
3. Editor de codigo ⌨️: Puedes usar el de tu preferencia, te recomiendo, VS Code, Windsurf o Cursor.
Todo lo otro te lo dejo en recursos 💪🏻 🚀
¡Hola laura! Me alegra que hayas entendido.
La clase "Configuración del entorno para JavaScript" cubre los pasos esenciales para preparar tu espacio de trabajo. Esto incluye tener una terminal, un navegador (como Google Chrome), y herramientas clave como Visual Studio Code. También se mencionan extensiones importantes como Live Server y Code Runner, y la instalación de Node.js.
Además, se enfatiza la importancia de tener conocimientos previos de HTML, CSS, Terminal y Git & GitHub. Finalmente, se describe la creación de una carpeta de proyecto, inicialización con npm init y git init, y la estructura básica de archivos (index.html, app.js, styles.css) dentro de una carpeta src.
Clase 3 - Configuración del entorno para JS
¿Qué herramientas básicas necesitamos para configurar nuestro entorno para crear proyectos con JS?
Terminal.
Editor de código (VSC) y las siguientes extensiones:
Live server.
Code runer.
Navegador (Chrome)
Node JS.
¿Para qué sirve Live server?
Para ver en tiempo real los cambios que hagamos en nuestro proyecto web sin necesidad de recargar la página de manera manual.
¿Para qué sirve Code Runner?
Nos permite ejecutar código desde nuestro editor de código.
¿Para qué necesitamosen nuestro entorno de trabajo?
Para ejecutar JS desde la terminal.
¿Qué debemos inicializar al comenzar un proyecto con JS?
El npm y el git.
¿Cómo inicializamos npm y git?
Con los comandos:
npm: npm init --yes o npm init -y
git: git init
¿Para qué sirve el comando npm init --yes?
Primero debemos entender que el comando npm init a secas lo que hace es crear un archivo package.json en la carpeta en donde estemos ubicados. Este archivo es como el documento de identidad de nuestro proyecto. En él registramos las herramientas de terceros que instalemos en un futuro, los scripts de ejecución y los metadatos básicos del código.
El prefijo --yes o -y lo que hace es que nos saltemos el paso de definir una configuración manual del archivo package.json y mejor dejemos la configuración por defecto.
¿Para qué sirve el comando git init?
Este comando nos permite inicializar el sistema de control de versiones git y lo podamos usar en nuestro proyecto.
¿Cómo se llama la carpeta que contiene el código fuente de nuestro proyecto?
src.
¿Cómo podemos vincular el archivo HTML con el archivo JS?
Lo podemos hacer con la etiqueta script de la siguiente manera:
<script src="app.js">
</script>
En el atributo src debemos de escribir la ruta de nuestro archivo JS dependiendo del lugar en donde se encuentre el archivo HTML.
¿Cómo podemos ejecutar código en nuestro editor de código usando Code Runner?
Seleccionamos el código que queremos ejecutar, damos click derecho y seleccionamos la opción que dice “Run code”.
¿Qué pasa cuando ejecutamos código con la extensión Code Runner?
Se crea un archivo temporal que nos permite ver el resultado del código ejecutado.
Cuando hago click derecho en index.html y elijo correr con liveserver, me aparece asi:
Que estoy haciendo mal?
Hola amigo, eso pasa porque el live server abrió una carpeta "general", simplemente lo que debes hacer es en esa imagen de tu foto, seleccionar la carpeta donde se encuentra el archivo index.html que quieres ejecutarlo con el live server y listo. Saludos
Mil gracias
vengo aprender js y ya me perdi no se de que esta hablando
des de studio vs code se puede instalar los que necesitan usar van al ajustes y en intenciones buscan lo que tenga que descargar y si quieren cambiar el idioma también lo pueden descargar 👑
para los que estamos en mac:
instalar NVM:
curl -o- | bash
reiniciar la terminal o ejecutar source ~/.zshrc
Refused to apply style from 'http://127.0.0.1:5500/src/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Entender este error
app.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)Entender este error
index.html:1 Refused to execute script from 'http://127.0.0.1:5500/src/app.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.Entender este err
Fernando, esos errores indican que tu archivo HTML no está encontrando tus archivos de CSS y JS donde cree que están. El navegador intenta leerlos, pero recibe un "404" o un archivo HTML en su lugar, lo que causa el conflicto de tipo MIME.
Revisa tu etiqueta <script> y <link> en el index.html: ¿estás incluyendo la carpeta /src/ en la ruta, por ejemplo: src/app.js?
npm init y git init se usan siempre que vamos a abrir el archivo de trabajo en la terminal o sólo es algo que se hace la primera vez?.
Hola Jair, los comandos que se mencionan solo son para ejecutarse la primera vez que iniciamos un proyecto:
npm init --yes -> Inicializa el proyecto a nivel de archivos base de node.js, esto solo crea un archivo package.json donde se guarda la información basica de nuestro proyecto, de como se llama, descripción, el archivo main, que es donde se especifica que archivo, es el primero en correr cuando se ejecuta tu proyecto, etc.
git init -> simplemente inicializa la base de datos de cambios de git en nuestro proyecto, esto creara la carpeta .git que es donde se guardan todos los archivos que usa git para guardar todos los cambios hechos en nuestro proyecto. Si no sabes lo que es git y como se usa te recomiendo ver el curso de git y github https://platzi.com/cursos/gitgithub/
Vale, muchas gracias!
Me sale una ventana diferente y no me muestra directamente el index.html, me muestra la ruta de src y debo darle click a esa carpeta y asi ya se muestra debo configurar algo adicional para que se tome ese cambio??
Hola Saul!
Es normal que se abra esa ventana, hace parte de la extension de LiveServer, simplemente debes asegurarte de que cuando vayas a iniciar LiveServer con la opción de "Go Live", estés parado sobre un archivo HTML, o como menciono el instructor, puedes hacer click derecho sobre el archivo HTML y darle a la opción de "Abrir con live server".
Entonces recuerda, lo de que se visualice inmediatamente algo en el navegador cuando inicias live server solo funciona cuando seleccionas archivos HTML.
