Proyecto final HTML + CSS: crear una página web completa y responsive

Proyecto final de HTML y CSS: construí una landing page completa y responsive desde cero usando Flexbox, Grid, media queries y posicionamiento.


En esta serie aprendimos HTML y CSS desde sus fundamentos hasta Flexbox, Grid, responsive design y posicionamiento. Ahora vamos a integrar todo en un proyecto completo.

El objetivo será construir una landing page responsive para una academia ficticia llamada CodeStart.

Importante: este proyecto utiliza solamente HTML y CSS. Todavía no hay lógica ni interacción programada con JavaScript.

Qué vamos a construir

La página tendrá:

  • cabecera con navegación;
  • sección principal o hero;
  • tarjetas de cursos;
  • sección de beneficios;
  • llamada a la acción;
  • pie de página;
  • diseño responsive;
  • Flexbox y CSS Grid;
  • posicionamiento y elementos decorativos.

Estructura de archivos

Creá una carpeta para el proyecto y dentro guardá estos archivos:

codestart/
|
|-- index.html
|-- styles.css

Recordá que el archivo HTML debe guardarse realmente con extensión .html. Por ejemplo: index.html.

Paso 1: crear el HTML

Este será nuestro archivo index.html completo:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeStart - Aprendé desarrollo web</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <header class="cabecera">
        <div class="contenedor cabecera-interior">

            <a href="#" class="logo">
                CodeStart
            </a>

            <nav class="menu">
                <a href="#cursos">Cursos</a>
                <a href="#beneficios">Beneficios</a>
                <a href="#contacto">Contacto</a>
            </nav>

        </div>
    </header>

    <main>

        <section class="hero">

            <div class="contenedor hero-grid">

                <div class="hero-contenido">

                    <span class="etiqueta">
                        Aprendé paso a paso
                    </span>

                    <h1>
                        Empezá hoy tu camino en desarrollo web
                    </h1>

                    <p>
                        Aprendé HTML, CSS y JavaScript con ejercicios,
                        proyectos y explicaciones claras.
                    </p>

                    <a href="#cursos" class="boton">
                        Ver cursos
                    </a>

                </div>

                <div class="hero-tarjeta">

                    <span class="badge">
                        Ruta recomendada
                    </span>

                    <h2>Desarrollo Web</h2>

                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JavaScript</li>
                    </ul>

                </div>

            </div>

        </section>

        <section id="cursos" class="seccion">

            <div class="contenedor">

                <div class="titulo-seccion">
                    <span>Cursos</span>
                    <h2>Empezá por los fundamentos</h2>
                    <p>
                        Una ruta progresiva para aprender desde cero.
                    </p>
                </div>

                <div class="grid-cursos">

                    <article class="curso">
                        <span class="numero">01</span>
                        <h3>HTML</h3>
                        <p>
                            Aprendé a estructurar correctamente una página web.
                        </p>
                    </article>

                    <article class="curso">
                        <span class="numero">02</span>
                        <h3>CSS</h3>
                        <p>
                            Diseñá interfaces, layouts y sitios responsive.
                        </p>
                    </article>

                    <article class="curso">
                        <span class="numero">03</span>
                        <h3>JavaScript</h3>
                        <p>
                            Incorporá comportamiento e interacción a tus páginas.
                        </p>
                    </article>

                </div>

            </div>

        </section>

        <section id="beneficios" class="seccion beneficios">

            <div class="contenedor beneficios-grid">

                <div>
                    <span class="subtitulo">Por qué aprender acá</span>
                    <h2>Aprender haciendo</h2>

                    <p>
                        La mejor forma de entender desarrollo web es escribir
                        código, cometer errores y resolver problemas reales.
                    </p>
                </div>

                <div class="lista-beneficios">

                    <article>
                        <h3>Ejemplos claros</h3>
                        <p>Código explicado paso a paso.</p>
                    </article>

                    <article>
                        <h3>Práctica constante</h3>
                        <p>Ejercicios para consolidar cada concepto.</p>
                    </article>

                    <article>
                        <h3>Proyectos reales</h3>
                        <p>Integración de conocimientos en proyectos completos.</p>
                    </article>

                </div>

            </div>

        </section>

        <section class="cta">

            <div class="contenedor cta-interior">

                <div>
                    <h2>¿Listo para empezar?</h2>
                    <p>
                        El mejor momento para practicar es ahora.
                    </p>
                </div>

                <a href="#cursos" class="boton boton-claro">
                    Comenzar
                </a>

            </div>

        </section>

    </main>

    <footer id="contacto" class="footer">

        <div class="contenedor footer-interior">

            <p>
                © CodeStart
            </p>

            <p>
                Proyecto educativo HTML + CSS
            </p>

        </div>

    </footer>

