Mapa de la ruta
Contenido detallado
💻 La terminal
La ventana de texto donde conversas directamente con la computadora. Sin menús, sin clics: solo tú y la máquina.
Una ventana de texto donde escribes comandos y la computadora responde. CMD y PowerShell son los de Windows; shell (Bash/Zsh) es el de Mac y Linux; "consola" es solo otro nombre para lo mismo.
Casi todas las herramientas de programación (Git, deploy, servidores) se operan con texto. Aprender a usar la terminal es como aprender a hablar el idioma nativo de la computadora.
Escribes un comando y responde. La señal $ (o > en Windows) significa «estoy esperando que escribas». Todos los nombres apuntan a la misma idea.
El paso para encontrar y abrir el terminal en tu sistema: Windows + R y «cmd» en Windows, Cmd + Espacio y «Terminal» en Mac, Ctrl + Alt + T en Linux.
Sin saber cómo abrirlo, no pasa nada. Cada sistema tiene su manera, pero el resultado es el mismo: una ventana esperando tus comandos.
En Windows, prefiere PowerShell (moderno). En Mac y Linux, Terminal ya viene instalado. Al abrirlo, ves el prompt con tu nombre de usuario.
Los tres comandos de navegación: pwd (dónde estoy), ls (qué hay aquí) y cd (ir a otra carpeta).
En la terminal no ves las carpetas, preguntas por ellas. Estos comandos son tu mapa: sin ellos, te pierdes en cualquier proyecto.
cd .. vuelve una carpeta, cd ~ va a home. Presiona Tab para autocompletar nombres y evitar errores de escritura.
Los comandos para trabajar con archivos: mkdir crea carpeta, touch crea archivo, cp copia, mv mueve/cambia el nombre, rm borra.
Es el "clic derecho > Nueva carpeta" de la terminal, pero más rápido. Puedes crear la estructura de todo un proyecto en segundos.
CUIDADO con rm: borra definitivamente, sin papelera ni Ctrl+Z. Revisa la ruta antes. mkdir -p crea carpetas anidadas de una sola vez.
Dos formas de poner contenido en un archivo: el nano se edita desde la propia terminal; el code abre el archivo o la carpeta en VS Code.
Crear un archivo vacío es solo el comienzo; necesitas escribir en él. Conocer las dos formas te sirve tanto para ediciones rápidas como para proyectos completos.
En nano, ^O guarda y ^X sale (el ^ y la tecla Ctrl). code . abre toda la carpeta actual en VS Code.
Un ejercicio práctico: crear el árbol de carpetas y archivos de un sitio (index.html, style.css, carpeta img, carpeta pages) usando solo el terminal.
La práctica lo integra todo. Cuando montas un proyecto sin salir del terminal, los comandos se vuelven automáticos y ganas confianza.
Combina mkdir + touch + cd. Comprueba el resultado con ls -R. Esta estructura es la base del proyecto de la Trilha 1.
🌿 Git esencial
Git es un Ctrl+Z infinito para tu código. Cada versión guardada queda almacenada para siempre y ya no perderás trabajo.
Un sistema que guarda fotos (versiones) de tu proyecto a lo largo del tiempo. En cualquier momento puedes ver una versión antigua o volver a ella.
Acaba con el caos de «proyecto-final-2-AGORA-VAI.zip». Experimentas sin miedo, porque toda versión buena queda guardada y nada se pierde.
Cada versión guardada es un «commit» con un mensaje. El historial es una línea de tiempo. Git es la herramienta más usada del mundo para esto.
El paso para descargar e instalar Git en tu computadora: instalador oficial en Windows, brew en Mac, administrador de paquetes en Linux.
Git no viene instalado en todos los sistemas. Instalarlo una vez (y configurar el nombre y el correo electrónico) deja todo listo para el resto del curso.
Revisa con git --version. Configura git config --global user.name e user.email una sola vez.
El flujo para guardar el trabajo: git init inicia Git en la carpeta, git add selecciona qué guardar y git commit guarda la versión con un mensaje.
Es el corazón de Git. Vas a repetir add e commit decenas de veces al día para guardar tu progreso.
add = "prepara"; commit = "guarda definitivamente". El mensaje del commit (-m) explica qué cambió. Haz commits pequeños y frecuentes.
Los comandos de inspección: status muestra qué cambió ahora, log muestra el historial de commits y diff muestra línea por línea lo que se modificó.
Antes de guardar, necesitas ver qué cambió. Estos comandos son tus ojos: evitan que confirmes cambios equivocados por accidente.
Usa git status todo el tiempo. git log --oneline da un resumen claro. git diff muestra el «antes y después».
Las branches son copias paralelas del proyecto. Creas una branch para probar algo nuevo sin tocar la versión principal y luego la unes (merge) si funciona.
Permite experimentar sin miedo: si la idea no funciona, descartas la branch y la versión principal sigue intacta.
git branch nome crea, git checkout (o switch) cambia, git merge junta. main y es la rama principal.
Un archivo de texto llamado .gitignore que indica qué debe ignorar Git: contraseñas, archivos temporales, carpetas pesadas como node_modules.
Sin él, puedes subir contraseñas a Internet o llenar el historial de basura. Es la primera protección de seguridad de todo proyecto.
Una línea por defecto para ignorar. *.log ignora todos los registros; .env protege secretos. Crea el .gitignore antes del primer commit.
☁️ GitHub y Pages
GitHub es donde vive tu código en la nube: copias de seguridad, colaboración y, con GitHub Pages, tu sitio publicado gratis.
El registro en GitHub, el sitio más grande del mundo para guardar código. La cuenta gratuita ya cubre todo lo que necesitas en este curso.
GitHub es el «portafolio» de quienes programan. Los reclutadores miran tu perfil, y desde ahí se publica tu sitio mediante Pages.
Elige un nombre de usuario profesional (formará parte de la dirección de tu sitio). Confirma el correo electrónico para habilitar todas las funciones.
Un Personal Access Token (PAT) es una contraseña especial que GitHub genera para que el terminal la use en lugar de tu contraseña habitual.
GitHub ya no acepta la contraseña habitual en la terminal. Sin el token, no puedes enviar (push) tu código a la nube.
Genera el token en la configuración de GitHub y cópialo en el momento (solo aparece una vez). Trata el token como una contraseña: nunca lo compartas.
El puente entre tu computadora y GitHub: remote apunta al repositorio en la nube, push envía y pull descarga los cambios.
Es lo que convierte el Git local en una copia de seguridad en línea y colaborativa. Sin el push, tu código nunca sale de tu máquina.
git remote add origin conéctate una vez. git push inicia, git pull baja. origin y es el apodo del repositorio remoto.
GitHub Pages es un servicio gratuito que convierte un repositorio con HTML en un sitio público, con su propia dirección en internet.
Es la forma más sencilla y gratuita de publicar un sitio. En pocos clics, cualquier persona en el mundo puede acceder a tu proyecto.
Actívalo en la configuración del repositorio (pestaña Pages). La dirección queda usuario.github.io/repo. Cada push actualiza el sitio automáticamente.
Asistentes de IA que escriben y completan código por ti dentro del editor: GitHub Copilot y herramientas como Codex.
La IA acelera mucho el trabajo: sugiere comandos, explica errores y escribe fragmentos completos. Quien sabe usarla bien produce más rápido.
La IA sugiere; tú decides y verificas. Describe bien lo que quieres (un prompt claro). Úsala como apoyo, sin dejar de entender qué hace el código.
Un ejercicio que reúne todo: crear un repositorio en GitHub, conectarlo con el proyecto local y enviar (push) el código por primera vez.
Completar el ciclo una vez elimina el miedo. Después de eso, subir cualquier proyecto se vuelve una rutina de pocos comandos.
Secuencia: init → add → commit → remote add → push. Usa el token (PAT) para autenticarte.
🚀 Proyecto: Landing page
La hora de unirlo todo: construyes una landing page desde cero y la publicas en minutos, con dirección propia.
El primer paso del proyecto: crear la carpeta local, activar Git y crear el repositorio correspondiente en GitHub.
Todo proyecto profesional comienza con un repositorio bien configurado. Empezar bien evita tener que rehacer el trabajo más adelante.
Combina lo que viste: mkdir + git init + repositorio en GitHub + remote add. Ten un .gitignore desde el inicio.
HTML es el lenguaje que define la estructura de una página: títulos, párrafos, imágenes y enlaces, organizados en "etiquetas".
Es el esqueleto de todos los sitios de Internet. Sin HTML, no hay página. Conocer lo básico ya te permite crear una landing de verdad.
Las etiquetas vienen en pares: <h1>...</h1>. El contenido visible queda dentro de <body>. Empieza por el index.html.
CSS es el lenguaje de los estilos: colores, fuentes, tamaños, espaciados y posicionamiento. Es lo que transforma un HTML sin procesar en una página atractiva.
Una landing debe atraer. El CSS es lo que marca la diferencia entre una página sin gracia y una página profesional y agradable a la vista.
CSS selecciona un elemento (selector) y aplica reglas. Coloca los estilos en style.css y vincúlala al HTML con la etiqueta <link>.
El paso para enviar (push) tu landing a GitHub y activar Pages, para que el sitio quede accesible desde una dirección pública.
Es el momento de estar "en línea": tu trabajo deja de ser un archivo en la computadora y se convierte en un sitio real que cualquiera puede visitar.
Haz push con el index.html en la raíz, activa Pages y espera unos minutos. Cada nuevo push actualiza el sitio automáticamente.
Cambiar la dirección predeterminada usuario.github.io por un dominio propio que compras, como seunome.com.
Un dominio propio transmite profesionalismo y es más fácil de compartir. Es un extra opcional, pero le da mucho valor al proyecto.
Compra el dominio en un registrador, apunta el DNS a GitHub y configura el campo "Custom domain" en Pages. El HTTPS es gratis.
El ejercicio que cierra la ruta: crear, diseñar, versionar y publicar tu propia landing page, desde el primer comando hasta que el sitio esté en línea.
Entregar un proyecto completo demuestra que dominas todo: terminal, Git, GitHub y Pages trabajando en conjunto.
Une los 4 módulos en un solo flujo. Al final tendrás un enlace público para compartir y la base lista para la Trilha 2.