lekesiz · mhoffer-dev · Oct 14, 2025 · Oct 18, 2025 · Nov 27, 2025
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,14 @@
+{
+    // Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
+    // Pointez pour afficher la description des attributs existants.
+    // Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Open index.html",
+            "file": "c:\\wamp64\\www\\lpdwca_html_css_js_php\\mini-projet-bootstrap\\index.html"
+        }
+    ]
+}
diff --git a/README.html b/README.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LP DWCA - Portfolio Complet</title>
+  <style>
+    :root {
+      --bg: #f9fafb;
+      --text: #111827;
+      --primary: #2563eb;
+      --secondary: #1e40af;
+      --accent: #dbeafe;
+    }
+    body {
+      font-family: "Inter", Arial, sans-serif;
+      line-height: 1.6;
+      background: var(--bg);
+      color: var(--text);
+      margin: 0;
+      padding: 0;
+    }
+    header {
+      background: linear-gradient(90deg, var(--primary), var(--secondary));
+      color: white;
+      padding: 3rem 1rem;
+      text-align: center;
+    }
+    header h1 {
+      font-size: 2.5rem;
+      margin-bottom: 0.5rem;
+    }
+    header p {
+      font-size: 1.2rem;
+      opacity: 0.9;
+    }
+    main {
+      max-width: 1100px;
+      margin: 3rem auto;
+      padding: 0 1.5rem;
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 14px rgba(0,0,0,0.08);
+    }
+    section {
+      padding: 2rem 0;
+      border-bottom: 1px solid #e5e7eb;
+    }
+    h2 {
+      color: var(--primary);
+      border-left: 5px solid var(--accent);
+      padding-left: 10px;
+      font-size: 1.6rem;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 1rem;
+      font-size: 0.95rem;
+    }
+    th, td {
+      border: 1px solid #e5e7eb;
+      padding: 8px 12px;
+      text-align: left;
+    }
+    th {
+      background-color: var(--accent);
+    }
+    tr:nth-child(even) {
+      background: #f3f4f6;
+    }
+    code, pre {
+      background: #f3f4f6;
+      padding: 0.3em 0.5em;
+      border-radius: 6px;
+      font-family: monospace;
+    }
+    a {
+      color: var(--primary);
+      text-decoration: none;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
+    footer {background: #2c3e50; color: white; padding: 40px 0; margin-top: 60px;}
+    footer .container {max-width: 1200px; margin: 0 auto; padding: 0 20px; text-align: center;}
+    footer p {margin-bottom: 10px;}
+    .highlight {
+      background: var(--accent);
+      padding: 0.4em 0.6em;
+      border-radius: 6px;
+      font-weight: 600;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>📚 LP DWCA - HTML, CSS, JavaScript & PHP</h1>
+    <p>Portfolio Complet – Licence Professionnelle Développeur Web et Conception d’Applications</p>
+  </header>
+
+  <main>
+    <section>
+      <h2>👨‍💻 Auteur</h2>
+      <p><strong>Mickael Hoffer</strong><br>
+      Développeur Full Stack Junior<br>
+      📧 <a href="mailto:mickael.hoffer@etu.unistra.fr">mickael.hoffer@etu.unistra.fr</a><br>
+      🌐 <a href="mickael-dev.vercel.app" target="_blank">mickael-dev.vercel</a><br>
+      🔗 <a href="https://github.com/mickaaa67">@hoffer</a></p>
+    </section>
+
+    <section>
+      <h2>🎯 Vue d’Ensemble du Portfolio</h2>
+      <p><span class="highlight">✨ Portfolio complet avec 244+ fichiers et ~37,269 lignes de code !</span></p>
+
+      <table>
+        <tr>
+          <th>Catégorie</th>
+          <th>Fichiers</th>
+          <th>Lignes</th>
+          <th>Description</th>
+        </tr>
+        <tr><td>Course Exercises</td><td>4</td><td>~1,267</td><td>Chapitres JavaScript complets</td></tr>
+        <tr><td>Mini-Projet Bootstrap</td><td>2</td><td>~850</td><td>Projet en binôme (avec Mickael Hoffer)</td></tr>
+        <tr><td>Emmet Mastery</td><td>4</td><td>~2,500</td><td>Guide Emmet complet</td></tr>
+        <tr><td>XHTML Reference</td><td>4</td><td>~1,200</td><td>Guide XHTML interactif complet</td></tr>
+        <tr><td>CSS Zen Garden Demo</td><td>8</td><td>~2,500</td><td>Démonstration interactive CSS</td></tr>
+        <tr><td>JavaScript Reference</td><td>5</td><td>~3,200</td><td>Guide JavaScript complet</td></tr>
+        <tr><td>Tailwind CSS Mastery</td><td>5</td><td>~2,500</td><td>Framework utility-first moderne</td></tr>
+        <tr><td>Resources & Tools</td><td>2</td><td>~626</td><td>15+ ressources documentées</td></tr>
+        <tr><td>To-Do-List App</td><td>4</td><td>~1,500</td><td>Application CRUD complète</td></tr>
+        <tr><td>JSON SP</td><td>8</td><td>~642</td><td>Activités JSON (Étapes 1A-1E)</td></tr>
+        <tr><td>Practical Examples</td><td>148+</td><td>~11,240</td><td>HTML, CSS, JavaScript</td></tr>
+        <tr><td>Autres</td><td>46+</td><td>~9,193</td><td>Divers exemples et projets</td></tr>
+        <tr><td>HTML N1 CV Homework</td><td>6</td><td>~1,017</td><td>Évaluation HTML5 sémantique</td></tr>
+        <tr><td>DOM CSS Mastery</td><td>4</td><td>~1,051</td><td>Manipulation DOM & CSS interactif</td></tr>
+        <tr style="font-weight:bold;"><td>TOTAL</td><td>250+</td><td>~38,286</td><td>Portfolio complet</td></tr>
+      </table>
+    </section>
+
+    <section>
+      <h2>🌟 Projets Phares</h2>
+      <p>Découvrez ci-dessous quelques-uns des modules principaux du portfolio :</p>
+      <ul>
+        <li><strong>Course Exercises</strong> – Chapitres JavaScript complets</li>
+        <li><strong>Mini-Projet Bootstrap</strong> – Projet responsive en binôme</li>
+        <li><strong>Emmet Mastery</strong> – Guide exhaustif des raccourcis Emmet</li>
+        <li><strong>Resources & Tools</strong> – Compilation de 15+ ressources documentées</li>
+        <li><strong>XHTML Reference</strong> – Guide pédagogique XHTML complet</li>
+        <li><strong>CSS Zen Garden Demo</strong> – Démonstration de la séparation contenu/style</li>
+        <li><strong>JavaScript Reference</strong> – Guide interactif avec playground</li>
+        <li><strong>Tailwind CSS Mastery</strong> – Framework moderne utility-first</li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>📖 Structure du Repository</h2>
+      <pre><code>lpdwca_html_css_js_php/
+├── README.md
+├── index.html
+├── course-exercises/
+├── mini-projet-bootstrap/
+├── emmet-mastery/
+├── resources-and-tools/
+├── todolist-app/
+└── css-zen-garden-demo/
+      </code></pre>
+    </section>
+  </main>
+
+  <footer>
+        <div class="container">
+            <p>&copy; 2025 Blog LP DWCA - Tous droits réservés</p>
+            <p>Formation: Licence Professionnelle Développeur Web et Conception d'Applications</p>
+
+            <!-- Informations de contact -->
+            <address>
+                <p>
+                    Contact: 
+                    <a href="mailto:mikail.lekesiz@etu.unistra.fr">mikail.lekesiz@etu.unistra.fr</a><br>
+                    <a href="mickael.hoffer@etu.unistra.fr">mickael.hoffer@etu.unistra.fr</a>
+                </p>
+                <p>
+                    Portfolio: 
+                    <a href="https://portfolio.lekesiz.fr" target="_blank">portfolio.lekesiz.fr</a><br>
+                    <a href="mickael-dev.vercel.app" target="_blank">mickael-dev.vercel</a>
+                </p>
+            </address>
+        </div>
+    </footer>
+</body>
+</html>