🎯 Objetivo del tema
El administrador aún no ha insertado un video para esta sección.
🗺️ Mapa del tema
Este NO es un tema teórico: es un PROYECTO. Vas a construir un sitio web completo de principio a fin, pasando por TODAS las fases: planificación, maquetación, estilo, interactividad, accesibilidad y despliegue. El sitio será TUYO: un portafolio personal que puedes mostrar en entrevistas, que demuestra lo que sabes, y que será la base de tu presencia profesional en la web.
Qué secciones tendrá, qué contenido irá en cada una, qué paleta y tipografía usarás.
Estructura completa con header, nav, main, sections, articles, aside, footer.
Custom properties, Flexbox, Grid, mobile-first responsive con 4 breakpoints.
Menú hamburguesa, formulario de contacto, dark mode, smooth scroll.
Lighthouse 95+, axe DevTools, prueba con teclado y lector de pantalla.
GitHub Pages o Netlify, dominio, README profesional, commit final.
1.12.1 Fase 1: Planificación y arquitectura
Antes de escribir una línea de código, hay que PLANIFICAR. Un proyecto bien planificado se construye 3 veces más rápido que uno improvisado. En esta fase definirás QUÉ harás, CÓMO se organizará, y con qué IDENTIDAD VISUAL.
Define las secciones de tu sitio
- Hero/Inicio: tu nombre, una frase que te defina, foto profesional, enlaces a contacto.
- Sobre mí: 1-2 párrafos contando quién eres, qué haces, qué te apasiona.
- Proyectos: 3-6 proyectos destacados con imagen, descripción, tecnologías usadas, enlace a GitHub o demo.
- Habilidades: lista de tecnologías que dominas, organizadas por categoría (Frontend, Backend, Herramientas).
- Experiencia/Formación: tu trayectoria académica y profesional, en orden cronológico inverso.
- Contacto: formulario + tus redes profesionales (LinkedIn, GitHub, email).
Define tu paleta y tipografía
Elige UNA paleta de 3-5 colores con buen contraste (verificado en WebAIM Contrast Checker) y UNA o DOS familias tipográficas de Google Fonts. Defínelas como custom properties en :root desde el inicio. Esto te ahorrará cambios tediosos más adelante.
El administrador aún no ha insertado un video para esta sección.
1.12.2 Fase 2: Maquetación HTML5 semántico
Ahora sí: a escribir HTML. Usa las etiquetas semánticas que aprendiste en el Tema 1.3: header, nav, main, section, article, aside, footer. Cada una con un propósito claro. Esta estructura será la columna vertebral de TODO el sitio.
Estructura base recomendada
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portafolio de [Tu Nombre], desarrollador FullStack.">
<title>[Tu Nombre] — Desarrollador FullStack</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<a href="#main" class="skip-link">Saltar al contenido</a>
<header>
<h1>[Tu Nombre]</h1>
<nav>
<ul>
<li><a href="#sobre-mi">Sobre mí</a></li>
<li><a href="#proyectos">Proyectos</a></li>
<li><a href="#habilidades">Habilidades</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main id="main">
<section id="hero">...</section>
<section id="sobre-mi">...</section>
<section id="proyectos">
<article class="proyecto">...</article>
<article class="proyecto">...</article>
</section>
<section id="habilidades">...</section>
<aside id="extras">...</aside>
</main>
<footer>
<p>© 2026 [Tu Nombre]. Construido con HTML5, CSS3 y JavaScript.</p>
</footer>
<script type="module" src="js/app.js"></script>
</body>
</html>Esqueleto HTML5 semántico del portafolio
El administrador aún no ha insertado un video para esta sección.
1.12.3 Fase 3: Estilo con CSS3 moderno
Ahora a darle estilo. Tu CSS debe ser PROFESIONAL: organizado con custom properties, responsive con mobile-first, y con el Box Model correcto desde el inicio. Esta fase se apoya en TODO lo que aprendiste en los temas 1.5, 1.6 y 1.7.
Estructura de archivos CSS recomendada
css/
├── 00-reset.css /* reset universal + box-sizing */
├── 01-variables.css /* custom properties (colores, fuentes, espacios) */
├── 02-tipografia.css /* estilos de texto y jerarquía */
├── 03-layout.css /* grid + flexbox del layout principal */
├── 04-componentes.css /* botones, tarjetas, formularios */
├── 05-utilidades.css /* clases de ayuda (ocultar, centrar, etc.) */
└── 06-responsive.css /* media queries */Organización profesional del CSS
El reset + variables que SIEMPRE debes aplicar
/* 00-reset.css */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video, iframe { max-width: 100%; height: auto; display: block; }
/* 01-variables.css */
:root {
/* Paleta */
--color-primario: hsl(220, 70%, 45%);
--color-fondo: hsl(0, 0%, 98%);
--color-texto: hsl(220, 15%, 20%);
--color-acento: hsl(180, 60%, 45%);
/* Tipografía */
--font-principal: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Espaciado */
--esp-1: 0.5rem; --esp-2: 1rem; --esp-3: 1.5rem;
--esp-4: 2rem; --esp-5: 3rem; --esp-6: 5rem;
/* Otros */
--radio: 8px;
--sombra: 0 2px 8px rgba(0,0,0,0.08);
}Reset y variables iniciales
El administrador aún no ha insertado un video para esta sección.
1.12.4 Fase 4: Interactividad con JavaScript
Ahora a hacer tu sitio VIVO. Vas a agregar al menos 4 características interactivas que demuestren todo lo aprendido en los temas 1.8, 1.9 y 1.10. No necesitas un framework: vanilla es suficiente y más ligero.
Las 4 funcionalidades mínimas del portafolio
- Menú hamburguesa en móvil (visible en desktop).
- Formulario de contacto con validación JS y feedback visual.
- Smooth scroll al hacer clic en los enlaces del nav.
- Dark mode con un toggle (cambia custom properties).
Ejemplo: dark mode en 10 líneas
const toggle = document.querySelector('#dark-mode-toggle');
// Detectar preferencia del sistema
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
// Toggle al hacer clic
toggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
// Guardar preferencia del usuario
localStorage.setItem('theme',
document.documentElement.classList.contains('dark') ? 'dark' : 'light');
});
// CSS para el modo oscuro (cambia variables)
.dark {
--color-fondo: hsl(220, 15%, 15%);
--color-texto: hsl(0, 0%, 95%);
}Dark mode con custom properties
El administrador aún no ha insertado un video para esta sección.
1.12.5 Fase 5: Accesibilidad y auditoría
Un sitio profesional NO es solo bonito y funcional: también es ACCESIBLE. Esta fase verifica que tu sitio cumple con WCAG nivel AA y que pasa las auditorías automáticas. Es lo que diferencia un sitio de un junior de uno de un senior.
Checklist de auditoría obligatorio
- Lighthouse > Accessibility: 95+ (ideal 100).
- Lighthouse > Best Practices: 95+.
- Lighthouse > Performance: 90+.
- Lighthouse > SEO: 95+.
- Todas las imágenes tienen alt descriptivo.
- Contraste de color verificado en WebAIM (4.5:1 mínimo).
- Navegación completa con teclado (Tab + Enter + Esc).
- Skip link presente y funcional.
- Focus visible en todos los elementos interactivos.
- Sin errores en DevTools Console.
- Probado con lector de pantalla (Narrator, VoiceOver o NVDA).
El administrador aún no ha insertado un video para esta sección.
1.12.6 Fase 6: Despliegue y portafolio
La última fase: subir tu sitio a internet para que el mundo (y los reclutadores) lo vean. Hay opciones gratuitas que tienen todo lo necesario para un portafolio personal: GitHub Pages, Netlify, Vercel, Cloudflare Pages.
| Plataforma | Costo | Ideal para | Custom domain |
|---|---|---|---|
| GitHub Pages | Gratis | Portafolios estáticos, documentación. | Sí (configurable en repo). |
| Netlify | Gratis (con límites generosos) | Sitios estáticos, formularios, funciones serverless. | Sí (fácil). |
| Vercel | Gratis (con límites) | Sitios estáticos, apps de Next.js. | Sí (fácil). |
| Cloudflare Pages | Gratis (con límites) | Sitios estáticos con CDN global. | Sí. |
El README.md de tu portafolio
# [Tu Nombre] — Portafolio de Desarrollador FullStack
Sitio web personal construido con HTML5 semántico, CSS3 moderno y JavaScript vanilla.
## 🚀 Demo en vivo
[mi-portafolio.netlify.app](https://mi-portafolio.netlify.app)
## ✨ Características
- HTML5 semántico (validado en W3C)
- CSS3 con custom properties y mobile-first
- JavaScript ES6+ sin frameworks
- 100% accesible (Lighthouse 100/100/100/100)
- Responsive desde 320px hasta 4K
## 🛠️ Tecnologías
- HTML5, CSS3 (Grid, Flexbox, custom properties)
- JavaScript ES6+ (módulos, fetch, async/await)
- Git y GitHub para control de versiones
- Lighthouse para auditoría de calidad
## 📚 Aprendizaje
Este proyecto es el resultado del Capítulo 1: Fundamentos del Web FullStack.
Construido como parte del curso [Manual de Programación Junior].
## 📬 Contacto
- LinkedIn: [tu-linkedin]
- GitHub: [@tu-usuario]
- Email: tu@correo.comREADME.md profesional
El administrador aún no ha insertado un video para esta sección.
📚 Contenido ampliado
Material adicional, referencias externas verificadas y ejemplos extendidos.
🤖 AI Mission
La IA no construye tu portafolio. Tú lo construyes. La IA te ayuda a pulirlo.
Misión: Construye tu portafolio paso a paso como se describe en este tema. Cuando tengas la primera versión, pídele a la IA que audite 3 cosas concretas: accesibilidad, performance, y COPY (los textos que ven los reclutadores). Implementa solo las mejoras que entiendas. Anota en tu cuaderno: ¿qué te hizo mejor la IA, y qué sabías tú que la IA no detectó?
Pasos sugeridos
- Planifica: define 4-6 secciones, tu paleta, tu tipografía. Anota TODO en DECISIONES.md.
- Crea la estructura de carpetas: index.html, css/, js/, img/, README.md.
- Escribe el HTML5 semántico de TODAS las secciones. Valida con W3C Validator.
- Aplica el CSS: reset, variables, tipografía, layout, componentes, responsive. Mobile-first.
- Agrega interactividad: menú hamburguesa, formulario, smooth scroll, dark mode.
- Audita con Lighthouse: corrige TODO lo que esté bajo 95.
- Verifica accesibilidad: axe DevTools, navegación con teclado, lector de pantalla.
- Sube a GitHub: commit, push, activa GitHub Pages.
- Comparte el enlace con 1 persona: pídele feedback honesto sobre QUÉ VE y QUÉ ENTIENDE.
- Pídele a la IA: 'Tengo este portafolio en [URL]. Sugiere 3 mejoras concretas: accesibilidad, performance, COPY (textos para reclutadores). NO me des código, dime la técnica y por qué.'
- Aplica al menos 2 mejoras. Haz commit final: 'feat: portafolio completo, validado, desplegado'.
- Anota en tu cuaderno, bajo 'Lo que aprendí construyendo': qué entendiste al HACER que ningún tutorial te podría haber enseñado.
📓 Entregable: URL pública de tu portafolio (GitHub Pages o Netlify), capturas de las 4 secciones principales, Lighthouse 95+ en las 4 categorías, captura del feedback de 1 persona real, y 1 página de cuaderno reflexionando sobre el proceso.
🚫 Errores típicos de razonamiento
Por qué: El síndrome del 'casi listo': nunca terminas porque siempre hay algo más que mejorar. Publica una versión funcional MÍNIMA y luego itera. Tu primer portafolio no será tu mejor trabajo, y está bien: lo importante es que EXISTA y esté público. Cada 3 meses, vuélvelo a revisar con ojos nuevos y agrega mejoras.
Por qué: Es tentador (y se ve 'impresionante'), pero el Capítulo 1 es sobre FUNDAMENTOS. Un reclutador senior prefiere ver un portafolio en HTML/CSS/JS vanilla bien hecho que uno en React mal estructurado. Demuestra que entiendes la base antes de subir a las abstracciones. En el Capítulo 3 harás un portafolio CON React, cuando ya domines los fundamentos.
Por qué: Los reclutadores técnicos lo notan en 5 minutos: 'esta es la to-do list de Midudev' o 'este es el e-commerce de Fazt'. Solo incluye proyectos donde TÚ tomaste las decisiones: qué tecnologías, qué arquitectura, qué features. Si solo hiciste tutoriales, di 'siguiendo el tutorial de X, lo modifiqué agregando Y' — la honestidad es mejor que el engaño.
Por qué: El 70% de los reclutadores ven tu portafolio desde el móvil. Si se ve roto o se ve mal, perdiste la oportunidad. SIEMPRE prueba en DevTools Toggle Device Toolbar y, si puedes, en un móvil real. Pide a un amigo que lo abra en su celular y te dé feedback. Es el filtro #1 de 'este candidato se preocupa por los detalles'.
Por qué: Cuando alguien comparta tu portafolio en LinkedIn o Twitter, la vista previa se genera de los meta tags. Sin og:title, og:description, og:image, se ve como un enlace genérico sin gracia. Dedica 10 minutos a estos meta tags: es la diferencia entre 'se ve profesional' y 'se ve amateur'.
🧪 Laboratorio práctico
El portafolio no se hace una vez. Se hace y se mejora cada 3 meses.
Laboratorio: Tu primer portafolio profesional público
Objetivo: Construir y publicar un portafolio web profesional que aplique TODO lo aprendido en el Capítulo 1. El resultado será tu primer sitio público en internet, validado por Lighthouse y desplegado en una plataforma gratuita.
Pasos
- Fase 1: Crea DECISIONES.md con secciones, paleta, tipografía, y justificación.
- Fase 2: Escribe el HTML5 semántico de todas las secciones. Valida con W3C.
- Fase 3: Crea la estructura CSS modular (reset, variables, layout, componentes, responsive).
- Fase 4: Implementa 4 funcionalidades JS: menú hamburguesa, formulario, smooth scroll, dark mode.
- Fase 5: Audita con Lighthouse. Corrige todo bajo 95. Verifica navegación con teclado.
- Fase 6: Sube a GitHub con README profesional. Despliega en Netlify o GitHub Pages.
- Comparte el enlace con 2 personas: una técnica y una no técnica. Recoge feedback.
- Aplica al menos 2 mejoras basadas en el feedback.
- Comparte en LinkedIn/Twitter: 'Acabo de publicar mi portafolio. Feedback bienvenido'.
- Haz commit final: 'feat: portafolio profesional, accesible, desplegado'.
- Anota en tu cuaderno: 3 cosas que aprendiste HACIENDO que ningún tutorial te enseñó.
📓 Entregable: URL pública del portafolio, screenshots de las 4 secciones, Lighthouse 95+ en las 4 categorías, DECISIONES.md, README.md, feedback de 2 personas, y reflexión de 1 página en el cuaderno.