</body>
</html>

Paso 2: crear los estilos base

Ahora abrí styles.css.

Empezamos normalizando el modelo de caja y definiendo estilos generales:

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #1f2937;
    background-color: #ffffff;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.contenedor {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

Paso 3: cabecera y navegación

Usaremos Flexbox para distribuir el logo y el menú.

.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e5e7eb;
}

.cabecera-interior {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

.logo {
    color: #007bff;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.menu a {
    text-decoration: none;
    font-weight: 600;
}

Paso 4: sección principal

El hero combinará Grid, tipografía adaptable y un fondo degradado.

.hero {
    padding: clamp(4rem, 9vw, 8rem) 0;
    color: white;
    background: linear-gradient(135deg, #0b1220, #1e3a8a);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

.hero h1 {
    max-width: 760px;
    margin: 1rem 0;
    font-size: clamp(2.5rem, 7vw, 4.8rem);
    line-height: 1.05;
}

.hero-contenido p {
    max-width: 650px;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: #dbeafe;
}

.etiqueta,
.subtitulo {
    display: inline-block;
    color: #93c5fd;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.boton {
    display: inline-block;
    padding: 0.9rem 1.4rem;
    color: white;
    background-color: #007bff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

Paso 5: tarjeta destacada y posicionamiento

Vamos a aprovechar position: relative y absolute para ubicar una etiqueta.

.hero-tarjeta {
    position: relative;
    padding: 2rem;
    color: #0b1220;
    background-color: white;
    border-radius: 16px;
}

.hero-tarjeta ul {
    margin: 1.5rem 0 0;
    padding-left: 1.2rem;
}

.badge {
    position: absolute;
    top: -14px;
    right: 20px;
    padding: 0.45rem 0.8rem;
    color: #0b1220;
    background-color: #fbbf24;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}

Paso 6: sección de cursos con CSS Grid

.seccion {
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.titulo-seccion {
    max-width: 680px;
    margin-bottom: 2.5rem;
}

.titulo-seccion > span {
    color: #007bff;
    font-weight: 700;
    text-transform: uppercase;
}

.titulo-seccion h2 {
    margin: 0.5rem 0;
    font-size: clamp(2rem, 4vw, 3rem);
}

.grid-cursos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.curso {
    position: relative;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background-color: #ffffff;
}

.numero {
    display: inline-block;
    margin-bottom: 1rem;
    color: #007bff;
    font-weight: 700;
}

.curso h3 {
    margin: 0 0 0.7rem;
    font-size: 1.5rem;
}

Paso 7: beneficios

.beneficios {
    background-color: #f8fafc;
}

.beneficios-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.beneficios h2 {
    margin: 0.5rem 0 1rem;
    font-size: clamp(2rem, 4vw, 3rem);
}

.lista-beneficios {
    display: grid;
    gap: 1rem;
}

.lista-beneficios article {
    padding: 1.4rem;
    background-color: white;
    border-left: 4px solid #007bff;
    border-radius: 8px;
}

.lista-beneficios h3 {
    margin-top: 0;
}

Paso 8: llamada a la acción

.cta {
    padding: 3rem 0;
    color: white;
    background-color: #007bff;
}

.cta-interior {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}

.cta h2,
.cta p {
    margin-top: 0;
}

.boton-claro {
    color: #0b1220;
    background-color: white;
}

Paso 9: footer

.footer {
    padding: 2rem 0;
    color: #cbd5e1;
    background-color: #0b1220;
}

.footer-interior {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer p {
    margin: 0;
}

Paso 10: hacerlo responsive

El diseño base fue pensado primero para pantallas pequeñas. Ahora ampliamos el layout cuando tenemos más espacio.

@media (min-width: 768px) {

    .cabecera-interior {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    }

    .beneficios-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .cta-interior {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .footer-interior {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

CSS completo

Si preferís comparar el resultado final, este es el archivo styles.css completo:

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #1f2937;
    background-color: #ffffff;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.contenedor {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e5e7eb;
}

.cabecera-interior {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

.logo {
    color: #007bff;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.menu a {
    text-decoration: none;
    font-weight: 600;
}

.hero {
    padding: clamp(4rem, 9vw, 8rem) 0;
    color: white;
    background: linear-gradient(135deg, #0b1220, #1e3a8a);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

.hero h1 {
    max-width: 760px;
    margin: 1rem 0;
    font-size: clamp(2.5rem, 7vw, 4.8rem);
    line-height: 1.05;
}

.hero-contenido p {
    max-width: 650px;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: #dbeafe;
}

.etiqueta,
.subtitulo {
    display: inline-block;
    color: #93c5fd;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.boton {
    display: inline-block;
    padding: 0.9rem 1.4rem;
    color: white;
    background-color: #007bff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

.hero-tarjeta {
    position: relative;
    padding: 2rem;
    color: #0b1220;
    background-color: white;
    border-radius: 16px;
}

.hero-tarjeta ul {
    margin: 1.5rem 0 0;
    padding-left: 1.2rem;
}

.badge {
    position: absolute;
    top: -14px;
    right: 20px;
    padding: 0.45rem 0.8rem;
    color: #0b1220;
    background-color: #fbbf24;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}

.seccion {
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.titulo-seccion {
    max-width: 680px;
    margin-bottom: 2.5rem;
}

.titulo-seccion > span {
    color: #007bff;
    font-weight: 700;
    text-transform: uppercase;
}

.titulo-seccion h2,
.beneficios h2 {
    margin: 0.5rem 0 1rem;
    font-size: clamp(2rem, 4vw, 3rem);
}

.grid-cursos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.curso {
    position: relative;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background-color: #ffffff;
}

.numero {
    display: inline-block;
    margin-bottom: 1rem;
    color: #007bff;
    font-weight: 700;
}

.curso h3 {
    margin: 0 0 0.7rem;
    font-size: 1.5rem;
}

.beneficios {
    background-color: #f8fafc;
}

.beneficios-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.lista-beneficios {
    display: grid;
    gap: 1rem;
}

.lista-beneficios article {
    padding: 1.4rem;
    background-color: white;
    border-left: 4px solid #007bff;
    border-radius: 8px;
}

.lista-beneficios h3 {
    margin-top: 0;
}

.cta {
    padding: 3rem 0;
    color: white;
    background-color: #007bff;
}

.cta-interior {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}

.cta h2,
.cta p {
    margin-top: 0;
}

.boton-claro {
    color: #0b1220;
    background-color: white;
}

.footer {
    padding: 2rem 0;
    color: #cbd5e1;
    background-color: #0b1220;
}

.footer-interior {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer p {
    margin: 0;
}

@media (min-width: 768px) {

    .cabecera-interior {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    }

    .beneficios-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .cta-interior {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .footer-interior {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

Qué conceptos estamos integrando

Este proyecto utiliza prácticamente toda la ruta de CSS:

  • selectores;
  • clases;
  • modelo de caja;
  • tipografías;
  • colores y fondos;
  • unidades relativas;
  • clamp();
  • Flexbox;
  • CSS Grid;
  • gap;
  • minmax();
  • responsive design;
  • media queries;
  • mobile-first;
  • position: sticky;
  • position: absolute;
  • z-index.

Cómo probar el proyecto

Guardá ambos archivos y abrí index.html con tu navegador.

Después:

  • agrandá y achicá la ventana;
  • probá el modo responsive de las herramientas de desarrollo;
  • verificá que no aparezca scroll horizontal;
  • observá cómo cambia el hero a partir de 768px;
  • comprobá cómo las tarjetas se reorganizan automáticamente.

Mejoras para practicar por tu cuenta

Podés continuar el proyecto agregando:

  • una imagen real en el hero;
  • más tarjetas;
  • una sección de testimonios;
  • un formulario de contacto;
  • estados :hover para enlaces y botones;
  • transiciones CSS;
  • un menú específico para pantallas pequeñas;
  • una segunda página;
  • una paleta de colores propia.

HTML, CSS y el siguiente paso

Con HTML ya podemos definir la estructura y el significado del contenido.

Con CSS podemos controlar la presentación, el layout y la adaptación visual.

Pero todavía nuestro sitio no puede reaccionar realmente a acciones del usuario, tomar decisiones o modificar dinámicamente el contenido.

Ahí entra JavaScript.

HTML       → estructura y contenido
CSS        → estilos y presentación
JavaScript → comportamiento e interacción

Ruta completada

Si llegaste hasta acá, ya recorriste una base muy sólida de HTML y CSS.

La guía anterior fue:

Posicionamiento en CSS: static, relative, absolute, fixed, sticky y z-index

El próximo gran paso de la ruta será:

Introducción a JavaScript: qué es, cómo funciona y para qué se utiliza.

¿Te sirvió este proyecto? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Descubre más desde Club Programador

Suscríbete y recibe las últimas entradas en tu correo electrónico.

Un comentario en “Proyecto final HTML + CSS: crear una página web completa y responsive”

  1. Pingback: Posicionamiento CSS: relative, absolute, fixed, sticky y z-index

Deja un comentario

Descubre más desde Club Programador

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo