Guía — actualizar tu web con VS Code

1 · Antes de empezar

Cinco minutos de contexto que te ahorrarán muchos sustos. No hace falta leer la guía entera: usa el índice y ve directo a lo que necesites.

Arriba tienes un interruptor Mac / Windows. Pulsa el que sea tu ordenador: así la guía te mostrará solo los pasos y atajos que te tocan a ti.

🗺️ En pocas palabras, esto es lo que harás

Abres el programa VS Code con la carpeta de tu web.
Cambias el texto o la foto que quieras.
Guardas (de momento, solo en tu ordenador).
Le das a «Commit» y luego a «Sync Changes» para publicarlo en internet.
Esperas unos minutos y compruebas tu web. ¡Listo!

🖱️ Vocabulario básico del ordenador (ábrelo si lo necesitas)

Si algunas de estas palabras te suenan a chino, aquí van en sencillo. Si ya las dominas, sáltate este desplegable.

El ratón / trackpad

Clic: pulsar una vez el botón izquierdo (o tocar una vez el trackpad).
Doble clic: dos clics seguidos y rápidos. Sirve para abrir cosas.
Clic derecho: abre un menú de opciones. En un portátil Mac: toca con dos dedos a la vez en el trackpad (o mantén Control y haz clic).Es el botón de la derecha del ratón; en portátil, pulsa la esquina inferior derecha del trackpad o con dos dedos.
Arrastrar y soltar: pulsa el botón encima de algo, mantenlo apretado mientras mueves, y suelta donde quieras dejarlo.

Ejemplo de menú al hacer clic derecho en VS Code — Ejemplo de menú que aparece al hacer **clic derecho**.

Internet y archivos

El navegador: el programa con el que entras a internet (Chrome, Safari, Edge o Firefox). Es donde estás leyendo esto.
Pestaña: cada «página» abierta dentro del navegador. Abrir una nueva (el + de arriba, o ⌘TCtrl+T) no cierra lo que ya tienes: solo añade otra al lado.
Favoritos / marcadores: la lista donde guardas páginas para volver fácil.
Finder: la carita azul sonriente del Dock. Es el programa para ver tus archivos y carpetas.Explorador de archivos: el icono de carpeta amarilla en la barra de tareas. Sirve para ver tus archivos y carpetas.
Carpeta vs archivo: una carpeta (icono de carpeta) contiene cosas dentro; un archivo es un documento suelto. Tu web es una carpeta llena de archivos.
Descargas / Documentos / Escritorio: carpetas que ya trae tu ordenador. Lo que bajas de internet suele caer en Descargas.
Dock: la barra de iconos de abajo. Para cambiar de programa, haz clic en su icono ahí.Barra de tareas: la barra de abajo. Para cambiar de programa, haz clic en su icono ahí.

Hacer una captura de pantalla (foto de lo que ves)

Pulsa ⌘⇧4 y arrastra para elegir la zona; la foto aparece en el Escritorio.Pulsa Win+Mayús+S, elige la zona; la foto queda copiada (pégala con Ctrl+V) o se guarda en Imágenes/Capturas. Para enviarla, escribe un correo a tu técnico y arrástrala dentro, o usa el botón «Adjuntar».

Las teclas raras de los atajos

⌘ = Comando (junto a la barra espaciadora) · ⇧ = Mayúsculas (la flecha hacia arriba) · ⌃ = Control. Un atajo como ⌘S significa: mantén pulsada Comando y pulsa la tecla S.Ctrl = Control · Mayús = la flecha hacia arriba. Un atajo como Ctrl+S significa: mantén pulsada Control y pulsa la tecla S.

Qué necesitas tener a mano

Que este sea el ordenador donde trabajas tu web (donde tu técnico la dejó preparada). La carpeta del proyecto en ese ordenador. Esta guía da por hecho que ya está descargada y conectada a GitHub. (¿No la tienes? Lo vemos en el paso 4.) Tu cuenta de GitHub (usuario y contraseña). Un rato: la primera vez, 10–15 minutos; luego, 2 minutos por cambio.

🔑 ¿No recuerdas tu cuenta de GitHub?

¿La creaste tú o tu técnico? Si la hizo tu técnico, quizá esté a su nombre o con su correo: pregúntale cómo entras tú.
Recuperar la contraseña: entra en github.com → «Sign in» (iniciar sesión) → «Forgot password?» (olvidé mi contraseña) → escribe tu correo y sigue las instrucciones.
Si te pide un código del móvil (verificación en dos pasos), es normal y seguro: escríbelo. Si no te llega o no sabes cuál es, avisa a tu técnico.

Cuatro palabras que se parecen (y conviene no confundir)

No hace falta memorizar esto. Solo échale un ojo: distinguir estas cuatro te ahorrará confusiones más adelante.

GitEl sistema que guarda las versiones de tu web en tu ordenador. Es un programa aparte que se instala una vez (paso 3).

GitHubLa web donde se guarda la copia online de tu proyecto, con todo su historial. Como un Google Drive especializado.

GitHub PagesLo que convierte esa copia en tu web pública. Subes un cambio y, en unos minutos, aparece online solo.

VS CodeEl programa (gratis, de Microsoft) que abres para ver y editar los archivos de tu web. El protagonista de esta guía.

🧱 tu web es robusta

Es un sitio estático: un montón de archivos sencillos, sin base de datos que se pueda corromper. Aunque metas la pata en un archivo, el resto sigue funcionando y se arregla en un minuto.

Las reglas de oro

Si solo te quedas con una cosa de toda la guía, que sea esto:

Guardar no es publicar. Guardar (⌘SCtrl+S) solo afecta a tu ordenador. Tu web online no cambia hasta que la subes a GitHub.

Confirmar (commit) tampoco es subir. El commit hace una foto en tu ordenador; lo que la publica es darle a Sync Changes («sincronizar / subir cambios», el botón del paso 8).

Edita en un solo sitio a la vez. O en VS Code o en github.com, nunca en los dos sin sincronizar antes.

Casi todo se puede deshacer. ⌘ZCtrl+Z mientras editas, y el historial de GitHub si ya está online.

Ante la duda, no toques a lo loco. Cerrar sin guardar siempre es seguro. Y preguntar a tu técnico —con una captura— nunca es molestar.

📸 tu mejor herramienta

Si algo no se parece a esta guía o un mensaje te asusta, hazle una captura a la pantalla y mándasela a tu técnico. Es la forma más rápida de resolver cualquier duda. (Cómo hacerla y enviarla está en el desplegable «Vocabulario básico» de arriba.)

2 · Instalar VS Code por si acaso

Si ya lo tienes (el icono azul de VS Code), salta al paso 4. Si no, instalarlo es como instalar cualquier app: gratis y en un par de minutos.

⚠️ descárgalo solo del sitio oficial

Hay copias falsas por internet. Entra únicamente en la web de abajo. Los avisos de seguridad de Mac o Windows al abrir un programa nuevo son normales y no significan que sea un virus: pulsa Abrir / Ejecutar de todos modos / Sí. En Windows, el botón «Ejecutar de todos modos» puede estar escondido: primero pulsa «Más información» y entonces aparece.

code.visualstudio.com

En Mac

Entra en code.visualstudio.com y pulsa el botón azul de descarga (detecta tu Mac). Si te deja elegir: chip Apple = Apple silicon, Mac antiguo = Intel chip; si dudas, Universal. Doble clic en el archivo descargado (acaba en .dmg, está en la carpeta Descargas). Se abre una ventanita con el icono de VS Code. Arrastra el icono de VS Code a la carpeta Aplicaciones que ves en esa ventana, y suelta. Abre Finder → Aplicaciones y doble clic en Visual Studio Code. Si sale «¿Seguro que quieres abrirla?», pulsa Abrir (solo pasa la primera vez).

🍎 importante

Hay que arrastrarlo a Aplicaciones. Si lo abres desde la ventanita del .dmg sin arrastrarlo, al cerrarla parecerá que «se ha perdido».

En Windows

Entra en code.visualstudio.com y pulsa el botón azul de descarga. Lo recomendado es User Installer: no pide contraseña de administrador. Abre el archivo descargado (VSCodeUserSetup-x64-….exe, en la carpeta Descargas). Si Windows avisa, pulsa Más información → Ejecutar de todos modos, o Sí. Marca «Acepto el acuerdo» y pulsa Siguiente en cada pantalla; en «tareas adicionales» deja las casillas como vienen. Pulsa Instalar y, al terminar, deja marcado «Ejecutar Visual Studio Code» y Finalizar.

