Mini proyecto HTML — sitio personal
Antes, el resumen mapeó tu toolkit HTML y señaló aquí como paso de práctica. Esta lección no es otro mapa de habilidades. Es un brief de construcción: planifica tres páginas, comparte un cascarón de navegación, rellena contenido real y demuestra el sitio con una tabla de aceptación corta.
Por qué un mini proyecto ahora
Respuesta directa
1) Crea al menos tres archivos: index.html, about.html, contact.html. 2) Reutiliza los mismos landmarks header/nav/footer con enlaces que funcionen. 3) Intro real en home, historia corta en about, formulario name/email/mensaje etiquetado en contact. 4) Una imagen informativa con alt útil más lista de skills o tabla pequeña. 5) Tabula con teclado; arregla labels faltantes y enlaces rotos. 6) Marca cada fila de aceptación antes de decir «listo».
📊 Acceptance criteria
| Item | Done when |
|---|---|
| Shared nav | Same landmark links work on every page |
| Semantics | header, nav, main, and footer on each page |
| Home & about | Real paragraphs — not placeholder lorem forever |
| Media | At least one informative image with useful alt |
| Data | A skills list or a small facts table |
| Form | Labeled name, email, message + a real submit button |
| Quality | Keyboard tab order makes sense; no unlabeled controls |
Planifica antes de teclear
Boceto primero: nombre del sitio, propósito de tres páginas, qué foto, qué skills/datos. Decide carpetas — los tres HTML juntos para enlaces relativos simples. Nombra persona/marca una vez para h1 y title coherentes.
Cascarón compartido — empieza aquí
Copia header/nav en cada página; solo cambia el main. Los href relativos deben coincidir con los nombres de archivo. Más tarde un button type=submit real — no finjas envío con un div vacío.
<header>
<h1>Alex Site</h1>
<nav aria-label="Main">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<!-- page content -->
</main>
<footer>
<p>© Alex</p>
</footer>
Leer el cascarón
- header+nav+main+footer dan landmarks claros
- aria-label en nav ayuda si hay un segundo nav
- Enlaces relativos unen los tres archivos
- Repite el cascarón; solo cambia main
- Pon un title corto en cada página
- El resumen listó hábitos — aquí se aplican juntos
Starter del formulario de contacto
Contact es donde las skills de formulario encuentran el proyecto. Empareja cada control con label visible. Incluye name para un backend futuro. Un submit real en el marcado aunque aún no envíes al servidor.
<form action="#" method="post">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</p>
<p>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="5" required></textarea>
</p>
<button type="submit">Send</button>
</form>
Orden de construcción que funciona
- Duplica el cascarón en tres archivos; arregla nav hasta que todo enlace. 2. Escribe intro de home e historia about (+ lista/tabla). 3. Una foto en images/ con src y alt específico. 4. Pega el formulario; confirma labels, names y submit. 5. Abre las tres páginas; estrecha; tabula hasta submit. 6. Marca filas de aceptación — CSS ligero después.
Errores fáciles en este proyecto
- Copiar nav una vez y editar solo una página hasta que los enlaces divergen
- Campos de contacto solo con placeholder sin label
- Tabla de layout para toda la página en vez de landmarks
- alt vacío en una foto con significado
- Dejar lorem y decir «listo»
- Saltar a frameworks o CSS pesado antes de validar las tres páginas
- Olvidar el hábito del resumen: estructura y labels primero
Resumen
- Esta sesión es un build práctico de sitio personal, no otro mapa del curso
- Tres páginas comparten header/nav/main/footer con enlaces relativos que funcionan
- Combina media, lista o tabla y formulario etiquetado
- La tabla de aceptación es tu definición de hecho
- Revisa con teclado antes de pulir con CSS
- Temas opcionales siguientes (SVG…) son extras — entrega este sitio primero
Recordatorio breve
Si te atascas, vuelve a la tabla de aceptación — no a memorizar etiquetas nuevas. El objetivo es practicar combinar las skills del curso en un sitio pequeño que se abre en el navegador.
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior