Lo que vas a construir

Vas a crear tu primera página web personal usando HTML y CSS, con ayuda de una IA para generar el código. Crearás una carpeta, pedirás a una IA que genere una página con tu información, y la abrirás en el navegador. Al terminar, tendrás un archivo index.html funcionando que puedes personalizar, mejorar, y eventualmente publicar. Es el primer paso para crear portfolios, landing pages, o cualquier sitio web estático.

Paso 1: Crea la estructura

mkdir mi-pagina
cd mi-pagina

Paso 2: Pídele a una IA que genere el código

Abre Google AI Studio o cualquier chat de IA.

Crea una página web simple con:
- Un título "Mi Primera Página"
- Una descripción de mí
- Estilos modernos con CSS
- Colores agradables

Dame el código HTML completo en un solo archivo.

Paso 3: Crea el archivo

Copia el código que te dio la IA y guárdalo como index.html

Paso 4: Ábrelo en el navegador

Sistema	Comando
macOS	`open index.html`
Windows	`start index.html`
Linux	`xdg-open index.html`

O simplemente arrastra el archivo a tu navegador.

Estructura básica de HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página</title>
    <style>
        body { font-family: sans-serif; }
    </style>
</head>
<body>
    <h1>Hola Mundo</h1>
    <p>Mi primera página web.</p>
</body>
</html>

Mejoras opcionales

Pídele a la IA:

"Agrega un modo oscuro"
"Hazla responsive para móvil"
"Agrega animaciones sutiles"
"Agrega una sección de proyectos"

Publicar gratis

Para que otros la vean, súbela a GitHub Pages:

Crea repositorio en GitHub
Sube tu index.html
Ve a Settings → Pages
Selecciona "main" branch
Tu página estará en tu-usuario.github.io/repo-name

Próximo paso

→ Mi Ambiente de Desarrollo — Configura VS Code

Página Web Estática

📋 Prerequisitos sugeridos