Es 100% gratis y oficial de Microsoft (no hay que pagar ni poner tarjeta). Ocupa poco y, si algo falla, se desinstala y se vuelve a empezar sin perder ningún dato de tu web.

3 · Instalar Git por si acaso

Git es el motor que permite a VS Code subir tus cambios a GitHub. Normalmente ya viene instalado o tu técnico lo dejó puesto. Solo lo necesitas si VS Code te lo pide.

Primero, comprueba si ya lo tienes (sin terminal)

Abre VS Code y haz clic en el icono de Source Control (en español, «control de cambios»: una ramita, como un caminito que se bifurca) en la barra de iconos de la izquierda. Si ves textos como «Changes» (cambios), una caja para escribir un mensaje o el nombre de tus archivos, ya tienes Git: salta al paso 4. Solo si aparece literalmente un botón azul que dice «Download Git» (descargar Git) es que no lo tienes. En ese caso, sigue aquí abajo.

git-scm.com

Entra en git-scm.com y pulsa Download (descargar; detecta tu sistema). Abre el archivo e instala dejando todas las opciones por defecto: Siguiente → Siguiente → … → Instalar. No cambies nada. Cierra y vuelve a abrir VS Code. Detectará Git automáticamente.

Git no tiene ventana propia ni hace nada por su cuenta: trabaja «por debajo» para que VS Code pueda hablar con GitHub. Lo instalas una vez y te olvidas.

4 · Abrir VS Code y cargar tu carpeta

Abrir tu web significa abrir la carpeta entera del proyecto, no un archivo suelto. Así VS Code ve todos los archivos juntos.

En Mac

Abre VS Code desde el Launchpad o Finder → Aplicaciones. En la pantalla de bienvenida pulsa «Open Folder…» (abrir carpeta), o el menú de arriba File → Open Folder… Se abre una ventana para buscar carpetas. A la izquierda tienes accesos a Escritorio, Documentos, etc. (tu proyecto suele estar en Documentos → GitHub o el Escritorio). Haz un solo clic sobre la carpeta del proyecto para seleccionarla (se pinta de azul; no entres dentro con doble clic) y pulsa Open. Sale un aviso en inglés: «Do you trust the authors of the files in this folder?» (¿confías en quien creó estos archivos?). Como es tu propio proyecto, pulsa «Yes, I trust the authors» (sí, confío).

En Windows

Abre VS Code: botón de Inicio, escribe «Visual Studio Code» y púlsalo. En la pantalla de bienvenida pulsa «Open Folder…» (abrir carpeta), o el menú File → Open Folder… Se abre una ventana para buscar carpetas. A la izquierda tienes accesos a Escritorio, Documentos, etc. (tu proyecto suele estar en Documentos → GitHub o el Escritorio). Selecciona la carpeta del proyecto con un clic y pulsa Seleccionar carpeta. Sale el aviso en inglés «Do you trust the authors of the files in this folder?» (¿confías en quien creó estos archivos?). Pulsa «Yes, I trust the authors» (sí, confío).

Truco: también puedes arrastrar la carpeta (desde el FinderExplorador de archivos) y soltarla sobre la ventana de VS Code. Cuando se abra, a la izquierda (el Explorer, el explorador) aparece la lista de archivos.

📂 ¿No tienes la carpeta en este ordenador?

Si abres el FinderExplorador y no ves la carpeta del proyecto en ningún sitio, es que todavía no está descargada (ordenador nuevo, primera vez…). Hay que traerla desde GitHub una vez. Necesitas la dirección (URL) del repositorio, que te da tu técnico o la copias en github.com (botón verde «Code» → Copy). Luego:

En VS Code, abre la Paleta de Comandos: ⌘⇧PCtrl+Mayús+P.
Escribe «Git: Clone» (clonar) y púlsalo.
Pega la dirección del repositorio y pulsa Intro.
Elige dónde guardarla (te sugiero Documentos) y, cuando termine, pulsa «Open» para abrirla.

Si te lías, no pasa nada: pídele a tu técnico que te deje la carpeta lista y la dirección apuntada.

🔌 comprueba que tu carpeta está conectada a GitHub

