🎓 Projet Final

Créez votre site web complet avec tout ce que vous avez appris !

Commencer le projet

📋 Cahier des charges

🎯 Objectif

Créer un site web complet de 4-5 pages responsive avec Bootstrap et CSS personnalisé. Le thème est libre : portfolio, e-commerce, blog, agence, etc.

✅ Checklist du projet

Structure & Pages
Page d'accueil (index.html)
Page à propos / services
Page portfolio / produits / articles
Page contact avec formulaire
Navigation fonctionnelle entre toutes les pages
Composants Bootstrap
Navbar responsive (collapse mobile)
Cards pour présenter du contenu
Formulaire de contact fonctionnel
Au moins 1 modal, carousel ou accordion
Footer avec informations
Mise en page & Design
Système de grille Bootstrap (container, row, col)
Responsive (mobile, tablette, desktop)
Flexbox ou Grid pour certains layouts
Transitions et animations CSS
Images optimisées et responsive
Personnalisation
Fichier CSS custom (style.css)
Variables CSS pour les couleurs
Surcharge de styles Bootstrap
Typographie cohérente
Palette de couleurs harmonieuse

💡 Idées de projets

💼
Portfolio Personnel

Pages : Accueil, À propos, Portfolio (projets), Compétences, Contact
Composants : Cartes de projets, timeline, modal pour détails projets

🛍️
E-commerce

Pages : Accueil, Produits, Détail produit, Panier, Contact
Composants : Grille de produits, carousel images, badges promo, modal panier

📝
Blog / Magazine

Pages : Accueil, Articles, Article détail, À propos, Contact
Composants : Cards articles, sidebar, pagination, breadcrumb

🏢
Site Agence

Pages : Accueil, Services, Portfolio, Équipe, Contact
Composants : Hero section, cards services, témoignages, accordion FAQ

🍕
Restaurant

Pages : Accueil, Menu, Réservation, À propos, Contact
Composants : Carousel photos, tabs menu, formulaire réservation, modal

🎓
Plateforme Formation

Pages : Accueil, Cours, Cours détail, Instructeurs, Contact
Composants : Cards cours, progress bars, badges niveaux, tabs

🏗️ Structure recommandée

📁 Architecture des fichiers
mon-projet/
├── index.html
├── about.html
├── portfolio.html / products.html / blog.html
├── contact.html
├── css/
│ └── style.css
├── js/
│ └── script.js (optionnel)
└── img/
    ├── logo.png
    ├── hero.jpg
    └── ...
🎨 Template HTML de base
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon Projet</title>
  <link href="bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <!-- Navbar -->
  <!-- Main Content -->
  <!-- Footer -->
  <script src="bootstrap.bundle.min.js"></script>
</body>
</html>

📝 Étapes de réalisation

1

Planning

Choisir le thème, dessiner les maquettes, lister les pages

2

Structure HTML

Créer toutes les pages avec HTML sémantique et Bootstrap

3

Style CSS

Personnaliser avec CSS, couleurs, animations

4

Tests & Deploy

Tester responsive, déployer sur GitHub Pages

🚀 Déploiement

📤 GitHub Pages (gratuit)
  1. Créer un compte GitHub
  2. Créer un nouveau repository "mon-site"
  3. Uploader vos fichiers
  4. Aller dans Settings → Pages
  5. Sélectionner la branche main → Save
  6. Votre site sera disponible à : username.github.io/mon-site
🌐 Autres options

🎓 Critères d'évaluation

Code & Structure
  • ✅ HTML sémantique et valide
  • ✅ CSS organisé et commenté
  • ✅ Utilisation correcte de Bootstrap
  • ✅ Navigation fonctionnelle
  • ✅ Fichiers bien organisés
Design & UX
  • ✅ Design cohérent et harmonieux
  • ✅ Responsive sur tous les écrans
  • ✅ Animations et transitions fluides
  • ✅ Images optimisées
  • ✅ Accessibilité de base
⏰ Temps estimé

15-20 heures pour un projet complet et de qualité. Prenez votre temps, c'est votre vitrine !

🎉 Félicitations !

Vous avez terminé la formation HTML/CSS. Il est temps de créer votre chef-d'œuvre !

Retour aux cours
Froggiesplaining :


🎯 Objectif final :
Créer un site web complet de 4-5 pages qui démontre toutes vos compétences acquises pendant ces 4 semaines.

📖 Ce que vous savez maintenant :
• HTML : Structure, sémantique, formulaires
• CSS : Box model, positionnement, responsive
• Flexbox & Grid : Layouts modernes
• Bootstrap : Composants et personnalisation
• Best practices : Code propre, accessible

🚀 Conseils finaux :
• Commencez simple, améliorez progressivement
• Testez sur mobile, tablette et desktop
• Demandez des retours à d'autres personnes
• Soyez fier de votre travail !
• Partagez votre projet sur LinkedIn/GitHub

💪 Vous êtes prêt(e) à créer des sites web professionnels !

Froggie

GitHub - eCrea