Objectif du mini projet

Chapitre 12 • Mini projet pratique

Créer une page HTML complète pour vous présenter en tant que développeur débutant, en appliquant tout ce que nous avons appris dans les chapitres précédents.

Critères de réussite :

Structure propre : Utilisation des balises sémantiques
Accessibilité : Texte alternatif, hiérarchie des titres
SEO : Métadonnées, contenu bien structuré
Fonctionnalités : Formulaire de contact, navigation interne
Organisation : Code bien indenté et commenté si nécessaire

Conseil

Ce projet est l'occasion de mettre en pratique toutes les notions vues précédemment. Prenez le temps de bien structurer votre code avant de commencer à écrire.

Structure de la page

Chapitre 12 • Mini projet pratique

Voici la structure de base recommandée pour votre page de profil :

<html>
  <head>
    <!-- Métadonnées -->
  </head>
  <body>
    <header>
      <!-- Titre principal et navigation -->
    </header>
    
    <nav>
      <!-- Menu de navigation -->
    </nav>
    
    <main>
      <section id="presentation">
        <!-- Présentation personnelle -->
      </section>
      
      <section id="competences">
        <!-- Liste de compétences -->
      </section>
      
      <section id="projets">
        <!-- Projets réalisés -->
      </section>
      
      <section id="contact">
        <!-- Formulaire de contact -->
      </section>
    </main>
    
    <footer>
      <!-- Pied de page -->
    </footer>
  </body>
</html>

Important

Cette structure utilise les balises sémantiques HTML5 pour une meilleure accessibilité et un meilleur référencement. Évitez d'utiliser des <div> à la place des balises spécifiques.

Éléments à inclure

Chapitre 12 • Mini projet pratique

Titre principal

<h1>Mon Profil Développeur</h1>

Un seul <h1> par page

Présentation

<img src="profil.jpg" alt="Photo de profil">
<p>Description personnelle...</p>

Avec image et texte

Compétences

<ul>
  <li>HTML5</li>
  <li>CSS3</li>
</ul>

Liste à puces

Projets

<a href="#">Mon projet</a>

Avec liens vers vos projets

Formulaire de contact

Un formulaire basique doit inclure :

Champ pour le nom
Champ pour l'email
Zone de message
Bouton d'envoi
Attribut required pour les champs obligatoires

Code de base proposé

Chapitre 12 • Mini projet pratique

Code complet de départ

Voici un exemple complet que vous pouvez utiliser comme point de départ :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Profil développeur débutant HTML">
  <meta name="author" content="Ton Nom">
  <title>Mon Profil Développeur</title>
</head>
<body>

  <header>
    <h1>Mon Profil Développeur</h1>
    <nav>
      <a href="#presentation">Présentation</a> |
      <a href="#competences">Compétences</a> |
      <a href="#projets">Projets</a> |
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="presentation">
      <h2>Présentation</h2>
      <img src="profil.jpg" alt="Photo de profil de développeur" width="150">
      <p>Bonjour ! Je suis un développeur débutant passionné par le web.</p>
    </section>

    <section id="competences">
      <h2>Compétences</h2>
      <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript (débutant)</li>
      </ul>
    </section>

    <section id="projets">
      <h2>Projets</h2>
      <ul>
        <li><a href="#">Site portfolio personnel</a></li>
        <li><a href="#">Blog tech (projet en cours)</a></li>
      </ul>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <form action="traitement.php" method="post">
        <label>Nom :
          <input type="text" name="nom" required>
        </label><br>
        <label>Email :
          <input type="email" name="email" required>
        </label><br>
        <label>Message :<br>
          <textarea name="message" placeholder="Votre message..."></textarea>
        </label><br>
        <input type="submit" value="Envoyer">
      </form>
    </section>
  </main>

  <footer>
    <p>© 2025 Mon Nom. Tous droits réservés.</p>
  </footer>

</body>
</html>

Personnalisation

N'hésitez pas à personnaliser ce code avec vos propres informations, compétences et projets. C'est votre profil, faites-le vôtre !

Améliorations possibles

Chapitre 12 • Mini projet pratique

Ajouter du CSS

Créez un fichier style.css et liez-le à votre HTML pour améliorer l'apparence de votre page.

<link rel="stylesheet" href="style.css">

Icônes et réseaux sociaux

Utilisez Font Awesome pour ajouter des icônes à votre footer :

<a href="#"><i class="fab fa-github"></i> GitHub</a>

Image de fond

Ajoutez une image de fond subtile pour embellir votre page :

body {
  background-image: url('fond.jpg');
  background-size: cover;
}

Responsive design

Ajoutez des media queries pour adapter votre site aux mobiles :

@media (max-width: 768px) {
  /* Styles pour mobile */
}

Animations légères

Ajoutez des transitions CSS pour des effets subtils :

a {
  transition: color 0.3s ease;
}

Bonus : idées pour aller plus loin

Chapitre 12 • Mini projet pratique

Site multi-pages

Créez plusieurs pages HTML avec un menu de navigation cohérent.

Compteur de visiteurs

Ajoutez un compteur simple avec JavaScript.

Portfolio complet

Développez ce projet en un véritable portfolio.

Formulaire fonctionnel

Connectez le formulaire à un backend PHP pour envoyer de vrais emails.

Tests multi-plateformes

Testez votre site sur différents navigateurs (Chrome, Firefox, Edge) et appareils (mobile, tablette) pour vérifier sa compatibilité.

En résumé

Chapitre 12 • Mini projet pratique

Structure HTML

Balises sémantiques bien utilisées

Navigation

Liens internes et externes

Images

Avec texte alternatif

Formulaire

De contact fonctionnel

Ce mini projet vous a permis de mettre en pratique toutes les notions HTML apprises dans les chapitres précédents. Vous avez maintenant une base solide pour créer des pages web bien structurées, accessibles et optimisées pour le SEO. Dans les prochains chapitres, nous aborderons le CSS pour styliser vos créations.