Crear un Proyecto Web en Visual Studio Code

¡Hola! En la lección anterior distinguiste las funciones de los dos archivos que usará tu página: HTML organiza el contenido y CSS define su presentación. Ahora prepararás un lugar para trabajar con ambos. Al terminar, tendrás una carpeta de proyecto abierta en Visual Studio Code con index.html y styles.css dentro. Todavía no necesitas escribir la página ni elegir sus fuentes.

Una carpeta para la página de robótica

Piensa en la carpeta del proyecto como el lugar donde reunirás los archivos de esta página. Para empezar, usaremos una estructura pequeña:

robotica-tipografia/
├── index.html
└── styles.css

Los dos archivos estarán al mismo nivel, directamente dentro de la carpeta. index.html contendrá más adelante el contenido de la página; styles.css, sus reglas visuales. El nombre de la carpeta puede ser otro, pero escribe los nombres de los archivos exactamente como aparecen aquí, incluidos el punto y la extensión.

Antes de hacerlo, consulta Manejo de archivos, de MDN Web Docs. Sus instrucciones usan el nombre web-projects como ejemplo; tú crearás una carpeta para tu página llamada robotica-tipografia.

Crea y abre el proyecto

Primero, crea robotica-tipografia en una ubicación que puedas encontrar fácilmente, por ejemplo, dentro de Documentos. Puedes hacerlo con el Explorador de archivos de Windows o con Finder en macOS, siguiendo la lectura. Trabaja en una carpeta propia; no hace falta modificar carpetas del sistema.

Después, abre Visual Studio Code y selecciona Archivo > Abrir carpeta.... Busca robotica-tipografia, selecciónala y confirma. Si aparece una pregunta sobre la confianza en los archivos de la carpeta, léela: si acabas de crearla tú, puedes indicar que confías en sus autores.

Mira el panel EXPLORADOR de VS Code. Deberías ver allí el nombre robotica-tipografia. Este detalle importa: abrir la carpeta permite ver juntos todos los archivos del proyecto. Abrir solo un archivo suelto no ofrece la misma vista para organizarlos.

Crea los dos archivos

Con robotica-tipografia abierta, usa el icono Nuevo archivo del panel EXPLORADOR:

1. Escribe index.html y pulsa Enter.
2. Vuelve a usar Nuevo archivo, escribe styles.css y pulsa Enter.

Asegúrate de que ambos aparezcan debajo de robotica-tipografia, uno junto al otro, y no dentro de otra carpeta. En VS Code, los archivos recién creados pueden permanecer vacíos: eso es suficiente para esta lección. No necesitas copiar todavía una plantilla HTML ni escribir reglas CSS.

Si te equivocas al nombrar uno, haz clic derecho sobre él en el Explorador de VS Code y elige Cambiar nombre. Por ejemplo, style.css y styles.css son nombres distintos: utilizaremos el segundo en las próximas lecciones.

Comprueba que quedaron donde esperabas

Abre la carpeta robotica-tipografia también desde el explorador de archivos de tu equipo. Debes encontrar allí index.html y styles.css. VS Code trabaja con archivos de tu equipo: no guarda una copia separada en un espacio exclusivo del editor.

Si alguno no aparece, revisa dos cosas antes de continuar: que en VS Code esté abierta la carpeta correcta y que hayas creado el archivo desde su panel EXPLORADOR. Si tu sistema muestra extensiones, comprueba también que el nombre no termine en .txt, como index.html.txt.

Ya tienes la base del proyecto: una carpeta identificable y dos archivos con responsabilidades distintas, guardados juntos. En la próxima lección escribirás la estructura inicial de index.html y prepararás su enlace con styles.css; por ahora, lo importante es que ambos archivos existan en la ubicación prevista.