Proyectos de HTML y CSS para mejorar tus habilidades frontend

Casi todos los principiantes en desarrollo frontend se topan con este muro.

Los tutoriales empiezan a desdibujarse en tu mente. Ya sabes lo que es un div. Puedes mirar de reojo la hoja de estilos de otra persona y entender qué está pasando. ¿Tres videos de Flexbox? Vistos. Pero cuando abres un archivo index.html en blanco y el cursor parpadea frente a ti, el cerebro se te queda completamente en blanco.

Otro tutorial no es la solución. Un proyecto sí lo es.

Algo lo suficientemente pequeño como para terminarlo en un fin de semana, con un resultado visible que puedas mostrarle a un amigo. El HTML y el CSS se te quedan grabados cuando los escribes, los rompes y luego vuelves para arreglar lo que rompiste.

Las rutas de HTML y CSS están entre las más activas de la plataforma Coddy. Y quienes siguen adelante el tiempo suficiente como para sentirse seguros con el código frontend hacen lo siguiente: terminar pequeños proyectos de forma regular. No esperan a "saber lo suficiente". Construyen, se topan con obstáculos, buscan soluciones y siguen adelante.

Esta guía te ofrece 18 proyectos de HTML y CSS ordenados por nivel de dificultad, desde un sitio web de una sola página hasta un carrusel hecho solo con CSS. No se trata de que los construyas todos. Elige uno este fin de semana y termínalo.

Por qué los proyectos son mejores que ver más tutoriales

Leer código da una sensación de productividad. El problema es que no lo es.

Un mes viendo videos de YouTube puede dejarte igualmente incapaz de armar una página de destino (landing page) básica, porque ver y escribir activan "músculos" diferentes. El CSS, en particular, hay que escribirlo para que se te quede grabado, ya que gran parte consiste en pequeños y minuciosos ajustes que solo se aprenden mediante prueba y error.

¡Los proyectos también te obligan a buscar información! El trabajo de frontend consiste en un 30% en escribir código y un 70% en buscar en MDN, leer documentación y averiguar por qué un elemento está desalineado por dos píxeles. Los tutoriales ocultan todo eso.

Lo otro que te dan los proyectos es algo tangible que mostrar. Es difícil sentirse realizado diciendo: "Estoy aprendiendo HTML y CSS". Pero "Creé esta página para un restaurante, aquí tienes el enlace" es algo que puedes enviarle a un amigo. Esa sensación de "esto lo hice yo" es lo que mantiene a la gente motivada durante las semanas difíciles.

Cómo configurar tu entorno (sáltatelo si ya lo tienes)

No necesitas una configuración compleja para HTML y CSS. Solo estas tres cosas:

1. Un editor de texto. VS Code es la opción predeterminada para la mayoría. Es gratuito y, una vez que lleves unos cuantos proyectos, valdrá la pena instalar algunas extensiones de CSS.
2. Un navegador. El que ya uses. Las herramientas de desarrollo (clic derecho, Inspeccionar) son la clave para depurar problemas de diseño y maquetación. Adquiere ese hábito desde el principio.
3. Una carpeta para cada proyecto. ¡Solo index.html y style.css para empezar! No te preocupes por herramientas de compilación, frameworks o "buenas prácticas" en tu primerísimo proyecto.

Si prefieres saltarte el paso de la configuración, las lecciones de HTML y CSS de Coddy se ejecutan en el navegador sin instalar nada. Esto es muy útil cuando quieres practicar un concepto específico sin tener que crear un proyecto desde cero. De lo contrario, una carpeta y un editor de texto son más que suficientes.

Proyectos de HTML y CSS para principiantes

Estos cinco proyectos utilizan lo básico: encabezados, párrafos, imágenes, listas, enlaces y un toque de color y espaciado. Tras unas cuantas lecciones de HTML y CSS, cualquiera de ellos se puede hacer en un par de horas.

1. Página de tributo

