Crear y publicar un sitio web profesional: guía paso a paso (VS Code + GitHub + Netlify)

Paso a paso para crear un sitio web profesional desde cero

Esta guía está pensada para una colaboradora que trabajará en Visual Studio Code, subirá su proyecto a GitHub y lo publicará en Netlify. Incluye explicaciones claras, ejemplos y el “por qué” detrás de cada paso. ✨

🎯 Objetivo final: construir un sitio (landing) con secciones Inicio, Sobre mí, Proyectos y Contacto, con buen diseño (CSS), una pizca de interactividad (JS), control de versiones (Git) y publicación real (Netlify).

✅ Ideal para principiantes

🧩 100% práctico

📱 Responsive (móvil)

🚀 Publicación real

📋 Código con botón Copiar

⬆️ Volver al inicio

1) Estructura mínima del proyecto 🗂️

Antes de escribir código, define una estructura de carpetas. Esto evita “archivos perdidos”, facilita colaborar, mejora el orden mental y hace que publicar sea más sencillo.

✅ Regla de oro: HTML en un archivo, CSS en otro, JS en otro. Esto mantiene el proyecto ordenado y escalable.

📁 Estructura recomendada (versión práctica + escalable)

sitio-profesional/
├─ index.html                 (landing principal)
├─ styles.css                 (estilos globales compartidos)
├─ scripts.js                 (JS global compartido)
└─ assets/
   ├─ css/
   │  └─ index.css            (estilos específicos SOLO de index.html)
   ├─ js/
   │  ├─ robot.js             (componente/extra de UI: mini robot)
   │  └─ (otros módulos .js)
   ├─ img/                    (imágenes: hero, fotos, banners)
   └─ icons/                  (íconos svg/png)

🧠 ¿Por qué así?

Separación de responsabilidades: cada archivo hace “lo suyo”.
Global vs específico: styles.css y scripts.js se comparten; assets/css/index.css se usa solo para personalizar la landing.
Escalable: si agregas páginas (p.ej. proyectos.html), no se vuelve caos.
Publicación simple: Netlify detecta fácil qué publicar (solo subes la carpeta completa).

📌 Truco útil: Cuando crees una nueva página (por ejemplo proyectos.html), crea también un CSS específico (assets/css/proyectos.css) y, si lo necesitas, un JS específico (assets/js/proyectos.js). Así cada página se personaliza sin ensuciar lo global.

🧩 Atajos útiles (clic para copiar)

index.html styles.css scripts.js assets/css/index.css assets/js/robot.js assets/img assets/icons

👆 Puedes dar clic en estas “etiquetas” para copiarlas al portapapeles.

🧪 Primer proyecto (práctica): empezar simple

En el primer ejercicio, para comenzar, tu objetivo es dominar lo esencial utilizando tres archivos en la raíz: index.html para la estructura, styles.css para el diseño y scripts.js para la interactividad. Así, el aprendizaje es más claro y progresivo y, al mismo tiempo, se replica exactamente la forma en que se trabajan los proyectos reales.

📌 Ruta mínima (nivel 1)

sitio-profesional/
├─ index.html
├─ styles.css
└─ scripts.js

🚀 Cuando el proyecto crece (nivel 2: “proyecto real”)

Si tu sitio empieza a crecer (más secciones, más páginas, más componentes), puedes agregar carpetas opcionales para tener visión de “proyecto profesional”.

sitio-profesional/
├─ index.html
├─ pages/
│  ├─ proyectos.html
│  ├─ experiencia.html
│  └─ contacto.html
├─ styles.css
├─ scripts.js
├─ data/
│  ├─ proyectos.json          (lista de proyectos para renderizar)
│  └─ perfil.json             (datos básicos del perfil)
└─ components/
   ├─ header.html             (bloques reutilizables)
   ├─ footer.html
   └─ cards.html

💡 Nota: No necesitas data/ ni components/ desde el día 1. Son carpetas “opcional pro” para cuando tu sitio evolucione.

⬆️ Volver al inicio

2) HTML: estructura y etiquetas 🧱

HTML define la estructura del sitio: títulos, párrafos, listas, enlaces, imágenes y secciones. Piensa en HTML como el “esqueleto” de la página: organiza el contenido para que tenga sentido, sea fácil de leer y sea accesible.

🧠 Idea clave (sin confusión):
HTML = qué elementos existen (estructura).
CSS = cómo se ven y cómo se acomodan (diseño/layout).
JavaScript = interacción (qué pasa cuando el usuario hace algo).

📌 Estructura básica (plantilla mínima)

Toda página HTML inicia con una estructura base. Esta estructura se repite en todos los sitios (desde uno pequeño hasta uno profesional).

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mi sitio profesional</title>

    <!-- CSS -->
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <header>
      <h1>Tu Nombre</h1>
      <nav>
        <a href="#inicio">Inicio</a>
        <a href="#sobre-mi">Sobre mí</a>
        <a href="#proyectos">Proyectos</a>
        <a href="#contacto">Contacto</a>
      </nav>
    </header>

    <main>
      <section id="inicio">
        <h2>Hola 👋</h2>
        <p>Bienvenida/o a mi sitio profesional.</p>
      </section>
    </main>

    <footer>
      <p>© <span id="year"></span> Tu Nombre</p>
    </footer>

    <!-- JS -->
    <script src="scripts.js"></script>
  </body>
</html>

🧠 ¿Qué es cada parte?

<!doctype html> indica al navegador que el documento usa HTML5.
<html lang="es"> define el idioma principal y, además, mejora accesibilidad y SEO.
<head> contiene información no visible, como metadatos, título, fuentes, CSS y configuración SEO.
<body> agrupa todo el contenido visible, por ejemplo textos, botones, secciones e imágenes.
<header> representa el encabezado y, generalmente, incluye el nombre del sitio y la navegación.
<main> delimita el contenido principal, es decir, lo más relevante de la página.
<footer> cierra la página y, normalmente, muestra copyright, enlaces, redes y datos de contacto.

✅ Regla de oro: El HTML debe “entenderse” aunque le quites el CSS. Si tu contenido sigue teniendo lógica, tu estructura está bien.

🔗 Conectar archivos externos (lo correcto en un proyecto real)

En un proyecto real, el HTML no “pega” el CSS ni el JavaScript dentro del mismo archivo. En su lugar, el HTML solo los enlaza. De esta forma, el proyecto se mantiene limpio, ordenado y escalable.

Primero, el CSS se enlaza dentro de <head>: <link rel="stylesheet" href="styles.css">
Después, el JavaScript se enlaza al final de <body>: <script src="scripts.js"></script>

💡 Tip:
Además, colocar el JavaScript al final evita errores comunes (porque el HTML ya se cargó) y, al mismo tiempo, mejora el rendimiento del sitio.

🔍 Meta datos y SEO básico (lo mínimo que debes saber)

El SEO (Search Engine Optimization) es el conjunto de prácticas que ayudan a que tu sitio sea entendible por buscadores como Google. En este primer proyecto no buscamos “posicionar”, sino hacer las cosas bien desde el inicio.

