, mejora index.html y revisa alt.","instructions":"Mejoras accesibilidad y SEO básico: etiqueta main, lang=\"es\", meta description y atributos alt en imágenes. Un portfolio profesional debe ser usable con lectores de pantalla y comprensible para buscadores.","previewDescription":"HTML accesible, lang=es y meta description en el head.","estimatedMinutes":30,"initialCheckpoints":[{"id":"page-renders","label":"La página carga sin errores","hint":"","concept":"React necesita que la aplicación arranque sin errores de JavaScript ni de compilación. Vite sirve tu código en desarrollo y cualquier error en consola (F12) indica que algo en JSX o imports está mal escrito. Un proyecto que carga correctamente es la base de todo lo demás.","hintSteps":[{"type":"concept","text":"React necesita que la aplicación arranque sin errores de JavaScript ni de compilación. Vite sirve tu código en desarrollo y cualquier error en consola (F12) indica que algo en JSX o imports está mal escrito. Un proyecto que carga correctamente es la base de todo lo demás."},{"type":"action","text":"Abre la carpeta del zip en la terminal del proyecto"},{"type":"action","text":"Ejecuta npm install (solo la primera vez)"},{"type":"action","text":"Luego npm run dev y abre http://localhost:5173"},{"type":"tip","text":"F12 → Consola: no debe haber errores en rojo"},{"type":"tip","text":"Al guardar en src/, este paso se actualiza solo"}],"passed":false},{"id":"page-home-main","label":"HomePage usa

","hint":"","concept":"Cada página debe tener un único

con el contenido principal (no la navbar). Mejora accesibilidad: lectores de pantalla saltan al main. HomePage compone Hero y About dentro de main.","hintSteps":[{"type":"concept","text":"Cada página debe tener un único

con el contenido principal (no la navbar). Mejora accesibilidad: lectores de pantalla saltan al main. HomePage compone Hero y About dentro de main."},{"type":"file","text":"Edita","path":"src/pages/HomePage.jsx"},{"type":"code","text":"Estructura:","code":"

\n \n \n

"}],"passed":false},{"id":"page-projects-main","label":"ProjectsPage usa

","hint":"","concept":"ProjectsPage envuelve PageHero y Projects en main. Consistencia entre rutas: misma estructura semántica en /, /proyectos y /contacto.","hintSteps":[{"type":"concept","text":"ProjectsPage envuelve PageHero y Projects en main. Consistencia entre rutas: misma estructura semántica en /, /proyectos y /contacto."},{"type":"file","text":"Edita","path":"src/pages/ProjectsPage.jsx"},{"type":"action","text":"PageHero + Projects dentro de

"}],"passed":false},{"id":"page-contact-main","label":"ContactPage usa

","hint":"","concept":"ContactPage con main incluye hero de página y formulario. El landmarks pattern (header, main, footer) ayuda a navegación por teclado y SEO.","hintSteps":[{"type":"concept","text":"ContactPage con main incluye hero de página y formulario. El landmarks pattern (header, main, footer) ayuda a navegación por teclado y SEO."},{"type":"file","text":"Edita","path":"src/pages/ContactPage.jsx"},{"type":"action","text":"PageHero + formulario dentro de

"}],"passed":false},{"id":"meta-description","label":"Meta description en index.html","hint":"","concept":"meta name=\"description\" en index.html resume el sitio para Google y redes sociales. No es JSX — es HTML estático que Vite copia al build. 150-160 caracteres descriptivos funcionan bien.","hintSteps":[{"type":"concept","text":"meta name=\"description\" en index.html resume el sitio para Google y redes sociales. No es JSX — es HTML estático que Vite copia al build. 150-160 caracteres descriptivos funcionan bien."},{"type":"file","text":"Edita","path":"index.html"},{"type":"code","text":"Meta:","code":""}],"passed":false},{"id":"index-lang-es","label":"Atributo lang=\"es\" en ","hint":"","concept":"html lang=\"es\" indica idioma a buscadores y lectores de pantalla (pronunciación). Debe coincidir con el idioma real del contenido de tu portfolio.","hintSteps":[{"type":"concept","text":"html lang=\"es\" indica idioma a buscadores y lectores de pantalla (pronunciación). Debe coincidir con el idioma real del contenido de tu portfolio."},{"type":"file","text":"Edita","path":"index.html"},{"type":"code","text":"Ejemplo:","code":""},{"type":"tip","text":"Ayuda a lectores de pantalla y buscadores"}],"passed":false},{"id":"images-have-alt","label":"Todas las imágenes tienen alt descriptivo","hint":"","concept":"alt describe la imagen para quien no la ve; vacío solo si la imagen es decorativa. En ProjectCard usa alt={title} o imageAlt. Es requisito WCAG y buena práctica en cualquier img en JSX.","hintSteps":[{"type":"concept","text":"alt describe la imagen para quien no la ve; vacío solo si la imagen es decorativa. En ProjectCard usa alt={title} o imageAlt. Es requisito WCAG y buena práctica en cualquier img en JSX."},{"type":"action","text":"Revisa ProjectCard, ProjectModal y Admin (si existe)"},{"type":"code","text":"Ejemplo:","code":" {imageAlt

"},{"type":"tip","text":"Nunca dejes alt vacío en imágenes de contenido"}],"passed":false}],"initialStatus":"locked","totalLevels":30}]

Nivel 19: Accesibilidad + SEO básico

Así debería verse tu web al finalizar este nivel

Objetivo

En este nivel aprenderás

Pasos a completar (0/7)