Portafolio HTML Tailwind en 1 día explicado simplemente (con diagramas y código real)
Portfolio HTML Tailwind 1 día: lo esencial en un artículo — código real, diagramas y pasos concretos, extractos de un curso de 46 lecciones.
Una guía que va al grano: Portfolio HTML Tailwind 1jour diseccionada con diagramas, ejemplos concretos y comandos probados. Todo proviene de un curso estructurado de 11 capítulos — aquí tienes lo mejor.
- Introducción y Configuración Express
- Bases HTML5 para Portfolio
- Fundamentos de Tailwind CSS
- Sección Hero y Navegación
- Secciones About Competencias y Proyectos
Personalizar tailwind.config.js – colores, fuentes
tailwind.config.js: añadir tus propios colores de marca, tus fuentes y extender la paleta sin romper las utilidades existentes.Objetivos pedagógicos
- Comprender la diferencia entre
themeytheme.extend - Añadir un color de marca personalizado
- Declarar una gama de colores (50 a 900)
- Registrar una fuente personalizada en
fontFamily - Utilizar estos valores personalizados en tus clases
theme vs theme.extend
El núcleo de la personalización de Tailwind es el objeto theme. La clave trampa es elegir correctamente entre escribir directamente en theme (que reemplaza todo) o en theme.extend (que añade sin romper nada).
| Enfoque | Efecto | Cuándo utilizarlo |
|---|---|---|
theme: {...} | Reemplaza completamente el valor por defecto | Raro, sistema de diseño muy estricto |
theme.extend: {...} | Añade a los valores por defecto | Casi siempre |
theme.colors sin extend, pierdes todos los colores por defecto de Tailwind (red, blue, gray...). Utiliza casi siempre extend.Añadir un color de marca
Digamos que tu marca utiliza un violeta específico. Lo añadimos en extend.colors.
Gama completa
El objeto 50–900 genera bg-marque-50 hasta bg-marque-900.
Registrar una fuente personalizada
Para utilizar una fuente como Inter o Poppins, la añadimos en fontFamily. El nombre se convierte en una utilidad font-....
Filtros de proyectos con data-attributes
data-* y un mini script JavaScript de pocas líneas.Objetivos pedagógicos
- Comprender qué es un atributo
data-*y para qué sirve - Categorizar cada tarjeta de proyecto mediante
data-categorie - Crear una barra de botones de filtro
- Escribir el JavaScript que muestra/oculta las tarjetas
- Gestionar el estado activo del botón seleccionado
¿Qué es un data-attribute?
Un data-attribute es un atributo HTML personalizado que comienza por data-. Sirve para almacenar información en un elemento sin afectar su visualización. Por ejemplo, data-categorie="web" indica a JavaScript que esta tarjeta pertenece a la categoría "web". Es una forma limpia y estándar de vincular tus datos a tus elementos.
| Atributo | Ejemplo | Acceso en JS |
|---|---|---|
data-categorie | data-categorie="web" | el.dataset.categorie |
data-filtre | data-filtre="mobile" | el.dataset.filtre |
data-annee | data-annee="2026" | el.dataset.annee |
data-categorie se lee mediante element.dataset.categorie. El prefijo data- desaparece y el guion se convierte en camelCase si el nombre está compuesto (data-ma-cle → dataset.maCle).Paso 1: categorizar las tarjetas
Añadimos un data-categorie en cada tarjeta de proyecto construida en el módulo anterior.
hidden por un conjunto de clases opacity-0 scale-95 + transition, y gestiona la aparición con un pequeño retraso. El efecto es más elegante que una desaparición brusca.<script> justo antes de la etiqueta </body> o utiliza el atributo defer. De lo contrario el script se ejecuta antes de que existan los botones y querySelectorAll devuelve una lista vacía.Imágenes responsive y elemento picture
srcset y a la etiqueta <picture>, para un portfolio rápido que no haga descargar una imagen 4K a un teléfono.Objetivos pedagógicos
- Comprender por qué una única imagen para todas las pantallas es un problema
- Utilizar
srcsetysizespara múltiples resoluciones - Utilizar
<picture>para la dirección artística - Mantener una proporción fija con Tailwind (
aspect-) - Evitar el layout shift (CLS) con
widthyheight
El problema de una imagen única
Si sirves la misma imagen de 2000 px de ancho a todo el mundo, el teléfono descarga megabytes innecesarios para mostrarlos en 375 px. Es lento, cuesta datos al usuario y hunde tu puntuación Lighthouse.
La solución moderna: proporcionar varias versiones de la misma imagen y dejar que el navegador elija la más adecuada al tamaño real de visualización y a la densidad de la pantalla.
srcset y sizes: múltiples resoluciones
El atributo srcset lista varios archivos con su anchura intrínseca (en w). El atributo sizes indica al navegador la anchura de visualización prevista según la pantalla.
picture
Imágenes diferentes según una consulta media. Para la dirección artística (recorte, orientación).
Mantener una proporción limpia con Tailwind
Para evitar que tus imágenes se deformen, Tailwind ofrece las utilidades aspect- y object-cover.
Este artículo cubre los extractos más útiles — el curso completo Portfolio HTML Tailwind 1jour (11 capítulos, 46 lecciones, ejercicios corregidos y proyecto final) te lleva hasta el final.
./acceder-au-cours-complet cours gratuit : Vibe CodingFAQ
¿Cuánto tiempo se tarda en aprender Portfolio HTML Tailwind 1jour?
¿Se necesitan requisitos previos?
¿Por dónde empezar concretamente?
📬 ¿Quieres recibir este tipo de guía cada semana? Suscríbete gratis — código real, cero palabrería.