🧠 Idea clave:
El SEO técnico empieza en el HTML, específicamente dentro del <head>.

📍 ¿Dónde van los metadatos?

Los metadatos son información que no se ve directamente en la página, pero que sirve para navegadores, buscadores y redes sociales.
Siempre van dentro de <head>.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- META DATOS SEO -->
  <title>Tu nombre | Rol profesional</title>
  <meta name="description" content="Descripción clara de quién eres y qué haces.">
</head>

🏷️ Meta datos esenciales (mínimos recomendados)

<title>
Título de la página. Es lo que aparece en la pestaña del navegador y como título principal en Google.
Recomendación: Nombre + rol (50–60 caracteres).
<meta name="description">
Resumen corto del sitio. Google suele usarlo como descripción en resultados.
Recomendación: 1–2 frases claras (140–160 caracteres).
<meta charset="utf-8">
Permite acentos, emojis y caracteres especiales correctamente.
<meta name="viewport">
Hace que el sitio se vea bien en celular, tablet y desktop.
Hoy es obligatorio.

✅ Con solo estos metadatos tu HTML ya es “profesional”.

🧪 Ejemplo real para un sitio profesional

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Quetzalli | Enfermería Informática y Salud Digital</title>
  <meta
    name="description"
    content="Sitio profesional de Quetzalli. Proyectos, experiencia y enfoque en enfermería informática, salud digital y análisis de datos."
  >

  <link rel="stylesheet" href="styles.css">
</head>

🌐 Meta datos sociales (opcional, pero recomendado)

Estos metadatos controlan cómo se ve tu sitio cuando alguien lo comparte en WhatsApp, Facebook, LinkedIn o X (Twitter).

<meta property="og:title" content="Tu nombre | Perfil profesional">
<meta property="og:description" content="Descripción breve de tu perfil y proyectos">
<meta property="og:type" content="website">
<meta property="og:url" content="https://tusitio.netlify.app">
<meta property="og:image" content="https://tusitio.netlify.app/assets/img/preview.jpg">

💡 Tip: No son obligatorios para este ejercicio, pero saber que existen ya te pone un nivel arriba.

⚠️ Errores comunes con metadatos

Poner varios <title> (solo debe haber uno).
Dejar la descripción vacía o genérica.
Escribir todo en mayúsculas (mala práctica).
Poner metadatos fuera del <head>.

🧠 Conclusión:
El SEO no empieza con “trucos”, empieza con HTML bien escrito.

🔤 Tipografías (Google Fonts): cómo se importan y cómo se llaman

Las tipografías se importan dentro de <head>. Normalmente se usan dos cosas: preconnect (más rápido) y el link de las fuentes.

✅ Ejemplo real (Roboto + IBM Plex Sans + Space Grotesk)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=IBM+Plex+Sans:wght@500;600;700;800;900&family=Space+Grotesk:wght@500;600&display=swap"
  rel="stylesheet"
/>

📌 ¿Cómo se “llaman” en CSS?
En CSS usas el nombre exacto de la familia con font-family:

font-family: "Roboto", sans-serif;
font-family: "IBM Plex Sans", sans-serif;
font-family: "Space Grotesk", sans-serif;

En la URL verás IBM+Plex+Sans, pero en CSS se escribe con espacios: "IBM Plex Sans".

🏗️ HTML semántico: escribir estructura “profesional”

El HTML semántico consiste en usar etiquetas que describen el propósito del contenido. De esta forma, mejora el SEO y la accesibilidad y, además, facilita el mantenimiento del código.

<header> define el encabezado del sitio o de una sección; generalmente incluye marca, menú o título.
<nav> agrupa la navegación del sitio y, por lo tanto, contiene el menú principal.
<main> representa el contenido principal de la página, es decir, lo más relevante.
<section> organiza contenido por temas; por ejemplo: Sobre mí, Proyectos o Contacto.
<article> define contenido independiente y reutilizable, como una tarjeta o un post.
<aside> incluye contenido complementario y, normalmente, se usa para notas o recursos.
<footer> cierra el sitio o una sección y, finalmente, agrupa información secundaria.

💡 Tip: Si un bloque podría existir por sí solo, como una tarjeta de proyecto, entonces suele ser mejor usar <article>.

🧠 Etiquetas más usadas (definiciones claras)

<h1>...</h1> define el título principal de la página y, por lo tanto, se usa solo una vez.
<h2>...</h2> organiza los títulos de sección, por ejemplo: Sobre mí o Proyectos.
<h3>...</h3> estructura subtítulos dentro de una sección específica.
<p>...</p> contiene párrafos de texto y, generalmente, explica ideas o conceptos.
<a href="">...</a> crea enlaces, ya sea a otras páginas o a anclas como #contacto.
<img src="" alt=""> inserta imágenes y, además, requiere siempre un atributo alt.
<button>...</button> representa una acción, como enviar un formulario o abrir un menú.
<ul> <li> define listas sin orden específico, por ejemplo elementos relacionados.
<ol> <li> organiza listas ordenadas y, normalmente, se usa para pasos.
<div> actúa como contenedor genérico cuando no existe una etiqueta semántica adecuada.
<span> funciona como contenedor en línea y se usa para resaltar palabras.
<form> agrupa campos y, así, define un formulario completo.
<label> describe un campo de formulario y mejora la accesibilidad.
<input> crea campos de entrada, como texto, email o contraseña.
<textarea> permite escribir texto largo, por ejemplo mensajes.

💡 Consejo: utiliza IDs en las secciones, como id="contacto", para que el menú navegue correctamente mediante anclas.

🆔 Clases e IDs: cómo identificar elementos

En HTML, las clases y los IDs sirven para identificar elementos específicos. Esto es clave porque CSS y JavaScript trabajan sobre ellos.

🧠 Idea clave:
HTML nombra los elementos, CSS los diseña y JavaScript los hace interactivos.

🔹 ¿Qué es un ID?

Un id identifica un elemento único en toda la página.
No debe repetirse.

<section id="contacto">
  <h2>Contacto</h2>
</section>

Se usa una sola vez.
Ideal para secciones principales.
Se usa mucho para navegación con anclas.
Muy común en JavaScript.

Ejemplo real: <a href="#contacto">Ir a contacto</a>

🔸 ¿Qué es una class?

Una class sirve para agrupar elementos que comparten estilo o comportamiento.
Puede repetirse todas las veces que sea necesario.

<button class="btn btn--primary">Enviar</button>
<button class="btn btn--secondary">Cancelar</button>

Puede usarse en muchos elementos.
Es la base del diseño con CSS.
Permite crear variantes reutilizables.

🧩 Usar varias clases en un mismo elemento

Un elemento puede tener más de una clase. Esto permite construir componentes reutilizables.

<button class="btn btn--primary btn--large">
  Guardar cambios
</button>

💡 Tip: una clase base define el componente (.btn) y las clases adicionales definen variantes (.btn--primary).

🧠 ¿Cuándo usar ID y cuándo class?

Usa...	Cuando...
`id`	Es un elemento único (sección, ancla, punto clave)
`class`	Es un estilo o patrón reutilizable

⚠️ Errores comunes

Usar el mismo id en varios elementos.
Usar id para dar estilo (mejor usar class).
No nombrar clases con intención (caja1, div2).

🧠 Conclusión:
Si el HTML no tiene buenas clases e IDs, el CSS se vuelve difícil y frágil.

🦸 ¿Qué es un “Hero” y por qué se estructura así?

El Hero es la primera sección visible de una landing page. Su objetivo es que la persona entienda en segundos: quién eres, qué haces y qué puede hacer (CTA).

H1: tu nombre o tu propuesta principal.
H2: tu rol o enfoque (ej. Enfermería Informática & Salud Digital).
Descripción: 2–4 líneas máximo (claro y directo).
Botones (CTA): una acción principal (Contactar) y una secundaria (Ver proyectos).
Visual: imagen/ilustración que refuerce tu identidad (opcional, pero ayuda mucho).

✅ Resultado: un Hero bien hecho reduce confusión y aumenta interacción (las personas saben dónde hacer clic y qué esperar).

📦 Contenedores: por qué existen (full width vs contenido)

Muchas secciones tienen un fondo que ocupa todo el ancho de la pantalla, pero el contenido se mantiene centrado para lectura cómoda. Esto se logra con un contenedor (por ejemplo .container).

Fondo (sección): puede ser full width (100%).
Contenido (container): se limita a un ancho máximo y agrega padding.

Ejemplo mental: “La sección pinta el fondo” y “el contenedor sostiene el contenido”.

📊 Tablas en HTML: antes vs ahora

En los primeros años de la web, las tablas se usaban para TODO: columnas, layouts, menús y hasta páginas completas.

🕰️ Contexto histórico:
Antes no existían Flexbox ni Grid. Las tablas eran la única forma de crear columnas.

❌ Cómo se hacía antes (NO recomendado hoy)

<table>
  <tr>
    <td>Menú</td>
    <td>Contenido</td>
  </tr>
</table>

Esto funcionaba visualmente, pero traía muchos problemas.

❌ HTML difícil de leer
❌ Mala accesibilidad
❌ Poco flexible para móviles
❌ Mal SEO

🚫 Regla actual:
No uses tablas para maquetar páginas.

✅ Uso correcto de tablas hoy

Las tablas siguen siendo válidas, pero solo para datos tabulares:

Listados
Resultados
Comparaciones
Reportes

📋 Ejemplo de tabla correcta

<table>
  <thead>
    <tr>
      <th>Tecnología</th>
      <th>Uso</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>HTML</td>
      <td>Estructura</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Diseño</td>
    </tr>
  </tbody>
</table>

💡 Tip: Si el contenido es información en filas y columnas → tabla. Si es diseño visual → NO tabla.

📐 Flexbox vs Grid (para entender el layout)

Esto lo aplica CSS, pero conviene entenderlo desde ya porque define cómo se acomodan elementos.

Flexbox (1 dimensión): acomoda elementos en una fila o una columna. Ideal para: menús, hero (texto + imagen), filas de botones.
Grid (2 dimensiones): acomoda en filas y columnas al mismo tiempo. Ideal para: tarjetas de proyectos, galerías, dashboards.

Regla práctica:
¿Piensas “fila o columna”? → Flexbox
¿Piensas “rejilla/columnas” (cards)? → Grid

♿ Accesibilidad básica (HTML responsable)

La accesibilidad forma parte del desarrollo profesional y, en el ámbito de la salud, cobra aún mayor relevancia. Además, con pequeños hábitos puedes mejorar la experiencia para todas las personas.

Imágenes: siempre usa alt, ya que describe el contenido para lectores de pantalla.
Formularios: utiliza <label for="id"> y asegúrate de que coincida con el id del input.
Navegación: procura que los enlaces describan claramente a dónde llevan y evita textos genéricos como “clic aquí”.
Orden lógico: mantén una jerarquía clara H1 → H2 → H3, de modo que no existan saltos confusos.

💙 Tip rápido: si te imaginas usando tu sitio solo con el teclado, entonces comienzas a diseñar interfaces más claras y accesibles.

⬇️ Proyecto real: index.html completo (zip descargable)

Para esta guía, el index.html del proyecto profesional es más largo porque incluye: SEO básico, importación de tipografías, estructura semántica y secciones completas (Hero, Proyectos, Contacto). Por eso se entrega como archivo descargable, para que lo abras en Visual Studio Code y lo edites con calma.

📥 Descarga recomendada:
Descarga el archivo completo y úsalo como plantilla. Está comentado para que lo puedas modificar fácilmente.

👉 Descargar index.html del proyecto profesional

✅ Este archivo incluye:
– SEO básico (title + description)
– importación correcta de tipografías (Google Fonts)
– estructura semántica (header/main/section/footer)
– separación global vs específico (styles.css + index.css, scripts.js + robot.js)

⬆️ Volver al inicio

3) CSS: estilos y propiedades 🎨

CSS es el lenguaje que le da “forma visual” a tu HTML: colores, tipografías, tamaños, espaciados, alineación y diseño responsive. Si HTML es el esqueleto, CSS es la ropa (y también la postura).

✅ Idea clave: CSS se escribe en un archivo aparte (styles.css) y el HTML lo “llama” con este enlace dentro de <head>:
<link rel="stylesheet" href="styles.css">

🔗 ¿Dónde se conecta el CSS en el HTML?

Con tu plantilla mínima, el CSS se enlaza dentro de <head>. Si styles.css está en la misma carpeta que index.html, la ruta es así:

<!-- CSS -->
<link rel="stylesheet" href="styles.css">

✅ Si más adelante guardas CSS dentro de una carpeta, entonces cambias la ruta, por ejemplo: assets/css/styles.css.

🎯 Regla de oro: cómo CSS “encuentra” elementos

CSS funciona con selectores (algo así como “apuntar” a elementos del HTML).

p → selecciona todas las etiquetas <p>.
.clase → selecciona elementos con class="clase".
#id → selecciona el elemento con id="id" (único).
header nav a → selecciona enlaces dentro de nav dentro de header.

💡 Tip práctico: cuando quieras reutilizar estilos en varios lugares → usa class. Cuando quieras un objetivo único (ej. #contacto) → usa id.

✨ Un CSS base bonito (para tu plantilla mínima)

Este CSS está pensado para que tu HTML mínimo se vea decente desde el primer minuto: tipografía legible, contenedor centrado, links claros y secciones con “aire”. Copia esto en tu styles.css.

/* =========================
   CSS BASE (para empezar)
   ========================= */

/* 1) Tokens (variables): cambias aquí y se refleja en todo */
:root{
  --ink:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --paper:#f8fafc;
  --border:#e2e8f0;
  --accent:#0A66C2;     /* azul clínico */
  --accent-2:#06B6D4;   /* cian científico */
  --radius:18px;

  --container: 980px;
}

/* 2) Reset básico y box sizing */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
}

/* 3) Tipografía: espaciado y jerarquía mínima */
h1, h2, h3{ line-height:1.15; margin: 0 0 10px; }
p{ margin: 0 0 14px; color: var(--muted); }

/* 4) Contenedor: centra el contenido y da padding lateral */
.container{
  width:min(var(--container), 92vw);
  margin:0 auto;
  padding:24px 0;
}

/* 5) Layout simple (para que el sitio se sienta ordenado) */
header, main, footer{
  width:min(var(--container), 92vw);
  margin:0 auto;
}

header{
  padding:18px 0;
}

/* 6) Navegación básica */
nav a{
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  margin-right:12px;
}
nav a:hover{
  text-decoration:underline;
}

/* 7) Secciones con aire */
section{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin: 16px auto;
  width:min(var(--container), 92vw);
}

/* 8) Footer */
footer{
  padding: 18px 0 28px;
  color: var(--muted);
}

/* 9) Responsive rápido */
@media (max-width: 720px){
  nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  section{ padding: 14px; }
}

✅ Lo importante aquí: antes de “decorar”, asegúrate de:
• buena legibilidad • buen espaciado • estructura limpia • responsive básico.

🧩 CSS específico por página (ejemplo: index.css)

En proyectos reales, no todo el CSS va en un solo archivo. Lo más común es tener:

styles.css → estilos globales (colores, tipografía, layout base).
index.css → estilos SOLO para la página index.html.

✅ Regla práctica:
Si un estilo se repite en varias páginas → va en styles.css.
Si solo afecta a una página → va en su CSS específico.

---

📁 Estructura recomendada

sitio-profesional/
├─ index.html
├─ styles.css          (CSS global)
├─ scripts.js
└─ assets/
   └─ css/
      └─ index.css     (CSS solo del index)

---

🔗 Cómo enlazar el CSS específico en el HTML

En index.html, primero enlaza el CSS global y después el específico:

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="assets/css/index.css">

📌 El orden importa: lo que viene después puede sobrescribir lo anterior.

---

🎯 Ejemplo simple: estilizar solo el título del inicio

Supongamos que en tu HTML tienes esta sección:

<section id="inicio">
  <h2>Hola 👋</h2>
  <p>Bienvenida/o a mi sitio profesional.</p>
</section>

En lugar de tocar styles.css, creamos este estilo en assets/css/index.css:

/* =========================
   Estilos solo del index
   ========================= */

#inicio h2{
  font-size: 2.2rem;
  color: var(--accent);
  margin-bottom: 8px;
}

💡 ¿Qué estamos aprendiendo aquí?

Usar #inicio para apuntar a una sección concreta.
No afectar otros h2 del sitio.
Separar lo global de lo específico.

✅ Este patrón se usa todo el tiempo en sitios reales: landing pages, dashboards, secciones especiales, etc.

📌 Propiedades más usadas (y para qué sirven)

color → define el color del texto y, además, ayuda a crear jerarquía visual.
background / background-color → define el fondo del elemento; por ejemplo, puede ser un color, un degradado o una imagen.
margin → controla el espacio por fuera del elemento, por lo que sirve para separar secciones y bloques.
padding → controla el espacio por dentro del elemento y, así, da “aire” al contenido.
border → agrega una línea alrededor del elemento; por ello, es útil para separar visualmente.
border-radius → redondea las esquinas y actualmente se usa mucho en diseños modernos.
display → define cómo se comporta el elemento en el layout; por ejemplo: block, inline, flex o grid.
gap → define la separación entre elementos hijos cuando se usa flex o grid, evitando márgenes extra.
width / max-width → controlan el ancho del elemento y, en particular, evitan textos demasiado largos.
@media → permite aplicar reglas según el tamaño de pantalla y, finalmente, es la base del diseño responsive.

📐 Layout rápido: block / inline / flex / grid

block: ocupa toda la línea (ej. div, section, p).
inline: ocupa solo su contenido (ej. a, span).
flex: acomoda elementos en 1 dimensión (fila o columna).
grid: acomoda en 2 dimensiones (filas y columnas).

Regla práctica:
¿Piensas “fila o columna”? → Flexbox
¿Piensas “rejilla de tarjetas”? → Grid

🧩 Ejemplos rápidos: Flex y Grid

Flexbox suele usarse en navegación y acciones; Grid suele usarse en tarjetas de proyectos.

/* Flexbox (menú simple) */
nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* Grid (tarjetas tipo "Proyectos") */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 900px){
  .cards{ grid-template-columns: 1fr; }
}

🧾 Tablas: antes se usaban para maquetar (hoy NO)

Hace años se usaban tablas para acomodar columnas y secciones… pero hoy es mala práctica. Las tablas deben usarse para datos tabulares (ej. horarios, listas comparativas, reportes). Para diseño, usa Flexbox o Grid.

✅ Ejemplo de tabla (bien usada, para datos)

<table>
  <thead>
    <tr>
      <th>Año</th>
      <th>Proyecto</th>
      <th>Rol</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2025</td>
      <td>Dashboard SIARHE</td>
      <td>Coordinación / Analítica</td>
    </tr>
  </tbody>
</table>

💡 Si quieres que una tabla se vea bonita, se estiliza con CSS (bordes, padding, zebra), pero NO se usa como “layout”.

⬇️ Proyecto real: CSS completo (zip descargable)

Para esta guía, el CSS del proyecto profesional es más completo porque incluye: variables globales (tokens), tipografías, botones, componentes y estilos específicos de la landing. Por eso se entrega como archivo descargable, para que lo abras en Visual Studio Code y lo edites con calma.

📥 Descarga recomendada:
Descarga el paquete CSS completo y úsalo como plantilla. Está comentado para que lo puedas modificar fácilmente.

✅ Este paquete incluye:
– styles.css (global): colores, tipografías, variables, botones, utilidades base
– assets/css/index.css (específico): estilos de la landing (hero, secciones, cards, contacto, etc.)
– estructura lista para “global vs específico” (igual que en proyectos reales)

👉 Descargar styles.css del proyecto profesional

👉 Descargar index.css del proyecto profesional

🧩 ¿Cómo se usa?
1) Descomprime el .zip
2) Copia styles.css a la raíz del proyecto (junto a index.html)
3) Copia index.css a assets/css/index.css
4) Asegúrate de que tu HTML tenga estos enlaces:
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="assets/css/index.css">

📌 Tip para evitar errores:
Mantén los nombres EXACTOS (styles.css y assets/css/index.css). Si cambias nombres o rutas, también debes cambiar los <link> en el HTML.

⬆️ Volver al inicio

4) JavaScript: comportamiento y lógica ⚙️

JavaScript (JS) es el lenguaje que le da comportamiento al sitio: permite reaccionar a clics, validar formularios, actualizar datos, mostrar mensajes y automatizar tareas.

🧠 Analogía rápida:
HTML = estructura (esqueleto)
CSS = diseño (ropa)
JavaScript = comportamiento (movimiento)

🧩 JS vs JSON vs GeoJSON (aclaración importante)

Al empezar, estos términos suelen confundirse. Es importante diferenciarlos:

JavaScript (JS): es un lenguaje de programación. Aquí escribes lógica: funciones, eventos, cálculos, condiciones.
JSON: es un formato de datos (no es un lenguaje). Sirve para guardar y transportar información estructurada.
GeoJSON: es un tipo especial de JSON para datos geográficos (mapas, puntos, polígonos).

