Unidad 5: Proyecto Final – Mi Página Web Personal
Introducción al Desarrollo Web con HTML y CSS
¡Bienvenido a la última sesión del curso! En esta clase, tendrás la oportunidad de construir y presentar tu página web final. Ahora que tienes un boceto y un plan estructurado, aplicaremos todos los conocimientos que has aprendido sobre HTML y CSS para desarrollar tu sitio completo. Además, presentarás tu trabajo y recibirás comentarios de tus compañeros y profesor.
1. Construcción Completa de la Página Web Siguiendo el Boceto
Paso 1: Crear la Estructura HTML Empieza creando el archivo HTML y organiza las secciones de tu página según el esquema que diseñaste en la sesión anterior.
Ejemplo de Estructura 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 Web</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<!-- Encabezado -->
<header>
<h1>Mi Biografía</h1>
<nav>
<ul>
<li><a href="#biografia">Sobre mí</a></li>
<li><a href="#galeria">Galería</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<!-- Sección de Biografía -->
<section id="biografia">
<h2>Sobre mí</h2>
<p>Hola, soy [Tu Nombre], me encanta [tu interés] y explorar el mundo de la web.</p>
</section>
<!-- Galería de Fotos -->
<section id="galeria">
<h2>Galería de Fotos</h2>
<div class="galeria">
<img src="foto1.jpg" alt="Descripción de la foto 1">
<img src="foto2.jpg" alt="Descripción de la foto 2">
</div>
</section>
<!-- Sección de Contacto -->
<section id="contacto">
<h2>Contacto</h2>
<p>Puedes <a href="mailto:correo@example.com">contactarme aquí</a>.</p>
</section>
</body>
</html>
Paso 2: Agregar el Estilo CSS En el archivo estilos.css, aplica todo lo aprendido para dar estilo a cada parte de la página. Experimenta con colores, fuentes, y espaciado.
Ejemplo CSS Completo:
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
section {
padding: 20px;
}
.galeria img {
width: 100px;
height: auto;
margin: 5px;
}
2. Aplicar Conceptos de Diseño y Estructura
Revisa que hayas incluido:
- HTML: Estructura, enlaces, imágenes, listas y tablas (si son necesarias).
- CSS: Colores, fuentes, bordes, márgenes y diseño responsivo.
- Flexbox y Grillas: Para organizar elementos visualmente y adaptarlos a diferentes dispositivos.
Asegúrate de revisar la página en el navegador, haciendo ajustes donde sea necesario.
3. Presentación de los Proyectos y Retroalimentación
Paso 1: Preparación para la Presentación
- Explica brevemente qué tema elegiste para tu página y por qué.
- Muestra cada sección y explica las decisiones de diseño, como los colores y la organización.
- Comparte cualquier desafío que encontraste y cómo lo resolviste.
Paso 2: Retroalimentación
Recibir comentarios de los demás es una gran oportunidad para aprender:
- Escucha las opiniones de tus compañeros y del profesor.
- Haz preguntas sobre lo que podrías mejorar.
- Toma notas de sugerencias que puedas usar en futuros proyectos.
¡Felicidades! Has completado tu primera página web y aprendido los conceptos básicos de desarrollo web con HTML y CSS. Este proyecto es solo el comienzo.