Elige a alguien a quien admires (un músico, un escritor, un atleta, un científico) y crea una página de tributo de una sola sección. Un encabezado grande, una imagen principal (hero image), una breve biografía, una cronología de su vida y una lista de enlaces para saber más. Todo el proyecto utiliza encabezados, párrafos, imágenes, listas y CSS básico para la tipografía y el espaciado. Es el clásico primer proyecto de HTML por una buena razón. No hay nada difícil aquí.

2. Página personal "Sobre mí"

Un sitio web personal de una sola página para presentarte. Una foto, una breve biografía, una lista de tus intereses y una sección con formas de contactarte. Puntos extra si lo subes a internet. GitHub Pages es gratis y solo toma unos minutos configurarlo. Así tendrás un enlace real para compartir.

3. Tarjeta de receta

Una receta con una imagen principal del plato, una lista de ingredientes, pasos numerados y el tiempo de preparación mostrado en una pequeña caja de detalles. Te enseñará la diferencia entre listas ordenadas y desordenadas, el redimensionamiento de imágenes y cómo hacer que una página con mucho contenido se sienta organizada en lugar de saturada.

4. Página de formulario de contacto

Una página con un formulario: nombre, correo electrónico, mensaje y botón de enviar. El formulario no tiene que enviar los datos a ningún lado todavía (eso es parte de JavaScript). El objetivo es familiarizarse con los elementos de formulario de HTML (input, textarea, label, button) y darles estilo para que no se vean con el diseño genérico y aburrido del navegador. Los formularios aparecen en casi todos los proyectos de frontend, así que acostumbrarte a ellos ahora te dará una gran ventaja.

5. Menú sencillo de restaurante

Un menú de una sola página para un restaurante ficticio. Categorías (entrantes, platos principales, postres), cada plato con su nombre y una breve descripción. Añade un banner principal en la parte superior y un pequeño pie de página con el horario. Te servirá para practicar cómo agrupar contenido en secciones, repetir estructuras de diseño y elegir una paleta de colores que se sienta coherente.

Proyectos intermedios (Flexbox, Grid, Diseños)

Aquí ya empezarás a estructurar los elementos correctamente, a lidiar con múltiples secciones y a lograr un resultado que parezca una página web real de internet. La mayoría de estos proyectos se apoyan en Flexbox o CSS Grid, que es exactamente la habilidad que necesitas entrenar.

6. Página de destino para un producto ficticio

Elige un producto (una aplicación, una herramienta SaaS, una marca de velas, lo que sea) y crea el tipo de página de destino (landing page) que verías en su web oficial. Una sección principal (hero) con un título llamativo y un botón de llamada a la acción (CTA). Abajo, una sección con tres características destacadas. Testimonios. Un pie de página con enlaces. Todo el proyecto es un excelente entrenamiento de Flexbox y Grid, además de una lección práctica sobre espaciado y jerarquía visual.

7. Sitio web de portafolio

Una página con varias secciones para mostrar tu trabajo, incluso si en este momento tu "trabajo" son solo dos páginas de tributo y una tarjeta de receta. Un encabezado con navegación, una sección principal, una cuadrícula de proyectos, una sección sobre ti y otra de contacto. Usa Grid para la distribución de los proyectos y Flexbox para la navegación y la sección principal.

Es un proyecto muy útil incluso si crees que aún no necesitas un portafolio. En el momento en que empieces a postularte a ofertas o a trabajar como freelance, ya tendrás uno listo.

8. Tabla de precios

Tres niveles de precios colocados uno al lado del otro, cada uno en su propia tarjeta con un nombre, una lista de características y un botón de llamada a la acción. Destaca la del medio como la opción "Más popular". Las tablas de precios parecen sencillas, pero tienen su truco: tarjetas de la misma altura, listas con viñetas alineadas y estados de hover en los botones. Una práctica excelente para dominar Flexbox.

9. Página de inicio de un blog

El índice de un blog: encabezado con navegación y buscador, un artículo destacado arriba, una cuadrícula de publicaciones recientes abajo, una barra lateral con categorías y comentarios recientes, y un pie de página al final. Este proyecto te enseñará a manejar un diseño de contenido con múltiples regiones, algo muy cercano a cómo se ve el desarrollo frontend en entornos de producción reales.