📌 En esta guía nos enfocaremos en JavaScript.
JSON y GeoJSON se mencionan solo para que sepas qué son cuando los encuentres, pero no son necesarios para este primer proyecto.

📍 ¿Dónde se coloca JavaScript en el HTML?

En proyectos sencillos, el archivo scripts.js se enlaza al final del HTML, justo antes de cerrar </body>. Esto asegura que el HTML ya se haya cargado antes de ejecutar JS.

<!-- JS -->
<script src="scripts.js"></script>
</body>

🗓️ Ejemplo práctico: año automático en el footer

Un uso clásico y muy útil de JavaScript es actualizar automáticamente el año del footer, evitando cambiarlo manualmente cada enero.

// scripts.js
document.addEventListener('DOMContentLoaded', () => {
  const year = document.querySelector('#year');
  if (year) {
    year.textContent = new Date().getFullYear();
  }
});

🔎 Este código busca el elemento con id="year" y coloca el año actual. Si el elemento no existe, no pasa nada (buena práctica).

⏰ Práctica sugerida: mostrar hora actual

Como ejercicio adicional, puedes usar JavaScript para mostrar la hora actual. Esto refuerza el uso de fechas, variables y DOM.

// scripts.js
function getCurrentTime(){
  const now = new Date();
  return now.toLocaleTimeString();
}

// Ejemplo de uso
console.log('Hora actual:', getCurrentTime());

✅ Prueba rápida: confirmar que JavaScript está enlazado

Un truco sencillo para comprobar que scripts.js está funcionando es reaccionar a un clic.

// index.html
<button id="btn-saludo" type="button">
  Probar JavaScript
</button>

// scripts.js
document.addEventListener('DOMContentLoaded', () => {
  const btn = document.querySelector('#btn-saludo');
  if (btn) {
    btn.addEventListener('click', () => {
      alert('¡JavaScript está funcionando! ✅');
    });
  }
});

📁 Buenas prácticas: organización de archivos JavaScript

Al inicio puedes tener un solo archivo (scripts.js), pero cuando el proyecto crece conviene separar el JavaScript por “tipo de responsabilidad”. Esto evita archivos gigantes, facilita encontrar cosas y permite reutilizar código sin romper todo.

✅ Idea clave:
scripts.js (raíz) = “orquesta” y cosas globales.
assets/js/ = funcionalidades específicas (módulos), configuración y utilidades.

🗂️ Estructura recomendada (simple pero profesional)

sitio-profesional/
├─ index.html
├─ styles.css
├─ scripts.js                  (GLOBAL: inicializa y llama módulos)
└─ assets/
   └─ js/
      ├─ utils/                (helpers reutilizables)
      ├─ config/               (constantes y ajustes editables)
      ├─ modules/              (funcionalidades completas por feature)
      └─ components/           (widgets UI reutilizables, opcional)

✅ ¿Qué va en `scripts.js` (en la raíz)?

Inicializaciones globales: año en footer, hora actual, cosas que aplican a todo el sitio.
“Boot” del sitio: llamar módulos si existen (por ejemplo: activar robot, activar menú móvil).
Código mínimo: idealmente aquí no metes “features grandes”, solo conectas piezas.

🧰 `assets/js/utils/` — utilidades reutilizables

Aquí van funciones genéricas que podrías usar en cualquier parte del sitio. No deberían depender de una sección específica.

Fechas y hora (date-time.js)
Helpers de DOM (dom.js: qs(), createEl(), etc.)
Formato de números (format.js)

⚙️ `assets/js/config/` — configuración y constantes

Aquí guardas datos “editables” que no son lógica: listas de mensajes, endpoints, textos, settings, llaves, etc. Es como separar configuración de código.

Mensajes del robot (robot-messages.js)
Rutas / URLs / flags (site-config.js)
Constantes para una sección (contact-config.js)

Ejemplo tipo SIARHE:
marcadores-config.js ≈ assets/js/config/...
(listas, textos, constantes que cambias sin tocar la lógica)

🧩 `assets/js/modules/` — funcionalidades completas (por feature)

Aquí van “bloques” de funcionalidad con lógica completa: suelen crear UI, manejar eventos y usar utilidades/config. Un módulo puede ser: “robot-toast”, “menú móvil”, “tabs”, “filtros”, etc.

Robot toast / mini robot (robot-toast.js)
Validación de formulario (contact-form.js)
Menú responsive (mobile-nav.js)

Ejemplo tipo SIARHE:
marcadores-control.js ≈ assets/js/modules/...
(lógica que inserta HTML, escucha eventos y “controla” la interfaz)

🧱 `assets/js/components/` — componentes UI reutilizables (opcional)

Esta carpeta es opcional. Úsala solo si vas a reutilizar un mismo “widget” en varias páginas (por ejemplo: un toast genérico, un modal genérico, un componente de tabs). Si solo se usa en una página, puede vivir mejor como módulo.

Toast genérico (toast.js)
Modal reutilizable (modal.js)
Tabs reutilizables (tabs.js)

✅ Regla final (muy práctica)

¿El código afecta a todo el sitio? → scripts.js
¿Lo usarás en varias páginas o componentes? → utils/ o components/
¿Solo contiene datos o valores editables? → config/
¿Resuelve una funcionalidad completa? → modules/

⬇️ Proyecto real: JavaScript completo (zip descargable)

En el proyecto profesional, el JavaScript está separado por responsabilidades. Esto evita archivos gigantes, facilita el mantenimiento y refleja cómo se trabaja en proyectos reales.

Por eso, los scripts se entregan como archivos descargables, para que los abras en Visual Studio Code y los modifiques con calma.

📥 Descarga recomendada:
Descarga los archivos JavaScript completos y úsalos como plantilla. Están comentados para que entiendas qué hace cada parte.

✅ Este paquete incluye:
– scripts.js (global): lógica general del sitio
– assets/js/robot.js (componente): mensajes de ayuda contextual para la guía / landing

👉 Descargar scripts.js del proyecto profesional

👉 Descargar robot.js del proyecto profesional

🧩 ¿Cómo se usa?
1) Descomprime el archivo .zip
2) Copia scripts.js a la raíz del proyecto (junto a index.html)
3) Copia robot.js a la carpeta assets/js/components/
4) Asegúrate de que tu HTML tenga estos scripts enlazados al final del <body>:

<!-- JS global -->
<script src="scripts.js"></script>

<!-- Componentes JS -->
<script src="assets/js/components/robot.js"></script>

📌 ¿Por qué esta separación?

scripts.js contiene solo lógica reutilizable y global (fecha, hora, helpers, inicializaciones).
robot.js es un componente: crea HTML, estilos y comportamiento propios, y puede eliminarse sin romper el sitio.

🧠 Regla práctica:
– ¿Afecta a todo el sitio? → scripts.js
– ¿Es algo visual, aislado o opcional? → c

💡 Consejo final: En un sitio tipo portafolio, menos JavaScript es mejor. Prioriza claridad, rendimiento y legibilidad.

⬆️ Volver al inicio

5) Git + GitHub: control de versiones y documentación 🧠

