Héros	Force
Iron Man	85

1 Étape 1 : Créer et lier le fichier CSS

🎨 Objectif de cette étape :

🔗

CSS lié au HTML

Test de connexion réussi

✅ Objectifs :

• Créer le fichier css/style.css
• Vérifier la connexion HTML-CSS
• Test avec un style temporaire

📋 Techniques CSS :

Liaison HTML-CSS :

• <link rel="stylesheet" href="css/style.css">
• body { background-color: lightgreen; }

📖 Références :

• CSS Bases - Section "CSS Externe"
• Structure de fichiers recommandée

🎯 Instructions :

1. Créez le fichier css/style.css
2. Vérifiez le lien dans votre HTML
3. Ajoutez un test : body { background-color: lightgreen; }
4. Ouvrez dans le navigateur pour valider

2 Étape 2 : Reset CSS et base du body

🎨 Résultat :

AVENGERS

Base propre et professionnelle

✅ Objectifs :

• Supprimer les marges par défaut
• Dégradé de fond Avengers
• Police moderne

📋 Propriétés CSS :

Reset et Body :

• * { margin: 0; padding: 0; }
• linear-gradient(135deg, #1e3c72, #2a5298)
• color: white
• min-height: 100vh

📖 Références :

• CSS Bases - Box Model
• Reset CSS et bonnes pratiques

🎯 Instructions :

1. Supprimez le test précédent
2. Ajoutez le reset universel *
3. Stylisez le body avec le dégradé
4. Testez le résultat

3 Étape 3 : Styliser le header

🎨 Résultat :

AVENGERS

✅ Objectifs :

• Header avec fond semi-transparent
• Titre AVENGERS en or XXL
• Effet 3D avec ombre portée

📋 Propriétés CSS :

Header et titre :

• background: rgba(0,0,0,0.8)
• text-shadow: 2px 2px 4px rgba(0,0,0,0.7)
• letter-spacing: 3px
• border-bottom: 3px solid #FFD700

📖 Références :

• CSS Bases - Propriétés de texte
• Effets visuels et transparence

🎯 Instructions :

1. Ciblez l'élément header
2. Ajoutez le fond semi-transparent
3. Stylisez le h1 avec les effets
4. Testez l'effet 3D

4 Étape 4 : Navigation interactive

🎨 Résultat :

✅ Objectifs :

• Navigation avec Flexbox
• Boutons avec effets hover
• Transitions fluides

📋 Propriétés CSS :

Flexbox et interactions :

• display: flex; justify-content: center
• gap: 20px
• :hover et transition
• transform: translateY(-2px)

📖 Références :

• CSS Flexbox - Navigation moderne
• CSS Bases - Pseudo-classes

🎯 Instructions :

1. Activez Flexbox sur nav
2. Stylisez les liens nav a
3. Ajoutez les effets :hover
4. Testez l'interactivité

5 Étape 5 : Section d'accueil stylisée

🎨 Résultat :

Bienvenue chez les Avengers

Les plus puissants héros de la Terre s'unissent...

✅ Objectifs :

• Container centré avec largeur max
• Fond semi-transparent
• Typographie optimisée

📋 Propriétés CSS :

Layout et centrage :

• max-width: 1200px; margin: 0 auto
• background: rgba(255,255,255,0.05)
• border-radius: 15px
• line-height: 1.8

📖 Références :

• CSS Bases - Box Model
• Techniques de centrage moderne

🎯 Instructions :

1. Créez le container main
2. Stylisez la section #accueil
3. Optimisez la typographie
4. Testez le centrage

6 Étape 6 : Images responsives et stylées

🎨 Résultat :

IMAGE AVENGERS

✅ Objectifs :

• Images adaptables
• Bordure dorée élégante
• Effets hover

📋 Propriétés CSS :

Images responsives :

• max-width: 100%; height: auto
• border: 3px solid rgba(255,215,0,0.6)
• box-shadow: 0 4px 15px rgba(255,215,0,0.3)
• transform: scale(1.05)

📖 Références :

• CSS Responsive - Images
• CSS Bases - Box Model

🎯 Instructions :

1. Rendez toutes les images responsive
2. Ajoutez bordures et ombres
3. Créez les effets hover
4. Testez sur mobile

7 Étape 7 : Cartes des super-héros

🎨 Résultat :

Iron Man

Tony Stark, génie inventeur

Captain

Steve Rogers

✅ Objectifs :

• Cartes avec Flexbox
• Fond semi-transparent
• Layout moderne

📋 Propriétés CSS :

Cartes et Flexbox :

• article { background: rgba(255,255,255,0.1) }
• display: flex; align-items: center
• gap: 25px
• transform: translateY(-5px)

📖 Références :

• CSS Flexbox - Layouts complexes
• CSS Bases - Sélecteurs

🎯 Instructions :

1. Stylisez les article
2. Utilisez Flexbox pour le contenu
3. Ajoutez les effets hover
4. Optimisez les images

8 Étape 8 : Listes et texte stylisés

🎨 Résultat :

Iron Man

⚡ Armure high-tech

🚀 Vol supersonique

✅ Objectifs :

• Listes sans puces
• Items avec fond coloré
• Bordure gauche dorée

📋 Propriétés CSS :

Listes et formatage :

• list-style: none
• border-left: 4px solid #FFD700
• background: rgba(255,215,0,0.1)
• strong { color: #FFD700 }

📖 Références :

• CSS Bases - Listes et typographie
• Sélecteurs et formatage de texte

🎯 Instructions :

1. Supprimez les puces des listes
2. Stylisez les items li
3. Ajoutez les emphases texte
4. Testez les interactions

9 Étape 9 : Tableau des statistiques

🎨 Résultat :

Héros	Force	Vitesse
Iron Man	85	90
Captain	95	85

✅ Objectifs :

• Tableau moderne
• En-tête doré
• Lignes alternées

📋 Propriétés CSS :

Tableaux modernes :

• border-collapse: collapse
• th { background: rgba(255,215,0,0.2) }
• tr:nth-child(even)
• overflow: hidden

📖 Références :

• CSS Bases - Tableaux
• Pseudo-sélecteurs avancés

🎯 Instructions :

1. Stylisez le tableau table
2. Créez l'en-tête doré th
3. Alternez les lignes
4. Ajoutez les effets hover

10 Étape 10 : Footer professionnel

🎨 Résultat :

Contact et Informations

Avengers Initiative

Les plus puissants héros...

Contact

Avengers Tower

✅ Objectifs :

• Footer avec fond foncé
• Colonnes avec Flexbox
• Copyright centré

📋 Propriétés CSS :

Footer et layout :

• background: rgba(0,0,0,0.8)
• border-top: 3px solid #FFD700
• justify-content: space-around
• flex-wrap: wrap

📖 Références :

• CSS Flexbox - Layout footer
• CSS Responsive - flex-wrap

🎯 Instructions :

1. Stylisez l'élément footer
2. Créez les colonnes avec Flexbox
3. Ajoutez la section copyright
4. Optimisez pour mobile

11 Étape 11 : Effets finaux et polish

🎨 Résultat final :

🦸‍♂️

AVENGERS

Site web terminé !

✅ Touches finales :

• Animations CSS
• Transitions fluides
• Media queries

📋 Propriétés CSS :

Animations et responsive :

• @keyframes et animation
• scroll-behavior: smooth
• @media (max-width: 768px)
• transition: all 0.3s ease

📖 Références :

• CSS Animations - Keyframes
• CSS Responsive - Media queries

🎯 Instructions :

1. Ajoutez les animations keyframes
2. Optimisez pour mobile
3. Finalisez les transitions
4. Testez sur tous les écrans !

🎉 Félicitations !

✅ 11 étapes complétées
🎨 Page Avengers stylisée
📱 Design responsive
⚡ Animations et effets
🚀 Prêt à impressionner !

CSS pour Débutants

⚡ Du HTML basique au design incroyable

❌ AVANT : HTML sans CSS

AVENGERS

Bienvenue chez les Avengers

Iron Man

✨ APRÈS : Avec CSS

AVENGERS

Bienvenue chez les Avengers

Iron Man

🚀 Créons votre Chef-d'Œuvre CSS

1. Apprendre les Bases

2. Styliser par Étapes

3. Ajouter la Magie

📚 Votre Programme d'Apprentissage

CSS Bases

Flexbox

CSS Grid

Responsive

Animations

Guide Complet

🛠️ Guide Étape par Étape

🎯 Progression du Projet CSS Avengers

1 Étape 1 : Créer et lier le fichier CSS

🎨 Objectif de cette étape :

✅ Objectifs :

📋 Techniques CSS :

📖 Références :

🎯 Instructions :

2 Étape 2 : Reset CSS et base du body

🎨 Résultat :

AVENGERS

✅ Objectifs :

📋 Propriétés CSS :

📖 Références :

🎯 Instructions :

3 Étape 3 : Styliser le header

🎨 Résultat :

AVENGERS

✅ Objectifs :

📋 Propriétés CSS :

📖 Références :

🎯 Instructions :

4 Étape 4 : Navigation interactive

🎨 Résultat :

✅ Objectifs :

📋 Propriétés CSS :

📖 Références :

🎯 Instructions :

5 Étape 5 : Section d'accueil stylisée

🎨 Résultat :

Bienvenue chez les Avengers

✅ Objectifs :

📋 Propriétés CSS :

📖 Références :

🎯 Instructions :

6 Étape 6 : Images responsives et stylées

🎨 Résultat :

✅ Objectifs :

📋 Propriétés CSS :

📖 Références :

🎯 Instructions :

7 Étape 7 : Cartes des super-héros

🎨 Résultat :

Iron Man

Captain

✅ Objectifs :

📋 Propriétés CSS :

📖 Références :

🎯 Instructions :

8 Étape 8 : Listes et texte stylisés

🎨 Résultat :

Iron Man

✅ Objectifs :

📋 Propriétés CSS :

📖 Références :

🎯 Instructions :

9 Étape 9 : Tableau des statistiques

🎨 Résultat :

✅ Objectifs :

CSS
pour Débutants