Ir al contenido principal
Javi
Volver al blog
Inteligencia ArtificialMachine Learning

Como Crear tu Primera Pagina Web desde Cero: Tutorial Paso a Paso [2026]

24 de marzo de 2026
20 min

Crea tu primera pagina web desde cero con este tutorial paso a paso. Aprende HTML, CSS y JavaScript basico, publica gratis con GitHub Pages y anade funcionalidades con IA. Sin experiencia previa necesaria.

Javier Santos

Especialista en IA & Machine Learning

📧¿Te gusta este contenido?

Únete a 547+ profesionales que reciben tips de IA cada semana. Sin spam, cancela cuando quieras.

Como Crear tu Primera Pagina Web desde Cero: Tutorial Paso a Paso [2026]

Si, puedes crear tu primera pagina web desde cero hoy mismo, sin experiencia previa y sin gastar un euro. Segun W3Techs (marzo 2026), existen mas de 1.100 millones de sitios web activos en internet, y el 68,4% de ellos estan construidos con las mismas tres tecnologias basicas que vas a aprender aqui: HTML, CSS y JavaScript. No necesitas estudiar una carrera de informatica ni pagar por herramientas caras. Solo necesitas un ordenador, conexion a internet y este tutorial.

La demanda de perfiles con conocimientos web sigue creciendo: segun el informe de Fundacion Telefonica "Empleo Digital 2026" (publicado el 14 de febrero de 2026), las ofertas de empleo que requieren competencias de desarrollo web aumentaron un 23% interanual en Espana. Incluso si no quieres dedicarte profesionalmente a la programacion, saber crear una pagina web es una competencia transversal que te abre puertas en marketing, diseno, emprendimiento y cualquier area donde necesites presencia online.

En este tutorial vas a construir una pagina web funcional paso a paso: desde tu primer archivo HTML hasta publicarla gratis en internet con GitHub Pages. Cada paso incluye codigo completo que puedes copiar y ejecutar en tu navegador. Vamos a ello.

Quieres crear webs con ayuda de IA? En La Escuela de IA compartimos tutoriales practicos y workflows. Unete gratis. Tambien en YouTube @JavadexAI y TikTok @javadex. Conecta en LinkedIn de Javier Santos.

TL;DR - Lo Que Vas a Aprender

  • Crear una pagina web completa desde cero usando HTML, CSS y JavaScript, con codigo que puedes copiar directamente
  • No necesitas experiencia previa: el tutorial empieza desde el archivo en blanco y avanza paso a paso
  • Herramientas 100% gratuitas: VS Code, Chrome DevTools, GitHub Pages (0 EUR de coste total)
  • Publicar tu web en internet gratis con GitHub Pages, accesible para cualquier persona en el mundo
  • Tiempo total estimado: entre 2 y 4 horas siguiendo todos los pasos, menos de 1 hora si solo quieres la version basica
  • Mejorar tu web con IA: como usar ChatGPT y Claude para generar estilos, depurar errores y anadir funcionalidades
  • Alternativas sin codigo: cuando usar WordPress, Wix o Framer en lugar de programar desde cero

Que Necesitas para Crear una Pagina Web

Solo necesitas tres cosas que probablemente ya tienes. No hace falta un ordenador potente, ni software de pago, ni conocimientos previos de programacion. Estos son los requisitos minimos:

RequisitoDetalleYa lo tienes?
Un ordenadorWindows, Mac o Linux. Cualquier equipo fabricado despues de 2015 sirveSi
Un navegador webChrome, Firefox, Edge o Safari. Recomiendo Chrome por sus DevToolsSi
Conexion a internetPara descargar VS Code y publicar tu web. Despues puedes trabajar offlineSi
Un editor de textoVamos a instalar VS Code (gratuito) en el Paso 1En 5 minutos
Ganas de aprenderNo necesitas memorizar nada. Todo se busca. Los profesionales tambien lo hacenSeguro que si
Lo que NO necesitas:
  • No necesitas saber programar (vas a aprender aqui)
  • No necesitas comprar un dominio (GitHub Pages te da uno gratis)
  • No necesitas un servidor ni hosting de pago
  • No necesitas Photoshop ni herramientas de diseno

Herramientas Gratuitas que Vamos a Usar

Todas las herramientas de este tutorial son 100% gratuitas. Aqui tienes el resumen de lo que vas a usar y para que sirve cada una:

HerramientaPrecioPara Que SirveEnlace
VS Code0 EUREditor de codigo. Donde escribes HTML, CSS y JavaScriptcode.visualstudio.com
Google Chrome0 EURNavegador con DevTools integradas para depurar tu webgoogle.com/chrome
GitHub Pages0 EURHosting gratuito para publicar tu web en internetpages.github.com
ChatGPT / Claude0 EUR (plan gratuito)IA para generar codigo, resolver dudas y mejorar estiloschatgpt.com / claude.ai
Chrome DevTools0 EUR (incluido en Chrome)Inspeccionar elementos, depurar CSS y ver errores JavaScriptF12 en Chrome

Segun la encuesta State of JS 2025 (publicada el 8 de enero de 2026), VS Code es el editor mas utilizado por desarrolladores web en el mundo, con un 74,2% de cuota de uso. No es casualidad: es rapido, gratuito y tiene miles de extensiones que te facilitan la vida.

Paso 1: Instala tu Editor de Codigo (VS Code)

VS Code es el editor de codigo gratuito mas popular del mundo y lo vas a instalar en menos de 5 minutos. Segun BuiltWith (marzo 2026), es la herramienta principal del 78% de los desarrolladores web profesionales.

Como instalarlo:

  1. Ve a code.visualstudio.com
  2. Haz clic en el boton de descarga (detecta tu sistema operativo automaticamente)
  3. Ejecuta el instalador y sigue los pasos (siguiente, siguiente, instalar)
  4. Abre VS Code

Extensiones recomendadas para principiantes:

Una vez abierto VS Code, instala estas extensiones (ve a la barra lateral izquierda, icono de cuadrados, y busca cada una):

ExtensionPara Que Sirve
Live ServerAbre tu pagina en el navegador y la actualiza automaticamente cuando guardas cambios
PrettierFormatea tu codigo automaticamente para que sea legible
HTML CSS SupportAutocompletado inteligente para HTML y CSS
Spanish Language PackPone VS Code en espanol (opcional)
Truco: Despues de instalar Live Server, podras hacer clic derecho en tu archivo HTML y seleccionar "Open with Live Server" para ver tu pagina en el navegador al instante. Cada vez que guardes un cambio (Ctrl+S o Cmd+S), la pagina se actualiza sola.

Paso 2: Crea tu Primer Archivo HTML

HTML es el lenguaje que define la estructura de toda pagina web, y tu primer archivo funcional lo puedes crear en menos de 2 minutos. Segun W3Techs (2026), el 100% de los sitios web del mundo usan HTML como base. No existe alternativa: si algo se ve en un navegador, tiene HTML detras.

Crea la carpeta de tu proyecto:

  1. Crea una carpeta en tu escritorio llamada mi-primera-web
  2. Abre VS Code
  3. Ve a Archivo > Abrir carpeta > Selecciona mi-primera-web
  4. Crea un nuevo archivo: Archivo > Nuevo archivo > Guardalo como index.html

Tu primer HTML completo:

Copia este codigo exacto en tu archivo index.html:

html 
1<!DOCTYPE html>
2<html lang="es">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Mi Primera Pagina Web</title>
7    <meta name="description" content="Esta es mi primera pagina web creada desde cero">
8    <link rel="stylesheet" href="styles.css">
9</head>
10<body>
11    <header>
12        <nav>
13            <a href="#inicio">Inicio</a>
14            <a href="#sobre-mi">Sobre Mi</a>
15            <a href="#proyectos">Proyectos</a>
16            <a href="#contacto">Contacto</a>
17        </nav>
18    </header>
19 
20    <main>
21        <section id="inicio">
22            <h1>Hola, soy [Tu Nombre]</h1>
23            <p>Bienvenido a mi primera pagina web. La he creado desde cero
24               siguiendo un tutorial y estoy aprendiendo desarrollo web.</p>
25            <a href="#proyectos">Ver mis proyectos</a>
26        </section>
27 
28        <section id="sobre-mi">
29            <h2>Sobre Mi</h2>
30            <p>Me llamo [Tu Nombre] y estoy aprendiendo a crear paginas web.
31               Me interesa la tecnologia, el diseno y la inteligencia artificial.</p>
32        </section>
33 
34        <section id="proyectos">
35            <h2>Mis Proyectos</h2>
36            <div class="tarjeta">
37                <h3>Proyecto 1</h3>
38                <p>Descripcion de tu primer proyecto aqui.</p>
39            </div>
40            <div class="tarjeta">
41                <h3>Proyecto 2</h3>
42                <p>Descripcion de tu segundo proyecto aqui.</p>
43            </div>
44        </section>
45 
46        <section id="contacto">
47            <h2>Contacto</h2>
48            <p>Puedes escribirme a: <a href="mailto:tu@email.com">tu@email.com</a></p>
49        </section>
50    </main>
51 
52    <footer>
53        <p>Creado por [Tu Nombre] - 2026</p>
54    </footer>
55 
56    <script src="script.js"></script>
57</body>
58</html>

Que hace cada parte:

EtiquetaQue Hace
Dice al navegador que es un documento HTML5
Contenedor principal. lang="es" indica que esta en espanol
Metadatos: titulo, descripcion, enlace a CSS. No se ve en pantalla
Permite usar tildes y caracteres especiales
Hace que tu web se vea bien en moviles
</code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Lo que aparece en la pestana del navegador</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><body></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Todo el contenido visible de tu pagina</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><header></code> y <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><nav></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Cabecera con menu de navegacion</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><main></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Contenido principal de la pagina</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><section></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Secciones tematicas (inicio, sobre mi, proyectos...)</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><h1></code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><h2></code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><h3></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Titulos por orden de importancia</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><p></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Parrafos de texto</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><a href=""></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Enlaces (a otras paginas o secciones internas)</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><footer></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Pie de pagina</td></tr></tbody></table></div> <strong class="font-semibold text-slate-900 dark:text-white">Prueba ahora</strong>: Haz clic derecho en <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">index.html</code> en VS Code y selecciona "Open with Live Server". Veras tu pagina en el navegador. Es basica, pero es real y funciona.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><hr class="border-slate-200 dark:border-slate-700 my-12" /></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h2 id="paso-3-dale-estilo-con-css" class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20">Paso 3: Dale Estilo con CSS</h2><div class="w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6"></div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">CSS es el lenguaje que controla todo el aspecto visual de tu web: colores, tipografias, espaciado y disposicion.</strong> Sin CSS, todas las paginas web serian texto negro sobre fondo blanco. Segun la encuesta de Stack Overflow Developer Survey 2025, CSS es la tercera tecnologia mas utilizada del mundo (despues de HTML y JavaScript), con un 55,3% de los desarrolladores usandola a diario.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Crea un nuevo archivo en tu carpeta llamado <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">styles.css</code> y copia este codigo:</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><div class="code-block-wrapper my-8 rounded-xl overflow-hidden border border-slate-300 dark:border-slate-600 shadow-lg"> <div class="bg-gradient-to-r from-slate-700 to-slate-800 dark:from-slate-800 dark:to-slate-900 px-6 py-1.5 flex items-center justify-center gap-3 border-b border-slate-600 dark:border-slate-700"> <div class="flex gap-1.5"> <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div> <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div> <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div> </div> <span class="text-xs font-semibold text-slate-300 uppercase tracking-wider">css</span> </div> <pre class="bg-slate-900 dark:bg-black p-6 overflow-x-auto"><code class="text-sm leading-loose font-mono text-slate-100 dark:text-slate-200"><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">1</span><span class="flex-1">/* Reset basico - elimina margenes por defecto del navegador */</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">2</span><span class="flex-1">* {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">3</span><span class="flex-1"> margin: 0;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">4</span><span class="flex-1"> padding: 0;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">5</span><span class="flex-1"> box-sizing: border-box;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">6</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">7</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">8</span><span class="flex-1">/* Tipografia y color base */</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">9</span><span class="flex-1">body {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">10</span><span class="flex-1"> font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">11</span><span class="flex-1"> line-height: 1.6;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">12</span><span class="flex-1"> color: #333333;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">13</span><span class="flex-1"> background-color: #f8f9fa;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">14</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">15</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">16</span><span class="flex-1">/* Navegacion superior */</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">17</span><span class="flex-1">nav {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">18</span><span class="flex-1"> background-color: #2c3e50;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">19</span><span class="flex-1"> padding: 1rem 2rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">20</span><span class="flex-1"> display: flex;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">21</span><span class="flex-1"> gap: 2rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">22</span><span class="flex-1"> justify-content: center;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">23</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">24</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">25</span><span class="flex-1">nav a {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">26</span><span class="flex-1"> color: #ffffff;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">27</span><span class="flex-1"> text-decoration: none;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">28</span><span class="flex-1"> font-weight: 600;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">29</span><span class="flex-1"> transition: color 0.3s ease;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">30</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">31</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">32</span><span class="flex-1">nav a:hover {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">33</span><span class="flex-1"> color: #3498db;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">34</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">35</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">36</span><span class="flex-1">/* Secciones */</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">37</span><span class="flex-1">section {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">38</span><span class="flex-1"> padding: 4rem 2rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">39</span><span class="flex-1"> max-width: 900px;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">40</span><span class="flex-1"> margin: 0 auto;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">41</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">42</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">43</span><span class="flex-1">/* Seccion de inicio (hero) */</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">44</span><span class="flex-1">#inicio {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">45</span><span class="flex-1"> text-align: center;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">46</span><span class="flex-1"> padding: 6rem 2rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">47</span><span class="flex-1"> background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">48</span><span class="flex-1"> color: #ffffff;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">49</span><span class="flex-1"> max-width: 100%;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">50</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">51</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">52</span><span class="flex-1">#inicio h1 {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">53</span><span class="flex-1"> font-size: 2.5rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">54</span><span class="flex-1"> margin-bottom: 1rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">55</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">56</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">57</span><span class="flex-1">#inicio p {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">58</span><span class="flex-1"> font-size: 1.2rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">59</span><span class="flex-1"> margin-bottom: 2rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">60</span><span class="flex-1"> max-width: 600px;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">61</span><span class="flex-1"> margin-left: auto;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">62</span><span class="flex-1"> margin-right: auto;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">63</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">64</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">65</span><span class="flex-1">#inicio a {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">66</span><span class="flex-1"> background-color: #ffffff;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">67</span><span class="flex-1"> color: #764ba2;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">68</span><span class="flex-1"> padding: 0.8rem 2rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">69</span><span class="flex-1"> border-radius: 5px;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">70</span><span class="flex-1"> text-decoration: none;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">71</span><span class="flex-1"> font-weight: 700;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">72</span><span class="flex-1"> transition: transform 0.2s ease;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">73</span><span class="flex-1"> display: inline-block;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">74</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">75</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">76</span><span class="flex-1">#inicio a:hover {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">77</span><span class="flex-1"> transform: translateY(-2px);</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">78</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">79</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">80</span><span class="flex-1">/* Titulos de seccion */</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">81</span><span class="flex-1">h2 {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">82</span><span class="flex-1"> font-size: 2rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">83</span><span class="flex-1"> margin-bottom: 1.5rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">84</span><span class="flex-1"> color: #2c3e50;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">85</span><span class="flex-1"> border-bottom: 3px solid #3498db;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">86</span><span class="flex-1"> padding-bottom: 0.5rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">87</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">88</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">89</span><span class="flex-1">/* Tarjetas de proyecto */</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">90</span><span class="flex-1">.tarjeta {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">91</span><span class="flex-1"> background-color: #ffffff;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">92</span><span class="flex-1"> border-radius: 8px;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">93</span><span class="flex-1"> padding: 1.5rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">94</span><span class="flex-1"> margin-bottom: 1.5rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">95</span><span class="flex-1"> box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">96</span><span class="flex-1"> transition: transform 0.2s ease, box-shadow 0.2s ease;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">97</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">98</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">99</span><span class="flex-1">.tarjeta:hover {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">100</span><span class="flex-1"> transform: translateY(-4px);</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">101</span><span class="flex-1"> box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">102</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">103</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">104</span><span class="flex-1">.tarjeta h3 {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">105</span><span class="flex-1"> color: #2c3e50;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">106</span><span class="flex-1"> margin-bottom: 0.5rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">107</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">108</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">109</span><span class="flex-1">/* Footer */</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">110</span><span class="flex-1">footer {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">111</span><span class="flex-1"> background-color: #2c3e50;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">112</span><span class="flex-1"> color: #ffffff;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">113</span><span class="flex-1"> text-align: center;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">114</span><span class="flex-1"> padding: 2rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">115</span><span class="flex-1"> margin-top: 2rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">116</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">117</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">118</span><span class="flex-1">/* Contacto */</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">119</span><span class="flex-1">#contacto a {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">120</span><span class="flex-1"> color: #3498db;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">121</span><span class="flex-1"> font-weight: 600;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">122</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">123</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">124</span><span class="flex-1">/* RESPONSIVE: Adaptar a moviles */</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">125</span><span class="flex-1">@media (max-width: 768px) {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">126</span><span class="flex-1"> nav {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">127</span><span class="flex-1"> flex-direction: column;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">128</span><span class="flex-1"> align-items: center;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">129</span><span class="flex-1"> gap: 0.8rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">130</span><span class="flex-1"> }</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">131</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">132</span><span class="flex-1"> #inicio h1 {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">133</span><span class="flex-1"> font-size: 1.8rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">134</span><span class="flex-1"> }</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">135</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">136</span><span class="flex-1"> #inicio p {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">137</span><span class="flex-1"> font-size: 1rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">138</span><span class="flex-1"> }</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">139</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">140</span><span class="flex-1"> section {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">141</span><span class="flex-1"> padding: 2rem 1rem;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">142</span><span class="flex-1"> }</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">143</span><span class="flex-1">}</span></div></code></pre> </div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="conceptos-clave-que-acabas-de-aplicar" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Conceptos clave que acabas de aplicar:</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><ul class="list-disc list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300"> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Selectores</strong>: <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">body</code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">nav</code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">.tarjeta</code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">#inicio</code> seleccionan los elementos a los que aplicas estilo</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Box model</strong>: <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">margin</code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">padding</code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">border</code> controlan el espaciado</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Flexbox</strong>: <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">display: flex</code> organiza elementos en fila o columna</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Gradientes</strong>: <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">linear-gradient()</code> crea fondos con degradado</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Transiciones</strong>: <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">transition</code> anade animaciones suaves al pasar el raton</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Media queries</strong>: <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">@media (max-width: 768px)</code> adapta el diseno para pantallas pequenas</li> </ul></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Guarda el archivo y mira tu navegador.</strong> Si tienes Live Server activo, la pagina se actualiza automaticamente. Ahora tu web tiene colores, tipografia profesional, un menu de navegacion con fondo oscuro, una seccion hero con degradado, tarjetas con sombra y diseno responsive para moviles.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><hr class="border-slate-200 dark:border-slate-700 my-12" /></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h2 id="paso-4-anade-interactividad-con-javascript" class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20">Paso 4: Anade Interactividad con JavaScript</h2><div class="w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6"></div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">JavaScript es el lenguaje que hace que tu pagina web reaccione a las acciones del usuario: clics, formularios, animaciones dinamicas y mucho mas.</strong> Es el tercer pilar del desarrollo web junto con HTML y CSS. Segun Statista (enero 2026), JavaScript es el lenguaje de programacion mas utilizado del mundo, con un 63,6% de los desarrolladores usandolo como lenguaje principal.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Crea un archivo llamado <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">script.js</code> en tu carpeta y copia este codigo:</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><div class="code-block-wrapper my-8 rounded-xl overflow-hidden border border-slate-300 dark:border-slate-600 shadow-lg"> <div class="bg-gradient-to-r from-slate-700 to-slate-800 dark:from-slate-800 dark:to-slate-900 px-6 py-1.5 flex items-center justify-center gap-3 border-b border-slate-600 dark:border-slate-700"> <div class="flex gap-1.5"> <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div> <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div> <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div> </div> <span class="text-xs font-semibold text-slate-300 uppercase tracking-wider">javascript</span> </div> <pre class="bg-slate-900 dark:bg-black p-6 overflow-x-auto"><code class="text-sm leading-loose font-mono text-slate-100 dark:text-slate-200"><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">1</span><span class="flex-1">// 1. Menu de navegacion suave (smooth scroll)</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">2</span><span class="flex-1">document.querySelectorAll('nav a').forEach(function(enlace) {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">3</span><span class="flex-1"> enlace.addEventListener('click', function(evento) {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">4</span><span class="flex-1"> evento.preventDefault();</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">5</span><span class="flex-1"> var destino = document.querySelector(this.getAttribute('href'));</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">6</span><span class="flex-1"> if (destino) {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">7</span><span class="flex-1"> destino.scrollIntoView({ behavior: 'smooth' });</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">8</span><span class="flex-1"> }</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">9</span><span class="flex-1"> });</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">10</span><span class="flex-1">});</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">11</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">12</span><span class="flex-1">// 2. Boton "Volver arriba" que aparece al hacer scroll</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">13</span><span class="flex-1">var botonArriba = document.createElement('button');</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">14</span><span class="flex-1">botonArriba.textContent = 'Subir';</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">15</span><span class="flex-1">botonArriba.id = 'btn-subir';</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">16</span><span class="flex-1">botonArriba.style.cssText = 'position:fixed; bottom:2rem; right:2rem; ' +</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">17</span><span class="flex-1"> 'background:#764ba2; color:#fff; border:none; padding:0.8rem 1.2rem; ' +</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">18</span><span class="flex-1"> 'border-radius:5px; cursor:pointer; display:none; font-weight:700; ' +</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">19</span><span class="flex-1"> 'transition:opacity 0.3s ease; z-index:1000;';</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">20</span><span class="flex-1">document.body.appendChild(botonArriba);</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">21</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">22</span><span class="flex-1">window.addEventListener('scroll', function() {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">23</span><span class="flex-1"> if (window.scrollY > 300) {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">24</span><span class="flex-1"> botonArriba.style.display = 'block';</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">25</span><span class="flex-1"> } else {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">26</span><span class="flex-1"> botonArriba.style.display = 'none';</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">27</span><span class="flex-1"> }</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">28</span><span class="flex-1">});</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">29</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">30</span><span class="flex-1">botonArriba.addEventListener('click', function() {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">31</span><span class="flex-1"> window.scrollTo({ top: 0, behavior: 'smooth' });</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">32</span><span class="flex-1">});</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">33</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">34</span><span class="flex-1">// 3. Efecto de aparicion al hacer scroll (animacion sencilla)</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">35</span><span class="flex-1">var tarjetas = document.querySelectorAll('.tarjeta');</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">36</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">37</span><span class="flex-1">var observador = new IntersectionObserver(function(entradas) {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">38</span><span class="flex-1"> entradas.forEach(function(entrada) {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">39</span><span class="flex-1"> if (entrada.isIntersecting) {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">40</span><span class="flex-1"> entrada.target.style.opacity = '1';</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">41</span><span class="flex-1"> entrada.target.style.transform = 'translateY(0)';</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">42</span><span class="flex-1"> }</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">43</span><span class="flex-1"> });</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">44</span><span class="flex-1">}, { threshold: 0.1 });</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">45</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">46</span><span class="flex-1">tarjetas.forEach(function(tarjeta) {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">47</span><span class="flex-1"> tarjeta.style.opacity = '0';</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">48</span><span class="flex-1"> tarjeta.style.transform = 'translateY(20px)';</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">49</span><span class="flex-1"> tarjeta.style.transition = 'opacity 0.5s ease, transform 0.5s ease';</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">50</span><span class="flex-1"> observador.observe(tarjeta);</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">51</span><span class="flex-1">});</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">52</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">53</span><span class="flex-1">// 4. Mostrar la fecha actual en el footer</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">54</span><span class="flex-1">var footer = document.querySelector('footer p');</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">55</span><span class="flex-1">if (footer) {</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">56</span><span class="flex-1"> var hoy = new Date();</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">57</span><span class="flex-1"> var opciones = { year: 'numeric', month: 'long', day: 'numeric' };</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">58</span><span class="flex-1"> var fechaFormateada = hoy.toLocaleDateString('es-ES', opciones);</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">59</span><span class="flex-1"> footer.textContent = footer.textContent + ' | Ultima visita: ' + fechaFormateada;</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">60</span><span class="flex-1">}</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">61</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">62</span><span class="flex-1">// 5. Mensaje de bienvenida en la consola</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">63</span><span class="flex-1">console.log('Bienvenido a mi primera pagina web.');</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">64</span><span class="flex-1">console.log('Creada siguiendo el tutorial de Javadex: www.javadex.es');</span></div></code></pre> </div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="que-hace-cada-parte" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Que hace cada parte:</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><div class="overflow-x-auto my-8"><table class="min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg"><thead class="bg-gradient-to-r from-cyan-500 to-blue-600"><tr><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Funcionalidad</th><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Que Hace</th></tr></thead><tbody><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Smooth scroll</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Al hacer clic en los enlaces del menu, la pagina se desplaza suavemente hasta la seccion correspondiente</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Boton "Subir"</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Aparece un boton flotante cuando bajas por la pagina, para volver arriba con un clic</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Animacion de tarjetas</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Las tarjetas de proyecto aparecen con una animacion suave cuando llegas a ellas haciendo scroll</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Fecha dinamica</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Muestra la fecha de la ultima visita en el footer automaticamente</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Mensaje en consola</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Si abres DevTools (F12 > Consola), veras un mensaje personalizado</td></tr></tbody></table></div> <strong class="font-semibold text-slate-900 dark:text-white">Prueba</strong>: Guarda todos los archivos, refresca la pagina en el navegador y comprueba que el scroll suave funciona, que las tarjetas se animan al aparecer y que el boton "Subir" aparece cuando bajas.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><hr class="border-slate-200 dark:border-slate-700 my-12" /></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h2 id="paso-5-estructura-tu-portfolio-o-proyecto-web" class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20">Paso 5: Estructura tu Portfolio o Proyecto Web</h2><div class="w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6"></div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">La clave para que tu web parezca profesional no es la complejidad del codigo, sino una estructura HTML semantica bien organizada.</strong> HTML semantico significa usar las etiquetas correctas para cada tipo de contenido, no solo <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><div></code> para todo. Esto ademas mejora tu SEO (posicionamiento en buscadores) porque Google entiende mejor la estructura de tu pagina.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Aqui tienes la estructura recomendada para un portfolio personal o un proyecto web basico:</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><div class="code-block-wrapper my-8 rounded-xl overflow-hidden border border-slate-300 dark:border-slate-600 shadow-lg"> <div class="bg-gradient-to-r from-slate-700 to-slate-800 dark:from-slate-800 dark:to-slate-900 px-6 py-1.5 flex items-center justify-center gap-3 border-b border-slate-600 dark:border-slate-700"> <div class="flex gap-1.5"> <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div> <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div> <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div> </div> <span class="text-xs font-semibold text-slate-300 uppercase tracking-wider">code</span> </div> <pre class="bg-slate-900 dark:bg-black p-6 overflow-x-auto"><code class="text-sm leading-loose font-mono text-slate-100 dark:text-slate-200"><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">1</span><span class="flex-1">mi-primera-web/</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">2</span><span class="flex-1"> index.html (pagina principal)</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">3</span><span class="flex-1"> styles.css (estilos visuales)</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">4</span><span class="flex-1"> script.js (interactividad)</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">5</span><span class="flex-1"> img/ (carpeta para imagenes)</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">6</span><span class="flex-1"> foto-perfil.jpg</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">7</span><span class="flex-1"> proyecto-1.jpg</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">8</span><span class="flex-1"> proyecto-2.jpg</span></div></code></pre> </div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="etiquetas-semanticas-que-debes-usar" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Etiquetas semanticas que debes usar:</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><div class="overflow-x-auto my-8"><table class="min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg"><thead class="bg-gradient-to-r from-cyan-500 to-blue-600"><tr><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Etiqueta</th><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Cuando Usarla</th><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Ejemplo</th></tr></thead><tbody><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><header></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Cabecera de la pagina o de una seccion</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Menu de navegacion principal</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><nav></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Bloques de navegacion</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Menu con enlaces a secciones</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><main></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Contenido principal de la pagina (solo uno por pagina)</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Todo entre el header y el footer</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><section></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Secciones tematicas diferenciadas</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">"Sobre mi", "Proyectos", "Contacto"</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><article></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Contenido independiente que tiene sentido por si solo</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Un post de blog, una tarjeta de proyecto</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><aside></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Contenido complementario o lateral</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Barra lateral, widgets, anuncios</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><footer></code></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Pie de pagina o de una seccion</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Copyright, enlaces secundarios</td></tr></tbody></table></div> <strong class="font-semibold text-slate-900 dark:text-white">Consejo practico</strong>: Si tu web tiene mas de una pagina, puedes crear archivos adicionales como <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">about.html</code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">proyectos.html</code> y <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">contacto.html</code> siguiendo la misma estructura. Enlazalos entre si con <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><a href="about.html">Sobre Mi</a></code>.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><hr class="border-slate-200 dark:border-slate-700 my-12" /></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h2 id="paso-6-publica-gratis-con-github-pages" class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20">Paso 6: Publica Gratis con GitHub Pages</h2><div class="w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6"></div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">GitHub Pages te permite publicar tu pagina web en internet de forma completamente gratuita, con un dominio tipo <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">tunombre.github.io</code>.</strong> Segun GitHub (informe Octoverse 2025, publicado el 12 de noviembre de 2025), mas de 100 millones de desarrolladores usan GitHub, y GitHub Pages aloja millones de sitios web estaticos sin coste.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="paso-a-paso-para-publicar" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Paso a paso para publicar:</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">6.1 - Crea una cuenta en GitHub:</strong></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><ol class="list-decimal list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300"> <li class="mb-2 leading-relaxed">Ve a <a href="https://github.com/" target="_blank" rel="noopener noreferrer" class="text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors">github.com</a> y haz clic en "Sign up"</li> <li class="mb-2 leading-relaxed">Introduce tu email, crea una contrasena y elige un nombre de usuario</li> <li class="mb-2 leading-relaxed">Verifica tu email</li> </ol></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">6.2 - Crea un repositorio:</strong></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><ol class="list-decimal list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300"> <li class="mb-2 leading-relaxed">Una vez dentro de GitHub, haz clic en el boton verde "New" (o ve a github.com/new)</li> <li class="mb-2 leading-relaxed">Nombre del repositorio: <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">mi-primera-web</code> (o <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">tunombre.github.io</code> si quieres que sea tu pagina principal)</li> <li class="mb-2 leading-relaxed">Marca "Public"</li> <li class="mb-2 leading-relaxed">Marca "Add a README file"</li> <li class="mb-2 leading-relaxed">Haz clic en "Create repository"</li> </ol></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">6.3 - Sube tus archivos:</strong></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><ol class="list-decimal list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300"> <li class="mb-2 leading-relaxed">En tu repositorio, haz clic en "Add file" > "Upload files"</li> <li class="mb-2 leading-relaxed">Arrastra tus tres archivos: <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">index.html</code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">styles.css</code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">script.js</code></li> <li class="mb-2 leading-relaxed">Escribe un mensaje de commit como "Primera version de mi web"</li> <li class="mb-2 leading-relaxed">Haz clic en "Commit changes"</li> </ol></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">6.4 - Activa GitHub Pages:</strong></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><ol class="list-decimal list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300"> <li class="mb-2 leading-relaxed">Ve a "Settings" (engranaje) dentro de tu repositorio</li> <li class="mb-2 leading-relaxed">En el menu lateral izquierdo, haz clic en "Pages"</li> <li class="mb-2 leading-relaxed">En "Source", selecciona "Deploy from a branch"</li> <li class="mb-2 leading-relaxed">En "Branch", selecciona <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">main</code> y la carpeta <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">/ (root)</code></li> <li class="mb-2 leading-relaxed">Haz clic en "Save"</li> <li class="mb-2 leading-relaxed">Espera 1-2 minutos y refresca la pagina</li> </ol></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Tu web ya esta en internet.</strong> La URL sera: <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">https://tunombre.github.io/mi-primera-web/</code></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Si llamaste al repositorio <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">tunombre.github.io</code>, la URL sera directamente <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">https://tunombre.github.io/</code>.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="dominio-personalizado-opcional" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Dominio personalizado (opcional):</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Si quieres usar un dominio propio (como <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">miweb.es</code>), puedes comprar uno por 8-15 EUR al ano en proveedores como Namecheap, Porkbun o Cloudflare Registrar. Luego en la seccion "Pages" de GitHub, introduces tu dominio personalizado y configuras los registros DNS. GitHub te genera un certificado SSL gratuito automaticamente.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><hr class="border-slate-200 dark:border-slate-700 my-12" /></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h2 id="paso-7-mejora-tu-web-con-ia" class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20">Paso 7: Mejora tu Web con IA</h2><div class="w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6"></div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">La inteligencia artificial puede acelerar tu aprendizaje y mejorar tu codigo drasticamente, incluso si no sabes nada de programacion.</strong> Segun el informe GitHub Copilot Impact Report (febrero 2026), los desarrolladores que usan asistentes de IA escriben codigo un 55% mas rapido y resuelven errores un 40% mas rapido que sin IA.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Aqui tienes formas concretas de usar IA para mejorar tu web:</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="generar-css-con-ia" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Generar CSS con IA:</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Copia y pega este tipo de prompt en ChatGPT o Claude:</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><div class="code-block-wrapper my-8 rounded-xl overflow-hidden border border-slate-300 dark:border-slate-600 shadow-lg"> <div class="bg-gradient-to-r from-slate-700 to-slate-800 dark:from-slate-800 dark:to-slate-900 px-6 py-1.5 flex items-center justify-center gap-3 border-b border-slate-600 dark:border-slate-700"> <div class="flex gap-1.5"> <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div> <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div> <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div> </div> <span class="text-xs font-semibold text-slate-300 uppercase tracking-wider">code</span> </div> <pre class="bg-slate-900 dark:bg-black p-6 overflow-x-auto"><code class="text-sm leading-loose font-mono text-slate-100 dark:text-slate-200"><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">1</span><span class="flex-1">Tengo una pagina web con HTML basico. Quiero que el diseno sea moderno,</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">2</span><span class="flex-1">minimalista y con una paleta de colores azul oscuro y blanco. Genera el</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">3</span><span class="flex-1">CSS completo incluyendo: tipografia profesional, espaciado consistente,</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">4</span><span class="flex-1">tarjetas con sombra, boton con efecto hover y diseno responsive para</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">5</span><span class="flex-1">moviles. Usa flexbox.</span></div></code></pre> </div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">La IA te generara un archivo CSS completo que puedes pegar directamente en tu <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">styles.css</code>.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="depurar-errores-con-ia" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Depurar errores con IA:</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Si algo no funciona, copia el codigo que da problemas y pregunta a la IA:</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><div class="code-block-wrapper my-8 rounded-xl overflow-hidden border border-slate-300 dark:border-slate-600 shadow-lg"> <div class="bg-gradient-to-r from-slate-700 to-slate-800 dark:from-slate-800 dark:to-slate-900 px-6 py-1.5 flex items-center justify-center gap-3 border-b border-slate-600 dark:border-slate-700"> <div class="flex gap-1.5"> <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div> <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div> <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div> </div> <span class="text-xs font-semibold text-slate-300 uppercase tracking-wider">code</span> </div> <pre class="bg-slate-900 dark:bg-black p-6 overflow-x-auto"><code class="text-sm leading-loose font-mono text-slate-100 dark:text-slate-200"><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">1</span><span class="flex-1">Este codigo CSS no centra el texto en la pantalla. Que estoy haciendo mal?</span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">2</span><span class="flex-1"> </span></div><div class="flex"><span class="select-none text-slate-500 dark:text-slate-600 mr-4 text-right" style="min-width: 2rem;">3</span><span class="flex-1">[pega tu codigo aqui]</span></div></code></pre> </div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">La IA te explicara el error y te dara la solucion corregida.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="herramientas-de-ia-para-desarrollo-web" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Herramientas de IA para desarrollo web:</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><div class="overflow-x-auto my-8"><table class="min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg"><thead class="bg-gradient-to-r from-cyan-500 to-blue-600"><tr><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Herramienta</th><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Precio</th><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Que Hace</th><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Mejor Para</th></tr></thead><tbody><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">ChatGPT</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Gratis / 20 USD/mes</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Genera codigo, explica conceptos, depura errores</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Preguntas y generacion de codigo</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Claude</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Gratis / 20 USD/mes</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Analisis de codigo, explicaciones claras</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Entender conceptos complejos</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Claude Code</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Incluido en Claude Pro</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Agente de IA que modifica tu proyecto directamente desde terminal</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Desarrolladores que trabajan en proyectos reales</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Cursor</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Gratis / 20 USD/mes</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Editor de codigo con IA integrada</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Escribir codigo con autocompletado IA</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">v0.dev</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Gratis (limitado)</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Genera interfaces web completas desde un prompt</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Prototipar disenos rapidamente</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Bolt / Lovable</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Gratis (limitado)</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Crea aplicaciones web completas sin programar</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><a href="/blog/como-programar-con-ia-crear-apps-sin-codigo-guia-2026" class="text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors">Crear apps sin codigo</a></td></tr></tbody></table></div> <strong class="font-semibold text-slate-900 dark:text-white">Mi recomendacion</strong>: Empieza con ChatGPT o Claude gratis para resolver dudas. Cuando te sientas comodo con HTML/CSS, prueba Cursor o Claude Code para proyectos mas ambiciosos. Si quieres profundizar en herramientas de IA para programar, consulta nuestro <a href="/blog/mejores-ias-para-programar-ranking-herramientas-2026" class="text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors">ranking de IAs para programar</a>.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><hr class="border-slate-200 dark:border-slate-700 my-12" /></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h2 id="opciones-alternativas-creadores-web-sin-codigo" class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20">Opciones Alternativas: Creadores Web sin Codigo</h2><div class="w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6"></div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Si tu objetivo es tener una web funcional rapido y no te interesa aprender a programar, los creadores web sin codigo son una alternativa legitima.</strong> No son mejores ni peores que programar desde cero: son herramientas diferentes para objetivos diferentes.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><div class="overflow-x-auto my-8"><table class="min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg"><thead class="bg-gradient-to-r from-cyan-500 to-blue-600"><tr><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Plataforma</th><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Precio/mes</th><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Mejor Para</th><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Nivel Tecnico</th><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Limitaciones</th></tr></thead><tbody><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">WordPress.org</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">3-10 EUR (hosting)</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Blogs, webs complejas, tiendas</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Medio</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Requiere hosting, mantenimiento y actualizaciones</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Wix</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">0-17 EUR</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Webs sencillas, portfolios</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Bajo</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Limitado en personalizacion avanzada, mas lento</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Squarespace</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">16-27 EUR</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Portfolios creativos, tiendas pequenas</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Bajo</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Menos flexible, no hay plan gratuito</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Framer</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">0-15 EUR</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Disenos creativos, landing pages</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Medio</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Curva de aprendizaje, comunidad mas pequena</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Carrd</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">0-19 EUR/ano</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Paginas de una sola seccion, tarjetas de visita</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Muy bajo</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Solo una pagina por sitio (plan gratis)</td></tr></tbody></table></div> <h3 id="cuando-usar-cada-opcion" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Cuando usar cada opcion:</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><ul class="list-disc list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300"> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Programa desde cero</strong> (lo que aprendes en este tutorial) si quieres aprender, tener control total, publicar gratis y anadir la competencia a tu curriculum</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">WordPress</strong> si necesitas un blog completo o tienda online con muchas funcionalidades</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Wix/Squarespace</strong> si quieres algo rapido, bonito y no te importa pagar 10-25 EUR al mes</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Framer</strong> si priorizas el diseno visual y quieres animaciones avanzadas sin codigo</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Carrd</strong> si solo necesitas una pagina de presentacion sencilla</li> </ul></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><hr class="border-slate-200 dark:border-slate-700 my-12" /></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h2 id="cuanto-cuesta-crear-una-pagina-web-comparativa-de-costes" class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20">Cuanto Cuesta Crear una Pagina Web: Comparativa de Costes</h2><div class="w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6"></div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Crear una pagina web desde cero con HTML/CSS y GitHub Pages tiene un coste total de 0 EUR, y eso incluye hosting ilimitado.</strong> Comparemos los costes anuales de cada opcion:</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><div class="overflow-x-auto my-8"><table class="min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg"><thead class="bg-gradient-to-r from-cyan-500 to-blue-600"><tr><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Opcion</th><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Coste Anual</th><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Que Incluye</th><th class="px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700">Coste a 3 Anos</th></tr></thead><tbody><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">HTML/CSS + GitHub Pages</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">0 EUR</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Hosting gratis, dominio <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">.github.io</code>, SSL, sin limites</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">0 EUR</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">HTML/CSS + dominio propio</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">10-15 EUR</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Todo lo anterior + dominio personalizado (<code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">miweb.es</code>)</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">30-45 EUR</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Wix (plan basico)</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">102-204 EUR</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Hosting, editor visual, dominio (plan Combo)</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">306-612 EUR</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Squarespace</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">192-324 EUR</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Hosting, editor, dominio, plantillas</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">576-972 EUR</td></tr><tr class="bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">WordPress + hosting</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">36-120 EUR</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Hosting, CMS completo, miles de plugins</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">108-360 EUR</td></tr><tr class="bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors"><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700"><strong class="font-semibold text-slate-900 dark:text-white">Contratar un disenador</strong></td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">500-5.000 EUR</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Web profesional hecha a medida</td><td class="px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700">Variable</td></tr></tbody></table></div> <strong class="font-semibold text-slate-900 dark:text-white">Conclusion</strong>: Si estas empezando y quieres aprender, la opcion de coste cero (HTML/CSS + GitHub Pages) es imbatible. Inviertes tu tiempo a cambio de adquirir una competencia que vale miles de euros en el mercado laboral. Segun InfoJobs (marzo 2026), el salario medio de un desarrollador web junior en Espana es de 24.000 EUR brutos anuales, y sube a 35.000-45.000 EUR para perfiles con 2-3 anos de experiencia.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><hr class="border-slate-200 dark:border-slate-700 my-12" /></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h2 id="errores-comunes-al-crear-tu-primera-web" class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20">Errores Comunes al Crear tu Primera Web</h2><div class="w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6"></div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Estos son los 5 errores que comete el 90% de los principiantes y que puedes evitar desde el primer dia:</strong></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="1-no-cerrar-las-etiquetas-html" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">1. No cerrar las etiquetas HTML</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Cada etiqueta que abres (<code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><div></code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><p></code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><section></code>) debe cerrarse (<code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"></div></code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"></p></code>, <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"></section></code>). Si olvidas cerrar una etiqueta, tu pagina puede romperse de formas inesperadas. VS Code te ayuda marcando en rojo las etiquetas sin cerrar.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Solucion</strong>: Instala la extension "Auto Close Tag" en VS Code. Cada vez que escribas una etiqueta de apertura, se cierra automaticamente.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="2-ruta-incorrecta-a-archivos-css-o-js" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">2. Ruta incorrecta a archivos CSS o JS</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Si tu archivo se llama <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">styles.css</code> pero en el HTML escribiste <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">style.css</code> (sin la "s"), el navegador no encontrara el archivo y tu pagina aparecera sin estilos. Las rutas distinguen mayusculas de minusculas en muchos servidores.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Solucion</strong>: Usa siempre minusculas y guiones en los nombres de archivo. Revisa que el nombre en <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><link href="styles.css"></code> coincida exactamente con el nombre real del archivo.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="3-no-hacer-la-web-responsive-desde-el-principio" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">3. No hacer la web responsive desde el principio</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Segun Statista (2026), el 62,7% del trafico web mundial viene de dispositivos moviles. Si tu web solo se ve bien en escritorio, pierdes a mas de la mitad de tus visitantes.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Solucion</strong>: Anade siempre la meta etiqueta viewport (<code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>) y usa media queries en tu CSS como hemos hecho en el Paso 3.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="4-ignorar-la-accesibilidad-basica" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">4. Ignorar la accesibilidad basica</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Las imagenes sin atributo <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">alt</code>, los enlaces sin texto descriptivo y los colores con bajo contraste hacen que tu web sea inaccesible para personas con discapacidad visual y para los motores de busqueda.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Solucion</strong>: Anade siempre <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">alt="descripcion"</code> a las imagenes. Usa colores con ratio de contraste minimo 4.5:1. Puedes comprobarlo con la herramienta gratuita WebAIM Contrast Checker.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="5-complicar-demasiado-al-principio" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">5. Complicar demasiado al principio</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Muchos principiantes intentan usar frameworks (React, Vue, Angular) antes de dominar HTML, CSS y JavaScript basico. Es como intentar correr una maraton antes de saber andar.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Solucion</strong>: Domina los fundamentos primero. Construye 3-5 paginas web con HTML/CSS/JS puro antes de tocar cualquier framework. Cuando estes listo, consulta nuestra <a href="/blog/mejores-lenguajes-programacion-principiantes-ranking-2026" class="text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors">guia de mejores lenguajes de programacion para principiantes</a>.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><hr class="border-slate-200 dark:border-slate-700 my-12" /></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><blockquote class="border-l-4 border-cyan-500 bg-cyan-50 dark:bg-cyan-900/20 pl-6 py-4 my-6 italic text-slate-700 dark:text-slate-300 rounded-r-lg">"Tu primera pagina web no tiene que ser perfecta. Tiene que existir. El acto de publicar algo en internet, por simple que sea, te ensena mas que cien horas de tutoriales." -- Javier Santos Criado, consultor de IA en Javadex</blockquote></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><hr class="border-slate-200 dark:border-slate-700 my-12" /></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h2 id="preguntas-frecuentes" class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20">Preguntas Frecuentes</h2><div class="w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6"></div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="se-puede-crear-una-pagina-web-gratis-de-verdad" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Se puede crear una pagina web gratis de verdad?</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Si, completamente gratis y sin trampas.</strong> GitHub Pages ofrece hosting ilimitado para sitios web estaticos (HTML, CSS, JavaScript) sin coste, sin publicidad y sin limites de trafico. Incluye un dominio tipo <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">tunombre.github.io</code> y certificado SSL gratuito. Segun GitHub (2026), mas de 1 millon de sitios web activos usan GitHub Pages como hosting principal.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="cuanto-tiempo-se-tarda-en-crear-una-pagina-web-desde-cero" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Cuanto tiempo se tarda en crear una pagina web desde cero?</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Siguiendo este tutorial, entre 2 y 4 horas para tu primera version funcional.</strong> Si solo quieres la estructura basica (HTML + CSS sin JavaScript), puedes tenerla en menos de 1 hora. Despues podras seguir mejorando y anadiendo secciones durante dias o semanas. No hay prisa: tu web seguira online en GitHub Pages mientras la vas perfeccionando.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="necesito-saber-programar-para-tener-una-pagina-web" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Necesito saber programar para tener una pagina web?</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">No, pero saber programar te da mas control y cuesta 0 EUR.</strong> Si no quieres aprender codigo, puedes usar creadores como Wix o Squarespace (desde 10 EUR/mes). Si decides aprender, HTML y CSS no son lenguajes de programacion en sentido estricto: son lenguajes de marcado y estilo. Son mas faciles de aprender que Python o JavaScript. Si te interesa dar el salto a la programacion completa, tenemos una <a href="/blog/como-aprender-programar-desde-cero-guia-principiantes-2026" class="text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors">guia de como aprender a programar desde cero</a>.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="es-mejor-wordpress-o-html-desde-cero" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Es mejor WordPress o HTML desde cero?</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Depende de tu objetivo.</strong> HTML desde cero es mejor si quieres aprender, tener una web rapida, sin coste de hosting y con control total del codigo. WordPress es mejor si necesitas un blog con muchos articulos, una tienda online o funcionalidades complejas (formularios, base de datos, usuarios registrados). Para un portfolio personal o pagina de presentacion, HTML desde cero es mas rapido, mas ligero y mas barato.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="como-hago-que-mi-pagina-web-aparezca-en-google" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Como hago que mi pagina web aparezca en Google?</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Google indexa automaticamente las paginas web publicas, pero puedes acelerar el proceso.</strong> Despues de publicar tu web en GitHub Pages: (1) Entra en <a href="https://search.google.com/search-console" target="_blank" rel="noopener noreferrer" class="text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors">Google Search Console</a> y anade tu URL, (2) Solicita la indexacion de tu pagina, (3) Anade una meta descripcion unica en el <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><head></code> de tu HTML, (4) Crea un archivo <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">sitemap.xml</code> basico. Normalmente Google tarda entre 3 y 14 dias en indexar una pagina nueva.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h3 id="puedo-anadir-un-formulario-de-contacto-gratis" class="text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20">Puedo anadir un formulario de contacto gratis?</h3></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><strong class="font-semibold text-slate-900 dark:text-white">Si, usando servicios como Formspree o Netlify Forms.</strong> Con Formspree, solo tienes que cambiar el <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">action</code> de tu formulario HTML: <code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800"><form action="https://formspree.io/f/tucodigo" method="POST"></code>. Es gratis hasta 50 envios al mes. No necesitas backend ni base de datos.</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><hr class="border-slate-200 dark:border-slate-700 my-12" /></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h2 id="posts-relacionados" class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20">Posts Relacionados</h2><div class="w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6"></div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6">Si te ha sido util este tutorial, estas guias complementarias te ayudaran a dar los siguientes pasos:</p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><ul class="list-disc list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300"> <li class="mb-2 leading-relaxed"><a href="/blog/como-aprender-programar-desde-cero-guia-principiantes-2026" class="text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors">Como Aprender a Programar desde Cero: Guia para Principiantes 2026</a> - La ruta completa para ir de cero a programador, con recursos gratuitos</li> <li class="mb-2 leading-relaxed"><a href="/blog/mejores-lenguajes-programacion-principiantes-ranking-2026" class="text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors">Mejores Lenguajes de Programacion para Principiantes: Ranking 2026</a> - Cual aprender primero segun tu objetivo profesional</li> <li class="mb-2 leading-relaxed"><a href="/blog/mejores-plataformas-aprender-programar-gratis-ranking-2026" class="text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors">Mejores Plataformas para Aprender a Programar Gratis: Ranking 2026</a> - Cursos gratuitos en espanol para seguir aprendiendo</li> <li class="mb-2 leading-relaxed"><a href="/blog/como-programar-con-ia-crear-apps-sin-codigo-guia-2026" class="text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors">Como Programar con IA: Crear Apps sin Codigo 2026</a> - Cuando estes listo para proyectos mas ambiciosos con herramientas de IA</li> <li class="mb-2 leading-relaxed"><a href="/blog/mejores-ias-para-programar-ranking-herramientas-2026" class="text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors">Mejores IAs para Programar: Ranking de Herramientas 2026</a> - Comparativa completa de asistentes de IA para desarrollo</li> </ul></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><hr class="border-slate-200 dark:border-slate-700 my-12" /></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><h2 id="en-resumen" class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20">En Resumen</h2><div class="w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6"></div></p><p class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6"><ul class="list-disc list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300"> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Crear una pagina web desde cero es gratis y accesible para cualquier persona sin experiencia</strong>, usando HTML (estructura), CSS (diseno) y JavaScript (interactividad) con un editor gratuito como VS Code</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">El 68,4% de todos los sitios web del mundo</strong> estan construidos con estas tres tecnologias basicas (W3Techs, marzo 2026), lo que demuestra que son el estandar universal y lo seguiran siendo</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">GitHub Pages ofrece hosting gratuito e ilimitado</strong> para tu web, con dominio incluido (<code class="bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800">tunombre.github.io</code>), certificado SSL y sin publicidad, eliminando la barrera economica por completo</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Puedes tener tu primera web publicada en internet en 2-4 horas</strong> siguiendo los 7 pasos de este tutorial: instalar VS Code, crear HTML, anadir CSS, sumar JavaScript, estructurar el proyecto, publicar en GitHub Pages y mejorar con IA</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">La IA acelera tu aprendizaje un 55%</strong> (GitHub Copilot Impact Report, febrero 2026): usa ChatGPT o Claude para generar CSS, depurar errores y resolver dudas en tiempo real</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Las alternativas sin codigo (Wix, WordPress, Squarespace) cuestan entre 100 y 324 EUR al ano</strong>, mientras que la opcion de programar desde cero cuesta 0 EUR y ademas te proporciona una competencia profesional con salarios de 24.000-45.000 EUR anuales en Espana</li> <li class="mb-2 leading-relaxed"><strong class="font-semibold text-slate-900 dark:text-white">Aprender desarrollo web basico es una inversion que se paga sola</strong>: las ofertas de empleo con competencias web crecieron un 23% en Espana en 2026 (Fundacion Telefonica), y la demanda de estos perfiles sigue al alza en toda Europa</li> </ul> </div></article><div class="my-10 p-6 rounded-xl bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-cyan-500/20"><h3 class="text-xl font-bold text-white mb-2">Formación y consultoría en IA para empresas</h3><p class="text-slate-300 mb-4">Formo a equipos técnicos y de negocio para adoptar <strong>Claude Code</strong>, programación agéntica e IA aplicada con resultados desde la primera semana.</p><ul class="text-slate-400 text-sm space-y-1 mb-5"><li class="flex items-start"><span class="text-cyan-400 mr-2">✓</span>Claude Code para developers senior (presencial)</li><li class="flex items-start"><span class="text-cyan-400 mr-2">✓</span>IA para perfiles de negocio (presencial)</li><li class="flex items-start"><span class="text-cyan-400 mr-2">✓</span>100% personalizado al stack de tu equipo</li><li class="flex items-start"><span class="text-cyan-400 mr-2">✓</span>Sesión de diagnóstico gratuita (30 min)</li></ul><div class="flex flex-col sm:flex-row items-start sm:items-center gap-3"><a class="px-6 py-3 bg-gradient-to-r from-purple-600 to-cyan-500 hover:from-purple-700 hover:to-cyan-600 text-white rounded-lg font-semibold transition-all shadow-lg shadow-purple-500/25" href="/formacion-empresas">Ver programas de formación</a><span class="flex items-center gap-2 text-slate-400 text-sm"><svg viewBox="0 0 280 20" class="h-4 w-[180px] text-slate-400" aria-label="Email de contacto" role="img"><text x="0" y="15" fill="currentColor" font-size="14" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace">javi@javadex.es</text></svg></span></div></div><section class="mb-12" aria-labelledby="recommended-posts-heading"><section class="recommended-posts"><div class="flex items-center justify-center gap-3 mb-8"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-6 h-6 text-cyan-500"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg><h2 class="text-2xl font-bold text-slate-800 dark:text-white text-center">Posts Recomendados</h2><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-6 h-6 text-cyan-500"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg></div><div class="grid md:grid-cols-3 gap-6"><div class="rounded-lg text-card-foreground shadow-sm bg-white/70 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 hover:shadow-lg transition-all hover:-translate-y-1"><a class="block h-full" href="/blog/guia-n8n-principiantes-automatizacion-sin-codigo-tutorial-paso-a-paso"><div class="flex flex-col space-y-1.5 p-6"><div class="font-semibold tracking-tight text-slate-800 dark:text-white text-lg hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors line-clamp-2 h-16">Qué es n8n y Cómo Funciona: Tutorial en Español desde Cero [2026]</div><div class="text-slate-600 dark:text-slate-300 text-sm line-clamp-3 h-[60px]">n8n es la herramienta gratis y open source para automatizar sin programar. Qué es, cómo funciona, instalación Docker y tu primer workflow en 10 minutos.</div></div><div class="p-6 pt-0"><div class="flex justify-between items-center text-sm text-slate-500 dark:text-slate-400"><span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar w-3.5 h-3.5 mr-1.5"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>22/1/2026</span><span>20 min</span></div></div></a></div><div class="rounded-lg text-card-foreground shadow-sm bg-white/70 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 hover:shadow-lg transition-all hover:-translate-y-1"><a class="block h-full" href="/blog/por-que-dicen-que-la-ia-programa-mal-cuando-supera-a-humanos"><div class="flex flex-col space-y-1.5 p-6"><div class="font-semibold tracking-tight text-slate-800 dark:text-white text-lg hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors line-clamp-2 h-16">¿Por Qué Dicen que la IA Programa Mal? Los Datos Dicen lo Contrario</div><div class="text-slate-600 dark:text-slate-300 text-sm line-clamp-3 h-[60px]">Claude Opus 4.5 supera al 80% de desarrolladores en benchmarks, pero Twitter está lleno de gente diciendo que la IA programa mal. El problema no es la IA. Es cómo la usas.</div></div><div class="p-6 pt-0"><div class="flex justify-between items-center text-sm text-slate-500 dark:text-slate-400"><span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar w-3.5 h-3.5 mr-1.5"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>22/1/2026</span><span>15 min</span></div></div></a></div><div class="rounded-lg text-card-foreground shadow-sm bg-white/70 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 hover:shadow-lg transition-all hover:-translate-y-1"><a class="block h-full" href="/blog/predicciones-inteligencia-artificial-2026-agentes-autonomos-robots-futuro-trabajo"><div class="flex flex-col space-y-1.5 p-6"><div class="font-semibold tracking-tight text-slate-800 dark:text-white text-lg hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors line-clamp-2 h-16">Inteligencia Artificial 2026: 7 Predicciones con Datos Que Se Están Cumpliendo</div><div class="text-slate-600 dark:text-slate-300 text-sm line-clamp-3 h-[60px]">Predicciones IA 2026 que ya se cumplen: agentes autónomos, robots a 1/10 del precio, el fin del junior. Análisis con datos reales de un consultor IA.</div></div><div class="p-6 pt-0"><div class="flex justify-between items-center text-sm text-slate-500 dark:text-slate-400"><span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar w-3.5 h-3.5 mr-1.5"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>5/1/2026</span><span>28 min</span></div></div></a></div></div></section><nav class="sr-only" aria-label="Posts recomendados"><a href="/blog/guia-n8n-principiantes-automatizacion-sin-codigo-tutorial-paso-a-paso">Qué es n8n y Cómo Funciona: Tutorial en Español desde Cero [2026]</a><a href="/blog/por-que-dicen-que-la-ia-programa-mal-cuando-supera-a-humanos">¿Por Qué Dicen que la IA Programa Mal? Los Datos Dicen lo Contrario</a><a href="/blog/predicciones-inteligencia-artificial-2026-agentes-autonomos-robots-futuro-trabajo">Inteligencia Artificial 2026: 7 Predicciones con Datos Que Se Están Cumpliendo</a></nav></section><div data-newsletter-cta="true" class="mt-12 p-8 bg-gradient-to-br from-slate-800 to-slate-900 border border-purple-500/20 rounded-2xl"><div class="text-center mb-6"><span class="text-4xl">📬</span><h3 class="text-2xl font-bold text-white mt-4">¿Te ha gustado? Hay más cada semana</h3><p class="text-slate-400 mt-2 max-w-lg mx-auto">Únete a <span class="text-cyan-400 font-semibold">"IA Sin Humo"</span> — la newsletter donde comparto lo que realmente funciona en inteligencia artificial. Sin teoría innecesaria, sin postureo.</p></div><div class="grid md:grid-cols-3 gap-4 mb-8"><div class="bg-slate-700/30 p-4 rounded-xl text-center"><span class="text-2xl">📚</span><p class="text-white font-medium mt-2">1 Tutorial</p><p class="text-slate-400 text-sm">Paso a paso, práctico</p></div><div class="bg-slate-700/30 p-4 rounded-xl text-center"><span class="text-2xl">🛠️</span><p class="text-white font-medium mt-2">3 Herramientas</p><p class="text-slate-400 text-sm">Probadas y útiles</p></div><div class="bg-slate-700/30 p-4 rounded-xl text-center"><span class="text-2xl">💡</span><p class="text-white font-medium mt-2">0 Bullshit</p><p class="text-slate-400 text-sm">Solo lo que importa</p></div></div><form class="max-w-md mx-auto space-y-3"><input type="email" placeholder="tu@email.com" required="" class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-xl text-white placeholder-slate-300 focus:outline-none focus:border-purple-500 transition-all" value=""/><button type="submit" class="w-full py-3 bg-gradient-to-r from-purple-600 to-cyan-500 text-white font-bold rounded-xl hover:from-purple-700 hover:to-cyan-600 transition-all disabled:opacity-50">Suscribirme gratis →</button></form><p class="text-center text-slate-400 text-xs mt-4">+<!-- -->547<!-- --> suscriptores • Cada martes • Cancela cuando quieras</p></div><div class="my-8 p-6 rounded-xl bg-gradient-to-br from-[#0a66c2]/10 to-slate-900/80 border border-[#0a66c2]/30"><div class="flex flex-col sm:flex-row items-center gap-5"><div class="shrink-0"><img alt="Javier Santos - Especialista en IA & Machine Learning" loading="lazy" width="80" height="80" decoding="async" data-nimg="1" class="rounded-full border-2 border-[#0a66c2]/50 object-cover" style="color:transparent" srcSet="/_next/image?url=%2Fjavi-santos.webp&w=96&q=75 1x, /_next/image?url=%2Fjavi-santos.webp&w=256&q=75 2x" src="/_next/image?url=%2Fjavi-santos.webp&w=256&q=75"/></div><div class="flex-1 text-center sm:text-left"><p class="text-white font-semibold text-lg mb-1">Javier Santos</p><p class="text-slate-400 text-sm mb-3">Consultor de IA para empresas. Comparto contenido sobre inteligencia artificial, automatización y desarrollo cada semana.</p><div class="flex flex-wrap gap-3"><a href="https://www.linkedin.com/in/francisco-javier-santos-criado/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-5 py-2.5 bg-[#0a66c2] hover:bg-[#004182] text-white rounded-lg font-semibold transition-all shadow-lg shadow-[#0a66c2]/25 hover:shadow-[#0a66c2]/40"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>Conectar en LinkedIn</a><a href="mailto:javi@javadex.es" class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white rounded-lg font-semibold transition-all shadow-lg shadow-cyan-500/25 hover:shadow-cyan-500/40"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>Contactar</a></div></div></div></div><footer class="mt-12 pt-8 border-t border-slate-200 dark:border-slate-700"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><div class="flex flex-col sm:flex-row justify-center gap-4"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border hover:text-accent-foreground h-10 rounded-md px-3 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700/50"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-5 h-5 mr-2"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>Suscríbete a la newsletter</button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border hover:text-accent-foreground h-10 rounded-md px-3 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700/50">Conectar en LinkedIn</button></div><a href="/#blog"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border hover:text-accent-foreground h-11 px-4 py-2 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left w-4 h-4 mr-2"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>Ver más artículos</button></a></div></footer></div></div></div></div></main><script src="/_next/static/chunks/webpack-286bc7e53c982636.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[38343,[\"7177\",\"static/chunks/app/layout-2cbc063033571177.js\"],\"\"]\n5:I[31423,[],\"\"]\n6:I[69795,[],\"\"]\n8:I[14205,[],\"OutletBoundary\"]\nb:I[14205,[],\"ViewportBoundary\"]\nd:I[14205,[],\"MetadataBoundary\"]\nf:I[60250,[],\"\"]\n:HL[\"/_next/static/media/558ca1a6aa3cb55e-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/26e0ffa446d6f1ed.css\",\"style\"]\n:HL[\"/_next/static/css/5a1744f322f5bf55.css\",\"style\"]\n3:Tc12,"])</script><script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@type\":[\"Person\",\"ProfessionalService\"],\"name\":\"Javier Santos Criado\",\"givenName\":\"Francisco Javier\",\"familyName\":\"Santos Criado\",\"alternateName\":[\"Javadex\",\"Javi Santos\",\"JavadexAI\",\"Javier Santos Consultor IA\",\"La Escuela de IA\",\"Javier Santos La Escuela de IA\"],\"url\":\"https://www.javadex.es\",\"identifier\":[{\"@type\":\"PropertyValue\",\"propertyID\":\"LinkedIn\",\"value\":\"https://www.linkedin.com/in/francisco-javier-santos-criado/\"},{\"@type\":\"PropertyValue\",\"propertyID\":\"GitHub\",\"value\":\"https://github.com/ESJavadex\"}],\"jobTitle\":\"Consultor IA \u0026 Machine Learning\",\"disambiguatingDescription\":\"Javier Santos Criado (Javadex) es un consultor de Inteligencia Artificial español especializado en LLMs, automatización y desarrollo de agentes IA. NOTA IMPORTANTE: 'Javadex' es una marca personal de IA, NO tiene relación con Java (el lenguaje de programación) ni con JDK (Java Development Kit). También conocido como 'La Escuela de IA' en YouTube (@JavadexAI). NO es el Javier Santos relacionado con Julio Iglesias - son personas completamente diferentes.\",\"description\":\"Especialista en Inteligencia Artificial y Machine Learning con más de 5 años de experiencia, enfocado en el desarrollo de sistemas de IA para empresas, incluyendo chatbots inteligentes, automatización de procesos, análisis predictivo, computer vision y optimización de costos de LLMs.\",\"knowsAbout\":[\"Inteligencia Artificial\",\"Machine Learning\",\"Prompt Engineering\",\"Large Language Models (LLMs)\",\"Chatbots Inteligentes\",\"Automatización de Procesos\",\"Computer Vision\",\"Natural Language Processing\",\"MLOps\",\"Sistemas de IA para Producción\",\"Python Programming\",\"Deep Learning\",\"Neural Networks\",\"AI Consulting\",\"Business Intelligence\",\"Data Science\",\"OpenAI Integration\",\"Claude AI\",\"GPT Development\"],\"hasOccupation\":{\"@type\":\"Occupation\",\"name\":\"AI \u0026 Machine Learning Consultant\",\"occupationLocation\":{\"@type\":\"Country\",\"name\":\"España\"},\"skills\":[\"Artificial Intelligence\",\"Machine Learning\",\"Python\",\"Deep Learning\",\"Natural Language Processing\",\"Computer Vision\",\"MLOps\",\"Prompt Engineering\"]},\"alumniOf\":[{\"@type\":\"EducationalOrganization\",\"name\":\"Universidad con Máster en Robótica\"}],\"sameAs\":[\"https://www.youtube.com/@JavadexAI\",\"https://www.linkedin.com/in/francisco-javier-santos-criado/\",\"https://github.com/ESJavadex\",\"https://www.skool.com/la-escuela-de-ia-9955/about?ref=ff7ba33fbcd6460ca75d6b4cbcca1e0a\",\"https://twitter.com/javadex_dev\",\"https://www.tiktok.com/@javadex\"],\"image\":\"https://www.javadex.es/og-image.jpg\",\"worksFor\":{\"@type\":\"Organization\",\"name\":\"Javi Santos Consulting\",\"url\":\"https://www.javadex.es\"},\"offers\":[{\"@type\":\"Service\",\"name\":\"Consultoría en Inteligencia Artificial\",\"description\":\"Desarrollo de sistemas de IA personalizados para empresas\"},{\"@type\":\"Service\",\"name\":\"Implementación de Chatbots Inteligentes\",\"description\":\"Chatbots con IA para atención al cliente y automatización\"},{\"@type\":\"Service\",\"name\":\"Análisis Predictivo y Computer Vision\",\"description\":\"Sistemas de análisis predictivo y visión por computadora\"}]}"])</script><script>self.__next_f.push([1,"4:Tbd1,"])</script><script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"name\":\"Javier Santos Consulting\",\"alternateName\":[\"Javadex\",\"Javi Santos IA\",\"La Escuela de IA\"],\"url\":\"https://www.javadex.es\",\"logo\":\"https://www.javadex.es/javi-santos.webp\",\"description\":\"Consultoría especializada en Inteligencia Artificial, automatización de procesos con n8n, implementación de LLMs (ChatGPT, Claude, Gemini), desarrollo de chatbots y análisis predictivo para empresas en España.\",\"address\":{\"@type\":\"PostalAddress\",\"addressLocality\":\"Vigo\",\"addressRegion\":\"Galicia\",\"addressCountry\":\"ES\"},\"foundingDate\":\"2020\",\"founder\":{\"@type\":\"Person\",\"name\":\"Javier Santos Criado\"},\"areaServed\":[{\"@type\":\"Country\",\"name\":\"España\"},{\"@type\":\"AdministrativeArea\",\"name\":\"Galicia\"},{\"@type\":\"City\",\"name\":\"Vigo\"}],\"serviceArea\":{\"@type\":\"GeoCircle\",\"geoMidpoint\":{\"@type\":\"GeoCoordinates\",\"latitude\":\"40.4168\",\"longitude\":\"-3.7038\"},\"geoRadius\":\"1000 km\"},\"knowsAbout\":[\"Inteligencia Artificial (IA)\",\"Machine Learning (ML)\",\"Large Language Models (LLMs)\",\"ChatGPT y OpenAI API\",\"Claude AI de Anthropic\",\"Google Gemini\",\"Automatización con n8n\",\"Workflows sin código\",\"RAG (Retrieval Augmented Generation)\",\"Prompt Engineering\",\"Fine-tuning de modelos\",\"Chatbots inteligentes\",\"Agentes autónomos de IA\",\"MCP (Model Context Protocol)\",\"Computer Vision\",\"Natural Language Processing (NLP)\",\"Análisis predictivo\",\"Home Assistant y domótica\",\"Python para IA\",\"FastAPI para LLMs\",\"Bases de datos vectoriales\",\"MLOps y despliegue\"],\"hasOfferCatalog\":{\"@type\":\"OfferCatalog\",\"name\":\"Servicios de Consultoría IA\",\"itemListElement\":[{\"@type\":\"Offer\",\"itemOffered\":{\"@type\":\"Service\",\"name\":\"Desarrollo con LLMs\",\"description\":\"Implementación de chatbots con GPT-4, Claude, Gemini. Sistemas RAG para documentación empresarial. Integración de IA en WhatsApp, Telegram y web.\"}},{\"@type\":\"Offer\",\"itemOffered\":{\"@type\":\"Service\",\"name\":\"Automatización de Procesos\",\"description\":\"Diseño de workflows con n8n, Make, Zapier. Integración y orquestación de APIs. Procesamiento automático de documentos.\"}},{\"@type\":\"Offer\",\"itemOffered\":{\"@type\":\"Service\",\"name\":\"Análisis Predictivo\",\"description\":\"Forecasting de ventas y demanda. Predicción de churn. Detección de anomalías. Dashboards interactivos.\"}},{\"@type\":\"Offer\",\"itemOffered\":{\"@type\":\"Service\",\"name\":\"MLOps y Despliegue\",\"description\":\"Despliegue en AWS, GCP, Azure. Contenedorización con FastAPI y Docker. Monitorización de modelos. CI/CD para pipelines de ML.\"}}]},\"sameAs\":[\"https://www.youtube.com/@JavadexAI\",\"https://www.linkedin.com/in/francisco-javier-santos-criado/\",\"https://github.com/ESJavadex\",\"https://www.skool.com/la-escuela-de-ia-9955/about?ref=ff7ba33fbcd6460ca75d6b4cbcca1e0a\",\"https://twitter.com/javadex_dev\",\"https://www.tiktok.com/@javadex\"],\"contactPoint\":{\"@type\":\"ContactPoint\",\"contactType\":\"Consultas de negocio\",\"url\":\"https://www.javadex.es/contact\",\"availableLanguage\":[\"Español\",\"Inglés\"]},\"slogan\":\"Transformando negocios con Inteligencia Artificial\"}"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"A2BDSNZWAaOoFIJaPggm5\",\"p\":\"\",\"c\":[\"\",\"blog\",\"como-crear-pagina-web-desde-cero-tutorial-principiantes-2026\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"como-crear-pagina-web-desde-cero-tutorial-principiantes-2026\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/26e0ffa446d6f1ed.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/5a1744f322f5bf55.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"es\",\"className\":\"dark __variable_8b3a0b __variable_6d24ac\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"charSet\":\"utf-8\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://www.googletagmanager.com\"}],[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://www.googletagmanager.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://www.google-analytics.com\"}],[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://www.google-analytics.com\"}],[\"$\",\"$L2\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-NWELRBNW7C\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$L2\",null,{\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n\\n // Google Consent Mode v2 — analytics granted, ads denied\\n gtag('consent', 'default', {\\n 'analytics_storage': 'granted',\\n 'ad_storage': 'denied',\\n 'ad_user_data': 'denied',\\n 'ad_personalization': 'denied'\\n });\\n\\n gtag('js', new Date());\\n gtag('config', 'G-NWELRBNW7C');\\n \"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$3\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebSite\\\",\\\"name\\\":\\\"Javier Santos - Portfolio IA \u0026 Machine Learning\\\",\\\"url\\\":\\\"https://www.javadex.es\\\",\\\"description\\\":\\\"Portfolio profesional de Javier Santos, consultor especializado en Inteligencia Artificial y Machine Learning. Proyectos, blog técnico y servicios de consultoría en IA.\\\",\\\"inLanguage\\\":\\\"es-ES\\\",\\\"author\\\":{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"Javier Santos Criado\\\",\\\"url\\\":\\\"https://www.javadex.es\\\"},\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Javier Santos Consulting\\\",\\\"url\\\":\\\"https://www.javadex.es\\\",\\\"logo\\\":\\\"https://www.javadex.es/javi-santos.webp\\\"},\\\"speakable\\\":{\\\"@type\\\":\\\"SpeakableSpecification\\\",\\\"cssSelector\\\":[\\\"h1\\\",\\\".gradient-text\\\",\\\"[role='main'] p\\\",\\\".faq-answer\\\"]}}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$4\"}}],[\"$\",\"meta\",null,{\"name\":\"robots\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1\"}],[\"$\",\"meta\",null,{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1\"}],[\"$\",\"meta\",null,{\"name\":\"bingbot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1\"}],[\"$\",\"meta\",null,{\"name\":\"subject\",\"content\":\"Inteligencia Artificial, Machine Learning, Consultoría IA\"}],[\"$\",\"meta\",null,{\"name\":\"topic\",\"content\":\"AI Consulting and Machine Learning Services\"}],[\"$\",\"meta\",null,{\"name\":\"summary\",\"content\":\"Javier Santos - Consultor especializado en IA y ML con 5+ años de experiencia desarrollando soluciones empresariales\"}],[\"$\",\"meta\",null,{\"name\":\"classification\",\"content\":\"Technology, Artificial Intelligence, Machine Learning, Consulting\"}],[\"$\",\"meta\",null,{\"name\":\"designer\",\"content\":\"Javier Santos Criado\"}],[\"$\",\"meta\",null,{\"name\":\"reply-to\",\"content\":\"https://www.javadex.es/escuela-de-ia\"}],[\"$\",\"meta\",null,{\"name\":\"owner\",\"content\":\"Javier Santos Criado\"}],[\"$\",\"meta\",null,{\"name\":\"url\",\"content\":\"https://www.javadex.es\"}],[\"$\",\"meta\",null,{\"name\":\"identifier-URL\",\"content\":\"https://www.javadex.es\"}],[\"$\",\"meta\",null,{\"name\":\"coverage\",\"content\":\"Worldwide\"}],[\"$\",\"meta\",null,{\"name\":\"distribution\",\"content\":\"Global\"}],[\"$\",\"meta\",null,{\"name\":\"rating\",\"content\":\"General\"}],[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"content\":\"#0a0e1a\"}]]}],[\"$\",\"body\",null,{\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"a\",null,{\"href\":\"#main-content\",\"className\":\"sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-cyan-600 focus:text-white focus:rounded-lg focus:shadow-lg focus:outline-none\",\"children\":\"Ir al contenido principal\"}],[\"$\",\"main\",null,{\"id\":\"main-content\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]]}]]}],{\"children\":[\"blog\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"slug\",\"como-crear-pagina-web-desde-cero-tutorial-principiantes-2026\",\"d\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L7\",\"$undefined\",null,[\"$\",\"$L8\",null,{\"children\":[\"$L9\",\"$La\",null]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"od_IaOrCPbXG0S_UsVyxt\",{\"children\":[[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"12:I[2694,[\"2694\",\"static/chunks/2694-2ffeccfbe6519ff7.js\",\"2939\",\"static/chunks/2939-4edb37646f205669.js\",\"73\",\"static/chunks/73-3cd0aa4a7a9a3ab2.js\",\"7861\",\"static/chunks/7861-aee04e33a4c02ef0.js\",\"5953\",\"static/chunks/app/blog/%5Bslug%5D/page-6e57d0cf2a482f40.js\"],\"\"]\n13:I[97861,[\"2694\",\"static/chunks/2694-2ffeccfbe6519ff7.js\",\"2939\",\"static/chunks/2939-4edb37646f205669.js\",\"73\",\"static/chunks/73-3cd0aa4a7a9a3ab2.js\",\"7861\",\"static/chunks/7861-aee04e33a4c02ef0.js\",\"5953\",\"static/chunks/app/blog/%5Bslug%5D/page-6e57d0cf2a482f40.js\"],\"NewsletterCTA\"]\n14:I[13663,[\"2694\",\"static/chunks/2694-2ffeccfbe6519ff7.js\",\"2939\",\"static/chunks/2939-4edb37646f205669.js\",\"73\",\"static/chunks/73-3cd0aa4a7a9a3ab2.js\",\"7861\",\"static/chunks/7861-aee04e33a4c02ef0.js\",\"5953\",\"static/chunks/app/blog/%5Bslug%5D/page-6e57d0cf2a482f40.js\"],\"EngagementTracker\"]\n15:I[60498,[\"2694\",\"static/chunks/2694-2ffeccfbe6519ff7.js\",\"2939\",\"static/chunks/2939-4edb37646f205669.js\",\"73\",\"static/chunks/73-3cd0aa4a7a9a3ab2.js\",\"7861\",\"static/chunks/7861-aee04e33a4c02ef0.js\",\"5953\",\"static/chunks/app/blog/%5Bslug%5D/page-6e57d0cf2a482f40.js\"],\"MermaidRenderer\"]\n18:I[85256,[\"2694\",\"static/chunks/2694-2ffeccfbe6519ff7.js\",\"2939\",\"static/chunks/2939-4edb37646f205669.js\",\"73\",\"static/chunks/73-3cd0aa4a7a9a3ab2.js\",\"7861\",\"static/chunks/7861-aee04e33a4c02ef0.js\",\"5953\",\"static/chunks/app/blog/%5Bslug%5D/page-6e57d0cf2a482f40.js\"],\"ConsultingCTA\"]\n19:I[77243,[\"2694\",\"static/chunks/2694-2ffeccfbe6519ff7.js\",\"2939\",\"static/chunks/2939-4edb37646f205669.js\",\"73\",\"static/chunks/73-3cd0aa4a7a9a3ab2.js\",\"7861\",\"static/chunks/7861-aee04e33a4c02ef0.js\",\"5953\",\"static/chunks/app/blog/%5Bslug%5D/page-6e57d0cf2a482f40.js\"],\"RecommendedPosts\"]\n1a:I[89878,[\"2694\",\"static/chunks/2694-2ffeccfbe6519ff7.js\",\"2939\",\"static/chunks/2939-4edb37646f205669.js\",\"73\",\"static/chunks/73-3cd0aa4a7a9a3ab2.js\",\"7861\",\"static/chunks/7861-aee04e33a4c02ef0.js\",\"5953\",\"static/chunks/app/blog/%5Bslug%5D/page-6e57d0cf2a482f40.js\"],\"LinkedInCTA\"]\n1b:I[84272,[\"2694\",\"static/chunks/2694-2ffeccfbe6519f"])</script><script>self.__next_f.push([1,"f7.js\",\"2939\",\"static/chunks/2939-4edb37646f205669.js\",\"73\",\"static/chunks/73-3cd0aa4a7a9a3ab2.js\",\"7861\",\"static/chunks/7861-aee04e33a4c02ef0.js\",\"5953\",\"static/chunks/app/blog/%5Bslug%5D/page-6e57d0cf2a482f40.js\"],\"BlogActions\"]\n10:T79d,{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"headline\":\"Como Crear tu Primera Pagina Web desde Cero: Tutorial Paso a Paso [2026]\",\"description\":\"Crea tu primera pagina web desde cero con este tutorial paso a paso. Aprende HTML, CSS y JavaScript basico, publica gratis con GitHub Pages y anade funcionalida\",\"image\":\"https://www.javadex.es/og-image.jpg\",\"author\":{\"@type\":\"Person\",\"name\":\"Javier Santos Criado\",\"url\":\"https://www.javadex.es\",\"jobTitle\":\"Consultor IA y Machine Learning\",\"knowsAbout\":[\"Inteligencia Artificial\",\"Large Language Models\",\"ChatGPT\",\"Claude\",\"RAG\",\"n8n\",\"Automatización\",\"Python\",\"Machine Learning\"],\"sameAs\":[\"https://www.youtube.com/@JavadexAI\",\"https://www.linkedin.com/in/francisco-javier-santos-criado/\",\"https://github.com/ESJavadex\",\"https://twitter.com/javadex_dev\",\"https://www.skool.com/la-escuela-de-ia-9955/about?ref=ff7ba33fbcd6460ca75d6b4cbcca1e0a\"]},\"publisher\":{\"@type\":\"Organization\",\"name\":\"Javier Santos - Consultor IA\",\"url\":\"https://www.javadex.es\",\"logo\":\"https://www.javadex.es/javi-santos.webp\"},\"datePublished\":\"2026-03-24\",\"dateModified\":\"2026-03-24\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://www.javadex.es/blog/como-crear-pagina-web-desde-cero-tutorial-principiantes-2026\"},\"url\":\"https://www.javadex.es/blog/como-crear-pagina-web-desde-cero-tutorial-principiantes-2026\",\"articleSection\":\"Inteligencia Artificial, Machine Learning\",\"keywords\":\"\",\"wordCount\":5491,\"timeRequired\":\"20 min\",\"inLanguage\":\"es-ES\",\"about\":{\"@type\":\"Thing\",\"name\":\"Como Crear tu Primera Pagina Web desde Cero: Tutorial Paso a Paso [2026]\",\"description\":\"Crea tu primera pagina web desde cero con este tutorial paso a paso. Aprende HTML, CSS y JavaScript basico, publica gratis con GitHub Pages y anade funcionalidades con IA. Sin experiencia previa necesa"])</script><script>self.__next_f.push([1,"ria.\"},\"speakable\":{\"@type\":\"SpeakableSpecification\",\"cssSelector\":[\".blog-content h1\",\".blog-content h2\",\".blog-content p:first-of-type\"]}}11:T673,{\"@context\":\"https://schema.org\",\"@type\":\"HowTo\",\"name\":\"Como Crear tu Primera Pagina Web desde Cero: Tutorial Paso a Paso [2026]\",\"description\":\"Crea tu primera pagina web desde cero con este tutorial paso a paso. Aprende HTML, CSS y JavaScript basico, publica gratis con GitHub Pages y anade funcionalidades con IA. Sin experiencia previa necesaria.\",\"image\":\"https://www.javadex.es/og-image.jpg\",\"totalTime\":\"20 min\",\"author\":{\"@type\":\"Person\",\"name\":\"Javier Santos Criado\"},\"step\":[{\"@type\":\"HowToStep\",\"position\":1,\"name\":\"Paso 1\",\"text\":\"Ve a [code.visualstudio.com](https://code.visualstudio.com/)\"},{\"@type\":\"HowToStep\",\"position\":2,\"name\":\"Paso 2\",\"text\":\"Haz clic en el boton de descarga (detecta tu sistema operativo automaticamente)\"},{\"@type\":\"HowToStep\",\"position\":3,\"name\":\"Paso 3\",\"text\":\"Ejecuta el instalador y sigue los pasos (siguiente, siguiente, instalar)\"},{\"@type\":\"HowToStep\",\"position\":4,\"name\":\"Paso 4\",\"text\":\"Abre VS Code\"},{\"@type\":\"HowToStep\",\"position\":5,\"name\":\"Paso 5\",\"text\":\"Crea una carpeta en tu escritorio llamada mi-primera-web\"},{\"@type\":\"HowToStep\",\"position\":6,\"name\":\"Paso 6\",\"text\":\"Abre VS Code\"},{\"@type\":\"HowToStep\",\"position\":7,\"name\":\"Paso 7\",\"text\":\"Ve a Archivo \u003e Abrir carpeta \u003e Selecciona mi-primera-web\"},{\"@type\":\"HowToStep\",\"position\":8,\"name\":\"Paso 8\",\"text\":\"Crea un nuevo archivo: Archivo \u003e Nuevo archivo \u003e Guardalo como index.html\"},{\"@type\":\"HowToStep\",\"position\":9,\"name\":\"Paso 9\",\"text\":\"Ve a [github.com](https://github.com/) y haz clic en \\\"Sign up\\\"\"},{\"@type\":\"HowToStep\",\"position\":10,\"name\":\"Paso 10\",\"text\":\"Introduce tu email, crea una contrasena y elige un nombre de usuario\"}]}16:T726,blog-content prose prose-lg max-w-none prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-4xl prose-h1:md:text-5xl prose-h1:mb-8 prose-h1:mt-12 prose-h1:first:mt-0 prose-h2:text-3xl prose-h2:md:text-4xl prose-h2:mb-6 prose-"])</script><script>self.__next_f.push([1,"h2:mt-12 prose-h2:border-b prose-h2:border-slate-200 prose-h2:dark:border-slate-700 prose-h2:pb-3 prose-h3:text-2xl prose-h3:md:text-3xl prose-h3:mb-4 prose-h3:mt-10 prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-p:text-slate-700 prose-p:dark:text-slate-300 prose-a:text-cyan-600 prose-a:dark:text-cyan-400 prose-a:no-underline hover:prose-a:underline prose-a:font-medium prose-a:transition-colors prose-code:bg-cyan-50 prose-code:dark:bg-cyan-900/30 prose-code:text-cyan-700 prose-code:dark:text-cyan-300 prose-code:px-2 prose-code:py-1 prose-code:rounded prose-code:text-sm prose-code:font-medium prose-code:border prose-code:border-cyan-200 prose-code:dark:border-cyan-800 prose-pre:bg-slate-50 prose-pre:dark:bg-slate-900 prose-pre:border prose-pre:border-slate-200 prose-pre:dark:border-slate-700 prose-pre:rounded-lg prose-pre:p-6 prose-pre:my-8 prose-blockquote:border-l-4 prose-blockquote:border-cyan-500 prose-blockquote:bg-cyan-50 prose-blockquote:dark:bg-cyan-900/20 prose-blockquote:pl-6 prose-blockquote:py-4 prose-blockquote:my-6 prose-blockquote:italic prose-blockquote:rounded-r-lg prose-ul:list-disc prose-ul:list-inside prose-ul:mb-6 prose-ul:ml-4 prose-ul:space-y-2 prose-ol:list-decimal prose-ol:list-inside prose-ol:mb-6 prose-ol:ml-4 prose-ol:space-y-2 prose-li:leading-relaxed prose-li:text-slate-700 prose-li:dark:text-slate-300 prose-strong:font-semibold prose-strong:text-slate-900 prose-strong:dark:text-white prose-em:italic prose-em:text-slate-700 prose-em:dark:text-slate-300 prose-hr:border-slate-200 prose-hr:dark:border-slate-700 prose-hr:my-1217:T2883d,"])</script><script>self.__next_f.push([1,"\n\u003ch2 id=\"como-crear-tu-primera-pagina-web-desde-cero-tutorial-paso-a-paso-2026\" class=\"text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-8 mt-12 first:mt-0 leading-tight scroll-mt-20\"\u003eComo Crear tu Primera Pagina Web desde Cero: Tutorial Paso a Paso [2026]\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSi, puedes crear tu primera pagina web desde cero hoy mismo, sin experiencia previa y sin gastar un euro.\u003c/strong\u003e Segun W3Techs (marzo 2026), existen mas de 1.100 millones de sitios web activos en internet, y el 68,4% de ellos estan construidos con las mismas tres tecnologias basicas que vas a aprender aqui: HTML, CSS y JavaScript. No necesitas estudiar una carrera de informatica ni pagar por herramientas caras. Solo necesitas un ordenador, conexion a internet y este tutorial.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eLa demanda de perfiles con conocimientos web sigue creciendo: segun el informe de Fundacion Telefonica \"Empleo Digital 2026\" (publicado el 14 de febrero de 2026), las ofertas de empleo que requieren competencias de desarrollo web aumentaron un 23% interanual en Espana. Incluso si no quieres dedicarte profesionalmente a la programacion, saber crear una pagina web es una competencia transversal que te abre puertas en marketing, diseno, emprendimiento y cualquier area donde necesites presencia online.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eEn este tutorial vas a construir una pagina web funcional paso a paso: desde tu primer archivo HTML hasta publicarla gratis en internet con GitHub Pages. Cada paso incluye codigo completo que puedes copiar y ejecutar en tu navegador. Vamos a ello.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cblockquote class=\"border-l-4 border-cyan-500 bg-cyan-50 dark:bg-cyan-900/20 pl-6 py-4 my-6 italic text-slate-700 dark:text-slate-300 rounded-r-lg\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eQuieres crear webs con ayuda de IA?\u003c/strong\u003e En \u003ca href=\"https://www.skool.com/la-escuela-de-ia-9955/about?ref=ff7ba33fbcd6460ca75d6b4cbcca1e0a\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eLa Escuela de IA\u003c/a\u003e compartimos tutoriales practicos y workflows. \u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eUnete gratis\u003c/strong\u003e. Tambien en \u003ca href=\"https://www.youtube.com/@JavadexAI?sub_confirmation=1\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eYouTube @JavadexAI\u003c/a\u003e y \u003ca href=\"https://www.tiktok.com/@javadex\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eTikTok @javadex\u003c/a\u003e. Conecta en \u003ca href=\"https://www.linkedin.com/in/francisco-javier-santos-criado/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eLinkedIn de Javier Santos\u003c/a\u003e.\u003c/blockquote\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"tldr-lo-que-vas-a-aprender\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003eTL;DR - Lo Que Vas a Aprender\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cul class=\"list-disc list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300\"\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eCrear una pagina web completa desde cero\u003c/strong\u003e usando HTML, CSS y JavaScript, con codigo que puedes copiar directamente\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eNo necesitas experiencia previa\u003c/strong\u003e: el tutorial empieza desde el archivo en blanco y avanza paso a paso\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eHerramientas 100% gratuitas\u003c/strong\u003e: VS Code, Chrome DevTools, GitHub Pages (0 EUR de coste total)\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003ePublicar tu web en internet gratis\u003c/strong\u003e con GitHub Pages, accesible para cualquier persona en el mundo\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eTiempo total estimado\u003c/strong\u003e: entre 2 y 4 horas siguiendo todos los pasos, menos de 1 hora si solo quieres la version basica\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eMejorar tu web con IA\u003c/strong\u003e: como usar ChatGPT y Claude para generar estilos, depurar errores y anadir funcionalidades\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eAlternativas sin codigo\u003c/strong\u003e: cuando usar WordPress, Wix o Framer en lugar de programar desde cero\u003c/li\u003e\n\u003c/ul\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"que-necesitas-para-crear-una-pagina-web\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003eQue Necesitas para Crear una Pagina Web\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSolo necesitas tres cosas que probablemente ya tienes.\u003c/strong\u003e No hace falta un ordenador potente, ni software de pago, ni conocimientos previos de programacion. Estos son los requisitos minimos:\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"overflow-x-auto my-8\"\u003e\u003ctable class=\"min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg\"\u003e\u003cthead class=\"bg-gradient-to-r from-cyan-500 to-blue-600\"\u003e\u003ctr\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eRequisito\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eDetalle\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eYa lo tienes?\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eUn ordenador\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eWindows, Mac o Linux. Cualquier equipo fabricado despues de 2015 sirve\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eSi\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eUn navegador web\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eChrome, Firefox, Edge o Safari. Recomiendo Chrome por sus DevTools\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eSi\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eConexion a internet\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003ePara descargar VS Code y publicar tu web. Despues puedes trabajar offline\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eSi\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eUn editor de texto\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eVamos a instalar VS Code (gratuito) en el Paso 1\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eEn 5 minutos\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eGanas de aprender\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eNo necesitas memorizar nada. Todo se busca. Los profesionales tambien lo hacen\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eSeguro que si\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003c/div\u003e\n\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eLo que NO necesitas:\u003c/strong\u003e\n\u003cul class=\"list-disc list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300\"\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eNo necesitas saber programar (vas a aprender aqui)\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eNo necesitas comprar un dominio (GitHub Pages te da uno gratis)\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eNo necesitas un servidor ni hosting de pago\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eNo necesitas Photoshop ni herramientas de diseno\u003c/li\u003e\n\u003c/ul\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"herramientas-gratuitas-que-vamos-a-usar\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003eHerramientas Gratuitas que Vamos a Usar\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eTodas las herramientas de este tutorial son 100% gratuitas.\u003c/strong\u003e Aqui tienes el resumen de lo que vas a usar y para que sirve cada una:\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"overflow-x-auto my-8\"\u003e\u003ctable class=\"min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg\"\u003e\u003cthead class=\"bg-gradient-to-r from-cyan-500 to-blue-600\"\u003e\u003ctr\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eHerramienta\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003ePrecio\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003ePara Que Sirve\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eEnlace\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eVS Code\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e0 EUR\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eEditor de codigo. Donde escribes HTML, CSS y JavaScript\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ca href=\"https://code.visualstudio.com/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003ecode.visualstudio.com\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eGoogle Chrome\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e0 EUR\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eNavegador con DevTools integradas para depurar tu web\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ca href=\"https://www.google.com/chrome/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003egoogle.com/chrome\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eGitHub Pages\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e0 EUR\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eHosting gratuito para publicar tu web en internet\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ca href=\"https://pages.github.com/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003epages.github.com\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eChatGPT / Claude\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e0 EUR (plan gratuito)\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eIA para generar codigo, resolver dudas y mejorar estilos\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ca href=\"https://chatgpt.com/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003echatgpt.com\u003c/a\u003e / \u003ca href=\"https://claude.ai/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eclaude.ai\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eChrome DevTools\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e0 EUR (incluido en Chrome)\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eInspeccionar elementos, depurar CSS y ver errores JavaScript\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eF12 en Chrome\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003c/div\u003e\n\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eSegun la encuesta State of JS 2025 (publicada el 8 de enero de 2026), VS Code es el editor mas utilizado por desarrolladores web en el mundo, con un 74,2% de cuota de uso. No es casualidad: es rapido, gratuito y tiene miles de extensiones que te facilitan la vida.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"paso-1-instala-tu-editor-de-codigo-vs-code\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003ePaso 1: Instala tu Editor de Codigo (VS Code)\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eVS Code es el editor de codigo gratuito mas popular del mundo y lo vas a instalar en menos de 5 minutos.\u003c/strong\u003e Segun BuiltWith (marzo 2026), es la herramienta principal del 78% de los desarrolladores web profesionales.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"como-instalarlo\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eComo instalarlo:\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003col class=\"list-decimal list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300\"\u003e\u003c/p\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eVe a \u003ca href=\"https://code.visualstudio.com/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003ecode.visualstudio.com\u003c/a\u003e\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eHaz clic en el boton de descarga (detecta tu sistema operativo automaticamente)\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eEjecuta el instalador y sigue los pasos (siguiente, siguiente, instalar)\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eAbre VS Code\u003c/li\u003e\n\u003c/ol\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"extensiones-recomendadas-para-principiantes\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eExtensiones recomendadas para principiantes:\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eUna vez abierto VS Code, instala estas extensiones (ve a la barra lateral izquierda, icono de cuadrados, y busca cada una):\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"overflow-x-auto my-8\"\u003e\u003ctable class=\"min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg\"\u003e\u003cthead class=\"bg-gradient-to-r from-cyan-500 to-blue-600\"\u003e\u003ctr\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eExtension\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003ePara Que Sirve\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eLive Server\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eAbre tu pagina en el navegador y la actualiza automaticamente cuando guardas cambios\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003ePrettier\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eFormatea tu codigo automaticamente para que sea legible\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eHTML CSS Support\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eAutocompletado inteligente para HTML y CSS\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSpanish Language Pack\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003ePone VS Code en espanol (opcional)\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003c/div\u003e\n\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eTruco\u003c/strong\u003e: Despues de instalar Live Server, podras hacer clic derecho en tu archivo HTML y seleccionar \"Open with Live Server\" para ver tu pagina en el navegador al instante. Cada vez que guardes un cambio (Ctrl+S o Cmd+S), la pagina se actualiza sola.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"paso-2-crea-tu-primer-archivo-html\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003ePaso 2: Crea tu Primer Archivo HTML\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eHTML es el lenguaje que define la estructura de toda pagina web, y tu primer archivo funcional lo puedes crear en menos de 2 minutos.\u003c/strong\u003e Segun W3Techs (2026), el 100% de los sitios web del mundo usan HTML como base. No existe alternativa: si algo se ve en un navegador, tiene HTML detras.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"crea-la-carpeta-de-tu-proyecto\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eCrea la carpeta de tu proyecto:\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003col class=\"list-decimal list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300\"\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eCrea una carpeta en tu escritorio llamada \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003emi-primera-web\u003c/code\u003e\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eAbre VS Code\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eVe a Archivo \u003e Abrir carpeta \u003e Selecciona \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003emi-primera-web\u003c/code\u003e\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eCrea un nuevo archivo: Archivo \u003e Nuevo archivo \u003e Guardalo como \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003eindex.html\u003c/code\u003e\u003c/li\u003e\n\u003c/ol\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"tu-primer-html-completo\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eTu primer HTML completo:\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eCopia este codigo exacto en tu archivo \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003eindex.html\u003c/code\u003e:\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"code-block-wrapper my-8 rounded-xl overflow-hidden border border-slate-300 dark:border-slate-600 shadow-lg\"\u003e\n \u003cdiv class=\"bg-gradient-to-r from-slate-700 to-slate-800 dark:from-slate-800 dark:to-slate-900 px-6 py-1.5 flex items-center justify-center gap-3 border-b border-slate-600 dark:border-slate-700\"\u003e\n \u003cdiv class=\"flex gap-1.5\"\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-red-500\"\u003e\u003c/div\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-yellow-500\"\u003e\u003c/div\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-green-500\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cspan class=\"text-xs font-semibold text-slate-300 uppercase tracking-wider\"\u003ehtml\u003c/span\u003e\n \u003c/div\u003e\n \u003cpre class=\"bg-slate-900 dark:bg-black p-6 overflow-x-auto\"\u003e\u003ccode class=\"text-sm leading-loose font-mono text-slate-100 dark:text-slate-200\"\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e1\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e2\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026lt;html lang=\u0026quot;es\u0026quot;\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e3\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026lt;head\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e4\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;meta charset=\u0026quot;UTF-8\u0026quot;\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e5\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;meta name=\u0026quot;viewport\u0026quot; content=\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e6\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;title\u0026gt;Mi Primera Pagina Web\u0026lt;/title\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e7\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;meta name=\u0026quot;description\u0026quot; content=\u0026quot;Esta es mi primera pagina web creada desde cero\u0026quot;\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e8\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;link rel=\u0026quot;stylesheet\u0026quot; href=\u0026quot;styles.css\u0026quot;\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e9\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026lt;/head\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e10\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026lt;body\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e11\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;header\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e12\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;nav\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e13\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;a href=\u0026quot;#inicio\u0026quot;\u0026gt;Inicio\u0026lt;/a\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e14\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;a href=\u0026quot;#sobre-mi\u0026quot;\u0026gt;Sobre Mi\u0026lt;/a\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e15\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;a href=\u0026quot;#proyectos\u0026quot;\u0026gt;Proyectos\u0026lt;/a\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e16\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;a href=\u0026quot;#contacto\u0026quot;\u0026gt;Contacto\u0026lt;/a\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e17\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;/nav\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e18\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;/header\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e19\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e20\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;main\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e21\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;section id=\u0026quot;inicio\u0026quot;\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e22\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;h1\u0026gt;Hola, soy [Tu Nombre]\u0026lt;/h1\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e23\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;p\u0026gt;Bienvenido a mi primera pagina web. La he creado desde cero\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e24\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e siguiendo un tutorial y estoy aprendiendo desarrollo web.\u0026lt;/p\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e25\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;a href=\u0026quot;#proyectos\u0026quot;\u0026gt;Ver mis proyectos\u0026lt;/a\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e26\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;/section\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e27\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e28\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;section id=\u0026quot;sobre-mi\u0026quot;\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e29\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;h2\u0026gt;Sobre Mi\u0026lt;/h2\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e30\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;p\u0026gt;Me llamo [Tu Nombre] y estoy aprendiendo a crear paginas web.\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e31\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e Me interesa la tecnologia, el diseno y la inteligencia artificial.\u0026lt;/p\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e32\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;/section\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e33\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e34\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;section id=\u0026quot;proyectos\u0026quot;\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e35\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;h2\u0026gt;Mis Proyectos\u0026lt;/h2\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e36\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;div class=\u0026quot;tarjeta\u0026quot;\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e37\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;h3\u0026gt;Proyecto 1\u0026lt;/h3\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e38\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;p\u0026gt;Descripcion de tu primer proyecto aqui.\u0026lt;/p\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e39\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;/div\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e40\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;div class=\u0026quot;tarjeta\u0026quot;\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e41\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;h3\u0026gt;Proyecto 2\u0026lt;/h3\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e42\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;p\u0026gt;Descripcion de tu segundo proyecto aqui.\u0026lt;/p\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e43\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;/div\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e44\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;/section\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e45\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e46\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;section id=\u0026quot;contacto\u0026quot;\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e47\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;h2\u0026gt;Contacto\u0026lt;/h2\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e48\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;p\u0026gt;Puedes escribirme a: \u0026lt;a href=\u0026quot;mailto:tu@email.com\u0026quot;\u0026gt;tu@email.com\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e49\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;/section\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e50\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;/main\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e51\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e52\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;footer\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e53\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;p\u0026gt;Creado por [Tu Nombre] - 2026\u0026lt;/p\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e54\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;/footer\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e55\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e56\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026lt;script src=\u0026quot;script.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e57\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026lt;/body\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e58\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026lt;/html\u0026gt;\u003c/span\u003e\u003c/div\u003e\u003c/code\u003e\u003c/pre\u003e\n \u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"que-hace-cada-parte\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eQue hace cada parte:\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"overflow-x-auto my-8\"\u003e\u003ctable class=\"min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg\"\u003e\u003cthead class=\"bg-gradient-to-r from-cyan-500 to-blue-600\"\u003e\u003ctr\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eEtiqueta\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eQue Hace\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003c!DOCTYPE html\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eDice al navegador que es un documento HTML5\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003chtml lang=\"es\"\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eContenedor principal. \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003elang=\"es\"\u003c/code\u003e indica que esta en espanol\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003chead\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eMetadatos: titulo, descripcion, enlace a CSS. No se ve en pantalla\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cmeta charset=\"UTF-8\"\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003ePermite usar tildes y caracteres especiales\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cmeta name=\"viewport\"\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eHace que tu web se vea bien en moviles\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003ctitle\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eLo que aparece en la pestana del navegador\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cbody\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eTodo el contenido visible de tu pagina\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cheader\u003e\u003c/code\u003e y \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cnav\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eCabecera con menu de navegacion\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cmain\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eContenido principal de la pagina\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003csection\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eSecciones tematicas (inicio, sobre mi, proyectos...)\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003ch1\u003e\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003ch2\u003e\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003ch3\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eTitulos por orden de importancia\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cp\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eParrafos de texto\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003ca href=\"\"\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eEnlaces (a otras paginas o secciones internas)\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cfooter\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003ePie de pagina\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003c/div\u003e\n\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003ePrueba ahora\u003c/strong\u003e: Haz clic derecho en \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003eindex.html\u003c/code\u003e en VS Code y selecciona \"Open with Live Server\". Veras tu pagina en el navegador. Es basica, pero es real y funciona.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"paso-3-dale-estilo-con-css\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003ePaso 3: Dale Estilo con CSS\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eCSS es el lenguaje que controla todo el aspecto visual de tu web: colores, tipografias, espaciado y disposicion.\u003c/strong\u003e Sin CSS, todas las paginas web serian texto negro sobre fondo blanco. Segun la encuesta de Stack Overflow Developer Survey 2025, CSS es la tercera tecnologia mas utilizada del mundo (despues de HTML y JavaScript), con un 55,3% de los desarrolladores usandola a diario.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eCrea un nuevo archivo en tu carpeta llamado \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003estyles.css\u003c/code\u003e y copia este codigo:\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"code-block-wrapper my-8 rounded-xl overflow-hidden border border-slate-300 dark:border-slate-600 shadow-lg\"\u003e\n \u003cdiv class=\"bg-gradient-to-r from-slate-700 to-slate-800 dark:from-slate-800 dark:to-slate-900 px-6 py-1.5 flex items-center justify-center gap-3 border-b border-slate-600 dark:border-slate-700\"\u003e\n \u003cdiv class=\"flex gap-1.5\"\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-red-500\"\u003e\u003c/div\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-yellow-500\"\u003e\u003c/div\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-green-500\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cspan class=\"text-xs font-semibold text-slate-300 uppercase tracking-wider\"\u003ecss\u003c/span\u003e\n \u003c/div\u003e\n \u003cpre class=\"bg-slate-900 dark:bg-black p-6 overflow-x-auto\"\u003e\u003ccode class=\"text-sm leading-loose font-mono text-slate-100 dark:text-slate-200\"\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e1\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e/* Reset basico - elimina margenes por defecto del navegador */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e2\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e* {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e3\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e margin: 0;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e4\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e padding: 0;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e5\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e box-sizing: border-box;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e6\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e7\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e8\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e/* Tipografia y color base */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e9\u003c/span\u003e\u003cspan class=\"flex-1\"\u003ebody {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e10\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e font-family: \u0026#039;Segoe UI\u0026#039;, Tahoma, Geneva, Verdana, sans-serif;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e11\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e line-height: 1.6;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e12\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e color: #333333;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e13\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e background-color: #f8f9fa;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e14\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e15\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e16\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e/* Navegacion superior */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e17\u003c/span\u003e\u003cspan class=\"flex-1\"\u003enav {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e18\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e background-color: #2c3e50;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e19\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e padding: 1rem 2rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e20\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e display: flex;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e21\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e gap: 2rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e22\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e justify-content: center;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e23\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e24\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e25\u003c/span\u003e\u003cspan class=\"flex-1\"\u003enav a {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e26\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e color: #ffffff;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e27\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e text-decoration: none;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e28\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e font-weight: 600;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e29\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e transition: color 0.3s ease;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e30\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e31\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e32\u003c/span\u003e\u003cspan class=\"flex-1\"\u003enav a:hover {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e33\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e color: #3498db;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e34\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e35\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e36\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e/* Secciones */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e37\u003c/span\u003e\u003cspan class=\"flex-1\"\u003esection {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e38\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e padding: 4rem 2rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e39\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e max-width: 900px;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e40\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e margin: 0 auto;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e41\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e42\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e43\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e/* Seccion de inicio (hero) */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e44\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e#inicio {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e45\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e text-align: center;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e46\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e padding: 6rem 2rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e47\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e48\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e color: #ffffff;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e49\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e max-width: 100%;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e50\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e51\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e52\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e#inicio h1 {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e53\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e font-size: 2.5rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e54\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e margin-bottom: 1rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e55\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e56\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e57\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e#inicio p {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e58\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e font-size: 1.2rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e59\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e margin-bottom: 2rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e60\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e max-width: 600px;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e61\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e margin-left: auto;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e62\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e margin-right: auto;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e63\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e64\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e65\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e#inicio a {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e66\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e background-color: #ffffff;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e67\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e color: #764ba2;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e68\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e padding: 0.8rem 2rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e69\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e border-radius: 5px;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e70\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e text-decoration: none;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e71\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e font-weight: 700;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e72\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e transition: transform 0.2s ease;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e73\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e display: inline-block;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e74\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e75\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e76\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e#inicio a:hover {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e77\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e transform: translateY(-2px);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e78\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e79\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e80\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e/* Titulos de seccion */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e81\u003c/span\u003e\u003cspan class=\"flex-1\"\u003eh2 {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e82\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e font-size: 2rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e83\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e margin-bottom: 1.5rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e84\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e color: #2c3e50;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e85\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e border-bottom: 3px solid #3498db;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e86\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e padding-bottom: 0.5rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e87\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e88\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e89\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e/* Tarjetas de proyecto */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e90\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e.tarjeta {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e91\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e background-color: #ffffff;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e92\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e border-radius: 8px;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e93\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e padding: 1.5rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e94\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e margin-bottom: 1.5rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e95\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e96\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e transition: transform 0.2s ease, box-shadow 0.2s ease;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e97\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e98\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e99\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e.tarjeta:hover {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e100\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e transform: translateY(-4px);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e101\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e102\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e103\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e104\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e.tarjeta h3 {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e105\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e color: #2c3e50;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e106\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e margin-bottom: 0.5rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e107\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e108\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e109\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e/* Footer */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e110\u003c/span\u003e\u003cspan class=\"flex-1\"\u003efooter {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e111\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e background-color: #2c3e50;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e112\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e color: #ffffff;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e113\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e text-align: center;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e114\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e padding: 2rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e115\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e margin-top: 2rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e116\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e117\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e118\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e/* Contacto */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e119\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e#contacto a {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e120\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e color: #3498db;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e121\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e font-weight: 600;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e122\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e123\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e124\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e/* RESPONSIVE: Adaptar a moviles */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e125\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e@media (max-width: 768px) {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e126\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e nav {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e127\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e flex-direction: column;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e128\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e align-items: center;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e129\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e gap: 0.8rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e130\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e }\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e131\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e132\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e #inicio h1 {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e133\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e font-size: 1.8rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e134\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e }\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e135\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e136\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e #inicio p {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e137\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e font-size: 1rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e138\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e }\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e139\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e140\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e section {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e141\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e padding: 2rem 1rem;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e142\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e }\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e143\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003c/code\u003e\u003c/pre\u003e\n \u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"conceptos-clave-que-acabas-de-aplicar\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eConceptos clave que acabas de aplicar:\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cul class=\"list-disc list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300\"\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSelectores\u003c/strong\u003e: \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003ebody\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003enav\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e.tarjeta\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e#inicio\u003c/code\u003e seleccionan los elementos a los que aplicas estilo\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eBox model\u003c/strong\u003e: \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003emargin\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003epadding\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003eborder\u003c/code\u003e controlan el espaciado\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eFlexbox\u003c/strong\u003e: \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003edisplay: flex\u003c/code\u003e organiza elementos en fila o columna\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eGradientes\u003c/strong\u003e: \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003elinear-gradient()\u003c/code\u003e crea fondos con degradado\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eTransiciones\u003c/strong\u003e: \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003etransition\u003c/code\u003e anade animaciones suaves al pasar el raton\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eMedia queries\u003c/strong\u003e: \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e@media (max-width: 768px)\u003c/code\u003e adapta el diseno para pantallas pequenas\u003c/li\u003e\n\u003c/ul\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eGuarda el archivo y mira tu navegador.\u003c/strong\u003e Si tienes Live Server activo, la pagina se actualiza automaticamente. Ahora tu web tiene colores, tipografia profesional, un menu de navegacion con fondo oscuro, una seccion hero con degradado, tarjetas con sombra y diseno responsive para moviles.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"paso-4-anade-interactividad-con-javascript\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003ePaso 4: Anade Interactividad con JavaScript\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eJavaScript es el lenguaje que hace que tu pagina web reaccione a las acciones del usuario: clics, formularios, animaciones dinamicas y mucho mas.\u003c/strong\u003e Es el tercer pilar del desarrollo web junto con HTML y CSS. Segun Statista (enero 2026), JavaScript es el lenguaje de programacion mas utilizado del mundo, con un 63,6% de los desarrolladores usandolo como lenguaje principal.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eCrea un archivo llamado \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003escript.js\u003c/code\u003e en tu carpeta y copia este codigo:\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"code-block-wrapper my-8 rounded-xl overflow-hidden border border-slate-300 dark:border-slate-600 shadow-lg\"\u003e\n \u003cdiv class=\"bg-gradient-to-r from-slate-700 to-slate-800 dark:from-slate-800 dark:to-slate-900 px-6 py-1.5 flex items-center justify-center gap-3 border-b border-slate-600 dark:border-slate-700\"\u003e\n \u003cdiv class=\"flex gap-1.5\"\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-red-500\"\u003e\u003c/div\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-yellow-500\"\u003e\u003c/div\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-green-500\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cspan class=\"text-xs font-semibold text-slate-300 uppercase tracking-wider\"\u003ejavascript\u003c/span\u003e\n \u003c/div\u003e\n \u003cpre class=\"bg-slate-900 dark:bg-black p-6 overflow-x-auto\"\u003e\u003ccode class=\"text-sm leading-loose font-mono text-slate-100 dark:text-slate-200\"\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e1\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e// 1. Menu de navegacion suave (smooth scroll)\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e2\u003c/span\u003e\u003cspan class=\"flex-1\"\u003edocument.querySelectorAll(\u0026#039;nav a\u0026#039;).forEach(function(enlace) {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e3\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e enlace.addEventListener(\u0026#039;click\u0026#039;, function(evento) {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e4\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e evento.preventDefault();\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e5\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e var destino = document.querySelector(this.getAttribute(\u0026#039;href\u0026#039;));\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e6\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e if (destino) {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e7\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e destino.scrollIntoView({ behavior: \u0026#039;smooth\u0026#039; });\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e8\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e }\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e9\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e });\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e10\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e});\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e11\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e12\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e// 2. Boton \u0026quot;Volver arriba\u0026quot; que aparece al hacer scroll\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e13\u003c/span\u003e\u003cspan class=\"flex-1\"\u003evar botonArriba = document.createElement(\u0026#039;button\u0026#039;);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e14\u003c/span\u003e\u003cspan class=\"flex-1\"\u003ebotonArriba.textContent = \u0026#039;Subir\u0026#039;;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e15\u003c/span\u003e\u003cspan class=\"flex-1\"\u003ebotonArriba.id = \u0026#039;btn-subir\u0026#039;;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e16\u003c/span\u003e\u003cspan class=\"flex-1\"\u003ebotonArriba.style.cssText = \u0026#039;position:fixed; bottom:2rem; right:2rem; \u0026#039; +\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e17\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026#039;background:#764ba2; color:#fff; border:none; padding:0.8rem 1.2rem; \u0026#039; +\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e18\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026#039;border-radius:5px; cursor:pointer; display:none; font-weight:700; \u0026#039; +\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e19\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e \u0026#039;transition:opacity 0.3s ease; z-index:1000;\u0026#039;;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e20\u003c/span\u003e\u003cspan class=\"flex-1\"\u003edocument.body.appendChild(botonArriba);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e21\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e22\u003c/span\u003e\u003cspan class=\"flex-1\"\u003ewindow.addEventListener(\u0026#039;scroll\u0026#039;, function() {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e23\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e if (window.scrollY \u0026gt; 300) {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e24\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e botonArriba.style.display = \u0026#039;block\u0026#039;;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e25\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e } else {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e26\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e botonArriba.style.display = \u0026#039;none\u0026#039;;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e27\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e }\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e28\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e});\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e29\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e30\u003c/span\u003e\u003cspan class=\"flex-1\"\u003ebotonArriba.addEventListener(\u0026#039;click\u0026#039;, function() {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e31\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e window.scrollTo({ top: 0, behavior: \u0026#039;smooth\u0026#039; });\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e32\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e});\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e33\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e34\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e// 3. Efecto de aparicion al hacer scroll (animacion sencilla)\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e35\u003c/span\u003e\u003cspan class=\"flex-1\"\u003evar tarjetas = document.querySelectorAll(\u0026#039;.tarjeta\u0026#039;);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e36\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e37\u003c/span\u003e\u003cspan class=\"flex-1\"\u003evar observador = new IntersectionObserver(function(entradas) {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e38\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e entradas.forEach(function(entrada) {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e39\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e if (entrada.isIntersecting) {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e40\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e entrada.target.style.opacity = \u0026#039;1\u0026#039;;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e41\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e entrada.target.style.transform = \u0026#039;translateY(0)\u0026#039;;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e42\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e }\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e43\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e });\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e44\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}, { threshold: 0.1 });\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e45\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e46\u003c/span\u003e\u003cspan class=\"flex-1\"\u003etarjetas.forEach(function(tarjeta) {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e47\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e tarjeta.style.opacity = \u0026#039;0\u0026#039;;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e48\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e tarjeta.style.transform = \u0026#039;translateY(20px)\u0026#039;;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e49\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e tarjeta.style.transition = \u0026#039;opacity 0.5s ease, transform 0.5s ease\u0026#039;;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e50\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e observador.observe(tarjeta);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e51\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e});\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e52\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e53\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e// 4. Mostrar la fecha actual en el footer\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e54\u003c/span\u003e\u003cspan class=\"flex-1\"\u003evar footer = document.querySelector(\u0026#039;footer p\u0026#039;);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e55\u003c/span\u003e\u003cspan class=\"flex-1\"\u003eif (footer) {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e56\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e var hoy = new Date();\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e57\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e var opciones = { year: \u0026#039;numeric\u0026#039;, month: \u0026#039;long\u0026#039;, day: \u0026#039;numeric\u0026#039; };\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e58\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e var fechaFormateada = hoy.toLocaleDateString(\u0026#039;es-ES\u0026#039;, opciones);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e59\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e footer.textContent = footer.textContent + \u0026#039; | Ultima visita: \u0026#039; + fechaFormateada;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e60\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e61\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e62\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e// 5. Mensaje de bienvenida en la consola\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e63\u003c/span\u003e\u003cspan class=\"flex-1\"\u003econsole.log(\u0026#039;Bienvenido a mi primera pagina web.\u0026#039;);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e64\u003c/span\u003e\u003cspan class=\"flex-1\"\u003econsole.log(\u0026#039;Creada siguiendo el tutorial de Javadex: www.javadex.es\u0026#039;);\u003c/span\u003e\u003c/div\u003e\u003c/code\u003e\u003c/pre\u003e\n \u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"que-hace-cada-parte\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eQue hace cada parte:\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"overflow-x-auto my-8\"\u003e\u003ctable class=\"min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg\"\u003e\u003cthead class=\"bg-gradient-to-r from-cyan-500 to-blue-600\"\u003e\u003ctr\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eFuncionalidad\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eQue Hace\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSmooth scroll\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eAl hacer clic en los enlaces del menu, la pagina se desplaza suavemente hasta la seccion correspondiente\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eBoton \"Subir\"\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eAparece un boton flotante cuando bajas por la pagina, para volver arriba con un clic\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eAnimacion de tarjetas\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eLas tarjetas de proyecto aparecen con una animacion suave cuando llegas a ellas haciendo scroll\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eFecha dinamica\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eMuestra la fecha de la ultima visita en el footer automaticamente\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eMensaje en consola\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eSi abres DevTools (F12 \u003e Consola), veras un mensaje personalizado\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003c/div\u003e\n\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003ePrueba\u003c/strong\u003e: Guarda todos los archivos, refresca la pagina en el navegador y comprueba que el scroll suave funciona, que las tarjetas se animan al aparecer y que el boton \"Subir\" aparece cuando bajas.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"paso-5-estructura-tu-portfolio-o-proyecto-web\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003ePaso 5: Estructura tu Portfolio o Proyecto Web\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eLa clave para que tu web parezca profesional no es la complejidad del codigo, sino una estructura HTML semantica bien organizada.\u003c/strong\u003e HTML semantico significa usar las etiquetas correctas para cada tipo de contenido, no solo \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cdiv\u003e\u003c/code\u003e para todo. Esto ademas mejora tu SEO (posicionamiento en buscadores) porque Google entiende mejor la estructura de tu pagina.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eAqui tienes la estructura recomendada para un portfolio personal o un proyecto web basico:\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"code-block-wrapper my-8 rounded-xl overflow-hidden border border-slate-300 dark:border-slate-600 shadow-lg\"\u003e\n \u003cdiv class=\"bg-gradient-to-r from-slate-700 to-slate-800 dark:from-slate-800 dark:to-slate-900 px-6 py-1.5 flex items-center justify-center gap-3 border-b border-slate-600 dark:border-slate-700\"\u003e\n \u003cdiv class=\"flex gap-1.5\"\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-red-500\"\u003e\u003c/div\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-yellow-500\"\u003e\u003c/div\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-green-500\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cspan class=\"text-xs font-semibold text-slate-300 uppercase tracking-wider\"\u003ecode\u003c/span\u003e\n \u003c/div\u003e\n \u003cpre class=\"bg-slate-900 dark:bg-black p-6 overflow-x-auto\"\u003e\u003ccode class=\"text-sm leading-loose font-mono text-slate-100 dark:text-slate-200\"\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e1\u003c/span\u003e\u003cspan class=\"flex-1\"\u003emi-primera-web/\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e2\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e index.html (pagina principal)\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e3\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e styles.css (estilos visuales)\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e4\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e script.js (interactividad)\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e5\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e img/ (carpeta para imagenes)\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e6\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e foto-perfil.jpg\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e7\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e proyecto-1.jpg\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e8\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e proyecto-2.jpg\u003c/span\u003e\u003c/div\u003e\u003c/code\u003e\u003c/pre\u003e\n \u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"etiquetas-semanticas-que-debes-usar\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eEtiquetas semanticas que debes usar:\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"overflow-x-auto my-8\"\u003e\u003ctable class=\"min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg\"\u003e\u003cthead class=\"bg-gradient-to-r from-cyan-500 to-blue-600\"\u003e\u003ctr\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eEtiqueta\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eCuando Usarla\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eEjemplo\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cheader\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eCabecera de la pagina o de una seccion\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eMenu de navegacion principal\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cnav\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eBloques de navegacion\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eMenu con enlaces a secciones\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cmain\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eContenido principal de la pagina (solo uno por pagina)\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eTodo entre el header y el footer\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003csection\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eSecciones tematicas diferenciadas\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\"Sobre mi\", \"Proyectos\", \"Contacto\"\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003carticle\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eContenido independiente que tiene sentido por si solo\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eUn post de blog, una tarjeta de proyecto\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003caside\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eContenido complementario o lateral\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eBarra lateral, widgets, anuncios\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cfooter\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003ePie de pagina o de una seccion\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eCopyright, enlaces secundarios\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003c/div\u003e\n\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eConsejo practico\u003c/strong\u003e: Si tu web tiene mas de una pagina, puedes crear archivos adicionales como \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003eabout.html\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003eproyectos.html\u003c/code\u003e y \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003econtacto.html\u003c/code\u003e siguiendo la misma estructura. Enlazalos entre si con \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003ca href=\"about.html\"\u003eSobre Mi\u003c/a\u003e\u003c/code\u003e.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"paso-6-publica-gratis-con-github-pages\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003ePaso 6: Publica Gratis con GitHub Pages\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eGitHub Pages te permite publicar tu pagina web en internet de forma completamente gratuita, con un dominio tipo \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003etunombre.github.io\u003c/code\u003e.\u003c/strong\u003e Segun GitHub (informe Octoverse 2025, publicado el 12 de noviembre de 2025), mas de 100 millones de desarrolladores usan GitHub, y GitHub Pages aloja millones de sitios web estaticos sin coste.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"paso-a-paso-para-publicar\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003ePaso a paso para publicar:\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003e6.1 - Crea una cuenta en GitHub:\u003c/strong\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003col class=\"list-decimal list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300\"\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eVe a \u003ca href=\"https://github.com/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003egithub.com\u003c/a\u003e y haz clic en \"Sign up\"\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eIntroduce tu email, crea una contrasena y elige un nombre de usuario\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eVerifica tu email\u003c/li\u003e\n\u003c/ol\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003e6.2 - Crea un repositorio:\u003c/strong\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003col class=\"list-decimal list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300\"\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eUna vez dentro de GitHub, haz clic en el boton verde \"New\" (o ve a github.com/new)\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eNombre del repositorio: \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003emi-primera-web\u003c/code\u003e (o \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003etunombre.github.io\u003c/code\u003e si quieres que sea tu pagina principal)\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eMarca \"Public\"\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eMarca \"Add a README file\"\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eHaz clic en \"Create repository\"\u003c/li\u003e\n\u003c/ol\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003e6.3 - Sube tus archivos:\u003c/strong\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003col class=\"list-decimal list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300\"\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eEn tu repositorio, haz clic en \"Add file\" \u003e \"Upload files\"\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eArrastra tus tres archivos: \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003eindex.html\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003estyles.css\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003escript.js\u003c/code\u003e\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eEscribe un mensaje de commit como \"Primera version de mi web\"\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eHaz clic en \"Commit changes\"\u003c/li\u003e\n\u003c/ol\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003e6.4 - Activa GitHub Pages:\u003c/strong\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003col class=\"list-decimal list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300\"\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eVe a \"Settings\" (engranaje) dentro de tu repositorio\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eEn el menu lateral izquierdo, haz clic en \"Pages\"\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eEn \"Source\", selecciona \"Deploy from a branch\"\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eEn \"Branch\", selecciona \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003emain\u003c/code\u003e y la carpeta \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e/ (root)\u003c/code\u003e\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eHaz clic en \"Save\"\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003eEspera 1-2 minutos y refresca la pagina\u003c/li\u003e\n\u003c/ol\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eTu web ya esta en internet.\u003c/strong\u003e La URL sera: \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003ehttps://tunombre.github.io/mi-primera-web/\u003c/code\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eSi llamaste al repositorio \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003etunombre.github.io\u003c/code\u003e, la URL sera directamente \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003ehttps://tunombre.github.io/\u003c/code\u003e.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"dominio-personalizado-opcional\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eDominio personalizado (opcional):\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eSi quieres usar un dominio propio (como \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003emiweb.es\u003c/code\u003e), puedes comprar uno por 8-15 EUR al ano en proveedores como Namecheap, Porkbun o Cloudflare Registrar. Luego en la seccion \"Pages\" de GitHub, introduces tu dominio personalizado y configuras los registros DNS. GitHub te genera un certificado SSL gratuito automaticamente.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"paso-7-mejora-tu-web-con-ia\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003ePaso 7: Mejora tu Web con IA\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eLa inteligencia artificial puede acelerar tu aprendizaje y mejorar tu codigo drasticamente, incluso si no sabes nada de programacion.\u003c/strong\u003e Segun el informe GitHub Copilot Impact Report (febrero 2026), los desarrolladores que usan asistentes de IA escriben codigo un 55% mas rapido y resuelven errores un 40% mas rapido que sin IA.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eAqui tienes formas concretas de usar IA para mejorar tu web:\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"generar-css-con-ia\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eGenerar CSS con IA:\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eCopia y pega este tipo de prompt en ChatGPT o Claude:\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"code-block-wrapper my-8 rounded-xl overflow-hidden border border-slate-300 dark:border-slate-600 shadow-lg\"\u003e\n \u003cdiv class=\"bg-gradient-to-r from-slate-700 to-slate-800 dark:from-slate-800 dark:to-slate-900 px-6 py-1.5 flex items-center justify-center gap-3 border-b border-slate-600 dark:border-slate-700\"\u003e\n \u003cdiv class=\"flex gap-1.5\"\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-red-500\"\u003e\u003c/div\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-yellow-500\"\u003e\u003c/div\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-green-500\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cspan class=\"text-xs font-semibold text-slate-300 uppercase tracking-wider\"\u003ecode\u003c/span\u003e\n \u003c/div\u003e\n \u003cpre class=\"bg-slate-900 dark:bg-black p-6 overflow-x-auto\"\u003e\u003ccode class=\"text-sm leading-loose font-mono text-slate-100 dark:text-slate-200\"\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e1\u003c/span\u003e\u003cspan class=\"flex-1\"\u003eTengo una pagina web con HTML basico. Quiero que el diseno sea moderno,\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e2\u003c/span\u003e\u003cspan class=\"flex-1\"\u003eminimalista y con una paleta de colores azul oscuro y blanco. Genera el\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e3\u003c/span\u003e\u003cspan class=\"flex-1\"\u003eCSS completo incluyendo: tipografia profesional, espaciado consistente,\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e4\u003c/span\u003e\u003cspan class=\"flex-1\"\u003etarjetas con sombra, boton con efecto hover y diseno responsive para\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e5\u003c/span\u003e\u003cspan class=\"flex-1\"\u003emoviles. Usa flexbox.\u003c/span\u003e\u003c/div\u003e\u003c/code\u003e\u003c/pre\u003e\n \u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eLa IA te generara un archivo CSS completo que puedes pegar directamente en tu \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003estyles.css\u003c/code\u003e.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"depurar-errores-con-ia\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eDepurar errores con IA:\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eSi algo no funciona, copia el codigo que da problemas y pregunta a la IA:\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"code-block-wrapper my-8 rounded-xl overflow-hidden border border-slate-300 dark:border-slate-600 shadow-lg\"\u003e\n \u003cdiv class=\"bg-gradient-to-r from-slate-700 to-slate-800 dark:from-slate-800 dark:to-slate-900 px-6 py-1.5 flex items-center justify-center gap-3 border-b border-slate-600 dark:border-slate-700\"\u003e\n \u003cdiv class=\"flex gap-1.5\"\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-red-500\"\u003e\u003c/div\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-yellow-500\"\u003e\u003c/div\u003e\n \u003cdiv class=\"w-2.5 h-2.5 rounded-full bg-green-500\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cspan class=\"text-xs font-semibold text-slate-300 uppercase tracking-wider\"\u003ecode\u003c/span\u003e\n \u003c/div\u003e\n \u003cpre class=\"bg-slate-900 dark:bg-black p-6 overflow-x-auto\"\u003e\u003ccode class=\"text-sm leading-loose font-mono text-slate-100 dark:text-slate-200\"\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e1\u003c/span\u003e\u003cspan class=\"flex-1\"\u003eEste codigo CSS no centra el texto en la pantalla. Que estoy haciendo mal?\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e2\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"flex\"\u003e\u003cspan class=\"select-none text-slate-500 dark:text-slate-600 mr-4 text-right\" style=\"min-width: 2rem;\"\u003e3\u003c/span\u003e\u003cspan class=\"flex-1\"\u003e[pega tu codigo aqui]\u003c/span\u003e\u003c/div\u003e\u003c/code\u003e\u003c/pre\u003e\n \u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eLa IA te explicara el error y te dara la solucion corregida.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"herramientas-de-ia-para-desarrollo-web\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eHerramientas de IA para desarrollo web:\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"overflow-x-auto my-8\"\u003e\u003ctable class=\"min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg\"\u003e\u003cthead class=\"bg-gradient-to-r from-cyan-500 to-blue-600\"\u003e\u003ctr\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eHerramienta\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003ePrecio\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eQue Hace\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eMejor Para\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eChatGPT\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eGratis / 20 USD/mes\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eGenera codigo, explica conceptos, depura errores\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003ePreguntas y generacion de codigo\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eClaude\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eGratis / 20 USD/mes\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eAnalisis de codigo, explicaciones claras\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eEntender conceptos complejos\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eClaude Code\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eIncluido en Claude Pro\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eAgente de IA que modifica tu proyecto directamente desde terminal\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eDesarrolladores que trabajan en proyectos reales\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eCursor\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eGratis / 20 USD/mes\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eEditor de codigo con IA integrada\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eEscribir codigo con autocompletado IA\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003ev0.dev\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eGratis (limitado)\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eGenera interfaces web completas desde un prompt\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003ePrototipar disenos rapidamente\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eBolt / Lovable\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eGratis (limitado)\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eCrea aplicaciones web completas sin programar\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003ca href=\"/blog/como-programar-con-ia-crear-apps-sin-codigo-guia-2026\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eCrear apps sin codigo\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003c/div\u003e\n\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eMi recomendacion\u003c/strong\u003e: Empieza con ChatGPT o Claude gratis para resolver dudas. Cuando te sientas comodo con HTML/CSS, prueba Cursor o Claude Code para proyectos mas ambiciosos. Si quieres profundizar en herramientas de IA para programar, consulta nuestro \u003ca href=\"/blog/mejores-ias-para-programar-ranking-herramientas-2026\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eranking de IAs para programar\u003c/a\u003e.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"opciones-alternativas-creadores-web-sin-codigo\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003eOpciones Alternativas: Creadores Web sin Codigo\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSi tu objetivo es tener una web funcional rapido y no te interesa aprender a programar, los creadores web sin codigo son una alternativa legitima.\u003c/strong\u003e No son mejores ni peores que programar desde cero: son herramientas diferentes para objetivos diferentes.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"overflow-x-auto my-8\"\u003e\u003ctable class=\"min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg\"\u003e\u003cthead class=\"bg-gradient-to-r from-cyan-500 to-blue-600\"\u003e\u003ctr\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003ePlataforma\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003ePrecio/mes\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eMejor Para\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eNivel Tecnico\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eLimitaciones\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eWordPress.org\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e3-10 EUR (hosting)\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eBlogs, webs complejas, tiendas\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eMedio\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eRequiere hosting, mantenimiento y actualizaciones\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eWix\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e0-17 EUR\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eWebs sencillas, portfolios\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eBajo\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eLimitado en personalizacion avanzada, mas lento\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSquarespace\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e16-27 EUR\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003ePortfolios creativos, tiendas pequenas\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eBajo\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eMenos flexible, no hay plan gratuito\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eFramer\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e0-15 EUR\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eDisenos creativos, landing pages\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eMedio\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eCurva de aprendizaje, comunidad mas pequena\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eCarrd\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e0-19 EUR/ano\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003ePaginas de una sola seccion, tarjetas de visita\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eMuy bajo\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eSolo una pagina por sitio (plan gratis)\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003c/div\u003e\n\u003ch3 id=\"cuando-usar-cada-opcion\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eCuando usar cada opcion:\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cul class=\"list-disc list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300\"\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003ePrograma desde cero\u003c/strong\u003e (lo que aprendes en este tutorial) si quieres aprender, tener control total, publicar gratis y anadir la competencia a tu curriculum\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eWordPress\u003c/strong\u003e si necesitas un blog completo o tienda online con muchas funcionalidades\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eWix/Squarespace\u003c/strong\u003e si quieres algo rapido, bonito y no te importa pagar 10-25 EUR al mes\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eFramer\u003c/strong\u003e si priorizas el diseno visual y quieres animaciones avanzadas sin codigo\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eCarrd\u003c/strong\u003e si solo necesitas una pagina de presentacion sencilla\u003c/li\u003e\n\u003c/ul\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"cuanto-cuesta-crear-una-pagina-web-comparativa-de-costes\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003eCuanto Cuesta Crear una Pagina Web: Comparativa de Costes\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eCrear una pagina web desde cero con HTML/CSS y GitHub Pages tiene un coste total de 0 EUR, y eso incluye hosting ilimitado.\u003c/strong\u003e Comparemos los costes anuales de cada opcion:\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cdiv class=\"overflow-x-auto my-8\"\u003e\u003ctable class=\"min-w-full border-collapse bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg\"\u003e\u003cthead class=\"bg-gradient-to-r from-cyan-500 to-blue-600\"\u003e\u003ctr\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eOpcion\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eCoste Anual\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eQue Incluye\u003c/th\u003e\u003cth class=\"px-6 py-4 text-left text-sm font-semibold text-white border-b-2 border-slate-200 dark:border-slate-700\"\u003eCoste a 3 Anos\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eHTML/CSS + GitHub Pages\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e0 EUR\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eHosting gratis, dominio \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e.github.io\u003c/code\u003e, SSL, sin limites\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e0 EUR\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eHTML/CSS + dominio propio\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e10-15 EUR\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eTodo lo anterior + dominio personalizado (\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003emiweb.es\u003c/code\u003e)\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e30-45 EUR\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eWix (plan basico)\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e102-204 EUR\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eHosting, editor visual, dominio (plan Combo)\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e306-612 EUR\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSquarespace\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e192-324 EUR\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eHosting, editor, dominio, plantillas\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e576-972 EUR\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-slate-50 dark:bg-slate-800/50 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eWordPress + hosting\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e36-120 EUR\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eHosting, CMS completo, miles de plugins\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e108-360 EUR\u003c/td\u003e\u003c/tr\u003e\u003ctr class=\"bg-white dark:bg-slate-800 hover:bg-cyan-50 dark:hover:bg-slate-700/50 transition-colors\"\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eContratar un disenador\u003c/strong\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003e500-5.000 EUR\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eWeb profesional hecha a medida\u003c/td\u003e\u003ctd class=\"px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700\"\u003eVariable\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003c/div\u003e\n\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eConclusion\u003c/strong\u003e: Si estas empezando y quieres aprender, la opcion de coste cero (HTML/CSS + GitHub Pages) es imbatible. Inviertes tu tiempo a cambio de adquirir una competencia que vale miles de euros en el mercado laboral. Segun InfoJobs (marzo 2026), el salario medio de un desarrollador web junior en Espana es de 24.000 EUR brutos anuales, y sube a 35.000-45.000 EUR para perfiles con 2-3 anos de experiencia.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"errores-comunes-al-crear-tu-primera-web\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003eErrores Comunes al Crear tu Primera Web\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eEstos son los 5 errores que comete el 90% de los principiantes y que puedes evitar desde el primer dia:\u003c/strong\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"1-no-cerrar-las-etiquetas-html\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003e1. No cerrar las etiquetas HTML\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eCada etiqueta que abres (\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cdiv\u003e\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cp\u003e\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003csection\u003e\u003c/code\u003e) debe cerrarse (\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003c/div\u003e\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003c/p\u003e\u003c/code\u003e, \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003c/section\u003e\u003c/code\u003e). Si olvidas cerrar una etiqueta, tu pagina puede romperse de formas inesperadas. VS Code te ayuda marcando en rojo las etiquetas sin cerrar.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSolucion\u003c/strong\u003e: Instala la extension \"Auto Close Tag\" en VS Code. Cada vez que escribas una etiqueta de apertura, se cierra automaticamente.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"2-ruta-incorrecta-a-archivos-css-o-js\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003e2. Ruta incorrecta a archivos CSS o JS\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eSi tu archivo se llama \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003estyles.css\u003c/code\u003e pero en el HTML escribiste \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003estyle.css\u003c/code\u003e (sin la \"s\"), el navegador no encontrara el archivo y tu pagina aparecera sin estilos. Las rutas distinguen mayusculas de minusculas en muchos servidores.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSolucion\u003c/strong\u003e: Usa siempre minusculas y guiones en los nombres de archivo. Revisa que el nombre en \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003clink href=\"styles.css\"\u003e\u003c/code\u003e coincida exactamente con el nombre real del archivo.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"3-no-hacer-la-web-responsive-desde-el-principio\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003e3. No hacer la web responsive desde el principio\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eSegun Statista (2026), el 62,7% del trafico web mundial viene de dispositivos moviles. Si tu web solo se ve bien en escritorio, pierdes a mas de la mitad de tus visitantes.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSolucion\u003c/strong\u003e: Anade siempre la meta etiqueta viewport (\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\u003c/code\u003e) y usa media queries en tu CSS como hemos hecho en el Paso 3.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"4-ignorar-la-accesibilidad-basica\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003e4. Ignorar la accesibilidad basica\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eLas imagenes sin atributo \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003ealt\u003c/code\u003e, los enlaces sin texto descriptivo y los colores con bajo contraste hacen que tu web sea inaccesible para personas con discapacidad visual y para los motores de busqueda.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSolucion\u003c/strong\u003e: Anade siempre \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003ealt=\"descripcion\"\u003c/code\u003e a las imagenes. Usa colores con ratio de contraste minimo 4.5:1. Puedes comprobarlo con la herramienta gratuita WebAIM Contrast Checker.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"5-complicar-demasiado-al-principio\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003e5. Complicar demasiado al principio\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eMuchos principiantes intentan usar frameworks (React, Vue, Angular) antes de dominar HTML, CSS y JavaScript basico. Es como intentar correr una maraton antes de saber andar.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSolucion\u003c/strong\u003e: Domina los fundamentos primero. Construye 3-5 paginas web con HTML/CSS/JS puro antes de tocar cualquier framework. Cuando estes listo, consulta nuestra \u003ca href=\"/blog/mejores-lenguajes-programacion-principiantes-ranking-2026\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eguia de mejores lenguajes de programacion para principiantes\u003c/a\u003e.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cblockquote class=\"border-l-4 border-cyan-500 bg-cyan-50 dark:bg-cyan-900/20 pl-6 py-4 my-6 italic text-slate-700 dark:text-slate-300 rounded-r-lg\"\u003e\"Tu primera pagina web no tiene que ser perfecta. Tiene que existir. El acto de publicar algo en internet, por simple que sea, te ensena mas que cien horas de tutoriales.\" -- Javier Santos Criado, consultor de IA en Javadex\u003c/blockquote\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"preguntas-frecuentes\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003ePreguntas Frecuentes\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"se-puede-crear-una-pagina-web-gratis-de-verdad\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eSe puede crear una pagina web gratis de verdad?\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSi, completamente gratis y sin trampas.\u003c/strong\u003e GitHub Pages ofrece hosting ilimitado para sitios web estaticos (HTML, CSS, JavaScript) sin coste, sin publicidad y sin limites de trafico. Incluye un dominio tipo \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003etunombre.github.io\u003c/code\u003e y certificado SSL gratuito. Segun GitHub (2026), mas de 1 millon de sitios web activos usan GitHub Pages como hosting principal.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"cuanto-tiempo-se-tarda-en-crear-una-pagina-web-desde-cero\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eCuanto tiempo se tarda en crear una pagina web desde cero?\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSiguiendo este tutorial, entre 2 y 4 horas para tu primera version funcional.\u003c/strong\u003e Si solo quieres la estructura basica (HTML + CSS sin JavaScript), puedes tenerla en menos de 1 hora. Despues podras seguir mejorando y anadiendo secciones durante dias o semanas. No hay prisa: tu web seguira online en GitHub Pages mientras la vas perfeccionando.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"necesito-saber-programar-para-tener-una-pagina-web\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eNecesito saber programar para tener una pagina web?\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eNo, pero saber programar te da mas control y cuesta 0 EUR.\u003c/strong\u003e Si no quieres aprender codigo, puedes usar creadores como Wix o Squarespace (desde 10 EUR/mes). Si decides aprender, HTML y CSS no son lenguajes de programacion en sentido estricto: son lenguajes de marcado y estilo. Son mas faciles de aprender que Python o JavaScript. Si te interesa dar el salto a la programacion completa, tenemos una \u003ca href=\"/blog/como-aprender-programar-desde-cero-guia-principiantes-2026\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eguia de como aprender a programar desde cero\u003c/a\u003e.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"es-mejor-wordpress-o-html-desde-cero\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eEs mejor WordPress o HTML desde cero?\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eDepende de tu objetivo.\u003c/strong\u003e HTML desde cero es mejor si quieres aprender, tener una web rapida, sin coste de hosting y con control total del codigo. WordPress es mejor si necesitas un blog con muchos articulos, una tienda online o funcionalidades complejas (formularios, base de datos, usuarios registrados). Para un portfolio personal o pagina de presentacion, HTML desde cero es mas rapido, mas ligero y mas barato.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"como-hago-que-mi-pagina-web-aparezca-en-google\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003eComo hago que mi pagina web aparezca en Google?\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eGoogle indexa automaticamente las paginas web publicas, pero puedes acelerar el proceso.\u003c/strong\u003e Despues de publicar tu web en GitHub Pages: (1) Entra en \u003ca href=\"https://search.google.com/search-console\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eGoogle Search Console\u003c/a\u003e y anade tu URL, (2) Solicita la indexacion de tu pagina, (3) Anade una meta descripcion unica en el \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003chead\u003e\u003c/code\u003e de tu HTML, (4) Crea un archivo \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003esitemap.xml\u003c/code\u003e basico. Normalmente Google tarda entre 3 y 14 dias en indexar una pagina nueva.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch3 id=\"puedo-anadir-un-formulario-de-contacto-gratis\" class=\"text-2xl md:text-3xl font-semibold text-slate-800 dark:text-white mb-4 mt-10 leading-tight scroll-mt-20\"\u003ePuedo anadir un formulario de contacto gratis?\u003c/h3\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eSi, usando servicios como Formspree o Netlify Forms.\u003c/strong\u003e Con Formspree, solo tienes que cambiar el \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003eaction\u003c/code\u003e de tu formulario HTML: \u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003e\u003cform action=\"https://formspree.io/f/tucodigo\" method=\"POST\"\u003e\u003c/code\u003e. Es gratis hasta 50 envios al mes. No necesitas backend ni base de datos.\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"posts-relacionados\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003ePosts Relacionados\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003eSi te ha sido util este tutorial, estas guias complementarias te ayudaran a dar los siguientes pasos:\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cul class=\"list-disc list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300\"\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003ca href=\"/blog/como-aprender-programar-desde-cero-guia-principiantes-2026\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eComo Aprender a Programar desde Cero: Guia para Principiantes 2026\u003c/a\u003e - La ruta completa para ir de cero a programador, con recursos gratuitos\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003ca href=\"/blog/mejores-lenguajes-programacion-principiantes-ranking-2026\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eMejores Lenguajes de Programacion para Principiantes: Ranking 2026\u003c/a\u003e - Cual aprender primero segun tu objetivo profesional\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003ca href=\"/blog/mejores-plataformas-aprender-programar-gratis-ranking-2026\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eMejores Plataformas para Aprender a Programar Gratis: Ranking 2026\u003c/a\u003e - Cursos gratuitos en espanol para seguir aprendiendo\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003ca href=\"/blog/como-programar-con-ia-crear-apps-sin-codigo-guia-2026\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eComo Programar con IA: Crear Apps sin Codigo 2026\u003c/a\u003e - Cuando estes listo para proyectos mas ambiciosos con herramientas de IA\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003ca href=\"/blog/mejores-ias-para-programar-ranking-herramientas-2026\" class=\"text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 underline underline-offset-2 decoration-2 font-medium transition-colors\"\u003eMejores IAs para Programar: Ranking de Herramientas 2026\u003c/a\u003e - Comparativa completa de asistentes de IA para desarrollo\u003c/li\u003e\n\u003c/ul\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003chr class=\"border-slate-200 dark:border-slate-700 my-12\" /\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003ch2 id=\"en-resumen\" class=\"text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-6 mt-12 leading-tight border-b border-slate-200 dark:border-slate-700 pb-3 scroll-mt-20\"\u003eEn Resumen\u003c/h2\u003e\u003cdiv class=\"w-16 h-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full mb-6\"\u003e\u003c/div\u003e\u003c/p\u003e\u003cp class=\"text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-6\"\u003e\u003cul class=\"list-disc list-inside mb-6 ml-4 space-y-2 text-slate-700 dark:text-slate-300\"\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eCrear una pagina web desde cero es gratis y accesible para cualquier persona sin experiencia\u003c/strong\u003e, usando HTML (estructura), CSS (diseno) y JavaScript (interactividad) con un editor gratuito como VS Code\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eEl 68,4% de todos los sitios web del mundo\u003c/strong\u003e estan construidos con estas tres tecnologias basicas (W3Techs, marzo 2026), lo que demuestra que son el estandar universal y lo seguiran siendo\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eGitHub Pages ofrece hosting gratuito e ilimitado\u003c/strong\u003e para tu web, con dominio incluido (\u003ccode class=\"bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 px-2 py-1 rounded text-sm font-medium border border-cyan-200 dark:border-cyan-800\"\u003etunombre.github.io\u003c/code\u003e), certificado SSL y sin publicidad, eliminando la barrera economica por completo\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003ePuedes tener tu primera web publicada en internet en 2-4 horas\u003c/strong\u003e siguiendo los 7 pasos de este tutorial: instalar VS Code, crear HTML, anadir CSS, sumar JavaScript, estructurar el proyecto, publicar en GitHub Pages y mejorar con IA\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eLa IA acelera tu aprendizaje un 55%\u003c/strong\u003e (GitHub Copilot Impact Report, febrero 2026): usa ChatGPT o Claude para generar CSS, depurar errores y resolver dudas en tiempo real\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eLas alternativas sin codigo (Wix, WordPress, Squarespace) cuestan entre 100 y 324 EUR al ano\u003c/strong\u003e, mientras que la opcion de programar desde cero cuesta 0 EUR y ademas te proporciona una competencia profesional con salarios de 24.000-45.000 EUR anuales en Espana\u003c/li\u003e\n\u003cli class=\"mb-2 leading-relaxed\"\u003e\u003cstrong class=\"font-semibold text-slate-900 dark:text-white\"\u003eAprender desarrollo web basico es una inversion que se paga sola\u003c/strong\u003e: las ofertas de empleo con competencias web crecieron un 23% en Espana en 2026 (Fundacion Telefonica), y la demanda de estos perfiles sigue al alza en toda Europa\u003c/li\u003e\n\u003c/ul\u003e\n"])</script><script>self.__next_f.push([1,"7:[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$10\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"Inicio\\\",\\\"item\\\":\\\"https://www.javadex.es\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"Blog\\\",\\\"item\\\":\\\"https://www.javadex.es/blog\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":3,\\\"name\\\":\\\"Como Crear tu Primera Pagina Web desde Cero: Tutorial Paso a Paso [2026]\\\"}]}\"}}],null,[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$11\"}}],[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900\",\"children\":[[\"$\",\"header\",null,{\"className\":\"glass-effect bg-white/70 dark:bg-slate-900/70 border-b border-slate-200 dark:border-slate-700 sticky top-0 z-50\",\"children\":[\"$\",\"div\",null,{\"className\":\"container mx-auto px-4 py-4\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between\",\"children\":[[\"$\",\"$L12\",null,{\"href\":\"/\",\"className\":\"flex items-center space-x-2 hover:opacity-80 transition-opacity\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-8 h-8 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-code w-5 h-5 text-white\",\"children\":[[\"$\",\"polyline\",\"z7tu5w\",{\"points\":\"16 18 22 12 16 6\"}],[\"$\",\"polyline\",\"1eg1df\",{\"points\":\"8 6 2 12 8 18\"}],\"$undefined\"]}]}],[\"$\",\"div\",null,{\"className\":\"text-2xl font-bold gradient-text\",\"children\":\"Javi\"}]]}],[\"$\",\"$L12\",null,{\"href\":\"/#blog\",\"className\":\"flex items-center text-slate-700 dark:text-slate-300 hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors font-medium\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-arrow-left w-4 h-4 mr-2\",\"children\":[[\"$\",\"path\",\"1l729n\",{\"d\":\"m12 19-7-7 7-7\"}],[\"$\",\"path\",\"x3x0zl\",{\"d\":\"M19 12H5\"}],\"$undefined\"]}],\"Volver al blog\"]}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"container mx-auto px-4 py-12\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-5xl mx-auto\",\"children\":[\"$\",\"div\",null,{\"className\":\"bg-white dark:bg-slate-800/50 backdrop-blur-sm rounded-xl shadow-lg p-8 md:p-12 mb-12 border border-slate-200 dark:border-slate-700\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-16 text-center border-b border-slate-200 dark:border-slate-700 pb-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-6 flex flex-wrap justify-center gap-2\",\"children\":[[\"$\",\"$L12\",\"ia\",{\"href\":\"/blog/categoria/ia\",\"className\":\"inline-flex items-center px-4 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 text-white text-sm font-medium rounded-full shadow-lg hover:from-cyan-600 hover:to-blue-700 transition-all\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-code w-4 h-4 mr-2\",\"children\":[[\"$\",\"polyline\",\"z7tu5w\",{\"points\":\"16 18 22 12 16 6\"}],[\"$\",\"polyline\",\"1eg1df\",{\"points\":\"8 6 2 12 8 18\"}],\"$undefined\"]}],\"Inteligencia Artificial\"]}],[\"$\",\"$L12\",\"machine-learning\",{\"href\":\"/blog/categoria/machine-learning\",\"className\":\"inline-flex items-center px-4 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 text-white text-sm font-medium rounded-full shadow-lg hover:from-cyan-600 hover:to-blue-700 transition-all\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-code w-4 h-4 mr-2\",\"children\":[[\"$\",\"polyline\",\"z7tu5w\",{\"points\":\"16 18 22 12 16 6\"}],[\"$\",\"polyline\",\"1eg1df\",{\"points\":\"8 6 2 12 8 18\"}],\"$undefined\"]}],\"Machine Learning\"]}]]}],[\"$\",\"h1\",null,{\"className\":\"text-4xl md:text-6xl font-bold text-slate-900 dark:text-white mb-8 leading-tight max-w-4xl mx-auto\",\"children\":\"Como Crear tu Primera Pagina Web desde Cero: Tutorial Paso a Paso [2026]\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center justify-center gap-6 text-slate-600 dark:text-slate-400 mb-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center bg-slate-100 dark:bg-slate-800 px-4 py-2 rounded-full\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar w-4 h-4 mr-2 text-cyan-500\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"font-medium\",\"children\":\"24 de marzo de 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center bg-slate-100 dark:bg-slate-800 px-4 py-2 rounded-full\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock w-4 h-4 mr-2 text-cyan-500\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"font-medium\",\"children\":\"20 min\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"max-w-3xl mx-auto\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-xl text-slate-600 dark:text-slate-300 leading-relaxed bg-gradient-to-r from-cyan-50 to-blue-50 dark:from-cyan-900/20 dark:to-blue-900/20 p-6 rounded-xl border border-cyan-200 dark:border-cyan-800\",\"children\":\"Crea tu primera pagina web desde cero con este tutorial paso a paso. Aprende HTML, CSS y JavaScript basico, publica gratis con GitHub Pages y anade funcionalidades con IA. Sin experiencia previa necesaria.\"}]}],[\"$\",\"div\",null,{\"className\":\"flex items-center justify-center mt-8 pt-8 border-t border-slate-200 dark:border-slate-700\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center space-x-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-12 h-12 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full flex items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-code w-6 h-6 text-white\",\"children\":[[\"$\",\"polyline\",\"z7tu5w\",{\"points\":\"16 18 22 12 16 6\"}],[\"$\",\"polyline\",\"1eg1df\",{\"points\":\"8 6 2 12 8 18\"}],\"$undefined\"]}]}],[\"$\",\"div\",null,{\"className\":\"text-left\",\"children\":[[\"$\",\"p\",null,{\"className\":\"font-semibold text-slate-900 dark:text-white\",\"children\":\"Javier Santos\"}],[\"$\",\"p\",null,{\"className\":\"text-sm text-slate-600 dark:text-slate-400\",\"children\":\"Especialista en IA \u0026 Machine Learning\"}]]}]]}]}]]}],[\"$\",\"$L13\",null,{\"variant\":\"header\",\"source\":\"blog-header\"}],\"$undefined\",[\"$\",\"article\",null,{\"className\":\"max-w-4xl mx-auto mb-12\",\"children\":[[\"$\",\"$L14\",null,{}],[\"$\",\"$L15\",null,{}],[\"$\",\"div\",null,{\"className\":\"$16\",\"dangerouslySetInnerHTML\":{\"__html\":\"$17\"}}]]}],[\"$\",\"$L18\",null,{\"variant\":\"box\"}],[\"$\",\"section\",null,{\"className\":\"mb-12\",\"aria-labelledby\":\"recommended-posts-heading\",\"children\":[[\"$\",\"$L19\",null,{\"posts\":[{\"title\":\"Qué es n8n y Cómo Funciona: Tutorial en Español desde Cero [2026]\",\"excerpt\":\"n8n es la herramienta gratis y open source para automatizar sin programar. Qué es, cómo funciona, instalación Docker y tu primer workflow en 10 minutos.\",\"date\":\"2026-01-22\",\"readTime\":\"20 min\",\"slug\":\"guia-n8n-principiantes-automatizacion-sin-codigo-tutorial-paso-a-paso\",\"oldSlug\":\"n8n-principiantes\",\"featured\":true},{\"title\":\"¿Por Qué Dicen que la IA Programa Mal? Los Datos Dicen lo Contrario\",\"excerpt\":\"Claude Opus 4.5 supera al 80% de desarrolladores en benchmarks, pero Twitter está lleno de gente diciendo que la IA programa mal. El problema no es la IA. Es cómo la usas.\",\"date\":\"2026-01-22\",\"readTime\":\"15 min\",\"slug\":\"por-que-dicen-que-la-ia-programa-mal-cuando-supera-a-humanos\",\"featured\":true},{\"title\":\"Inteligencia Artificial 2026: 7 Predicciones con Datos Que Se Están Cumpliendo\",\"excerpt\":\"Predicciones IA 2026 que ya se cumplen: agentes autónomos, robots a 1/10 del precio, el fin del junior. Análisis con datos reales de un consultor IA.\",\"date\":\"2026-01-05\",\"readTime\":\"28 min\",\"slug\":\"predicciones-inteligencia-artificial-2026-agentes-autonomos-robots-futuro-trabajo\",\"oldSlug\":\"predicciones-ia-2026\",\"featured\":true}],\"variant\":\"grid\",\"title\":\"Posts Recomendados\"}],[\"$\",\"nav\",null,{\"className\":\"sr-only\",\"aria-label\":\"Posts recomendados\",\"children\":[[\"$\",\"$L12\",\"0\",{\"href\":\"/blog/guia-n8n-principiantes-automatizacion-sin-codigo-tutorial-paso-a-paso\",\"children\":\"Qué es n8n y Cómo Funciona: Tutorial en Español desde Cero [2026]\"}],[\"$\",\"$L12\",\"1\",{\"href\":\"/blog/por-que-dicen-que-la-ia-programa-mal-cuando-supera-a-humanos\",\"children\":\"¿Por Qué Dicen que la IA Programa Mal? Los Datos Dicen lo Contrario\"}],[\"$\",\"$L12\",\"2\",{\"href\":\"/blog/predicciones-inteligencia-artificial-2026-agentes-autonomos-robots-futuro-trabajo\",\"children\":\"Inteligencia Artificial 2026: 7 Predicciones con Datos Que Se Están Cumpliendo\"}]]}]]}],[\"$\",\"$L13\",null,{\"variant\":\"footer\",\"source\":\"blog-footer\"}],[\"$\",\"$L1a\",null,{}],[\"$\",\"footer\",null,{\"className\":\"mt-12 pt-8 border-t border-slate-200 dark:border-slate-700\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col md:flex-row items-center justify-between gap-4\",\"children\":[[\"$\",\"$L1b\",null,{\"blogTitle\":\"Como Crear tu Primera Pagina Web desde Cero: Tutorial Paso a Paso [2026]\"}],[\"$\",\"$L12\",null,{\"href\":\"/#blog\",\"children\":[\"$\",\"button\",null,{\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 border hover:text-accent-foreground h-11 px-4 py-2 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-arrow-left w-4 h-4 mr-2\",\"children\":[[\"$\",\"path\",\"1l729n\",{\"d\":\"m12 19-7-7 7-7\"}],[\"$\",\"path\",\"x3x0zl\",{\"d\":\"M19 12H5\"}],\"$undefined\"]}],\"Ver más artículos\"]}]}]]}]}]]}]}]}]]}]]\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n9:null\n"])</script><script>self.__next_f.push([1,"a:null\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"title\",\"0\",{\"children\":\"Como Crear tu Primera Pagina Web desde Cero: Tutorial Paso a Paso [2026] | Javadex\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Tutorial paso a paso para crear tu primera pagina web desde cero sin experiencia. HTML, CSS y JavaScript basico, hosting gratuito con GitHub Pages y como publicarla en internet. Guia 2026.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://www.javadex.es\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"Javier Santos Criado\"}],[\"$\",\"meta\",\"4\",{\"name\":\"keywords\",\"content\":\"Javier Santos Criado,Consultor Inteligencia Artificial,Especialista Machine Learning,Desarrollador IA para empresas,Chatbots inteligentes,Automatización de procesos con IA,Análisis predictivo empresarial,Computer Vision Python,Asistentes virtuales empresariales,OpenAI API development,Claude AI integration,Sistemas de trading algorítmico,Consultoría IA España,ROI proyectos Inteligencia Artificial,Optimización costos IA,Deep Learning aplicado,Natural Language Processing,MLOps y deployment IA,Ingeniería de datos IA,Transformación digital IA\"}],[\"$\",\"meta\",\"5\",{\"name\":\"creator\",\"content\":\"Javier Santos Criado\"}],[\"$\",\"meta\",\"6\",{\"name\":\"publisher\",\"content\":\"Javi Santos\"}],[\"$\",\"meta\",\"7\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"link\",\"8\",{\"rel\":\"canonical\",\"href\":\"https://www.javadex.es/blog/como-crear-pagina-web-desde-cero-tutorial-principiantes-2026\"}],[\"$\",\"meta\",\"9\",{\"name\":\"format-detection\",\"content\":\"telephone=no, address=no, email=no\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:title\",\"content\":\"Como Crear tu Primera Pagina Web desde Cero: Tutorial Paso a Paso [2026]\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:description\",\"content\":\"Tutorial paso a paso para crear tu primera pagina web desde cero sin experiencia. HTML, CSS y JavaScript basico, hosting gratuito con GitHub Pages y como publicarla en internet. Guia 2026.\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:url\",\"content\":\"https://www.javadex.es/blog/como-crear-pagina-web-desde-cero-tutorial-principiantes-2026\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image\",\"content\":\"https://www.javadex.es/og-image.jpg\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:alt\",\"content\":\"Como Crear tu Primera Pagina Web desde Cero: Tutorial Paso a Paso [2026]\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"18\",{\"property\":\"article:published_time\",\"content\":\"2026-03-24\"}],[\"$\",\"meta\",\"19\",{\"property\":\"article:author\",\"content\":\"Javier Santos Criado\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:title\",\"content\":\"Como Crear tu Primera Pagina Web desde Cero: Tutorial Paso a Paso [2026]\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:description\",\"content\":\"Tutorial paso a paso para crear tu primera pagina web desde cero sin experiencia. HTML, CSS y JavaScript basico, hosting gratuito con GitHub Pages y como publicarla en internet. Guia 2026.\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image\",\"content\":\"https://www.javadex.es/og-image.jpg\"}],[\"$\",\"link\",\"24\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"link\",\"25\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\"}]]\n"])</script></body></html>