10. Página de inicio de sesión y registro

Dos páginas relacionadas (inicio de sesión en una, registro en la otra) con un formulario centrado, un encabezado con la marca y enlaces para alternar entre ambas. El desafío es lograr un diseño pulido sin sobrecargarlo. Las mejores páginas de inicio de sesión están bien alineadas y son un poco más atractivas de lo que el usuario espera. Un ejercicio excelente y subestimado para entrenar el buen gusto visual.

11. Maqueta de panel de control (Dashboard)

Un diseño de panel de control estático: navegación lateral a la izquierda, barra superior con información del usuario y un área de contenido principal con algunas tarjetas de estadísticas, un marcador de posición para un gráfico y una lista de actividad reciente. Sin interactividad por ahora. Este es un proyecto puramente de maquetación. Grid se encargará de la mayor parte del trabajo pesado. Al terminarlo, entenderás por qué existe CSS Grid y por qué quienes no lo han probado se siguen quejando de los diseños web.

Proyectos de animaciones y efectos con CSS

Ahora llegamos a la parte divertida. Proyectos más pequeños en alcance, pero con un uso más intensivo de CSS. Ideales para aprender transiciones, keyframes, transformaciones y pseudoclases como :hover y :focus.

12. Indicador de carga (Spinner)

Un indicador de carga hecho puramente con CSS. Intenta crear algunas variaciones: un anillo giratorio, tres puntos que rebotan, un círculo que pulsa o una barra de progreso que se llena repetidamente. Cada uno requiere unas 15 líneas de CSS y te enseñará a usar @keyframes, animation y transform.

13. Galería de imágenes con efectos de hover

Una cuadrícula de fotos donde, al pasar el cursor sobre cada una, se revela una descripción con una transición suave. Prueba diferentes efectos: una capa superpuesta que se desliza, un zoom en la imagen o un filtro de color que se desvanece. Este es el proyecto donde la propiedad transition suele hacer "clic" en la mente de la mayoría. También aprenderás a superponer elementos usando position: absolute.

14. Barra de navegación animada

Una barra de navegación con un logotipo a la izquierda y elementos de menú a la derecha, donde los elementos se subrayan al pasar el cursor con una animación de deslizamiento, y la página activa permanece subrayada. En dispositivos móviles, el menú se contrae en un icono de hamburguesa que abre un menú desplegable. Un patrón que usarás para siempre: estados animados en elementos interactivos, además de un comportamiento adaptativo (responsive) en diferentes tamaños de pantalla.

15. Tarjeta giratoria en CSS (Card Flip)

Una tarjeta que gira al pasar el cursor para revelar algo en el reverso (una frase, una definición, un detalle adicional). Utiliza transform: rotateY y backface-visibility, dos de esas propiedades de CSS que no se usan todos los días, pero que parecen mágicas la primera vez que funcionan. Un proyecto rápido con un gran subidón de confianza.

16. Deslizador de imágenes (Slider) solo con CSS

Un carrusel de imágenes con desplazamiento horizontal y controles de anterior/siguiente, construido completamente en CSS. Sin JavaScript. El truco consiste en usar botones de opción (radio buttons) ocultos fuera de la pantalla y el selector :checked para cambiar qué imagen está visible. Es un patrón ingenioso y te enseña todo lo que puedes lograr solo con CSS antes de recurrir a JS. Vale la pena hacerlo al menos una vez, incluso si normalmente lo construirías con JavaScript.

Proyectos avanzados de HTML y CSS

Estos últimos proyectos son para cuando lo básico ya te resulte rutinario y busques un verdadero desafío. Siguen siendo puramente de HTML y CSS (sin necesidad de JavaScript), pero pondrán a prueba tu capacidad de maquetación, precisión y paciencia.

17. Clonar una página de inicio famosa

Elige un sitio web real (la página de inicio de Netflix, la landing page de Spotify o la página de producto de Apple para un dispositivo específico) y reconstruye la parte visible en HTML y CSS con la mayor precisión posible. No es necesario que sea funcional, solo iguala el diseño, la tipografía, el espaciado y los colores.

Pasarás horas preguntándote cómo lograron ese padding exacto, luego aprenderás por qué las cuadrículas se miden de esa manera y empezarás a notar las decisiones de diseño en cada sitio web que visites. Los desarrolladores frontend suelen recordar este tipo de ejercicios durante años.

18. Arte con CSS

Dibuja algo utilizando únicamente elementos div y CSS. Hay personas que han creado ilustraciones asombrosamente detalladas de esta manera: personajes de caricaturas, paisajes, animales e incluso retratos. Empieza con algo sencillo: una taza de café, una carita sonriente o un robot básico.

Suena absurdo hasta que lo intentas. Luego se convierte en una lección magistral de position, border-radius, box-shadow, gradientes y transform. Al final, entenderás CSS a un nivel que la mayoría de los principiantes nunca alcanzan, solo por el hecho de intentar dibujar un círculo dentro de un rectángulo.

Dónde encaja Coddy

Las lecciones de HTML y CSS de Coddy están diseñadas para cubrir la brecha entre "Quiero aprender esto" y "Puedo construir un proyecto". Cada lección dura unos cinco minutos, escribes código real en el navegador y Bugsy (el asistente de IA integrado) está ahí cuando te atascas con cosas como por qué margin: auto no centra tu elemento verticalmente.

Toda la estructura está pensada para la práctica diaria. Cinco minutos aquí, cinco minutos allá; el mismo patrón que hace que la gente abra aplicaciones de idiomas cada mañana, pero aplicado a la programación. Si alguna vez has abandonado un curso a tu propio ritmo al llegar al 30%, probablemente este formato de lecciones breves era lo que te faltaba.

Tanto HTML como CSS están en el plan gratuito, todas las lecciones, sin configuraciones previas. Eso suele sorprender a la gente. ¡No te vas a topar con una barrera de pago a mitad de camino mientras aprendes Flexbox!

Algunos hábitos que te ayudarán

Antes de que elijas un proyecto, aquí tienes tres pequeños detalles que marcan una diferencia sorprendente:

Usa las herramientas de desarrollo del navegador. Haz clic derecho en cualquier elemento, selecciona Inspeccionar y observa el panel de estilos. Puedes editar el CSS en vivo en el navegador para ver qué pasaría. Es la mejor herramienta de depuración que usarás jamás, y ya viene gratis en todos los navegadores.

Diseña pensando primero en móviles (mobile-first). Empieza a escribir tu CSS para pantallas pequeñas y luego añade media queries para que se vea bien en pantallas más grandes. Hacerlo al revés es mucho más difícil. Este es el patrón que utiliza la mayoría del código frontend moderno, así que acostumbrarte ahora te ahorrará tener que rehacer trabajo más adelante.

Lanza primero la versión fea. Haz que la página funcione con contenido de relleno y un diseño básico. Ya la pulirás después. El error en el que caen muchos principiantes es pasar tres horas diseñando el botón perfecto antes de darse cuenta de que la estructura de la página no funciona y que ahora tienen que rehacerlo todo.

Qué construir después

Si terminas un proyecto y el siguiente te parece el paso lógico, es una buena señal. ¡Estás listo!

Elige el siguiente de esta lista y empieza. No esperes a sentirte "lo suficientemente preparado", porque esa sensación nunca llega. Simplemente, un día te darás cuenta de que ya has construido seis cosas y la séptima te parecerá totalmente viable.

Si no sabes cuál elegir, opta por el que te intimide un poco. Los saltos de habilidad ocurren cuando sales de tu zona de confort, no cuando te quedas en ella.

Y si te estás topando con muros en los conceptos básicos (selectores que no funcionan, diseños que se rompen, Flexbox que no hace nada), aléjate del proyecto por una sesión y repasa algunas lecciones enfocadas para cubrir esos vacíos.

Las rutas de HTML y CSS de Coddy están diseñadas exactamente para eso: una práctica corta y dirigida sobre el concepto en el que te has atascado, para luego volver de inmediato a tu proyecto.