Una carpeta «conectada» es la que sabe hablar con tu copia de internet. Lo notarás porque, al abrirla, abajo a la izquierda (en la barra de estado, la franja fina del fondo) aparece una ramita con un nombre (normalmente main). Si la ves, ¡todo en orden! Si no aparece, tienes una copia suelta sin conectar: usa el desplegable de arriba o avisa a tu técnico.

⚠️ errores típicos al abrir

· Abrir un archivo en vez de la carpeta: usa siempre Open Folder.
· Pulsar «No» en el aviso de confianza: activa el «Modo restringido» (a veces sale en inglés, «Restricted Mode») y entonces no puedes editar, así que parece que «no va nada». Solución: pulsa «Yes, I trust the authors».
· Abrir una carpeta equivocada (copia vieja, Descargas…). Si dudas, pregunta antes de tocar.

Abrir VS Code y abrir la carpeta no borra, no cambia y no publica nada: solo te muestra los archivos. Si te equivocas, cierra la ventana (⌘WCtrl+W) y abre otra. Nada se rompe por mirar.

5 · La interfaz: qué estás viendo

La pantalla se divide en zonas fijas. No hay que aprenderse nada de memoria: con la Paleta de Comandos encuentras cualquier cosa escribiendo su nombre.

Ventana de VS Code con un proyecto abierto — La ventana de VS Code: a la izquierda la columna de iconos (**Activity Bar**) y la lista de archivos (**Explorer**); en el centro el **editor**; abajo del todo, la **barra de estado** con la rama `main` a la izquierda y **Go Live** a la derecha.

Activity Bar
barra de actividadLa columna estrecha de iconos pegada al borde izquierdo. Cada icono cambia qué se muestra al lado: archivos, búsqueda, control de cambios, extensiones.

Explorer
exploradorIcono de dos hojas. Es la lista de carpetas y archivos de tu web. Haz clic en uno para abrirlo.

EditorLa zona grande del centro, donde se edita. Arriba, cada archivo abierto es una pestaña.

Status Bar
barra de estadoLa franja fina de abajo del todo. A la izquierda, la rama de Git; a la derecha aparecerá el botón Go Live.

Source Control
control de cambiosEl icono de la ramita. Aquí ves tus cambios y los subes a GitHub (paso 8).

Extensions
extensionesEl icono de cuatro cuadraditos. Para instalar complementos, como Live Server (paso 7).

Command Palette
paleta de comandosUn buscador (⌘⇧PCtrl+Mayús+P): escribe lo que quieres hacer y te lo ofrece. Tu salvavidas.

🧭 si «desaparece» la lista de archivos

Probablemente pulsaste sin querer ⌘BCtrl+B, que oculta la barra lateral. Vuelve a pulsarlo y reaparece. Cerrar una pestaña no borra el archivo, solo lo quita de la vista.

6 · Editar un archivo y guardarlo

Editar aquí es como escribir en cualquier programa de texto. La clave es fijarse en si está guardado o no.

En el Explorer (izquierda), haz clic en el archivo que quieras editar (un .json de datos, o index.html). Se abre en el centro. Haz clic dentro del texto y escribe con normalidad. Mira la pestaña de arriba: al cambiar algo, la X de cerrar se convierte en un punto redondo ● = cambios SIN GUARDAR. Pulsa ⌘SCtrl+S para guardar (el punto vuelve a ser X). ¿Te equivocaste? ⌘ZCtrl+Z deshace.

Pestaña de un archivo con un punto redondo de cambios sin guardar — El **punto redondo ●** en la pestaña avisa de que hay **cambios sin guardar**. Al guardar (`⌘SCtrl+S`) vuelve a ser una X.

🗺️ ¿y qué archivo toco para cambiar cada cosa?

Eso depende de tu web, así que es lo primero que conviene pedirle a tu técnico: una lista corta del tipo «para cambiar los precios, edita tal archivo; para las fotos, tal carpeta». Apúntala aquí:

· ____________________ → ____________________
· ____________________ → ____________________

Truco para no romper nada: cambia solo el texto que ya ves en tu web, sin tocar lo que tiene alrededor (los símbolos < > ni los nombres entre comillas). Si solo reescribes palabras, es muy difícil estropear algo.

💾 guardar a mano es lo más seguro