En esta sección aprenderás a usar Git y GitHub, y a documentar correctamente tu proyecto. Estas herramientas son esenciales en cualquier entorno profesional.

🤔 Git vs GitHub (diferencia clara)

Git es un programa que se instala en tu computadora. Guarda el historial de cambios del proyecto (versiones).
GitHub es una plataforma en internet donde se suben los repositorios Git para compartir, colaborar y publicar.

Resumen rápido:
Git = control de versiones (local)
GitHub = repositorio en la nube + colaboración

👤 Paso 1: crear cuenta y repositorio en GitHub

Regístrate en GitHub.
Crea un repositorio nuevo.
Nombre sugerido: sitio-profesional.
Visibilidad: Público.
No agregues archivos aún (lo haremos manualmente).

⬇️ Paso 2: instalar Git en tu computadora

Antes de usar Git, es necesario instalarlo. Git es un programa que se ejecuta desde la terminal (PowerShell, CMD o Terminal).

🪟 Windows (instalación recomendada paso a paso)

Entra a https://git-scm.com y da clic en Download for Windows.
Abre el archivo descargado (Git-x.xx.x-64-bit.exe).
Durante el instalador, verás varias pantallas. No necesitas cambiar todo, pero hay algunas opciones importantes:

⚙️ Opciones clave del instalador (las importantes)

Seleccionar componentes
✅ Deja marcado:
- ✔ Git Bash Here
- ✔ Git GUI Here
- ✔ Git LFS (Large File Support)
Elegir editor por defecto
Puedes dejar Vim (opción por defecto) o cambiar a:
- Visual Studio Code (recomendado si ya lo usas)
👉 Esto solo define qué editor se abre al escribir mensajes largos de commit.
Adjusting your PATH environment ⚠️
Esta es la más importante. Selecciona:
- “Git from the command line and also from 3rd-party software”
Esto permite usar Git tanto en Git Bash como en PowerShell y CMD.
HTTPS transport backend
Deja la opción por defecto (Use the OpenSSL library).
Line ending conversions
Deja la opción recomendada:
- ✔ Checkout Windows-style, commit Unix-style line endings
Terminal emulator
Deja:
- ✔ Use MinTTY (the default terminal of MSYS2)
El resto de opciones puedes dejarlas tal como vienen.

✅ Finalizar instalación

Completa el instalador y cierra la ventana.

🧪 Comprobar que Git quedó disponible

Abre cualquiera de estas opciones:

PowerShell
Git Bash

git --version

Si aparece una versión (por ejemplo git version 2.44.0), Git quedó correctamente instalado y accesible.

💡 Importante:
Si Git funciona en PowerShell y en Git Bash, significa que el PATH quedó bien configurado.

🍎 macOS (Monterey, Ventura, Sonoma, Sequoia…)

En macOS, Git puede venir instalado o no, dependiendo de la versión y de si tienes instaladas las Command Line Tools. En muchos casos, al ejecutar git por primera vez, macOS muestra una ventana para instalar herramientas, pero no siempre aparece (o puede fallar). Por eso, la forma más confiable es instalar Git usando Homebrew.

✅ 1) Abrir la Terminal

Finder → Aplicaciones → Utilidades → Terminal
o presiona ⌘ Command + Espacio → escribe “Terminal” → Enter

✅ 2) Verificar si Git ya existe

git --version

Si te devuelve una versión (por ejemplo git version 2.x.x), ya lo tienes. Si sale error o no reconoce el comando, instala Git con Homebrew (paso siguiente).

✅ 3) Verificar si tienes Homebrew

brew --version

Si te devuelve una versión, ya tienes Homebrew. Si dice que no existe, instálalo.

✅ 4) Instalar Homebrew (si NO lo tienes)

Copia y pega este comando en Terminal y presiona Enter:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

💡 Nota: Homebrew puede pedir tu contraseña de Mac (no se verá al escribirla, es normal). Al terminar, puede mostrarte instrucciones extra para agregar brew al PATH. Si eso ocurre, copia y pega las líneas que te muestre la Terminal.

✅ 5) Instalar Git con Homebrew

brew install git

✅ 6) Verificar que Git quedó instalado

git --version

Si ya aparece la versión, todo quedó listo.

🐧 Linux

sudo apt update
sudo apt install git

✅ Verificar que Git quedó instalado

Abre PowerShell, CMD o Terminal y escribe:

git --version

Si ves un número de versión (por ejemplo git version 2.x.x), la instalación fue exitosa.

💡 Nota importante:
Git solo se instala una vez. Después de esto, ya puedes usarlo en cualquier proyecto.

⚙️ Paso 3: configuración inicial (una sola vez)

Git necesita saber quién eres para firmar los cambios. Usa el mismo nombre y correo que en GitHub.

git config --global user.name "Tu Nombre"
git config --global user.email "tu-correo@github.com"

📁 Organización local recomendada

C:\Users\TU_USUARIO\Documents\Proyectos\

Dentro de esta carpeta guardarás todos tus repositorios.

🚀 Paso 4: iniciar repositorio local

cd C:\Users\TU_USUARIO\Documents\Proyectos\sitio-profesional
git init
git add .
git commit -m "Primer commit: estructura inicial del proyecto"

🔗 Paso 5: conectar con GitHub

git remote add origin https://github.com/USUARIO/sitio-profesional.git
git branch -M main
git push -u origin main

🧠 Comandos básicos que usarás siempre

git status Ver estado del proyecto.
git add . Preparar cambios.
git commit -m "mensaje" Guardar versión.
git push Subir cambios.
git pull Bajar cambios.
git clone Descargar repositorio.

✅ Buenas prácticas

Un commit debe representar un cambio lógico.
Describe claramente qué hiciste.
No subas archivos innecesarios.

📄 Documentación del proyecto (archivos obligatorios)

Todo proyecto profesional debe incluir documentación básica. Estos archivos van en la raíz del proyecto.

📘 README.md

Es la portada del proyecto en GitHub. Explica qué es el proyecto y cómo usarlo.

# Sitio Profesional

Proyecto web personal desarrollado como práctica de HTML, CSS y JavaScript.

## Contenido
- Estructura básica con HTML
- Estilos con CSS
- Interacciones simples con JavaScript

## Tecnologías
- HTML5
- CSS3
- JavaScript
- Git + GitHub

## Uso
Abrir el archivo index.html en el navegador.

🚫 .gitignore

Indica qué archivos o carpetas NO deben subirse a GitHub.

# Archivos del sistema
.DS_Store

# Configuración del editor
.vscode/

# Logs
*.log

⚖️ LICENSE (Licencia del proyecto)

Un archivo LICENSE define qué pueden y qué no pueden hacer otras personas con tu proyecto: usarlo, copiarlo, modificarlo, compartirlo o venderlo.

🧠 Idea clave:
Si no defines una licencia, legalmente nadie puede reutilizar tu código o contenido, aunque esté en GitHub.

📚 Tipos de licencias comunes (explicadas fácil)

