Programación Web • ITI-07 • 5 feb 2026

Langing Page - Version Final

Objetivo General

Finalizar el desarrollo de una Landing Page Personal aplicando correctamente maquetación HTML, estilos CSS modernos y JavaScript básico para agregar interactividad y dinamismo. Deberán demostrar dominio de:

Estructura semántica HTML
Maquetación con Flexbox y Grid
Uso de variables CSS
Manipulación básica del DOM con JavaScript
Buenas prácticas visuales y de organización de archivos

Objetivos específicos

Al finalizar la actividad, el deberían de ser capaces de:

Integrar nuevas secciones funcionales a una landing page
Aplicar estilos visuales limpios y consistentes
Implementar modo oscuro / claro con JavaScript
Utilizar desplazamiento suave entre secciones
Mantener una estructura de proyecto ordenada

Descripción de la actividad

A partir del maquetado base proporcionado, el alumno deberá completar y mejorar su Landing Page Personal, agregando nuevas secciones, estilos personalizados y funcionalidad con JavaScript.

La landing debe representar al alumno como profesional del área de TI, simulando un sitio personal real.

Maquetado inicial

`index.html`

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Landing Personal</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap"
        rel="stylesheet"
    />

    <link rel="stylesheet" href="styles.css" />
</head>
<body>

<header class="header">
    <div class="logo">Tu Nombre</div>
    <nav class="nav">
        <a href="#inicio">Inicio</a>
        <a href="#sobre">Sobre mí</a>
        <a href="#servicios">Servicios</a>
        <a href="#portafolio">Portafolio</a>
        <a href="#contacto">Contacto</a>
        <button id="themeToggle" class="theme-toggle">🌙</button>
    </nav>
</header>

<!-- Hero -->
<section id="inicio" class="hero">
    <div class="hero-content">
        <h1>Hola, soy Angel</h1>
        <p>Desarrollador Web & Mobile enfocado en experiencias modernas</p>
        <button id="btnScroll">Ver mi trabajo</button>
    </div>
</section>

<!-- Sobre mí -->
<section id="sobre" class="about">
    <h2>Sobre mí</h2>
    <p>
        Soy desarrollador apasionado por crear aplicaciones web y móviles,
        combinando diseño, funcionalidad y buenas prácticas.
    </p>
</section>

<!-- Servicios -->
<section id="servicios" class="services">
    <h2>Servicios</h2>
    <div class="services-grid">
        <div class="card">
            <h3>Programador</h3>
            <p>Desarrollo web y móvil con tecnologías modernas.</p>
        </div>
        <div class="card">
            <h3>Diseño UX</h3>
            <p>Experiencias centradas en el usuario.</p>
        </div>
        <div class="card">
            <h3>Diseño UI</h3>
            <p>Interfaces limpias y atractivas.</p>
        </div>
    </div>
</section>

<!-- Portafolio -->
<section id="portafolio" class="portfolio">
    <h2>Portafolio</h2>
    <div class="portfolio-grid">
        <div class="project">Proyecto 1</div>
        <div class="project">Proyecto 2</div>
        <div class="project">Proyecto 3</div>
    </div>
</section>

<!-- Testimonios -->
<section class="testimonials">
    <h2>Testimonios</h2>
    <div class="testimonial">
        <p>"Excelente trabajo y muy profesional."</p>
        <span>- Cliente satisfecho</span>
    </div>
</section>

<!-- CTA -->
<section class="cta">
    <h2>¿Trabajamos juntos?</h2>
    <button id="cta-contacto">Contáctame</button>
</section>

<!-- Contacto -->
<section id="contacto" class="contact">
    <h2>Contacto</h2>
    <form>
        <input type="text" placeholder="Nombre" required />
        <input type="email" placeholder="Correo" required />
        <textarea placeholder="Mensaje"></textarea>
        <button type="submit">Enviar</button>
    </form>
</section>

<footer class="footer">
    <p>&copy; 2026 - Tu Nombre</p>
</footer>

<script src="script.js"></script>
</body>
</html>

Estilos Base

`styles.css`

:root {
    --fondo-primario: #ffffff;
    --fondo-secundario: #f4f4f4;
    --fondo-oscuro: #111;
    --texto-primario: #000000;
    --texto-secundario: #333333;
    --texto-claro: #ffffff;
    --acento: #3b82f6;
    --acento-oscuro: #1e3a8a;
}

body.dark-mode {
    --fondo-primario: #1a1a1a;
    --fondo-secundario: #2a2a2a;
    --fondo-oscuro: #0a0a0a;
    --texto-primario: #ffffff;
    --texto-secundario: #e0e0e0;
    --texto-claro: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    line-height: 1.6;
    background: var(--fondo-primario);
    color: var(--texto-primario);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: var(--fondo-oscuro);
    color: var(--texto-claro);
}

.nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav a {
    color: var(--texto-claro);
    text-decoration: none;
}

.theme-toggle {
    background: none;
    border: 2px solid var(--texto-claro);
    color: var(--texto-claro);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    background: var(--texto-claro);
    color: var(--fondo-oscuro);
    transform: rotate(360deg);
}

.hero {
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #1e3a8a);
    color: white;
    text-align: center;
}

.hero button {
    margin-top: 20px;
    padding: 12px 30px;
    border: none;
    cursor: pointer;
    background: #fff;
    color: #1e3a8a;
    font-weight: bold;
}

section {
    padding: 80px 40px;
    text-align: center;
}

.services-grid,
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.project {
    padding: 30px;
    background: var(--fondo-secundario);
    border-radius: 8px;
    color: var(--texto-primario);
    background: #f4f4f4;
    border-radius: 8px;
}

.testimonial {
    max-width: 600px;
    margin: auto;
    font-style: italic;
}
.cta {
    background: var(--fondo-oscuro);
    color: var(--texto-claro);
}

.cta button {
    margin-top: 20px;
    padding: 15px 40px;
    border: none;
    cursor: pointer;
    background: var(--fondo-primario);
    color: var(--texto-primario);
    font-weight: bold;
    font-size: 1.1rem;
}

.contact form {
    max-width: 400px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact input,
.contact textarea {
    padding: 10px;
    background: var(--fondo-secundario);
    color: var(--texto-primario);
    border: 1px solid var(--fondo-secundario);
}
.contact button {
    background: var(--fondo-oscuro);
    color: var(--texto-claro);
    padding: 20px;
}

JavaScript Base

`script.js`

// Botón de desplazamiento
const botonDesplazar = document.getElementById("btnScroll");

botonDesplazar.addEventListener("click", () => {
    document
        .getElementById("portafolio")
        .scrollIntoView({ behavior: "smooth" });
});

// Alternador de tema oscuro/claro
const alternadorTema = document.getElementById("themeToggle");
const cuerpo = document.body;

// Cargar preferencia guardada
const temaActual = localStorage.getItem("tema");
if (temaActual === "oscuro") {
    cuerpo.classList.add("dark-mode");
    alternadorTema.textContent = "☀️";
}

alternadorTema.addEventListener("click", () => {
    cuerpo.classList.toggle("dark-mode");
    
    if (cuerpo.classList.contains("dark-mode")) {
        alternadorTema.textContent = "☀️";
        localStorage.setItem("tema", "oscuro");
    } else {
        alternadorTema.textContent = "🌙";
        localStorage.setItem("tema", "claro");
    }
});

Entregable (Google ClassRoom)

Deberán entregar:

Los 3 archivos sueltos
Contenido funcional
Código comentado de forma básica

Nota importante: Esta actividad representa la versión final de la Landing Page Personal. No se aceptarán entregas incompletas ni con errores críticos de funcionamiento.