Exercices CSS Fondamentaux

Tâche : Écrivez un reset CSS moderne avec : reset * (box-sizing, margin, padding), règles body (font, color, bg), reset images, liens et boutons.

/* Reset CSS ici */

Tâche : Stylez une .card avec border-radius, box-shadow, et un effet hover avec transform translateY + box-shadow + transition.

.card { /* Style ici */ }

Tâche : Créez une navbar avec Flexbox : logo à gauche, liens à droite, hauteur fixe, sticky top 0, hover sur les liens.

.navbar { /* Flexbox navbar */ }

Tâche : Créez un layout de cartes flexibles avec flex-wrap: wrap et flex: 1 1 280px pour que les cartes s'adaptent à l'écran.

.cards-container { /* flex wrap */ }

Tâche : Créez une grille de cartes auto-responsive avec repeat(auto-fill, minmax(260px, 1fr)).

.grid-cards { /* CSS Grid */ }

Tâche : Créez un layout 3 zones (header, sidebar+main, footer) avec grid-template-areas.

.page { /* grid-template-areas */ }

Tâche : Créez un design system avec des variables CSS dans :root (couleurs, espacement, radius) et utilisez-les pour styler un bouton.

:root { /* Vos variables */ } .btn { /* Utilisation des variables */ }

Tâche : Écrivez du CSS mobile first avec 2 breakpoints (768px, 1024px). Images responsives. Dark mode avec prefers-color-scheme.

/* Mobile first */ .container { padding: 1rem; } @media (min-width: 768px) { /* Tablette */ } @media (min-width: 1024px) { /* Desktop */ }

Tâche : Créez : header sticky, modal overlay (position fixed), animation fadeInUp (@keyframes) et loader spinner.

.header { /* sticky */ } .modal-overlay { /* fixed */ } @keyframes fadeInUp { /* animation */ }

Tâche finale : Écrivez le CSS complet d'une page avec : reset, variables, Grid layout (header/sidebar/main/footer), grille de cards responsive, hover, et media query mobile.

:root { /* variables */ } /* Reset, layout, composants, responsive */