Tu primer contacto con el entorno "real"
Familiarízate con el entorno Frontend: editor, navegador, terminal y repositorio. Arranca tu primer proyecto real y da el primer paso en FrontendLeap.
Antes de empezar a escribir código, necesitas familiarizarte con el entorno en el que vas a trabajar. No se trata de saber usar todo en profundidad todavía, sino de ubicarte.
Este paso es clave para que no te suene todo a chino en las siguientes fases. Aquí vas a ver qué herramientas existen, qué aspecto puede tener un proyecto Frontend y cómo puedes arrancar uno por tu cuenta.
Tu objetivo es sencillo: ver algo funcionando con tus propias manos. Aunque no entiendas nada aún, vas a dar tu primer paso dentro.
¿Qué herramientas vamos a usar?
En FrontendLeap trabajaremos con algunas herramientas que verás una y otra vez a lo largo de tu camino como desarrollador/a. Hoy no vas a aprender a usarlas a fondo (eso vendrá más adelante), pero es importante que sepas qué son y para qué sirven.
El navegador
Tu lugar de pruebas. Todo lo que construyas se verá (y funcionará) en un navegador: Chrome, Firefox, Edge… Aquí validaremos que tu código hace lo que debe hacer.
El repositorio (GitHub)
Es donde viven muchos de los proyectos. Lo usaremos (junto con Git) para ver código, descargarlo, gestionarlo… y también para publicar tus propios proyectos más adelante.
El editor (VSCode)
Es el editor de código principal con el que trabajaremos. Piensa en él como tu cuaderno de trabajo digital. Te permite escribir código, estructurar proyectos, ver archivos y usar extensiones que facilitan el trabajo.
Aunque VSCode será el protagonista, también puedes usar otros editores como WebStorm si lo prefieres. Lo importante es que te sientas cómodo y puedas seguir el ritmo del programa.
La terminal
Es una forma de darle órdenes al ordenador con texto. La usaremos para ejecutar comandos como arrancar un proyecto o instalar herramientas. No necesitas dominarla, pero sí perderle el miedo.
Cómo luce un proyecto por dentro
Los primeros proyectos que vas a ver y tocar serán muy sencillos: archivos HTML y CSS, sin estructuras complejas. Podrás abrirlos directamente en el navegador para ver los resultados de tu trabajo.
A medida que avancemos, los proyectos empezarán a parecerse más a los que se usan en el mundo profesional. En ese momento verás cosas como:
- Una carpeta
src/donde vive el código principal. - Un archivo
README.mdque explica qué hace el proyecto y cómo se usa. - Un archivo
package.json, donde están listadas las dependencias (otras herramientas que necesita el proyecto para funcionar). - Otros archivos de configuración que, de momento, puedes ignorar.
No te preocupes si ahora no sabes qué significa todo eso. El objetivo aquí es reconocer los nombres, no comprenderlos todos.
Tu primera victoria
Vas a descargar tu primer proyecto y ponerlo en marcha.
Es un proyecto muy simple, hecho solo con HTML y CSS, pero es más que suficiente para dar tu primer paso. Solo quiero que:
- Descargues el primer proyecto (desde este enlace).
- Lo abras con Visual Studio Code (u otro editor que prefieras).
- Lo abras en el navegador y veas que algo aparece.
Aunque no lo parezca, este paso marca la diferencia. Ya no estás viendo vídeos o leyendo documentación. Estás haciendo algo práctico.
Aunque no te lo creas, ya has empezado
- Ahora, reconoces las herramientas más esenciales del entorno Frontend: la base.
- Ahora, sabes que los proyectos pueden crecer en complejidad.
- Ahora, has tenido tu primer contacto con un proyecto real.
- Ahora, has conseguido poner algo en marcha por tu cuenta.
Y eso no es poca cosa.