Existe un guardado automático (menú File → Auto Save), pero si tocas archivos .json es mejor dejarlo desactivado y guardar tú con ⌘SCtrl+S cuando hayas revisado el cambio.

🧩 cuidado con los archivos .json

Los .json son muy quisquillosos con las comas y las comillas. Regla práctica: no borres ni añadas comas ni comillas; cambia solo el texto que va entre comillas («cámbiame esto»). Si tocas una coma o una comilla sin querer, esa parte de la web puede quedarse en blanco.

VS Code te avisa: subraya el error en rojo y lo lista en la pestaña Problems (problemas, abajo). Si ves rojo, no lo subas: deshaz con ⌘ZCtrl+Z. Si dudas, pega el texto en jsonlint.com.

Guardar solo afecta a tu ordenador. Tu web pública no cambia hasta el paso 8, y si cierras con cambios sin guardar, VS Code te pregunta antes.

7 · Ver tu web en local con Live Server

Antes de publicar, conviene ver el cambio «como se verá de verdad», pero solo en tu pantalla. Para eso se instala una extensión que abre tu web en el navegador y la refresca sola al guardar.

Instalar la extensión (solo una vez)

Abre Extensions (extensiones): icono de cuatro cuadraditos, o ⌘⇧XCtrl+Mayús+X. En el buscador escribe Live Server. Elige el que se llama exactamente «Live Server» y cuyo autor es Ritwick Dey (millones de instalaciones). Cuidado con imitaciones. Pulsa el botón azul Install (instalar). Listo en segundos.

Vista de extensiones con Live Server de Ritwick Dey — La extensión correcta: **«Live Server»** de **Ritwick Dey**. Pulsa **Install**.

Usarlo

Con tu carpeta abierta, abajo a la derecha verás el botón «Go Live» (literalmente «ponerlo en directo», pero ojo: solo en tu pantalla, no en internet). Haz clic. Se abre el navegador en una dirección tipo http://127.0.0.1:5500. Es solo tu ordenador; nadie de fuera la ve. A partir de ahora, al guardar (⌘SCtrl+S) la página se actualiza sola. Para apagarlo, pulsa el botón que ahora pone «Port: 5500» en esa misma esquina (no necesitas saber qué es un «puerto»).

Botón Go Live en la barra de estado, abajo a la derecha — El botón **«Go Live»**, abajo a la derecha en la barra de estado.

🖱️ ¿no ves «Go Live»?

Asegúrate de tener abierto un archivo .html. Alternativa que siempre funciona: clic derecho sobre index.html → «Open with Live Server» (abrir con Live Server). Si no lo apagas, tampoco pasa nada: se cierra solo al cerrar VS Code.

Live Server no toca tu código ni publica nada: solo te enseña la web en tu pantalla. Para que el mundo la vea, hay que subirla a GitHub (paso 8).

8 · Guardar tu cambio en GitHub commit + subir

Este es el paso que publica de verdad. Todo se hace con botones, sin escribir comandos. Son dos gestos: confirmar (commit) y subir (Sync Changes).

Panel Source Control con la caja Message y el botón Commit — El panel **Source Control**: la caja **«Message»**, el botón azul **«Commit»** y, abajo, la lista **«Changes»** con el archivo que tocaste.

🔑 requisito: estar dentro de tu cuenta de GitHub

Pulsa el icono de persona (Accounts, «cuentas») abajo a la izquierda → «Sign in with GitHub» (iniciar sesión con GitHub). Se abre el navegador; si no habías entrado, te pedirá usuario y contraseña (y quizá un código de tu móvil). Al final verás una pantalla «Authorize» (autorizar): es normal y segura — solo le das permiso a tu propio VS Code para hablar con tu GitHub.

Puede que el navegador diga «You may now close this window» (ya puedes cerrar esta ventana) o pregunte «¿Abrir Visual Studio Code?»: di que sí. Es normal que la pantalla salte entre el navegador y VS Code; no has hecho nada mal. Para volver a un programa, búscalo en el Dock (abajo)la barra de tareas (abajo) y haz clic.

