Portafolio web
- AGR
- Web , Programación
- 15 Feb, 2025
Proyecto: Página Personal o Portafolio Web
Objetivo
Crear una página web personal en la que se muestre:
- Una cabecera con tu nombre y un menú de navegación.
- Una sección “Sobre Mí” con una breve descripción y una foto.
- Una sección de Portafolio donde se muestren algunos proyectos o actividades.
- Una sección de Contacto con información para que te puedan escribir.
- Un pie de página con información adicional (por ejemplo, derechos de autor).
Paso 1: Preparar el Entorno
-
Crea una carpeta de proyecto.
Nómbrala, por ejemplo,mi_pagina_personal. -
Dentro de la carpeta, crea dos archivos:
index.htmlstyle.css
Tip
Si lo prefieres puedes crear los archivos directamente en Notepad++ , para ello sigue los pasos a continuación:
- Abre notepadd++
- Crea un nuevo archivo en Files -> New File
- Guarda tu archivo con la extensión adecuada según corresponda:
- HyperText Markup Language (HTML)
- Cascading Style Sheets (CSS)
- Ingresa el nombre deseado
index.htmlstyle.css - Presiona guardar y listo ya tienes tus archivos para comenzar a trabajar
- Abre ambos archivos en tu editor de código Notepad++
Paso 2: Estructura HTML Básica
En el archivo index.html, copia y pega la siguiente estructura básica. Esta estructura incluye los elementos principales y las secciones que veremos más adelante.
<!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 Personal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Inicio de Cabecera -->
<header>
<h1>Mi Nombre</h1>
<nav>
<ul>
<li><a href="#sobre-mi">Sobre Mí</a></li>
<li><a href="#portafolio">Portafolio</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<!-- Fin de Cabecera -->
<!-- Sección "Sobre Mí" -->
<section id="sobre-mi">
<h2>Sobre Mí</h2>
<p>Hola, soy [Tu Nombre]. Soy estudiante de secundaria y me apasiona [tu pasión/intereses].</p>
<!-- Puedes agregar una imagen personal -->
<img src="tu-foto.jpg" alt="Mi Foto" width="200">
</section>
<!-- Sección "Portafolio" -->
<section id="portafolio">
<h2>Portafolio</h2>
<p>A continuación, algunos de mis proyectos o actividades:</p>
<div class="proyectos">
<article>
<h3>Proyecto 1</h3>
<p>Descripción breve del proyecto 1.</p>
</article>
<article>
<h3>Proyecto 2</h3>
<p>Descripción breve del proyecto 2.</p>
</article>
<!-- Puedes agregar más artículos según lo desees -->
</div>
</section>
<!-- Sección "Contacto" -->
<section id="contacto">
<h2>Contacto</h2>
<p>Puedes escribirme a: <a href="mailto:tuemail@example.com">tuemail@example.com</a></p>
</section>
<!-- Pie de Página -->
<footer>
<p>© 2025 Mi Página Personal. Todos los derechos reservados.</p>
</footer>
</body>
</html>Explicación:
- Se utiliza la etiqueta
<header>para el encabezado y el menú de navegación. - Cada sección tiene un
idpara que el menú permita navegar directamente a ellas. - Se incluyen secciones para “Sobre Mí”, “Portafolio” y “Contacto”, y al final un
<footer>.
Paso 3: Agregar Estilos con CSS
Abre el archivo style.css y agrega el siguiente código. Este CSS le dará estilo a la página, haciendo que se vea más atractiva y organizada.
/* Estilos generales */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
/* Cabecera y navegación */
header {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
header h1 {
margin: 0;
}
nav ul {
list-style: none;
padding: 0;
margin: 10px 0 0 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
/* Secciones */
section {
padding: 20px;
margin: 20px auto;
max-width: 800px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
section h2 {
text-align: center;
margin-bottom: 20px;
}
/* Estilo para la sección de proyectos */
.proyectos {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.proyectos article {
flex: 1;
margin: 10px;
padding: 15px;
background: #e2e2e2;
border-radius: 5px;
min-width: 200px;
}
/* Pie de página */
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: #fff;
}Explicación:
- Estilos generales: Se definen la fuente, colores, márgenes y fondo para el
<body>. - Cabecera y navegación: Se establecen colores de fondo y texto para el encabezado y se crea un menú horizontal.
- Secciones: Cada sección tiene un fondo blanco, márgenes, padding y una sombra sutil para destacarla.
- Proyectos: Se utiliza Flexbox para organizar los artículos (proyectos) de forma flexible.
- Pie de página: Se configura un fondo oscuro y texto centrado.
Paso 4: Personalizar el Contenido (Obligatorio para evaluación)
-
Actualiza el contenido textual.
Reemplaza[Tu Nombre],[tu pasión/intereses]y la descripción de cada proyecto con información real sobre ti y tus actividades. -
Agrega imágenes.
Descarga una imagen que te represente o un avatar, colócala en la carpeta del proyecto y cambia la ruta en<img src="tu-foto.jpg">por el nombre correcto del archivo. -
Enlaza el correo.
Cambiatuemail@example.compor tu dirección de correo real. -
Modificacione de estilos Modifica el archivo css para cambiar los colores de tu página web
-
Abre el archivo
index.htmlen tu navegador.
Revisa que todos los elementos se vean correctamente.
Paso 5: Mejorar (Opcional, puntos extra en evaluación)
-
Ajusta el diseño según tus gustos.
Prueba a cambiar colores, tamaños de fuente o agregar nuevos estilos enstyle.css. -
Experimenta con nuevas secciones o contenido.
Puedes agregar una sección de “Hobbies” o “Logros” para ampliar tu portafolio.
Sube tus archivos:
- Toma una captura de pantalla de tu pagina web y carga el archivo en Files
- Comprime la carpeta que creaste para tu proyecto en formato .zip o .rar
- De igual manera carga la carpeta comprimida en Files
Warning
Asegúrate de renombrar tanto la imagen de tu captura de pantalla como la carpeta comprimida con tu nombre completo, y luego sube ambos archivos en el apartado indicado.
Archivos sin nombre no podran ser evaluados
