Comprendre le Web, HTML (structure), CSS (style), structure de base HTML, balises essentielles (titres, paragraphes, liens, images), introduction aux styles CSS simples, environnement de travail.
Créer un premier document HTML/CSS, ajouter et styliser un lien, insérer une image et styliser le fond, formater du texte.
Ma Page de Présentation Personnelle (v1).
Sémantique HTML (<header>, <nav>, <main>, etc.), liaison CSS externe, sélecteurs CSS (type, classe, ID, descendant, :hover).
Structure sémantique d'un article, utilisation des sélecteurs de classe/ID, sélecteurs descendants et :hover.
Refactorisation et Stylisation Avancée de la Page de Présentation (v2).
Modèle de Boîte (content, padding, border, margin), box-sizing, propriété display (block, inline, inline-block), stylisation des listes, propriétés de texte.
Maîtrise du Box Model, comprendre display, impact de box-sizing, stylisation de listes et texte.
Création d'une Carte de Produit Simple.
CSS Grid (conteneur, éléments), définir la grille (grid-template-columns/rows, gap), alignement, placer les éléments (grid-area), introduction au Responsive Design et Media Queries (Mobile-First, syntaxe).
Grille basique 3 colonnes, grille avec zones nommées, grille réactive (introduction Media Queries), galerie d'images Grid.
Création d'un Layout de Page Complexe (avec Grid, responsive).
Flexbox (conteneur, éléments), axes, propriétés du conteneur (flex-direction, justify-content, align-items, flex-wrap, gap), propriétés des éléments (flex-grow/shrink/basis, align-self, order).
Centrer des éléments, distribution d'espace et croissance, barre de navigation horizontale, carte de produit flexible.
Création d'un Layout de Galerie d'Images Flexible.
Positionnement CSS (static, relative, absolute, fixed, sticky), propriété z-index.
Boîte relative décalée, icône absolue dans conteneur, barre de navigation fixe, section sticky.
Création d'une Modale (Pop-up).
Rappel S1-S6 (HTML, sélecteurs, Box Model, display, Grid, Flexbox, Positionnement), synergie Grid/Flexbox, Responsive Design, positionnement pour détails.
Reconstruction d'une Page Complexe (Grid global, Flexbox interne, responsive, élément fixe).
Unités de mesure (absolues: px, pt; relatives: em, rem, %, vw, vh, vmin, vmax), Transitions CSS (transition-property, -duration, -timing-function, -delay, syntaxe raccourcie).
Création d'un bouton avec des effets de survol fluides, conception d'une carte de contenu dont la taille s'adapte au viewport et qui réagit au survol.
Création d'un Bouton Interactif et d'une Carte Responsive (unités relatives, transitions, effets de survol).
Variables CSS, Transformations CSS (2D/3D), pseudo-classes/éléments avancés (:nth-child, ::before/::after), Animations CSS (@keyframes), introduction aux Frameworks CSS (Tailwind CSS), SVG, filtres, dégradés, animations pilotées par le scroll.
Gestion de Thème avec Variables CSS, Effets Visuels avec Transformations 2D et 3D, Liste Stylisée avec Pseudo-classes et Pseudo-éléments, Animation CSS (Loader), Création de Composant avec Tailwind CSS.
Conception d'une Card de Produit Interactive (variables, transforms, animations, pseudo-éléments, Tailwind, SVG, filtres, dégradés).
Refactorisation d'un CV (HTML sémantique, unités rem, Design System).
Projet de Synthèse Final : Portfolio de Photographe (page complète responsive intégrant Grid, Flexbox, variables, transformations, animations, pseudo-éléments, formulaire, A11Y, Container Queries).