Portfolio HTML Tailwind 1jour expliqué simplement (avec schémas et vrai code)
Portfolio HTML Tailwind 1jour : l'essentiel en un article — vrai code, schémas et étapes concrètes, extraits d'un cours de 46 leçons.
Un guide qui va droit au but : Portfolio HTML Tailwind 1jour décortiqué avec des schémas, des exemples concrets et des commandes testées. Tout vient d'un cours structuré de 11 chapitres — en voici le meilleur.
- Introduction et Setup Express
- Bases HTML5 pour Portfolio
- Tailwind CSS Fondamentaux
- Section Hero et Navigation
- Sections About Competences et Projets
Personnaliser tailwind.config.js – couleurs, fonts
tailwind.config.js : ajouter vos propres couleurs de marque, vos polices, et étendre la palette sans casser les utilitaires existants.Objectifs pédagogiques
- Comprendre la différence entre
themeettheme.extend - Ajouter une couleur de marque personnalisée
- Déclarer une nuance de couleurs (50 à 900)
- Enregistrer une police custom dans
fontFamily - Utiliser ces valeurs custom dans vos classes
theme vs theme.extend
Le cœur de la personnalisation Tailwind est l'objet theme. La clé piège est de bien choisir entre écrire directement dans theme (qui remplace tout) ou dans theme.extend (qui ajoute sans rien casser).
| Approche | Effet | Quand l'utiliser |
|---|---|---|
theme: {...} | Remplace complètement la valeur par défaut | Rare, design system très strict |
theme.extend: {...} | Ajoute aux valeurs par défaut | Presque toujours |
theme.colors sans extend, vous perdez toutes les couleurs Tailwind par défaut (red, blue, gray...). Utilisez presque toujours extend.Ajouter une couleur de marque
Disons que votre marque utilise un violet spécifique. On l'ajoute dans extend.colors.
Nuance complète
L'objet 50–900 donne bg-marque-50 jusqu'à bg-marque-900.
Enregistrer une police custom
Pour utiliser une police comme Inter ou Poppins, on l'ajoute dans fontFamily. Le nom devient un utilitaire font-....
Filtres de projets avec data-attributes
data-* et un mini script JavaScript de quelques lignes.Objectifs pédagogiques
- Comprendre ce qu'est un attribut
data-*et à quoi il sert - Catégoriser chaque card de projet via
data-categorie - Créer une barre de boutons de filtre
- Écrire le JavaScript qui montre/cache les cards
- Gérer l'état actif du bouton sélectionné
Qu'est-ce qu'un data-attribute ?
Un data-attribute est un attribut HTML personnalisé qui commence par data-. Il sert à stocker une information sur un élément sans affecter son affichage. Par exemple, data-categorie="web" indique à JavaScript que cette card appartient à la catégorie "web". C'est un moyen propre et standard de lier vos données à vos éléments.
| Attribut | Exemple | Accès 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 lit via element.dataset.categorie. Le préfixe data- disparaît et le tiret devient du camelCase si le nom est composé (data-ma-cle → dataset.maCle).Étape 1 : catégoriser les cards
On ajoute un data-categorie sur chaque card de projet construite au module précédent.
hidden par un jeu de classes opacity-0 scale-95 + transition, et gérez l'apparition avec un petit délai. L'effet est plus élégant qu'une disparition brutale.<script> juste avant la balise </body> ou utilisez l'attribut defer. Sinon le script s'exécute avant que les boutons existent et querySelectorAll renvoie une liste vide.Images responsive et picture element
srcset et à la balise <picture>, pour un portfolio rapide qui ne fait pas télécharger une image 4K à un téléphone.Objectifs pédagogiques
- Comprendre pourquoi une seule image pour tous les écrans est un problème
- Utiliser
srcsetetsizespour des résolutions multiples - Utiliser
<picture>pour l'art direction - Garder un ratio fixe avec Tailwind (
aspect-) - Éviter le layout shift (CLS) avec
widthetheight
Le problème d'une image unique
Si vous servez la même image 2000px de large à tout le monde, le téléphone télécharge des mégaoctets inutiles pour les afficher dans 375px. C'est lent, ça coûte de la data à l'utilisateur, et ça plombe votre score Lighthouse.
La solution moderne : fournir plusieurs versions de la même image et laisser le navigateur choisir la plus adaptée à la taille réelle d'affichage et à la densité de l'écran.
srcset et sizes : plusieurs résolutions
L'attribut srcset liste plusieurs fichiers avec leur largeur intrinsèque (en w). L'attribut sizes indique au navigateur la largeur d'affichage prévue selon l'écran.
picture
Images différentes selon une media query. Pour l'art direction (recadrage, orientation).
Garder un ratio propre avec Tailwind
Pour éviter que vos images se déforment, Tailwind propose les utilitaires aspect- et object-cover.
Cet article couvre les extraits les plus utiles — le cours complet Portfolio HTML Tailwind 1jour (11 chapitres, 46 leçons, exercices corrigés et projet final) t'emmène jusqu'au bout.
./acceder-au-cours-complet cours gratuit : Vibe CodingFAQ
Combien de temps pour apprendre Portfolio HTML Tailwind 1jour ?
Faut-il des prérequis ?
Par où commencer concrètement ?
📬 Tu veux recevoir ce type de guide chaque semaine ? Abonne-toi gratuitement — code réel, zéro blabla.