HTML CSS – Level 2

Séance 2 : Projet Personnel – Présente ta Plus Grande Passion

🔥 HTML+CSS - Leveeel 2 : Projet Personnel – Présente ta Plus Grande Passion 🚀🚀🚀🚀

Objectif :

Dans cette séance, tu vas créer une page web personnelle pour présenter ta passion favorite. Tu apprendras à structurer ton contenu en sections, à ajouter des images, des liens et à appliquer du style avec CSS.

Ce que tu vas apprendre :

Structurer une page web en utilisant des balises sémantiques telles que <header>, <section> et <footer>.
Ajouter des contenus multimédias (images, liens) pour illustrer ta passion.
Utiliser des classes et des IDs pour cibler des éléments précis en CSS.
Mettre en forme ta page avec des styles de base (couleurs, polices, marges, alignement).

Activité 1 : Planifie ta page

Exercice : Avant de coder, prends quelques minutes pour réfléchir et esquisser la structure de ta page. Note les sections que tu souhaites inclure, par exemple :

Un en-tête (<header>) avec le titre de ta passion.
Une section de présentation (<section>) qui décrit ta passion.
Une section multimédia (<section>) pour afficher une ou plusieurs images ou vidéos.
Une section de liens (<section>) pour rediriger vers des ressources complémentaires.
Un pied de page (<footer>) avec tes informations de contact ou une signature.

Indice : Fais un brouillon sur papier pour visualiser la disposition de ta page avant de commencer à coder.

Activité 2 : Crée la structure HTML de ta page

Exercice : Rédige le code HTML de ta page en respectant la structure planifiée. Voici un exemple de squelette de page :


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Passion : [Nom de ta passion]</title>
    <style>
        /* Tu pourras ajouter tes styles ici */
        body {
            background-color: #111;
            color: #eee;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 20px;
        }
        header, footer {
            text-align: center;
            padding: 20px;
            background-color: #222;
        }
        .content {
            max-width: 800px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <header>
        <h1>Ma Passion : [Nom de ta passion]</h1>
    </header>
    <div class="content">
        <section id="presentation">
            <h2>Présentation</h2>
            <p>Décris ici ta passion, pourquoi tu l’aimes, et ce qu’elle représente pour toi.</p>
        </section>
        <section id="multimedia">
            <h2>Multimédia</h2>
            <p>Ajoute une image ou une vidéo qui illustre ta passion.</p>
            <img src="chemin/vers/image.jpg" alt="Image illustrant ma passion">
        </section>
        <section id="ressources">
            <h2>Ressources</h2>
            <p>Insère des liens vers des sites ou vidéos en rapport avec ta passion.</p>
            <a href="https://www.example.com">Découvre plus</a>
        </section>
    </div>
    <footer>
        <p>© 2025 Ton Nom. Tous droits réservés.</p>
    </footer>
</body>
</html>

Indices :

Indice 1 : Utilise les balises sémantiques (<header>, <section>, <footer>) pour organiser ton contenu.
Indice 2 : Pense à ajouter l'attribut alt aux images pour décrire ce qu'elles représentent.
Indice 3 : Structure ton code de manière claire pour faciliter la lecture et la modification.

Activité 3 : Améliore le style avec CSS

Exercice : Personnalise l'apparence de ta page en modifiant le CSS. Tu peux par exemple :

Changer le fond, la couleur du texte et la police.
Définir des marges et des paddings pour espacer les sections.
Ajouter des bordures ou des ombres pour faire ressortir certains éléments.


/* Exemple de style CSS à ajouter dans la balise <style> */
body {
    background-color: #111;
    color: #eee;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 20px;
}
header {
    background-color: #222;
    padding: 20px;
    text-align: center;
}
h1 {
    color: #ff4500;
}
section {
    margin-bottom: 40px;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
a {
    color: #ff4500;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

Indices :

Indice 1 : Expérimente avec différentes valeurs pour le background et les polices.
Indice 2 : Utilise margin et padding pour donner de l'espace entre tes éléments.
Indice 3 : N'hésite pas à consulter des ressources en ligne pour t'inspirer des bonnes pratiques en CSS.

BRAVO, tu as terminé la Séance 2 : Présente ta Plus Grande Passion ! 🎉

Tu as appris à créer une page web structurée et à la styliser avec du CSS pour mettre en valeur ta passion.

Continue à perfectionner ton projet et prépare-toi pour la prochaine séance ! 🚀