Asegúrate de haber guardado (paso 6). Si la pestaña tiene un punto redondo ●, aún no está guardado. Haz clic en el icono de Source Control (control de cambios, la ramita) en la barra izquierda. Bajo «Changes» (cambios) verás los archivos que tocaste. Revisa que son los que esperabas (no marques nada). En la caja «Message» (mensaje, arriba) escribe siempre una frase corta de qué cambiaste. Ej.: «Actualizo precios de servicios». Pulsa el botón azul «Commit» (confirmar). Esto hace una foto en tu ordenador (todavía no sube nada). Puede salir un aviso en inglés: «There are no staged changes to commit…?» (algo así como: «no has seleccionado archivos, ¿confirmo todos?»). Es totalmente normal, no es un error. Aunque veas varios botones (Yes=sí, Always=siempre, Never=nunca), tú pulsa «Yes». El botón azul cambia a «Sync Changes» (sincronizar / subir cambios). Púlsalo: este es el que sube tu cambio a GitHub. Solo la primera vez de un proyecto, en su lugar puede poner «Publish Branch» (publicar rama; «rama» = tu versión del proyecto). Púlsalo igual: hace lo mismo que Sync Changes. Si pregunta entre público y privado, elige lo que te dijo tu técnico (ante la duda, pregúntale).

Aviso en inglés: There are no staged changes to commit — El aviso de la casilla 6: **no es un error**, pulsa **«Yes»**.

Botón Sync Changes — Tras el commit, el botón pasa a **«Sync Changes»**: púlsalo para subir a GitHub.

Aviso: This action will pull and push commits — Puede salir esta confirmación: pulsa **«OK»**. ¡Y listo, subido!

⭐ no confundas estos dos

Commit = guardar una foto en tu ordenador. · Sync Changes = subirla a GitHub (y publicarla). Si solo haces Commit, en internet no se ve el cambio.

🔁 si también editas en github.com

Si a veces editas desde la web github.com, antes de tocar nada en VS Code conviene bajar la última versión (eso es hacer un Pull, «traer»). Así evitas mezclar dos versiones distintas. Lo tienes en el panel de control de cambios (Source Control) → menú de tres puntos «…» → Pull.

Cada commit queda en el historial: nunca pierdes el rastro y siempre puedes volver atrás. ¿Te equivocaste en el último commit? Menú «…» → Commit → Undo Last Commit (deshacer el último commit).

9 · Comprobar que se publicó

Subir no es instantáneo: GitHub Pages tarda un poco en montar tu web. Es normal, no es un fallo.

Abre tu web pública en una pestaña nueva del navegador (la dirección de siempre, p. ej. tunombre.github.io o tu dominio). Si no la recuerdas, pídesela a tu técnico y guárdala en favoritos. Espera de 1 a 10 minutos (en casos raros, hasta 20). Es normal que tarde; recargar la página no hace que vaya más rápido, así que aprovecha para respirar. Si sigues viendo lo viejo, es la caché (una copia que guarda el navegador): fuerza la recarga. Chrome/Edge ⌘⇧R; Safari: mantén ⇧ y pulsa recargar, o abre una ventana privada.Ctrl+Mayús+R o Ctrl+F5.

✅ has terminado del todo cuando

En Source Control ya no quedan archivos en «Changes» (sale vacío / «No changes»).
En github.com, dentro de tu repositorio, la pestaña Actions muestra un ✓ verde (mientras publica sale un círculo naranja).
Abres tu web pública (no Live Server) y ves tu cambio tras forzar la recarga.

Cuando se cumplan los tres, puedes cerrar con tranquilidad: ¡misión cumplida!

10 · Cerrar y volver otro día

No hay que «cerrar sesión» ni nada raro. Puedes cerrar con tranquilidad.

Para cerrar: que no queden puntos redondos ● sin guardar (si los hay, VS Code te avisa). Cierra la ventana. Lo que subiste a GitHub ya está a salvo online.
Para volver: abre VS Code; normalmente reabre tu proyecto solo. Si arranca vacío, File → Open Recent (abrir reciente) y ahí está tu carpeta.
Si retomas algo a medias: haz un Pull primero (paso 8) por si hubo cambios desde otro sitio.

Tus archivos no se borran por cerrar VS Code ni por no verlos: la carpeta sigue en tu disco. Cerrar no publica ni deshace nada.

11 · Si algo se rompe (o te asusta)

Los sustos más típicos, con su solución. Recuerda: en Git casi todo se puede deshacer.

He editado pero la web online no cambia lo más común

Casi siempre falta un paso o aún se está publicando:

¿Está guardado? Si la pestaña tiene un punto redondo ●, pulsa ⌘SCtrl+S.
¿Hiciste Commit + Sync Changes? Solo guardar no basta (paso 8).
¿Esperaste el despliegue? De 1 a 10 minutos (paso 9).
¿Probaste el refresco forzado? Suele ser caché.

No encuentro mi carpeta / mi proyecto

File → Open Recent (abrir reciente): suele estar ahí. Si no, File → Open Folder… y búscala (normalmente Documentos → GitHub o el Escritorio). Nada se ha borrado por no verlo. Si no aparece en ningún sitio, quizá no esté descargada: mira el desplegable «¿No tienes la carpeta?» del paso 4, o pide ayuda a tu técnico.

Me pide iniciar sesión en GitHub

Es normal cada cierto tiempo. Pulsa «Sign in with GitHub» (iniciar sesión), entra y dale a «Authorize» (autorizar): es seguro. Pero si te pide cosas raras que no reconoces (códigos, tokens…), para y avisa a tu técnico. Dejarlo a medias no rompe nada.

Veo un «conflicto» con colores raros llama al técnico

Pasa cuando un archivo se cambió en dos sitios a la vez. Verás bloques de colores y botones en inglés (Accept Current / Incoming Change). Tranquila/o: no es grave y no se ha perdido nada. Pero si te pones a pulsar botones sin saber, puedes mezclar dos versiones. Lo más seguro: cierra el archivo SIN guardar, haz una captura y avisa a tu técnico.

He roto un JSON y una sección sale en blanco

Suele ser una coma o comilla de más/de menos. Fácil de arreglar:

Deshaz: ⌘ZCtrl+Z varias veces, y guarda.
Localiza el fallo: pega el contenido en jsonlint.com → Validate; te marca la línea. O mira la pestaña Problems.
Si ya está online y roto: en github.com, abre el archivo, pulsa History (historial) y restaura la versión buena; o usa Revert en el commit que lo rompió.

Aparecen archivos raros tipo .DS_Store

Son archivos invisibles que crea el Mac solo. No rompen la web. No los marques al hacer commit, y pide a tu técnico que añada .DS_Store al .gitignore.

El botón «Go Live» no aparece

Go Live es de Live Server y solo previsualiza en tu ordenador. Comprueba: que tengas abierto un .html; que la extensión esté instalada (paso 7). Alternativa: clic derecho sobre index.html → «Open with Live Server».

⭐ cuando dudes

Cerrar sin guardar siempre es seguro. Una web estática es muy robusta y Git guarda todo el historial: nada es definitivo. Haz una captura y pregunta a tu técnico — no molestas.

12 · Glosario mínimo

Las palabras que más se repiten, en cristiano.

Palabra	Qué significa
Repositorio	La carpeta con todos los archivos de tu web (en tu ordenador y en GitHub).
Commit	«Hacer una foto» de tus cambios con una notita. Es local: aún no sube nada.
Push / Sync	Subir tus commits a GitHub. Es lo que publica de verdad.
Pull	Bajar a tu ordenador lo último que haya en GitHub. Hazlo antes de editar si tocaste algo en otro sitio.
Rama / branch	Una versión del proyecto. La principal es `main` y es la que se publica.
Deploy	El proceso (1–10 min) por el que GitHub convierte tus archivos en tu web pública.
Extensión	Un complemento de VS Code. La única que necesitas es Live Server.
Caché	Copia que guarda el navegador para ir rápido. Por eso a veces ves lo viejo: fuérzalo con un refresco.
JSON	Un archivo de texto donde viven los contenidos. Muy quisquilloso con comas y comillas.
Navegador	El programa con el que entras a internet (Chrome, Safari, Edge, Firefox).

Atajos que vale la pena recordar

Para…	Pulsa
Guardar	`⌘SCtrl+S`
Deshacer	`⌘ZCtrl+Z`
Paleta de Comandos	`⌘⇧PCtrl+Mayús+P`
Mostrar/ocultar archivos	`⌘BCtrl+B`
Abrir Source Control	`⌃⇧GCtrl+Mayús+G` (en Mac es Control ⌃, no ⌘)
Forzar recarga del navegador	`⌘⇧RCtrl+Mayús+R` · Safari: ⇧ + recargar