1
Planificación del proyectoAntes de escribir código, planifica
1
Elige un tema
Portfolio personal, blog, sitio de un club, tienda ficticia, página de una causa, etc.
2
Define las páginas
Por ejemplo: Inicio, Sobre mí/nosotros, Servicios/Productos, Galería, Contacto.
3
Dibuja un boceto
Wireframe de cada página en papel o con una herramienta simple.
4
Organiza los archivos
Crea una estructura de carpetas clara con HTML, CSS e imágenes separados.
2
Estructura de archivosOrganización del proyecto
mi-proyecto/
├── index.html
├── about.html
├── services.html
├── gallery.html
├── contact.html
├── css/
│ └── styles.css
└── img/
├── logo.png
├── hero.jpg
└── ...
3
Ejemplo: página de inicioEstructura HTML completa
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Proyecto Web</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<div class="logo">
<img src="img/logo.png" alt="Logo de Mi Proyecto">
</div>
<nav>
<ul class="menu">
<li><a href="index.html" class="active">Inicio</a></li>
<li><a href="about.html">Sobre mí</a></li>
<li><a href="services.html">Servicios</a></li>
<li><a href="gallery.html">Galería</a></li>
<li><a href="contact.html">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h1>Bienvenidos a mi sitio web</h1>
<p>Una página creada con HTML y CSS.</p>
</section>
<section class="features">
<h2>Características</h2>
<div class="three-columns">
<div class="card">
<h3>Responsivo</h3>
<p>Se adapta a cualquier pantalla.</p>
</div>
<div class="card">
<h3>Accesible</h3>
<p>Diseñado para todos los usuarios.</p>
</div>
<div class="card">
<h3>Moderno</h3>
<p>Con transiciones y efectos CSS.</p>
</div>
</div>
</section>
</main>
<footer>
<p>© 2026 Mi Proyecto Web.</p>
</footer>
</body>
</html>
4
Requisitos del proyectoChecklist interactivo por categoría
5
Ejercicio prácticoDesarrolla tu proyecto final
Tareas de la sesión
- Elige el tema de tu proyecto y define las páginas que tendrás.
- Dibuja un boceto rápido de la página de inicio y de al menos otra página.
- Crea la estructura de archivos y carpetas.
- Desarrolla el HTML completo de todas las páginas, asegurándote de usar etiquetas semánticas.
- Crea la hoja de estilos CSS con: un sistema de colores coherente, tipografías legibles, maquetación Flexbox, diseño responsivo con media queries, transiciones y transformaciones.
- Verifica la accesibilidad con la lista de comprobación de arriba.
- Prueba en diferentes tamaños de pantalla.