Séance 6

Objectifs

  • Comprendre le fonctionnement du box model.

  • Utiliser Flexbox pour organiser la mise en page du site.

MéthodeArborescence

Arborescence

Méthodeindex.html

1
<!DOCTYPE html>
2
<html lang="fr">
3
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Portfolio de Vincent Vanneste</title>
8
    <link rel="stylesheet" href="css/style.css">
9
    <link rel="stylesheet" href="css/accueil.css">
10
</head>
11
12
<body>
13
14
    <header id="haut" role="banner" aria-label="En-tête du site">
15
        <figure role="img" aria-labelledby="figcaption-vv">
16
            <img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
17
            <figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
18
        </figure>
19
20
        <h1>Portfolio de Vincent Vanneste</h1>
21
        <nav role="navigation" aria-label="Navigation principale">
22
            <ul>
23
                <li><a href="index.html">Accueil</a></li>
24
                <li><a href="projets.html">Projets</a></li>
25
                <li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
26
            </ul>
27
        </nav>
28
29
    </header>
30
31
    <main role="main">
32
        <nav role="navigation" aria-label="Navigation interne à la page">
33
            <ul>
34
                <li><a href="#about">À propos</a></li>
35
                <li><a href="#competences">Compétences</a></li>
36
                <li><a href="#experiences">Expériences</a></li>
37
                <li><a href="#formations">Formations</a></li>
38
            </ul>
39
        </nav>
40
41
        <!-- À propos -->
42
        <section id="about" role="region" aria-labelledby="titre-about">
43
            <h2 class="icon-about" id="titre-about">À propos</h2>
44
            <p>Je suis directeur des études du DEUST WMI de Calais et j'enseigne les fondamentaux du développement web
45
                (HTML, CSS, JavaScript, PHP). Passionné par la transmission des connaissances, j'accompagne mes
46
                étudiants dans l'acquisition des compétences nécessaires pour réussir dans le secteur du numérique.</p>
47
            <address role="contentinfo" aria-label="Coordonnées">
48
                <dl>
49
                    <dt>Localisation :</dt>
50
                    <dd>Calais, France</dd>
51
                    <dt>Site :</dt>
52
                    <dd><a href="https://vincent-vanneste.fr/" target="_blank">vincent-vanneste.fr</a></dd>
53
                    <dt>Email :</dt>
54
                    <dd><a href="mailto:vincent.vanneste@univ-littoral.fr">vincent.vanneste@univ-littoral.fr</a></dd>
55
                </dl>
56
            </address>
57
        </section>
58
59
60
61
        <!-- Compétences -->
62
        <section id="competences" role="region" aria-labelledby="titre-competences">
63
            <h2 class="icon-competences" id="titre-competences">Compétences</h2>
64
            <ul>
65
                <li>HTML</li>
66
                <li>CSS</li>
67
                <li>Responsive</li>
68
                <li>Accessibilité</li>
69
                <li>JavaScript</li>
70
                <li>PHP • Laravel 11</li>
71
                <li>MySQL</li>
72
                <li>Git & GitHub</li>
73
            </ul>
74
        </section>
75
76
77
78
        <!-- Expériences -->
79
        <section id="experiences" role="region" aria-labelledby="titre-experiences">
80
            <h2 class="icon-experiences" id="titre-experiences">Expériences récentes</h2>
81
            <ul>
82
                <li>
83
                    <strong>Enseignant – Licence 1 Informatique</strong><br>
84
                    <time datetime="2025">2025</time> •
85
                    <address>
86
                        <a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a>
87
                    </address><br>
88
                    Introduction à HTML, CSS, JS
89
                </li>
90
                <li>
91
                    <strong>Directeur des études – DEUST WMI</strong><br>
92
                    <time datetime="2024-2025">2024 → 2025</time> •
93
                    <address>
94
                        <a href="https://www.univ-littoral.fr/" target="_blank">FCU ULCO</a>
95
                    </address>
96
                </li>
97
            </ul>
98
        </section>
99
100
        <!-- Formations -->
101
        <section id="formations" role="region" aria-labelledby="titre-formations">
102
            <h2 class="icon-formations" id="titre-formations">Formations</h2>
103
            <ul>
104
                <li>
105
                    <strong>Doctorat productique, automatique et informatique industrielle</strong><br>
106
                    <time datetime="2000">2000</time> •
107
                    <address>
108
                        <a href="https://www.univ-lille.fr/" target="_blank">Université de Lille</a>
109
                    </address>
110
                </li>
111
                <li>
112
                    <strong>CAPET Technologie</strong><br>
113
                    <time datetime="1998">1998</time> •
114
                    <address>
115
                        <a href="https://www.iufm-douai.fr/" target="_blank">IUFM Douais</a>
116
                    </address>
117
                </li>
118
            </ul>
119
        </section>
120
121
    </main>
122
123
    <footer role="contentinfo" aria-label="Pied de page">
124
        <p>&copy; 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
125
    </footer>
126
127
128
</body>
129
130
</html>
Méthodeprojets.html
1
<!DOCTYPE html>
2
<html lang="fr">
3
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Portfolio - Projets</title>
8
    <link rel="stylesheet" href="css/style.css">
9
    <link rel="stylesheet" href="css/projets.css">
10
</head>
11
12
<body>
13
14
    <header id="haut" role="banner" aria-label="En-tête du site">
15
        <figure role="img" aria-labelledby="figcaption-vv">
16
            <img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
17
            <figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
18
        </figure>
19
20
        <h1>Portfolio de Vincent Vanneste</h1>
21
        <nav role="navigation" aria-label="Navigation principale">
22
            <ul>
23
                <li><a href="index.html">Accueil</a></li>
24
                <li><a href="projets.html">Projets</a></li>
25
                <li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
26
            </ul>
27
        </nav>
28
29
    </header>
30
31
    <main role="main">
32
        <h1>Mes projets</h1>
33
34
        <section role="region" aria-labelledby="liste-projets">
35
            <h2 id="liste-projets">Liste des projets</h2>
36
37
            <div class="projets">
38
                <article role="article" aria-labelledby="titre-projet1">
39
                    <h3 id="titre-projet1"><a href="projet1.html">Projet 1</a></h3>
40
                    <figure role="img" aria-labelledby="fig-projet1">
41
                        <img src="images/vignettes/projet1.jpg" alt="Aperçu du Projet 1">
42
                        <figcaption id="fig-projet1">Aperçu du Projet 1</figcaption>
43
                    </figure>
44
                    <p>Un projet qui présente les bases du HTML et de la mise en page.</p>
45
                </article>
46
47
                <article role="article" aria-labelledby="titre-projet2">
48
                    <h3 id="titre-projet2"><a href="projet2.html">Projet 2</a></h3>
49
                    <figure role="img" aria-labelledby="fig-projet2">
50
                        <img src="images/vignettes/projet2.jpg" alt="Aperçu du Projet 2">
51
                        <figcaption id="fig-projet2">Aperçu du Projet 2</figcaption>
52
                    </figure>
53
                    <p>Un site en CSS avec une mise en forme responsive adaptée aux mobiles.</p>
54
                </article>
55
56
                <article role="article" aria-labelledby="titre-projet3">
57
                    <h3 id="titre-projet3"><a href="projet3.html">Projet 3</a></h3>
58
                    <figure role="img" aria-labelledby="fig-projet3">
59
                        <img src="images/vignettes/projet3.jpg" alt="Aperçu du Projet 3">
60
                        <figcaption id="fig-projet3">Aperçu du Projet 3</figcaption>
61
                    </figure>
62
                    <p>Un mini-site en JavaScript avec des interactions simples.</p>
63
                </article>
64
65
                <article role="article" aria-labelledby="titre-projet4">
66
                    <h3 id="titre-projet4"><a href="projet4.html">Projet 4</a></h3>
67
                    <figure role="img" aria-labelledby="fig-projet4">
68
                        <img src="images/vignettes/projet4.jpg" alt="Aperçu du Projet 4">
69
                        <figcaption id="fig-projet4">Aperçu du Projet 4</figcaption>
70
                    </figure>
71
                    <p>Une application web utilisant PHP et MySQL pour gérer des données.</p>
72
                </article>
73
74
                <article role="article" aria-labelledby="titre-projet5">
75
                    <h3 id="titre-projet5"><a href="projet5.html">Projet 5</a></h3>
76
                    <figure role="img" aria-labelledby="fig-projet5">
77
                        <img src="images/vignettes/projet5.jpg" alt="Aperçu du Projet 5">
78
                        <figcaption id="fig-projet5">Aperçu du Projet 5</figcaption>
79
                    </figure>
80
                    <p>Un projet complet combinant HTML, CSS, JS et base de données.</p>
81
                </article>
82
            </div>
83
        </section>
84
    </main>
85
86
    <footer role="contentinfo" aria-label="Pied de page">
87
        <p>&copy; 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
88
    </footer>
89
90
</body>
91
92
</html>
Méthodecss/style.css
1
/* --- Corps de la page --- */
2
body {
3
    font-family: Arial, sans-serif;
4
    /* Police principale du texte : Arial ou une police sans-serif */
5
    color: #333;
6
    /* Couleur du texte : gris foncé */
7
    background: #fff;
8
    /* Fond de la page : blanc */
9
    margin: 0;
10
    /* Supprime la marge par défaut autour de la page */
11
    line-height: 1.5;
12
    /* Hauteur de ligne pour améliorer la lisibilité */
13
}
14
15
/* --- Header --- */
16
header {
17
    text-align: center;
18
    /* Centre le contenu horizontalement */
19
    padding: 20px;
20
    /* Espace intérieur autour du contenu du header */
21
    background: #f0f0f0;
22
    /* Fond gris clair */
23
    border-bottom: 2px solid #ddd;
24
    /* Bordure en bas du header pour le séparer du contenu */
25
}
26
27
header h1 {
28
    margin: 10px 0;
29
    /* Espace vertical autour du titre */
30
    font-size: 2rem;
31
    /* Taille du texte plus grande pour le titre principal */
32
}
33
34
/* --- Figure dans le header --- */
35
header figure {
36
    margin: 0 auto 10px;
37
    /* Centre la figure horizontalement + marge basse de 10px */
38
}
39
40
header img {
41
    width: 150px;
42
    /* Largeur fixe de l'image */
43
    border-radius: 50%;
44
    /* Rend l'image ronde */
45
    border: 3px solid #0066cc;
46
    /* Bordure bleue autour de l'image */
47
}
48
49
header figcaption {
50
    margin-top: 8px;
51
    /* Espace entre l'image et la légende */
52
    font-size: 1rem;
53
    /* Taille normale du texte */
54
}
55
56
/* --- Navigation principale (header) --- */
57
header nav ul {
58
    display: flex;
59
    /* Utilise Flexbox pour aligner les liens horizontalement */
60
    justify-content: center;
61
    /* Centre les éléments horizontalement */
62
    gap: 15px;
63
    /* Espace entre chaque élément de navigation */
64
    list-style: none;
65
    /* Supprime les puces de la liste */
66
    padding: 0;
67
    /* Supprime le padding par défaut */
68
    margin: 10px 0 0;
69
    /* Marge en haut de la liste, pas en bas */
70
}
71
72
header nav a {
73
    text-decoration: none;
74
    /* Supprime le soulignement des liens */
75
    color: #0066cc;
76
    /* Couleur bleue des liens */
77
    font-weight: bold;
78
    /* Texte en gras */
79
    padding: 6px 10px;
80
    /* Espace autour du texte pour créer un bouton */
81
    border-radius: 4px;
82
    /* Coins arrondis pour les liens */
83
}
84
85
header nav a:hover {
86
    background-color: #ddd;
87
    /* Fond gris clair au survol pour indiquer l’interaction */
88
}
89
90
/* --- Main --- */
91
main>h1 {
92
    text-align: center;
93
    /* Centre le titre principal du main */
94
    color: #1e3a5f;
95
    /* Couleur bleu foncé */
96
    font-size: 2rem;
97
    /* Taille du texte plus grande */
98
    margin: 20px 0;
99
    /* Espace vertical autour du titre */
100
}
101
102
main>section {
103
    max-width: 900px;
104
    /* Largeur maximale du contenu */
105
    margin: 0 auto 40px;
106
    /* Centre horizontalement + marge en bas de 40px */
107
    padding: 0 15px;
108
    /* Espace intérieur gauche/droite de 15px */
109
}
110
111
main>section h2 {
112
    color: #1e3a5f;
113
    /* Couleur du titre (bleu foncé) */
114
    font-size: 1.5em;
115
    /* Taille du texte 1,5 fois la taille normale */
116
}
117
118
/* --- Footer --- */
119
footer {
120
    background: #1e3a5f;
121
    /* Fond bleu foncé */
122
    color: #fff;
123
    /* Texte en blanc */
124
    padding: 20px;
125
    /* Espace intérieur autour du contenu */
126
    text-align: center;
127
    /* Centre le texte horizontalement */
128
}
129
130
footer p {
131
    margin: 0;
132
    /* Supprime la marge par défaut autour du paragraphe */
133
}
1. display: flex;
  • Transforme la liste <ul> en conteneur flex.
  • Ses enfants directs <li> deviennent des éléments flex.
  • Par défaut, Flexbox aligne les éléments horizontalement (flex-direction: row), donc les liens de navigation sont placés côte à côte au lieu de verticalement.
2. justify-content: center;
  • Centre les éléments flex horizontalement dans le conteneur.
  • Sans cela, les éléments se seraient alignés à gauche par défaut.
  • Dans ce cas, tous les liens de navigation sont centrés dans le header.
3. gap: 15px;
  • Crée un espace uniforme de 15px entre chaque élément flex (chaque <li>).
  • Plus pratique que de mettre des margin-right sur chaque <li> car Flex gère automatiquement l’espacement.
4. Compléments liés à Flex
  • Les autres propriétés (list-style: none; padding: 0; margin: 10px 0 0;) ne font pas partie de Flexbox, mais elles permettent de nettoyer le style par défaut de la liste pour que la mise en page soit propre.
Méthodecss/accueil.css
1
/* --- Navigation interne du main --- */
2
main nav ul {
3
    display: flex;
4
    /* Utilise Flexbox pour aligner les éléments horizontalement */
5
    justify-content: center;
6
    /* Centre les éléments dans la ligne */
7
    flex-wrap: wrap;
8
    /* Permet aux éléments de passer à la ligne si l'espace est insuffisant */
9
    gap: 12px;
10
    /* Espace de 12px entre les éléments */
11
    padding: 0;
12
    /* Supprime le padding par défaut de la liste */
13
    margin: 20px 0;
14
    /* Marge verticale de 20px au-dessus et en dessous */
15
    list-style: none;
16
    /* Supprime les puces de la liste */
17
}
18
19
main nav a {
20
    text-decoration: none;
21
    /* Supprime le soulignement par défaut */
22
    color: #fff;
23
    /* Couleur du texte : blanc */
24
    background-color: #0073e6;
25
    /* Couleur de fond bleu vif */
26
    padding: 6px 12px;
27
    /* Espace intérieur autour du texte */
28
    border-radius: 6px;
29
    /* Coins arrondis pour un effet "bouton" */
30
    font-weight: bold;
31
    /* Texte en gras */
32
}
33
34
main nav a:hover {
35
    background-color: #005bb5;
36
    /* Fond bleu plus foncé au survol pour indiquer l’interaction */
37
}
38
39
/* --- Sections principales --- */
40
section {
41
    margin: 20px auto;
42
    /* Marge verticale de 20px et centre horizontalement */
43
    padding: 0 15px;
44
    /* Espace intérieur gauche/droite de 15px */
45
}
46
47
section h2 {
48
    font-size: 1.5rem;
49
    /* Taille du titre légèrement plus grande */
50
    margin-top: 30px;
51
    /* Espace au-dessus du titre */
52
    margin-bottom: 10px;
53
    /* Espace en dessous du titre */
54
    border-bottom: 2px solid #ddd;
55
    /* Ligne sous le titre pour le séparer visuellement */
56
    padding-bottom: 5px;
57
    /* Espace entre le texte et la ligne */
58
    color: #1e3a5f;
59
    /* Couleur bleu foncé */
60
}
61
62
section p {
63
    margin-bottom: 15px;
64
    /* Espace sous les paragraphes */
65
}
66
67
/* --- Listes et adresses --- */
68
section ul {
69
    padding-left: 20px;
70
    /* Décalage de la liste vers la droite */
71
    margin-bottom: 20px;
72
    /* Espace sous la liste */
73
}
74
75
section li {
76
    margin-bottom: 8px;
77
    /* Espace entre les éléments de la liste */
78
}
79
80
address {
81
    font-style: normal;
82
    /* Texte non italique, contrairement au style par défaut */
83
    display: inline;
84
    /* L'adresse s'affiche sur la même ligne si possible */
85
}
86
87
/* --- Liens dans le contenu --- */
88
section a {
89
    color: #0066cc;
90
    /* Couleur bleue pour les liens */
91
    text-decoration: none;
92
    /* Supprime le soulignement par défaut */
93
}
94
95
section a:hover {
96
    text-decoration: underline;
97
    /* Remet le soulignement au survol */
98
}
99
100
/* --- Icônes devant les titres --- */
101
.icon-about::before {
102
    content: "👤";
103
    /* Emoji représentant "À propos" */
104
    margin-right: 8px;
105
    /* Espace entre l'icône et le texte du titre */
106
}
107
108
.icon-competences::before {
109
    content: "💻";
110
    /* Emoji représentant les compétences informatiques */
111
    margin-right: 8px;
112
}
113
114
.icon-experiences::before {
115
    content: "📅";
116
    /* Emoji représentant les expériences/agenda */
117
    margin-right: 8px;
118
}
119
120
.icon-formations::before {
121
    content: "🎓";
122
    /* Emoji représentant les formations/diplômes */
123
    margin-right: 8px;
124
}
1. display: flex;
  • Transforme la liste <ul> en conteneur flex.
  • Tous les enfants directs <li> deviennent des éléments flex.
  • Par défaut, Flex aligne les éléments horizontalement (flex-direction: row), donc les liens apparaissent sur la même ligne.
2. justify-content: center;
  • Centre tous les éléments flex horizontalement dans le conteneur.
  • Sans cette propriété, les éléments resteraient alignés à gauche.
3. flex-wrap: wrap;
  • Permet aux éléments flex de passer à la ligne suivante si la largeur du conteneur est insuffisante.
  • Pratique pour les écrans plus petits ou si la liste est longue, afin que les boutons ne débordent pas.
4. gap: 12px;
  • Définit un espace de 12px entre chaque élément flex.
  • Plus simple et plus précis que d’ajouter des margin manuellement sur chaque <li>.
5. Autres propriétés
  • padding: 0; → supprime le padding par défaut de la liste.
  • margin: 20px 0; → ajoute une marge verticale autour de la navigation.
  • list-style: none; → supprime les puces par défaut de la liste.
Méthodecss/projets.css
1
/* --- Projets --- */
2
.projets {
3
    text-align: center;
4
    /* centre les articles à l'intérieur du conteneur */
5
}
6
7
.proj/* --- Conteneur principal des projets --- */
8
.projets {
9
    display: flex;
10
    /* Utilise Flexbox pour disposer les articles en ligne */
11
    flex-wrap: wrap;
12
    /* Permet aux articles de passer à la ligne si l'espace est insuffisant */
13
    justify-content: center;
14
    /* Centre les articles horizontalement dans le conteneur */
15
    gap: 20px;
16
    /* Espace de 20px entre chaque article */
17
    padding: 10px 0;
18
    /* Espace vertical en haut et en bas du conteneur */
19
}
20
21
/* --- Articles individuels --- */
22
.projets article {
23
    flex: 0 1 220px;
24
    /* Largeur de base 220px, mais flexible si l’espace est limité */
25
    padding: 10px;
26
    /* Espace intérieur autour du contenu de l'article */
27
    background: #f9f9f9;
28
    /* Couleur de fond gris très clair */
29
    border: 1px solid #ddd;
30
    /* Bordure fine grise autour de l'article */
31
    border-radius: 8px;
32
    /* Coins arrondis pour adoucir l'apparence */
33
    text-align: left;
34
    /* Texte aligné à gauche dans l'article */
35
}
36
37
/* --- Titres des projets --- */
38
.projets h3 {
39
    margin-top: 0;
40
    /* Supprime l'espace au-dessus du titre */
41
    font-size: 1.1rem;
42
    /* Taille du texte légèrement plus grande que le texte normal */
43
}
44
45
/* --- Liens --- */
46
.projets a {
47
    text-decoration: none;
48
    /* Supprime le soulignement par défaut */
49
    color: #0066cc;
50
    /* Couleur bleue pour le lien */
51
    font-weight: bold;
52
    /* Texte en gras pour plus de visibilité */
53
}
54
55
.projets a:hover {
56
    text-decoration: underline;
57
    /* Soulignement au survol pour indiquer l'interaction */
58
}
59
60
/* --- Paragraphes --- */
61
.projets p {
62
    font-size: 0.9rem;
63
    /* Taille légèrement plus petite que le texte normal */
64
    color: #333;
65
    /* Couleur gris foncé pour le texte */
66
}
67
68
/* --- Figures et images --- */
69
.projets figure {
70
    margin: 0;
71
    /* Supprime les marges par défaut de la figure */
72
    padding: 0;
73
    /* Supprime le padding par défaut */
74
}
75
76
.projets figure img {
77
    width: 100%;
78
    /* L'image prend toute la largeur de son conteneur */
79
    height: auto;
80
    /* La hauteur s'ajuste automatiquement pour conserver les proportions */
81
    border-radius: 4px;
82
    /* Coins légèrement arrondis pour l'image */
83
    border: 1px solid #ccc;
84
    /* Bordure grise claire autour de l'image */
85
    margin-bottom: 8px;
86
    /* Espace entre l'image et la légende */
87
}
88
89
.projets figure figcaption {
90
    font-size: 0.85rem;
91
    /* Taille du texte de la légende plus petite */
92
    color: #666;
93
    /* Couleur gris moyen pour distinguer du texte principal */
94
    text-align: center;
95
    /* Centre le texte de la légende sous l'image */
96
}ets article {
97
    display: inline-block;
98
    /* affiche les articles les uns à côté des autres (comme du texte) */
99
    vertical-align: top;
100
    /* aligne le haut des articles entre eux */
101
    width: 220px;
102
    /* largeur fixe pour chaque carte */
103
    margin: 10px;
104
    /* espace extérieur autour de chaque carte */
105
    padding: 10px;
106
    /* espace intérieur entre le bord et le contenu */
107
    background: #f9f9f9;
108
    /* couleur de fond gris très clair */
109
    border: 1px solid #ddd;
110
    /* bordure fine et grise autour des cartes */
111
    border-radius: 8px;
112
    /* arrondit légèrement les coins de la carte */
113
    text-align: left;
114
    /* le texte à l’intérieur est aligné à gauche */
115
}
116
117
.projets h3 {
118
    margin-top: 0;
119
    /* supprime l’espace au-dessus du titre */
120
    font-size: 1.1rem;
121
    /* définit la taille du titre en unités relatives */
122
}
123
124
.projets a {
125
    text-decoration: none;
126
    /* enlève le soulignement par défaut des liens */
127
    color: #0066cc;
128
    /* applique une couleur bleue au lien */
129
    font-weight: bold;
130
    /* met le lien en gras */
131
}
132
133
.projets a:hover {
134
    text-decoration: underline;
135
    /* remet le soulignement quand on survole le lien */
136
}
137
138
.projets p {
139
    font-size: 0.9rem;
140
    /* définit une taille de texte légèrement plus petite */
141
    color: #333;
142
    /* applique une couleur gris foncé au texte */
143
}
144
145
.projets figure {
146
    margin: 0;
147
    /* supprime les marges par défaut autour de la figure */
148
    padding: 0;
149
    /* supprime le padding par défaut */
150
}
151
152
.projets figure img {
153
    width: 100%;
154
    /* l'image prend toute la largeur de la carte */
155
    height: auto;
156
    /* la hauteur s'ajuste automatiquement pour garder les proportions */
157
    border-radius: 4px;
158
    /* arrondit légèrement les coins de l'image */
159
    border: 1px solid #ccc;
160
    /* ajoute une bordure grise claire autour de l'image */
161
162
    margin-bottom: 8px;
163
    /* espace entre l'image et la légende */
164
}
165
166
.projets figure figcaption {
167
    font-size: 0.85rem;
168
    /* taille de la police de la légende */
169
    color: #666;
170
    /* couleur gris moyen pour la légende */
171
    text-align: center;
172
    /* centre le texte de la légende */
173
}
1. flex: 0 1 220px;
  • 0 → L’article ne grandira pas au-delà de sa taille de base pour remplir l’espace disponible.
  • 1 → L’article peut rétrécir si l’espace horizontal manque.
  • 220px → largeur de base de l’article.
  • Effet : chaque article fait 220px de large, mais si l’écran est plus petit, il peut se réduire pour s’adapter à l’espace disponible.
2. Autres propriétés
  • padding: 10px;
    • Ajoute un espace intérieur autour du contenu pour ne pas toucher les bords de l’article.
  • background: #f9f9f9;
    • Fond gris clair pour distinguer visuellement chaque article.
  • border: 1px solid #ddd;
    • Bordure fine autour de chaque article pour mieux les délimiter.
  • border-radius: 8px;
    • Coins arrondis pour un rendu plus doux et esthétique.
  • text-align: left;
    • Texte du contenu aligné à gauche, comme pour la plupart des paragraphes.
Exemple

  See the Pen 
  Séance 6-index by Vincent-Vanneste (@vincent-vanneste)
  on CodePen.




Séance 6- Accueil
Exemple

  See the Pen 
  Séance 6-projets by Vincent-Vanneste (@vincent-vanneste)
  on CodePen.




Séance 6- Projets