MIT License
Muy permisiva. Permite usar, modificar y vender el código, solo pide mantener el aviso de autoría.
👉 Ideal para software libre y librerías.
Apache License 2.0
Similar a MIT, pero con protección adicional sobre patentes.
👉 Usada en proyectos grandes y empresariales.
GNU GPL v3
Permite reutilizar, pero obliga a que cualquier derivado también sea software libre.
👉 Ideal si quieres que todo lo derivado siga siendo abierto.
Creative Commons (CC)
Diseñadas para contenidos educativos, documentación, guías, textos, imágenes.
👉 Muy usadas en proyectos académicos.
Licencia Artística 2.0
Permite modificación y redistribución, cuidando la integridad del autor original.
Licencia Académica Gratuita v3.0 (AFL)
Similar a MIT pero orientada a contextos académicos y educativos.

✅ Licencia recomendada para este proyecto

Para esta guía y el proyecto educativo, se recomienda:

Creative Commons Attribution–NonCommercial 4.0 International
(CC BY-NC 4.0)

Esta licencia permite:

✔ Copiar y compartir el contenido
✔ Adaptarlo y modificarlo
✔ Usarlo en contextos educativos y personales

Con la condición de:

🔹 Dar crédito al autor
🚫 No usarlo con fines comerciales

💡 Por qué esta licencia:
Protege tu trabajo, permite aprender y reutilizar, pero evita que terceros lo vendan como propio.

📄 Archivo LICENSE (para copiar y pegar)

Crea un archivo llamado LICENSE (sin extensión) y pega lo siguiente:

Creative Commons Attribution-NonCommercial 4.0 International

© 2025 Tu Nombre

Esta obra está licenciada bajo la Licencia Creative Commons
Atribución-NoComercial 4.0 Internacional.

Usted es libre de:
- Compartir — copiar y redistribuir el material en cualquier medio o formato
- Adaptar — remezclar, transformar y construir a partir del material

Bajo los siguientes términos:
- Atribución — Debe dar crédito de manera adecuada,
  proporcionar un enlace a la licencia e indicar si se realizaron cambios.
- NoComercial — No puede utilizar el material con fines comerciales.

No hay restricciones adicionales — No puede aplicar términos legales
o medidas tecnológicas que restrinjan legalmente a otros hacer
cualquier uso permitido por la licencia.

Texto completo de la licencia:
https://creativecommons.org/licenses/by-nc/4.0/deed.es

📌 Importante:
Los archivos README.md, .gitignore y LICENSE siempre van en la raíz del proyecto.

⬆️ Volver al inicio

6) Publicar tu sitio en Netlify 🚀

Netlify es una plataforma que permite publicar sitios web de forma gratuita, rápida y profesional. Es ideal para portafolios, sitios personales, proyectos académicos y prácticas de frontend.

🧠 Idea clave:
Netlify toma tu proyecto (HTML, CSS y JS) y lo convierte en un sitio accesible desde Internet, sin necesidad de servidores, bases de datos ni configuraciones complicadas.

📋 Requisitos antes de publicar

✔ Tener tu proyecto funcionando en tu computadora.
✔ Un repositorio en GitHub con tu proyecto.
✔ Un archivo index.html en la raíz del proyecto.
✔ CSS y JS enlazados correctamente.

📌 Importante:
Netlify siempre busca un archivo llamado index.html como punto de entrada del sitio.

🧾 Crear una cuenta en Netlify

Primero, entra a https://www.netlify.com.
Después, haz clic en Sign up.
Finalmente, regístrate usando tu cuenta de GitHub (recomendado).

De esta forma, usar GitHub facilita la conexión automática con tus repositorios y, además, permite actualizaciones automáticas del sitio.

🔗 Publicar directamente desde GitHub (opción recomendada)

Primero, en Netlify, haz clic en “Add new site”.
Después, selecciona “Import an existing project”.
A continuación, elige GitHub como proveedor.
Luego, autoriza a Netlify a acceder a tus repositorios.
Finalmente, selecciona tu repositorio (por ejemplo, sitio-profesional).

⚙️ Configuración básica

Para este proyecto simple, la configuración es mínima:

Build command: déjalo vacío.
Publish directory: /

💡 Tip:
En este caso, si tu proyecto es solo HTML, CSS y JavaScript, Netlify no necesita procesos de build adicionales.

Por último, haz clic en Deploy site y espera unos segundos mientras Netlify publica tu sitio.

🌐 Tu sitio ya está en línea

Netlify generará automáticamente una URL parecida a:

https://nombre-aleatorio.netlify.app

Puedes cambiar el nombre del sitio:

Ve a Site settings
Selecciona Change site name
Elige algo como:

tu-nombre.netlify.app
portafolio-profesional.netlify.app

🔄 Actualizaciones automáticas

Cada vez que hagas:

git add .
git commit -m "mensaje claro"
git push

Netlify detectará los cambios y actualizará el sitio automáticamente. No necesitas volver a subir nada manualmente.

✅ Flujo profesional:
Editas en Visual Studio Code → haces commit → haces push → Netlify publica solo.

⚠️ Errores comunes y cómo evitarlos

❌ No aparece el sitio:
Asegúrate de que index.html esté en la raíz.
❌ CSS o JS no cargan:
Revisa rutas relativas (styles.css, assets/css/index.css, etc.).
❌ Se ve distinto que en local:
Verifica mayúsculas/minúsculas en nombres de archivos.

🎯 Meta de esta sección

Al terminar este paso, debes ser capaz de:

✔ Publicar tu sitio profesional en Internet.
✔ Tener una URL pública para compartir.
✔ Actualizar tu sitio usando Git y GitHub.

🎉 Logro desbloqueado:
Ya tienes un sitio web profesional publicado, como en proyectos reales.

⬆️ Volver al inicio

7) Checklist final ✅

Primero, tu index.html abre sin errores.
Después, el CSS se carga correctamente (verifica que el enlace a styles.css sea correcto).
A continuación, el JavaScript se ejecuta sin problemas (revisa que el script a scripts.js esté bien enlazado).
Además, las imágenes cargan correctamente (rutas correctas: assets/img/).
También, el sitio se ve bien en móvil (diseño responsive).
Por último, subiste el proyecto a GitHub (repositorio público o privado, según lo necesites).
Finalmente, Netlify publicó el sitio y te proporcionó una URL.

🎯 Extra: agrega una sección de “Proyectos” con 3 tarjetas: título, descripción corta y link al repositorio/demo.

⬆️ Volver al inicio

8) Errores comunes y cómo resolverlos 🧯

A continuación se listan los problemas más frecuentes al crear y publicar un sitio web profesional. La mayoría son detalles pequeños, pero saber dónde revisar hace toda la diferencia.

❌ “Los estilos no se reflejan en el sitio”

Si el HTML carga pero el diseño no cambia, revisa lo siguiente en orden:

Primero, verifica que el archivo styles.css exista y esté en la misma carpeta que index.html.
Después, confirma que el enlace sea correcto: <link rel="stylesheet" href="styles.css">
Finalmente, abre Inspeccionar → pestaña Network o Console para ver si el archivo no se está cargando o aparece algún error.

❌ “Las imágenes no se muestran en la página”

Este error suele estar relacionado con las rutas o los nombres de archivo.

Asegúrate de que las mayúsculas y minúsculas coincidan exactamente (en servidores reales esto sí importa).
Verifica la ruta completa. Ejemplo correcto: <img src="assets/img/foto.jpg" alt="Foto">

❌ “Netlify muestra un error 404”

Cuando Netlify no encuentra el archivo principal, suele deberse a la configuración del directorio publicado.

Confirma que exista un archivo index.html en el directorio que Netlify está publicando.
Si tu sitio está dentro de una carpeta (por ejemplo site/), ajusta el campo Publish directory a esa carpeta.

❌ “No puedo pegar scripts en WordPress”

En WordPress, algunos bloques o configuraciones bloquean etiquetas <script> por seguridad.

Esto es normal y no es un error de tu código.
Como alternativa, puedes usar un plugin como Code Snippets o insertar el JavaScript en el footer del tema.

🧠 Tip de diagnóstico:
Cuando algo “no funciona”, abre la consola del navegador (F12 → Console) y lee el mensaje. En la mayoría de los casos, el error indica exactamente qué archivo falta o qué línea está causando el problema.

⬆️ Volver al inicio

📥 Descargas y recursos

Aquí puedes descargar esta guía en PDF. Además, encontrarás enlaces a guías complementarias que iremos publicando.

🧭 Antes de avanzar:
Antes de continuar con la parte técnica, te recomiendo revisar la guía para definir tu imagen profesional (paleta de colores, tipografías y estilo visual).

Contar con esta base te permitirá, más adelante, configurar de forma coherente el styles.css global de tu proyecto y mantener una identidad visual consistente en todo tu sitio.

Ver guía de imagen profesional (próximamente) ↗

🐍 Extra (para después):
También publicaremos una guía para instalar Python y librerías para análisis de datos (ideal si quieres llevar tu portafolio a “Data / Salud Digital”).

Ver guía de Python para análisis (próximamente) ↗

📥 Proyecto completo:
Podrás descargar la carpeta completa del proyecto del sitio profesional. Esto te podrá tener una estructura completa para modificar y comenzar a crear tu primer proyecto.

⬇️ Descargar sitio-profesional.zip del proyecto

Descargar PDF

Se descargará únicamente el contenido dentro del contenedor #guiaSP.guiaSP.

Crear y publicar un sitio web profesional: guía paso a paso (VS Code + GitHub + Netlify)

Paso a paso para crear un sitio web profesional desde cero

1) Estructura mínima del proyecto 🗂️

📁 Estructura recomendada (versión práctica + escalable)

🧠 ¿Por qué así?

🧩 Atajos útiles (clic para copiar)

🧪 Primer proyecto (práctica): empezar simple

📌 Ruta mínima (nivel 1)

🚀 Cuando el proyecto crece (nivel 2: “proyecto real”)

2) HTML: estructura y etiquetas 🧱

📌 Estructura básica (plantilla mínima)

🧠 ¿Qué es cada parte?

🔗 Conectar archivos externos (lo correcto en un proyecto real)

🔍 Meta datos y SEO básico (lo mínimo que debes saber)

📍 ¿Dónde van los metadatos?

🏷️ Meta datos esenciales (mínimos recomendados)

🧪 Ejemplo real para un sitio profesional

🌐 Meta datos sociales (opcional, pero recomendado)

⚠️ Errores comunes con metadatos

🔤 Tipografías (Google Fonts): cómo se importan y cómo se llaman

✅ Ejemplo real (Roboto + IBM Plex Sans + Space Grotesk)

🏗️ HTML semántico: escribir estructura “profesional”

🧠 Etiquetas más usadas (definiciones claras)

🆔 Clases e IDs: cómo identificar elementos

🔹 ¿Qué es un ID?

🔸 ¿Qué es una class?

🧩 Usar varias clases en un mismo elemento

🧠 ¿Cuándo usar ID y cuándo class?

⚠️ Errores comunes

🦸 ¿Qué es un “Hero” y por qué se estructura así?

📦 Contenedores: por qué existen (full width vs contenido)

📊 Tablas en HTML: antes vs ahora

❌ Cómo se hacía antes (NO recomendado hoy)

✅ Uso correcto de tablas hoy

📋 Ejemplo de tabla correcta

📐 Flexbox vs Grid (para entender el layout)

♿ Accesibilidad básica (HTML responsable)

⬇️ Proyecto real: index.html completo (zip descargable)

3) CSS: estilos y propiedades 🎨

🔗 ¿Dónde se conecta el CSS en el HTML?

🎯 Regla de oro: cómo CSS “encuentra” elementos

✨ Un CSS base bonito (para tu plantilla mínima)

🧩 CSS específico por página (ejemplo: index.css)

📁 Estructura recomendada

🔗 Cómo enlazar el CSS específico en el HTML

🎯 Ejemplo simple: estilizar solo el título del inicio

📌 Propiedades más usadas (y para qué sirven)

📐 Layout rápido: block / inline / flex / grid

🧩 Ejemplos rápidos: Flex y Grid

🧾 Tablas: antes se usaban para maquetar (hoy NO)

✅ Ejemplo de tabla (bien usada, para datos)

⬇️ Proyecto real: CSS completo (zip descargable)

4) JavaScript: comportamiento y lógica ⚙️

🧩 JS vs JSON vs GeoJSON (aclaración importante)

📍 ¿Dónde se coloca JavaScript en el HTML?

🗓️ Ejemplo práctico: año automático en el footer

⏰ Práctica sugerida: mostrar hora actual

✅ Prueba rápida: confirmar que JavaScript está enlazado

📁 Buenas prácticas: organización de archivos JavaScript

🗂️ Estructura recomendada (simple pero profesional)

✅ ¿Qué va en scripts.js (en la raíz)?

🧰 assets/js/utils/ — utilidades reutilizables

⚙️ assets/js/config/ — configuración y constantes

🧩 assets/js/modules/ — funcionalidades completas (por feature)

🧱 assets/js/components/ — componentes UI reutilizables (opcional)

✅ Regla final (muy práctica)

⬇️ Proyecto real: JavaScript completo (zip descargable)

5) Git + GitHub: control de versiones y documentación 🧠

🤔 Git vs GitHub (diferencia clara)

👤 Paso 1: crear cuenta y repositorio en GitHub

⬇️ Paso 2: instalar Git en tu computadora

🪟 Windows (instalación recomendada paso a paso)

⚙️ Opciones clave del instalador (las importantes)

✅ Finalizar instalación

🧪 Comprobar que Git quedó disponible

🍎 macOS (Monterey, Ventura, Sonoma, Sequoia…)

✅ 1) Abrir la Terminal

✅ 2) Verificar si Git ya existe

✅ 3) Verificar si tienes Homebrew

✅ 4) Instalar Homebrew (si NO lo tienes)

✅ ¿Qué va en `scripts.js` (en la raíz)?

🧰 `assets/js/utils/` — utilidades reutilizables

⚙️ `assets/js/config/` — configuración y constantes

🧩 `assets/js/modules/` — funcionalidades completas (por feature)

🧱 `assets/js/components/` — componentes UI reutilizables (opcional)