From f3d41d3bc5c97ccd5d3831d8d305fbb656a9065b Mon Sep 17 00:00:00 2001 From: Micka67 Date: Wed, 15 Oct 2025 00:12:19 +0200 Subject: [PATCH 1/3] Modif text page bootstrap mastery --- mini-projet-bootstrap/index.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/mini-projet-bootstrap/index.html b/mini-projet-bootstrap/index.html index 13226d5..2c6c88e 100644 --- a/mini-projet-bootstrap/index.html +++ b/mini-projet-bootstrap/index.html @@ -3,7 +3,7 @@ - Bootstrap Framework - Mini Projet | Mikail Lekesiz & Mickael Hoffer + Bootstrap Framework - Mini Projet | Lekesiz Mikail & Hoffer Mickael @@ -138,7 +138,7 @@

Bootstrap Framework

-

Qu'est-ce que Bootstrap?

+

Bootstrap en quelques mots

Bootstrap est le framework CSS le plus populaire au monde pour créer des sites web responsives et mobile-first.

  • Responsive - S'adapte à tous les écrans
    • @@ -157,7 +157,7 @@

    Qu'est-ce que Bootstrap?

    -

    Composants Bootstrap

    +

    Les composants de Bootstrap

    @@ -342,15 +342,15 @@

    Formulaires Bootstrap

    - +
    - +
    - +
    @@ -418,13 +418,13 @@

    Mikail Lekesiz

    Mickael Hoffer

    -

    Développeur Web

    -

    Étudiant en LP DWCA à l'Université de Strasbourg. Intéressé par le design et le développement frontend.

    +

    Développeur Web Full stack

    +

    Étudiant en LPDWCA à l'Université de Strasbourg. Passionné par le développement web, et les nouvelles technologies.

    - + GitHub - + Portfolio
    From 9b0fd4bb2afa273a9ee97d1a5d145f1338e5c75c Mon Sep 17 00:00:00 2001 From: Micka67 Date: Sat, 18 Oct 2025 17:27:42 +0200 Subject: [PATCH 2/3] Modification footer + ajout 2 projet Weather app et Portfolio --- README.html | 192 ++++ README.md | 1015 ----------------- VERCEL_DEPLOYMENT.html | 222 ++++ VERCEL_DEPLOYMENT.md | 468 -------- .../semantic/01-blog-article-semantic.html | 6 +- index.html | 37 +- js/OOJS/userManagementSystem.html | 49 +- js/json/fetchAPIDemo.html | 10 +- mini-projet-bootstrap/index.html | 7 +- package.json | 21 + portfolio-responsive/index.html | 209 ++++ portfolio-responsive/projet/portfolio.html | 295 +++++ weather-app/index.html | 135 +++ weather-app/projet/weatherAPP.html | 147 +++ 14 files changed, 1314 insertions(+), 1499 deletions(-) create mode 100644 README.html delete mode 100644 README.md create mode 100644 VERCEL_DEPLOYMENT.html delete mode 100644 VERCEL_DEPLOYMENT.md create mode 100644 package.json create mode 100644 portfolio-responsive/index.html create mode 100644 portfolio-responsive/projet/portfolio.html create mode 100644 weather-app/index.html create mode 100644 weather-app/projet/weatherAPP.html diff --git a/README.html b/README.html new file mode 100644 index 0000000..1343ddb --- /dev/null +++ b/README.html @@ -0,0 +1,192 @@ + + + + + + LP DWCA - Portfolio Complet + + + +
    +

    📚 LP DWCA - HTML, CSS, JavaScript & PHP

    +

    Portfolio Complet – Licence Professionnelle Développeur Web et Conception d’Applications

    +
    + +
    +
    +

    👨‍💻 Auteur

    +

    Mickael Hoffer
    + Développeur Full Stack Junior
    + 📧 mickael.hoffer@etu.unistra.fr
    + 🌐 mickael-dev.vercel
    + 🔗 @hoffer

    +
    + +
    +

    🎯 Vue d’Ensemble du Portfolio

    +

    ✨ Portfolio complet avec 244+ fichiers et ~37,269 lignes de code !

    + + + + + + + + + + + + + + + + + + + + + + + +
    CatégorieFichiersLignesDescription
    Course Exercises4~1,267Chapitres JavaScript complets
    Mini-Projet Bootstrap2~850Projet en binôme (avec Mickael Hoffer)
    Emmet Mastery4~2,500Guide Emmet complet
    XHTML Reference4~1,200Guide XHTML interactif complet
    CSS Zen Garden Demo8~2,500Démonstration interactive CSS
    JavaScript Reference5~3,200Guide JavaScript complet
    Tailwind CSS Mastery5~2,500Framework utility-first moderne
    Resources & Tools2~62615+ ressources documentées
    To-Do-List App4~1,500Application CRUD complète
    JSON SP8~642Activités JSON (Étapes 1A-1E)
    Practical Examples148+~11,240HTML, CSS, JavaScript
    Autres46+~9,193Divers exemples et projets
    HTML N1 CV Homework6~1,017Évaluation HTML5 sémantique
    DOM CSS Mastery4~1,051Manipulation DOM & CSS interactif
    TOTAL250+~38,286Portfolio complet
    +
    + +
    +

    🌟 Projets Phares

    +

    Découvrez ci-dessous quelques-uns des modules principaux du portfolio :

    +
      +
    • Course Exercises – Chapitres JavaScript complets
      • +
    • Mini-Projet Bootstrap – Projet responsive en binôme
      • +
    • Emmet Mastery – Guide exhaustif des raccourcis Emmet
      • +
    • Resources & Tools – Compilation de 15+ ressources documentées
      • +
    • XHTML Reference – Guide pédagogique XHTML complet
      • +
    • CSS Zen Garden Demo – Démonstration de la séparation contenu/style
      • +
    • JavaScript Reference – Guide interactif avec playground
      • +
    • Tailwind CSS Mastery – Framework moderne utility-first
      • +
    +
    + +
    +

    📖 Structure du Repository

    + 
    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/
+
    +
    +
    + + + + diff --git a/README.md b/README.md deleted file mode 100644 index 5cbe0c1..0000000 --- a/README.md +++ /dev/null @@ -1,1015 +0,0 @@ -# 📚 LP DWCA - HTML, CSS, JavaScript & PHP - -## Portfolio Complet - Formation Professionnelle en Développement Web - -Ce dépôt contient l'ensemble des supports de cours, exercices et **exemples pratiques professionnels** pour la formation **Licence Professionnelle Développeur Web et Conception d'Applications (LP DWCA)** à l'Université de Strasbourg. - -**✨ Portfolio complet avec 244+ fichiers et ~37,269 lignes de code!** - ---- - -## 👨‍💻 Auteur - -**Mikail Lekesiz** -DevOps Engineer & Full Stack Developer -CEO - Netz Informatique -📧 Contact: [mikail.lekesiz@etu.unistra.fr](mailto:mikail.lekesiz@etu.unistra.fr) -🌐 Portfolio: [portfolio.lekesiz.fr](https://portfolio.lekesiz.fr) -🔗 GitHub: [@lekesiz](https://github.com/lekesiz) - ---- - -## 🎯 Vue d'Ensemble du Portfolio - -| Catégorie | Fichiers | Lignes | Description | -|-----------|----------|--------|-------------| -| **Course Exercises** | 4 | ~1,267 | Chapitres JavaScript complets | -| **Mini-Projet Bootstrap** | 2 | ~850 | Projet en binôme (avec Mickael Hoffer) | -| **Emmet Mastery** | 4 | ~2,500 | Guide Emmet complet | -| **XHTML Reference** | 4 | ~1,200 | Guide XHTML interactif complet | -| **CSS Zen Garden Demo** | 8 | ~2,500 | Démonstration interactive CSS | -| **JavaScript Reference** | 5 | ~3,200 | Guide JavaScript complet et interactif | -| **Tailwind CSS Mastery** ⭐ | 5 | ~2,500 | Framework utility-first moderne | -| **Resources & Tools** | 2 | ~626 | 15+ ressources documentées | -| **To-Do-List App** | 4 | ~1,500 | Application CRUD complète | -| **JSON SP** | 8 | ~642 | Activités JSON (Etapes 1A-1E) | -| **Practical Examples** | 148+ | ~11,240 | HTML, CSS, JavaScript | -| **Autres** | 46+ | ~9,193 | Divers exemples et projets | -| **HTML N1 CV Homework** | 6 | ~1,017 | Évaluation HTML5 sémantique | -| **DOM CSS Mastery** ⭐ | 4 | ~1,051 | Manipulation DOM & CSS interactif | -| **TOTAL** | **250+** | **~38,286** | **Portfolio complet** | - ---- - -## 🌟 Projets Phares - -### 1. 🎓 Course Exercises - Chapitres JavaScript Complets - -**📁 `course-exercises/`** (~1,267 lignes) - -Démonstration complète de la maîtrise des concepts JavaScript enseignés par ERIC CHRISTOFFEL: - -#### Chapter 1: Bases JavaScript -- **01-variables-types-operators.html** (~467 lignes) - - Variables (var, let, const) - - Types primitifs (string, number, boolean, undefined, null) - - Opérateurs (arithmétiques, comparaison, logiques, affectation) - - Template literals - - typeof operator - -#### Chapter 1: Structures de Contrôle -- **02-control-structures.html** (~250 lignes) - - if/else, else if - - switch/case - - for, while, do-while - - break, continue - - Ternary operator - -#### Chapter 1: Fonctions -- **03-functions.html** (~200 lignes) - - Function declaration - - Function expression - - Arrow functions - - Parameters et return - - Scope - -#### Chapter 2: OOJS, JSON, DOM -- **04-oojs-json-dom.html** (~350 lignes) - - Objects et propriétés - - Méthodes - - JSON.parse() et JSON.stringify() - - DOM manipulation - - Event listeners - -**✨ Chaque exemple:** Interface interactive, exécution en temps réel, documentation pédagogique - ---- - -### 2. 🎨 Mini-Projet Bootstrap Framework - -**📁 `mini-projet-bootstrap/`** (~850 lignes) - -**Projet en binôme:** Mikail Lekesiz + Mickael Hoffer - -Page complète démontrant la maîtrise de Bootstrap 5.3: -- ✅ **50+ composants** Bootstrap -- ✅ Navigation responsive avec hamburger menu -- ✅ Hero section avec carousel -- ✅ Cards, badges, buttons -- ✅ Forms avec validation -- ✅ Modals, tooltips, popovers -- ✅ Grid system (12 colonnes) -- ✅ Utilities (spacing, colors, typography) -- ✅ Icons (Bootstrap Icons) -- ✅ Responsive sur tous les écrans - -**Fichiers:** -- `index.html` - Page complète (~650 lignes) -- `README.md` - Documentation professionnelle (~200 lignes) - ---- - -### 3. 📚 Emmet Mastery - Guide Complet - -**📁 `emmet-mastery/`** (~2,500 lignes) - -Guide exhaustif démontrant la maîtrise d'Emmet: - -#### Guide Complet -- **emmet-cheat-sheet-complete.html** (~900 lignes) - - 100+ raccourcis Emmet - - 10 sections (HTML, CSS, opérateurs, etc.) - - 15 tableaux de référence - - Design moderne et interactif - -#### Exemples Pratiques -- **practical-examples.html** (~700 lignes) - - 7 exemples pratiques complets - - Navigation, galerie, formulaire, tableau, cards - - Chaque exemple montre le raccourci exact - - Résultats visuels interactifs - -#### Projet Showcase -- **emmet-showcase-project.html** (~650 lignes) - - Page complète créée avec Emmet - - Header, Hero, Features, Galerie, Contact, Footer - - Créée en 10 minutes vs 2 heures sans Emmet - - Gain de temps: 92%! - ---- - -### 4. 📖 Resources & Tools ⭐ NOUVEAU! - -**📁 `resources-and-tools/`** (~626 lignes) - -Compilation complète de toutes les ressources utilisées pendant la formation: - -#### 15+ Ressources Documentées - -**1. Cours & Documentation** -- Repository GitHub du professeur (ERIC CHRISTOFFEL) -- Tableau des cours LP DWCA -- Calendrier du cours -- Document Google - Notes de cours - -**2. Outils de Validation** -- W3C HTML Validator - -**3. Outils de Formatage** -- XML Viewer & Beautifier -- JavaScript Minifier -- JSON Editor Online - -**4. Outils de Développement** -- Live DOM Viewer - -**5. Ressources d'Apprentissage** -- W3Schools -- MDN Web Docs (Mozilla) -- Pierre Giraud - JavaScript -- ScholarVox - HTML5 - -**6. Inspiration & Design** -- CSS Zen Garden -- XHTML Qanuq - -**7. Utilisation Pratique** -- Documentation de l'utilisation de chaque ressource dans mes projets -- Exemples concrets -- Impact sur la qualité du code - -**Fichiers:** -- `index.html` - Page interactive (~626 lignes) -- `README.md` - Documentation complète - ---- - -### 5. 📖 XHTML Reference ⭐ NOUVEAU! - -**📁 `xhtml-reference/`** (~1,200 lignes) - -Guide de référence XHTML complet basé sur [XHTML Qanuq](https://xhtml.qanuq.com/), transformé en ressource pédagogique interactive: - -#### Contenu du Module - -**Guide Structuré:** -- **01-introduction.html** - Introduction complète à XHTML -- Différences HTML vs XHTML -- Règles strictes de XHTML -- Exemples de code valide - -**Interface Interactive:** -- **interactive/index.html** - Recherche de balises en temps réel -- 77 balises HTML/XHTML documentées -- Filtrage par catégorie (structure, texte, formulaire, tableau, liste, média) -- Exemples de code pour chaque balise -- Liens directs vers XHTML Qanuq - -**Exemples Pratiques:** -- **01-document-simple.html** - Structure XHTML de base -- Code commenté et expliqué -- Validation W3C - -#### Fonctionnalités - -- ✅ **Recherche interactive** : Trouvez rapidement n'importe quelle balise -- ✅ **Catégorisation** : Balises organisées par fonction -- ✅ **Documentation complète** : Utilité, type (inline/block), exemples -- ✅ **Référence originale** : Liens vers XHTML Qanuq pour détails complets -- ✅ **Apprentissage progressif** : Du simple au complexe -- ✅ **Code valide** : Tous les exemples conformes XHTML 1.1 - -**Fichiers:** -- `README.md` - Documentation complète du module -- `guide/01-introduction.html` - Guide d'introduction (~800 lignes) -- `interactive/index.html` - Interface de recherche (~400 lignes) -- `examples/01-document-simple.html` - Exemple pratique - -**Crédits:** -Basé sur [XHTML Qanuq](https://xhtml.qanuq.com/) de **Matthieu PETIOT** - ---- - -### 6. 🎨 CSS Zen Garden Demo ⭐ NOUVEAU! - -**📁 `css-zen-garden-demo/`** (~2,000 lignes) - -Démonstration interactive de la puissance de CSS, inspirée du célèbre [CSS Zen Garden](https://csszengarden.com/) de Dave Shea: - -#### Concept Fondamental - -> **"Un même HTML, des designs infinis"** - -Le CSS Zen Garden démontre un principe révolutionnaire : **la séparation complète du contenu (HTML) et de la présentation (CSS)**. Le même HTML peut produire des designs radicalement différents en changeant uniquement le fichier CSS. - -#### Contenu du Module - -**Démonstration Interactive:** -- **interactive/index.html** - Interface de changement de thèmes en temps réel -- Sélecteur de thèmes avec aperçu instantané -- Comparaison visuelle des différents styles -- Raccourcis clavier pour navigation rapide - -**Thèmes CSS:** -- **theme-minimal.css** - Design épuré et minimaliste -- **theme-modern.css** - Style contemporain avec gradients et animations -- **base.css** - HTML brut sans style (pour comparaison) - -**HTML de Base:** -- **base.html** - Structure HTML unique utilisée par tous les thèmes -- Sémantique et accessible -- Aucune modification entre les thèmes - -#### Fonctionnalités - -- ✅ **Changement de thème en direct** : Visualisez instantanément les transformations -- ✅ **Même HTML** : Structure identique pour tous les designs -- ✅ **CSS uniquement** : Toute la magie vient du CSS -- ✅ **Démonstration pédagogique** : Comprendre la séparation contenu/présentation -- ✅ **Code commenté** : Explications détaillées dans chaque fichier CSS -- ✅ **Responsive** : Tous les thèmes s'adaptent aux différents écrans - -#### Concepts CSS Démontrés - -**Layout:** -- Flexbox pour alignements flexibles -- CSS Grid pour grilles complexes -- Positioning (absolute, relative, fixed) - -**Styling:** -- Gradients et couleurs -- Typography avancée -- Ombres et effets visuels - -**Animations:** -- Transitions fluides -- Keyframes animations -- Transform et hover effects - -**Responsive Design:** -- Media queries -- Unités flexibles (rem, em, %, vw, vh) -- Mobile-first approach - -#### Valeur Pédagogique - -**Pour les Étudiants:** -1. Comprendre la puissance de CSS -2. Voir la séparation contenu/présentation en action -3. Apprendre les techniques CSS modernes -4. S'inspirer pour créer leurs propres designs - -**Pour les Enseignants:** -- Support de cours visuel et interactif -- Démonstration claire d'un concept fondamental -- Exemples de code réutilisables -- Exercices pratiques suggérés - -**Fichiers:** -- `README.md` - Documentation complète du concept -- `themes/base.html` - HTML de base (~500 lignes) -- `themes/theme-minimal.css` - Thème minimal (~400 lignes) -- `themes/theme-modern.css` - Thème moderne (~600 lignes) -- `interactive/index.html` - Démo interactive (~500 lignes) - -**Crédits:** -Inspiré par [CSS Zen Garden](https://csszengarden.com/) de **Dave Shea** - ---- - -### 7. 📘 JavaScript Reference - Guide Complet et Interactif ⭐ NOUVEAU! - -**📁 `javascript-reference/`** (~3,200 lignes) - -Guide JavaScript complet inspiré des meilleurs cours en ligne, avec playground interactif et exercices pratiques: - -#### Concept Fondamental - -> **"Apprendre JavaScript en pratiquant"** - -Ce module offre une approche complète et interactive pour maîtriser JavaScript, du niveau débutant au niveau avancé, avec des exemples concrets et des exercices progressifs. - -#### Contenu du Module - -**Guides Théoriques:** -- **guide/01-introduction-to-javascript.md** - Introduction complète à JavaScript - - Histoire et évolution (1995 → 2025) - - Pourquoi apprendre JavaScript - - Premier programme "Hello World" - - Écosystème JavaScript moderne - -- **guide/02-variables-and-data-types.md** - Variables et types de données - - let, const, var (différences et bonnes pratiques) - - Types primitifs (string, number, boolean, undefined, null) - - Typage dynamique - - Objets et structures complexes - -**Playground Interactif:** -- **interactive/index.html** - Environnement d'exécution en temps réel - - Éditeur de code intégré - - Console de sortie interactive - - 9 exemples prêts à l'emploi - - Raccourcis clavier (Ctrl+Enter pour exécuter) - -**Exercices Pratiques:** -- **exercises/exercises.html** - 6 exercices progressifs avec solutions - - Exercice 1: Calculatrice Simple (Facile) - - Exercice 2: Vérificateur de Palindrome (Facile) - - Exercice 3: Filtrer les Nombres Pairs (Facile) - - Exercice 4: Compter les Voyelles (Moyen) - - Exercice 5: FizzBuzz (Moyen) - - Exercice 6: Trouver le Maximum (Moyen) - -#### Fonctionnalités du Playground - -- ✅ **Éditeur de code** : Textarea avec coloration syntaxique -- ✅ **Exécution en temps réel** : Voir les résultats instantanément -- ✅ **Console interactive** : Affichage des console.log() -- ✅ **Exemples intégrés** : 9 catégories d'exemples - - Hello World - - Variables et Types - - Opérateurs - - Conditions (if/else, switch) - - Boucles (for, while, forEach) - - Fonctions (classiques et arrow functions) - - Tableaux (map, filter, reduce) - - Objets (création, manipulation, destructuration) - - DOM Manipulation -- ✅ **Gestion des erreurs** : Messages d'erreur clairs -- ✅ **Interface moderne** : Design avec gradients et animations - -#### Concepts JavaScript Couverts - -**Fondamentaux:** -- Variables (let, const, var) -- Types de données primitifs -- Opérateurs (arithmétiques, comparaison, logiques) -- Structures conditionnelles (if/else, switch, ternaire) -- Boucles (for, while, do-while) - -**Intermédiaire:** -- Fonctions (déclaration, expression, arrow) -- Tableaux et méthodes (map, filter, reduce, forEach) -- Objets et propriétés -- JSON (parse, stringify) -- Scope et closures - -**Avancé:** -- Manipulation du DOM -- Event listeners -- LocalStorage -- Programmation fonctionnelle -- ES6+ features - -#### Valeur Pédagogique - -**Pour les Étudiants:** -1. Apprendre en pratiquant immédiatement -2. Tester des idées sans configuration -3. Comprendre les concepts avec des exemples concrets -4. Progresser à son rythme avec exercices gradués -5. Voir les résultats en temps réel - -**Pour les Enseignants:** -- Outil de démonstration en classe -- Exercices prêts à utiliser -- Progression pédagogique structurée -- Support de cours interactif -- Évaluation avec solutions fournies - -**Fichiers:** -- `README.md` - Documentation complète du module -- `guide/01-introduction-to-javascript.md` - Introduction (~800 lignes) -- `guide/02-variables-and-data-types.md` - Variables et types (~700 lignes) -- `interactive/index.html` - Playground interactif (~1,000 lignes) -- `exercises/exercises.html` - Exercices pratiques (~700 lignes) -**Crédits:** -Inspiré par les meilleurs cours JavaScript en ligne, notamment Pierre Giraud et MDN Web Docs. - ---- - -### 8. 🚀 Tailwind CSS Mastery - Framework Utility-First ⭐ NOUVEAU! - ---- - -### 9. 🧩 DOM CSS Mastery - Interactive Learning ⭐ NOUVEAU! - -**📁 `dom-css-mastery/`** (~1,051 lignes) - -Module interactif complet pour maîtriser la manipulation du DOM et le contrôle CSS avec JavaScript, inspiré par l'excellent [DOM|CSS Visualizer](https://fritscher.ch/dom-css/) de fritscher.ch: - -#### Concept Fondamental - -> **"Learn by doing, see by visualizing"** - -Ce module offre une expérience d'apprentissage interactive où les étudiants peuvent écrire du code HTML/CSS et voir instantanément l'arbre DOM et la spécificité CSS. - -#### Contenu du Module - -**Interactive Playground:** -- **interactive/playground.html** - Éditeur en temps réel (~350 lignes) - - **Live HTML Editor:** Écrire du HTML et voir le résultat instantanément - - **Live CSS Editor:** Écrire des règles CSS avec aperçu en direct - - **DOM Tree Visualizer:** Représentation visuelle de la structure DOM - - **CSS Specificity Calculator:** Calcul automatique de la spécificité des sélecteurs - - **Instant Preview:** Rendu en temps réel du code - - **Modern UI:** Design gradient avec Bootstrap 5 - -**Progressive Exercises:** -- **exercises/dom-exercises.html** - 5 exercices pratiques (~400 lignes) - - **Exercice 1 (Débutant):** Sélection et modification de texte - - Skills: `getElementById`, `textContent`, inline styles - - Demo: Bouton interactif pour changer le texte - - **Exercice 2 (Débutant):** Ajouter/supprimer des classes CSS - - Skills: `classList.toggle()`, manipulation de classes - - Demo: Toggle l'apparence d'une boîte - - **Exercice 3 (Intermédiaire):** Créer et ajouter des éléments - - Skills: `createElement`, `appendChild`, contenu dynamique - - Demo: Ajouter de nouveaux éléments à la page - - **Exercice 4 (Intermédiaire):** Gestion des événements - - Skills: `addEventListener`, callbacks, compteurs - - Demo: Compteur de clics avec couleurs dynamiques - - **Exercice 5 (Avancé):** Liste interactive avec suppression - - Skills: Manipulation DOM complexe, validation d'input - - Demo: Ajouter/supprimer des éléments de liste (CRUD) - -**Documentation:** -- **README.md** - Guide complet (~100 lignes) - - Introduction au DOM et à sa structure - - Techniques de manipulation DOM - - Sélecteurs CSS et spécificité - - Manipulation CSS avec JavaScript - - Objectifs d'apprentissage - - Crédits et remerciements - -**Navigation Principale:** -- **index.html** - Hub du module (~200 lignes) - - Présentation des fonctionnalités - - Liens vers playground et exercices - - Objectifs d'apprentissage détaillés - - Navigation vers portfolio - -#### Fonctionnalités Clés - -**Playground Interactif:** -- ✅ Éditeurs HTML et CSS avec coloration syntaxique -- ✅ Visualisation de l'arbre DOM en temps réel -- ✅ Calculateur de spécificité CSS (inline, IDs, classes, elements) -- ✅ Aperçu instantané du rendu -- ✅ Interface moderne et intuitive - -**Exercices Progressifs:** -- ✅ 5 exercices du débutant à l'avancé -- ✅ Démonstrations interactives en direct -- ✅ Solutions détaillées avec code commenté -- ✅ Boutons "Voir la Solution" pour chaque exercice -- ✅ Exemples du monde réel - -#### Technologies Utilisées - -- **HTML5:** Structure sémantique -- **CSS3:** Styling moderne, gradients, transitions -- **JavaScript (ES6+):** Manipulation DOM, event handling -- **Bootstrap 5:** Design responsive et composants -- **Bootstrap Icons:** Iconographie professionnelle - -#### Objectifs d'Apprentissage - -**Manipulation DOM:** -- ✅ Comprendre la structure du DOM -- ✅ Sélectionner des éléments (`getElementById`, `querySelector`, etc.) -- ✅ Créer et ajouter de nouveaux éléments -- ✅ Modifier les attributs et le contenu des éléments -- ✅ Gérer les événements utilisateur - -**Contrôle CSS:** -- ✅ Comprendre les sélecteurs CSS -- ✅ Calculer la spécificité CSS -- ✅ Manipuler les styles avec JavaScript -- ✅ Ajouter/supprimer des classes CSS -- ✅ Créer des animations dynamiques - -#### Valeur Pédagogique - -**Pour les Étudiants:** -- Expérience d'apprentissage pratique -- Feedback et visualisation instantanés -- Courbe de difficulté progressive -- Exemples du monde réel -- Apprentissage à son propre rythme - -**Pour les Enseignants:** -- Matériel pédagogique prêt à l'emploi -- Démonstrations interactives -- Exercices d'évaluation -- Couverture complète des sujets DOM/CSS -- Présentation professionnelle - -**Crédits:** -Ce module est fortement inspiré par le **DOM|CSS Visualizer** créé par [fritscher.ch](https://fritscher.ch/dom-css/). L'outil original est une ressource fantastique pour apprendre et enseigner le DOM et CSS. - ---- - -### 10. 🎓 HTML N1 CV Homework - Semantic HTML5 ⭐ NOUVEAU! - -**📁 `html-n1-cv/`** (~1,017 lignes) - -Projet complet pour l'évaluation HTML N1, démontrant la maîtrise du HTML5 sémantique sans CSS: - -**Contenu du Module:** -- **cv_pw1.html:** CV de base sans éléments de section -- **cv_pw2.html:** CV optimisé avec sémantique HTML5 -- **Documentation complète:** Guides pour W3C validation, code analysis, et déploiement Alwaysdata - -**Compétences Démontrées:** -- ✅ HTML5 sémantique -- ✅ Validation W3C (0 Erreur) -- ✅ Analyse de code -- ✅ SEO et accessibilité -- ✅ Documentation technique - ---- - - -**📁 `tailwind-css-mastery/`** (~2,500 lignes) - -Module complet sur Tailwind CSS, le framework CSS utility-first le plus populaire, avec comparaisons, exemples pratiques et showcase interactif: - -#### Concept Fondamental - -> **"Rapidly build modern websites without ever leaving your HTML"** - -Tailwind CSS révolutionne le développement frontend avec son approche utility-first, permettant de créer des designs uniques sans écrire une seule ligne de CSS personnalisé. - -#### Contenu du Module - -**Documentation Complète:** -- **README.md** - Guide complet (~350 lignes) - - Introduction à Tailwind CSS - - Philosophie utility-first vs component-based - - Avantages et inconvénients détaillés - - Comparaison Tailwind vs Bootstrap - - Guide d'installation (CDN et npm) - - Configuration et personnalisation - -**Comparaison Bootstrap vs Tailwind:** -- **comparison/bootstrap-card.html** - Carte construite avec Bootstrap 5 - - 15 lignes HTML, 12 classes - - Composants prêts à l'emploi - - Avantages et limitations Bootstrap - -- **comparison/tailwind-card.html** - Même carte avec Tailwind CSS - - 18 lignes HTML, 35+ classes - - Personnalisation maximale - - Avantages et limitations Tailwind - - Animations et hover effects avancés - -**Showcase Landing Page:** -- **showcase/index.html** - Page d'accueil complète (~1,350 lignes) - - Navigation fixed avec backdrop blur - - Hero section avec gradient et cartes flottantes - - Features section (6 fonctionnalités) - - Examples section avec code snippets - - Testimonials section - - CTA section impactante - - Footer moderne - -**Navigation Principale:** -- **index.html** - Hub du module (~200 lignes) - - 4 cartes de navigation - - Statistiques du module - - Section "Pourquoi Tailwind CSS?" - - Design moderne avec Tailwind - -#### Fonctionnalités Démontrées - -**Tailwind CSS Core Features:** -- ✅ **Utility-First Approach** : Classes utilitaires pour chaque style -- ✅ **Responsive Design** : Breakpoints intuitifs (sm:, md:, lg:, xl:) -- ✅ **Gradients** : bg-gradient-to-r, bg-gradient-to-br -- ✅ **Animations** : Transitions, transforms, hover effects -- ✅ **Flexbox & Grid** : Layout moderne et flexible -- ✅ **Colors** : Palette complète avec nuances 50-950 -- ✅ **Typography** : Système de texte cohérent -- ✅ **Spacing** : Padding, margin, gap - -**Concepts Avancés:** -- Dark mode avec préfixe `dark:` -- States (hover:, focus:, active:) -- Backdrop blur et effects -- Custom animations CSS -- Smooth scrolling JavaScript - -#### Comparaison Détaillée - -| Aspect | Bootstrap | Tailwind CSS | -|--------|-----------|--------------| -| **Approche** | Component-Based | Utility-First | -| **Flexibilité** | Limitée | Très élevée | -| **Personnalisation** | Difficile (Sass) | Facile (config.js) | -| **Taille Fichier** | Plus grande | Très petite (<10kB) | -| **HTML** | Concis | Verbeux | -| **Courbe d'Apprentissage** | Facile | Moyenne | -| **Idéal Pour** | Prototypage rapide | Designs personnalisés | - -#### Valeur Pédagogique - -**Pour les Étudiants:** -1. Comprendre l'approche utility-first -2. Comparer différents frameworks CSS -3. Maîtriser les classes Tailwind -4. Créer des designs modernes et responsive -5. Apprendre les best practices CSS - -**Pour les Enseignants:** -- Comparaison pratique de frameworks -- Exemples de code réels et fonctionnels -- Démonstration de concepts modernes -- Support de cours interactif - -**Fichiers:** -- `README.md` - Documentation complète (~350 lignes) -- `index.html` - Navigation principale (~200 lignes) -- `comparison/bootstrap-card.html` - Exemple Bootstrap (~250 lignes) -- `comparison/tailwind-card.html` - Exemple Tailwind (~350 lignes) -- `showcase/index.html` - Landing page complète (~1,350 lignes) - -**Crédits:** -Basé sur [Tailwind CSS](https://tailwindcss.com/) par **Tailwind Labs** - ---- - -## 📚 Resources & Toolst Application Complète - -**📁 `todolist-app/`** (~1,500 lignes) - -Application complète de gestion de tâches avec toutes les étapes: - -#### Etape N2a: Formulaire Statique -- **N2a_form_statique.html** - - Formulaire HTML écrit "à la main" - - Tous les champs statiques - - Validation HTML5 - -#### Etape N2b: Formulaire Dynamique -- **N2b_form_dynamique.html** - - Génération complète en JavaScript - - Listes créées depuis les données JSON - - Fonctions réutilisables - -#### Etape N3: LocalStorage -- **N3_localStorage.html** - - Lecture/écriture du localStorage - - Génération automatique des ID - - parse() et stringify() - - Statistiques en temps réel - -#### Etape N4: Dashboard Complet -- **index.html** (Application finale) - - Dashboard avec statistiques - - Filtres par statut - - CRUD complet (Create, Read, Update, Delete) - - Recherche et tri - - Archivage - - Design moderne avec gradients - ---- - -### 6. 🔢 JSON SP - Situations Professionnelles - -**📁 `js/SP/Etape1/`** (~642 lignes) - -Exercices professionnels JSON (Etapes 1A-1E): - -- **Etape1A:** Structure d'une tâche (JSON compacté) -- **Etape1B:** Paramètre Priorité (6 niveaux) -- **Etape1C:** Autres paramètres (Complexité, Catégorie, Durée) -- **Etape1D:** Tâches complètes avec relations Primary/Foreign Keys -- **Etape1E:** Page HTML de démonstration avec tableaux - -**Concepts démontrés:** -- Relations entre données -- Format JSON compacté -- Résolution des références (ID → valeur) -- Affichage dynamique - ---- - -### 7. 🎨 Practical Examples - Exemples Pratiques - -**📁 `html/practical-examples/` & `css/practical-examples/`** (~1,780 lignes) - -#### HTML Examples - -**Formulaires:** -- **01-contact-form-professional.html** (~380 lignes) - - Formulaire de contact complet - - Validation HTML5 - - Gestion JavaScript - - Design moderne - -**Sémantique:** -- **01-blog-article-semantic.html** (~580 lignes) - - Toutes les balises sémantiques HTML5 - - Structure complète (header, nav, main, article, aside, footer) - - SEO optimisé - -#### CSS Examples - -**Flexbox:** -- **01-pricing-table-flexbox.html** (~470 lignes) - - 3 plans (Basique, Pro, Entreprise) - - Utilisation complète de Flexbox - - Responsive automatique - -**Grid:** -- **01-photo-gallery.html** (~350 lignes) - - Masonry layout (Pinterest-style) - - 12 photos - - Auto-responsive - ---- - -## 📖 Structure Complète du Repository - -``` -lpdwca_html_css_js_php/ -├── README.md ⭐ Ce fichier -├── index.html ⭐ Page d'accueil -│ -├── course-exercises/ ⭐ Chapitres JavaScript complets -│ ├── README.md -│ ├── chapter1/ -│ │ ├── basics/ -│ │ │ └── 01-variables-types-operators.html -│ │ ├── control-flow/ -│ │ │ └── 02-control-structures.html -│ │ └── functions/ -│ │ └── 03-functions.html -│ └── chapter2/ -│ └── oojs/ -│ └── 04-oojs-json-dom.html -│ -├── mini-projet-bootstrap/ ⭐ Projet en binôme -│ ├── index.html -│ └── README.md -│ -├── emmet-mastery/ ⭐ Guide Emmet complet -│ ├── README.md -│ ├── guide/ -│ │ └── emmet-cheat-sheet-complete.html -│ ├── examples/ -│ │ └── practical-examples.html -│ └── showcase/ -│ └── emmet-showcase-project.html -│ -├── resources-and-tools/ ⭐ Ressources documentées -│ ├── index.html -│ └── README.md -│ -├── todolist-app/ ⭐ Application complète -│ ├── index.html -│ ├── N2a_form_statique.html -│ ├── N2b_form_dynamique.html -│ ├── N3_localStorage.html -│ └── README.md -│ -├── js/ -│ ├── SP/ ⭐ JSON SP -│ │ └── Etape1/ (Etape1A-1E) -│ ├── OOJS/ -│ ├── jsChap1/ -│ └── json/ -│ └── fetchAPIDemo.html -│ -├── html/ -│ ├── practical-examples/ ⭐ Exemples HTML -│ │ ├── forms/ -│ │ └── semantic/ -│ ├── caseStudy/ -│ ├── projetOscar/ -│ └── webForm/ -│ -└── css/ - ├── practical-examples/ ⭐ Exemples CSS - │ ├── flexbox/ - │ └── grid/ - ├── boxModel/ - ├── combinators/ - ├── cssFlexbox/ - ├── cssGrid/ - └── vw_vh/ -``` - ---- - -## 🚀 Comment Utiliser Ce Repository - -### Pour les Étudiants - -1. **Cloner le repository** - ```bash - git clone https://github.com/lekesiz/lpdwca_html_css_js_php.git - ``` - -2. **Explorer les exemples** - - Ouvrir les fichiers HTML dans un navigateur - - Appuyer sur F12 pour voir la console - - Lire les commentaires dans le code - -3. **Expérimenter** - - Modifier le code - - Tester les changements - - Créer ses propres variations - -### Pour les Enseignants - -1. **Présenter en cours** - - Projeter l'exemple - - Expliquer les concepts avec le code - - Montrer le résultat dans le navigateur - -2. **Donner des exercices** - - Modifier l'exemple - - Ajouter des fonctionnalités - - Créer des variations - ---- - -## 🎓 Compétences Démontrées - -### Technologies Maîtrisées -✅ HTML5 (Semantic, Forms, Validation) -✅ CSS3 (Flexbox, Grid, Animations, Gradients) -✅ JavaScript (ES6+, DOM, OOJS, JSON, API) -✅ Bootstrap 5.3 (50+ composants) -✅ Emmet (100+ raccourcis) -✅ Git & GitHub (38+ commits) - -### Outils Utilisés -✅ W3C Validator -✅ JSON Editor -✅ Code Beautifiers -✅ Live DOM Viewer -✅ VS Code + Emmet - -### Best Practices -✅ Code valide W3C -✅ Responsive design -✅ Accessibility -✅ Performance -✅ Documentation complète -✅ Code propre et commenté - ---- - -## 🌟 Points Forts du Portfolio - -### 1. Exhaustif -Couvre **100%** des concepts enseignés par ERIC CHRISTOFFEL - -### 2. Pratique -Chaque concept démontré avec du **code fonctionnel** - -### 3. Interactif -Interfaces modernes avec **exécution en temps réel** - -### 4. Documenté -**Documentation professionnelle** pour chaque projet - -### 5. Responsive -Tous les projets sont **mobile-friendly** - -### 6. Professionnel -Design moderne, code propre, best practices - -### 7. Ressources -**15+ ressources** documentées avec utilisation pratique - ---- - -## 📚 Ressources Complémentaires - -### Documentation Officielle -- [MDN Web Docs](https://developer.mozilla.org/) - Documentation complète -- [W3C](https://www.w3.org/) - Standards web -- [W3Schools](https://www.w3schools.com/) - Tutoriels interactifs - -### Outils -- [W3C Validator](https://validator.w3.org/) - Validation HTML -- [JSON Editor Online](https://jsoneditoronline.org/) - Éditeur JSON -- [Can I Use](https://caniuse.com/) - Compatibilité navigateurs - -### Inspiration -- [CSS Zen Garden](https://csszengarden.com/) - Design CSS -- [CSS-Tricks](https://css-tricks.com/) - Astuces CSS - -### Cours en Français -- [Pierre Giraud - JavaScript](https://www.pierre-giraud.com/javascript-apprendre-coder-cours/) - ---- - -## 🤝 Contribution & Contact - -### Suggestions Bienvenues - -- Nouveaux exemples -- Améliorations du code -- Corrections de bugs - -### Contact - -**Mikail Lekesiz** -📧 Email: [mikail.lekesiz@etu.unistra.fr](mailto:mikail.lekesiz@etu.unistra.fr) -🌐 Portfolio: [portfolio.lekesiz.fr](https://portfolio.lekesiz.fr) -🔗 GitHub: [@lekesiz](https://github.com/lekesiz) -💼 Entreprise: [Netz Informatique](https://netzinformatique.fr) - ---- - -## 🔄 Mises à Jour - -**Dernière mise à jour:** 10 octobre 2025 - -### Ajouts Récents (10 octobre 2025) - -✅ **Course Exercises** - 4 chapitres JavaScript complets (~1,267 lignes) -✅ **Mini-Projet Bootstrap** - Projet en binôme (~850 lignes) -✅ **Emmet Mastery** - Guide complet (~2,500 lignes) -✅ **Resources & Tools** - 15+ ressources documentées (~626 lignes) -✅ **To-Do-List App** - Application CRUD complète (~1,500 lignes) -✅ **JSON SP** - Activités JSON (Etapes 1A-1E) (~642 lignes) -✅ **Practical Examples** - HTML, CSS, JavaScript (~1,780 lignes) - -**Total: 38+ fichiers, ~10,665 lignes de code!** - ---- - -## 📝 Licence - -Ce matériel pédagogique est destiné aux étudiants de la LP DWCA. -© 2025 Mikail Lekesiz - Tous droits réservés - ---- - -## 🎯 Professeur - -**ERIC CHRISTOFFEL** -Université de Strasbourg -LP DWCA 2025/2026 - ---- - -**Année universitaire 2025/2026** | Université de Strasbourg - -**⭐ Si ce repository vous aide, n'hésitez pas à le star sur GitHub!** - ---- - -**🎊 Portfolio complet et professionnel - Prêt à impressionner! 🎊** - diff --git a/VERCEL_DEPLOYMENT.html b/VERCEL_DEPLOYMENT.html new file mode 100644 index 0000000..0913387 --- /dev/null +++ b/VERCEL_DEPLOYMENT.html @@ -0,0 +1,222 @@ + + + + + + + + 🚀 Guide Vercel - Blog LP DWCA + + + +
    +
    +

    🚀 Blog LP DWCA

    + +
    +
    + +
    +
    +
    +
    +

    🚀 Guide Complet pour Déployer sur Vercel

    +
    +
    + +
    +

    + Vercel est une plateforme cloud moderne conçue pour déployer des sites web et des applications avec rapidité et simplicité. Créée par les développeurs de Next.js, Vercel est idéale pour les projets frontend et les portfolios professionnels. +

    + +
    + Développement web moderne +
    + Photo par Marcus Kohlberg sur Encore cloud - Aperçu depuis Vercel Déploiement de production +
    +
    +
    + +
    +

    🌐 Qu'est-ce que Vercel ?

    +

    + Vercel fournit un environnement optimisé pour transformer le code source en sites web performants accessibles mondialement, en automatisant build, déploiement et mise à l'échelle. +

    +
    + +
    +

    💡 Pourquoi Vercel ?

    +

    + Pour les étudiants, Vercel permet de voir leurs projets en ligne instantanément, enseigne les bonnes pratiques Git et CI/CD, et rend le partage avec professeurs et pairs très simple. +

    +
    + +
    +

    ⚡ Avantages de Vercel

    +
      +
    • Déploiement Automatique : Chaque push Git déclenche un déploiement.
      • +
    • Performance Optimale : CDN mondial, compression, cache intelligent, HTTP/2 et HTTP/3.
      • +
    • HTTPS Gratuit : Certificats SSL générés automatiquement.
      • +
    • Domaines Personnalisés : Sous-domaine gratuit et possibilité d'ajouter votre propre domaine.
      • +
    • Preview Deployments : Tester chaque branche avant mise en production.
      • +
    • Analytics Intégrés : Suivi des performances et visiteurs.
      • +
    • Zéro Configuration : Vercel détecte automatiquement le type de projet.
      • +
    • Plan Gratuit Génereux : Suffisant pour les projets étudiants.
      • +
    +
    + +
    +

    🛠️ Comment Déployer sur Vercel

    +

    Méthode 1 : Interface Web

    +
      +
    1. Créer un compte sur Vercel.
      2. +
    2. Importer le projet depuis GitHub.
      3. +
    3. Cliquer sur Deploy (configuration automatique pour site statique).
      4. +
    4. Accéder à l'URL fournie par Vercel.
      5. +
    +

    Méthode 2 : CLI Vercel

    + 
    npm install -g vercel
+                            vercel login
+                            cd /chemin/vers/projet
+                            vercel
+
    +
    + +
    +

    🎯 Fonctionnalités Utilisées

    +
      +
    • Déploiement automatique depuis GitHub
      • +
    • Serveur de fichiers statiques optimisé
      • +
    • Routing automatique des dossiers et pages
      • +
    • HTTPS par défaut et redirection automatique
      • +
    +
    + +
    +

    🛡️ Résolution de Problèmes

    +

    404 Not Found : Créer un index.html dans chaque dossier.

    +

    Symlinks : Vérifier qu'ils sont commités dans Git.

    +

    Chemins relatifs : Utiliser des chemins absolus depuis la racine.

    +

    Délai de déploiement : Attendre 1-2 minutes pour que les changements apparaissent.

    +
    + +
    +

    📚 Ressources Utiles

    + +
    + +
    +

    ✍️ Conclusion

    +

    + Vercel simplifie le déploiement web et transforme un projet local en portfolio professionnel en quelques minutes. Déploiement automatique, performances optimales et workflow moderne rendent cette plateforme idéale pour les étudiants et développeurs. +

    +
    +
    + + +
    + + + + diff --git a/VERCEL_DEPLOYMENT.md b/VERCEL_DEPLOYMENT.md deleted file mode 100644 index 02c64df..0000000 --- a/VERCEL_DEPLOYMENT.md +++ /dev/null @@ -1,468 +0,0 @@ -# 🚀 Vercel Deployment Guide - -## 📖 Table des Matières - -1. [Qu'est-ce que Vercel?](#quest-ce-que-vercel) -2. [Pourquoi Vercel?](#pourquoi-vercel) -3. [Avantages de Vercel](#avantages-de-vercel) -4. [Comment Déployer sur Vercel](#comment-déployer-sur-vercel) -5. [Configuration du Projet](#configuration-du-projet) -6. [Fonctionnalités Utilisées](#fonctionnalités-utilisées) -7. [Résolution de Problèmes](#résolution-de-problèmes) -8. [Ressources Utiles](#ressources-utiles) - ---- - -## 🌐 Qu'est-ce que Vercel? - -**Vercel** est une plateforme cloud moderne conçue pour déployer des sites web et des applications avec une simplicité et une rapidité exceptionnelles. Créée par les développeurs de **Next.js**, Vercel est devenue la référence pour l'hébergement de projets frontend. - -### Caractéristiques Principales - -Vercel offre un environnement d'hébergement optimisé qui transforme le code source en sites web performants accessibles mondialement. La plateforme gère automatiquement le build, le déploiement et la mise à l'échelle, permettant aux développeurs de se concentrer sur le code plutôt que sur l'infrastructure. - -### Public Cible - -Vercel s'adresse aux développeurs web modernes, des étudiants apprenant le développement aux équipes professionnelles construisant des applications à grande échelle. Sa courbe d'apprentissage douce et son plan gratuit généreux en font un choix idéal pour les projets éducatifs comme ce portfolio LP DWCA. - ---- - -## 💡 Pourquoi Vercel? - -### Pour les Étudiants - -Vercel représente un outil pédagogique exceptionnel pour plusieurs raisons. Premièrement, il permet aux étudiants de voir leurs projets en ligne immédiatement, transformant le code local en applications web accessibles publiquement. Cette visibilité instantanée renforce la motivation et facilite le partage avec les professeurs et les pairs. - -Deuxièmement, Vercel enseigne les bonnes pratiques de l'industrie. En utilisant Git pour le déploiement automatique, les étudiants apprennent le workflow professionnel standard utilisé dans les entreprises technologiques modernes. Chaque commit devient une opportunité d'apprentissage sur l'intégration continue et le déploiement continu (CI/CD). - -### Pour ce Projet - -Ce portfolio LP DWCA bénéficie particulièrement de Vercel pour plusieurs raisons techniques et pédagogiques. La nature statique du projet (HTML, CSS, JavaScript) s'aligne parfaitement avec les forces de Vercel. Les performances exceptionnelles garantissent que les démonstrations interactives fonctionnent sans latence, offrant une expérience utilisateur optimale. - -L'URL publique fournie par Vercel permet de partager facilement le portfolio avec les professeurs pour l'évaluation, avec les employeurs potentiels pour les candidatures, et avec d'autres étudiants pour la collaboration. Cette accessibilité transforme un projet local en une vitrine professionnelle. - ---- - -## ⚡ Avantages de Vercel - -### 1. Déploiement Automatique - -**Fonctionnement**: Chaque fois que vous poussez du code vers GitHub, Vercel détecte automatiquement les changements et lance un nouveau déploiement. Ce processus prend généralement 1 à 2 minutes et ne nécessite aucune intervention manuelle. - -**Avantages**: -- Gain de temps considérable par rapport au déploiement manuel -- Réduction des erreurs humaines dans le processus de déploiement -- Historique complet de tous les déploiements avec possibilité de rollback -- Preview deployments pour chaque pull request - -**Exemple Pratique**: Pour ce projet, après avoir corrigé les erreurs 404, un simple `git push` a suffi pour mettre à jour le site en production. Aucune connexion FTP, aucune configuration serveur, aucune commande complexe. - -### 2. Performance Optimale - -**CDN Global**: Vercel utilise un réseau de distribution de contenu (CDN) mondial avec plus de 70 points de présence. Cela signifie que votre site est automatiquement répliqué sur des serveurs dans le monde entier, et les visiteurs reçoivent le contenu depuis le serveur le plus proche d'eux. - -**Optimisations Automatiques**: -- Compression automatique des fichiers (Gzip, Brotli) -- Mise en cache intelligente des ressources statiques -- HTTP/2 et HTTP/3 pour des connexions plus rapides -- Optimisation automatique des images - -**Impact Mesurable**: Les pages de ce portfolio se chargent en moins d'une seconde, même pour les visiteurs internationaux. Les démonstrations JavaScript s'exécutent sans délai, offrant une expérience fluide. - -### 3. HTTPS Gratuit et Automatique - -**Sécurité par Défaut**: Vercel génère et renouvelle automatiquement les certificats SSL/TLS pour tous les domaines. Votre site est toujours accessible via HTTPS sans configuration supplémentaire. - -**Importance**: -- Protection des données des visiteurs -- Meilleur référencement Google (HTTPS est un facteur de classement) -- Confiance accrue des utilisateurs -- Requis pour de nombreuses APIs modernes - -### 4. Domaines Personnalisés - -**Flexibilité**: Vercel fournit un sous-domaine gratuit (`*.vercel.app`) mais permet également d'ajouter des domaines personnalisés. Pour ce projet, l'URL est `lpdwca-html-css-js-php.vercel.app`. - -**Configuration Simple**: Ajouter un domaine personnalisé ne prend que quelques minutes et Vercel gère automatiquement les certificats SSL pour les domaines personnalisés. - -### 5. Preview Deployments - -**Fonctionnalité Unique**: Chaque branche Git et chaque pull request obtient sa propre URL de prévisualisation. Cela permet de tester les changements avant de les fusionner dans la branche principale. - -**Cas d'Usage**: -- Tester de nouvelles fonctionnalités sans affecter la production -- Partager des work-in-progress avec des collaborateurs -- Obtenir des retours avant la mise en production -- Comparer visuellement les versions - -### 6. Analytics Intégrés - -**Insights Gratuits**: Vercel Analytics fournit des données sur les performances réelles du site, les visiteurs, et les pages les plus consultées. - -**Métriques Importantes**: -- Core Web Vitals (LCP, FID, CLS) -- Temps de chargement des pages -- Géographie des visiteurs -- Appareils et navigateurs utilisés - -### 7. Zéro Configuration - -**Simplicité Extrême**: Pour la plupart des projets, aucune configuration n'est nécessaire. Vercel détecte automatiquement le type de projet et applique les paramètres optimaux. - -**Pour ce Projet**: Aucun fichier de configuration n'a été nécessaire. Vercel a automatiquement compris qu'il s'agissait d'un site statique et l'a déployé correctement. - -### 8. Plan Gratuit Généreux - -**Limites du Plan Gratuit**: -- Bande passante: 100 GB/mois -- Builds: Illimités -- Projets: Illimités -- Collaborateurs: Illimités -- Domaines personnalisés: Illimités - -**Suffisant Pour**: Projets étudiants, portfolios personnels, sites de documentation, prototypes, et petites applications. - -### 9. Intégration Git Parfaite - -**Plateformes Supportées**: -- GitHub (utilisé pour ce projet) -- GitLab -- Bitbucket - -**Workflow Automatisé**: -1. Vous écrivez du code localement -2. Vous committez sur Git -3. Vous poussez vers GitHub -4. Vercel détecte le push -5. Vercel build et déploie automatiquement -6. Votre site est mis à jour en production - -### 10. Logs et Debugging - -**Transparence Totale**: Vercel fournit des logs détaillés pour chaque déploiement, facilitant le diagnostic des problèmes. - -**Outils de Debug**: -- Logs de build en temps réel -- Logs de runtime pour les fonctions serverless -- Métriques de performance -- Alertes en cas d'erreur - ---- - -## 🚀 Comment Déployer sur Vercel - -### Méthode 1: Via l'Interface Web (Recommandée pour Débutants) - -#### Étape 1: Créer un Compte Vercel - -Rendez-vous sur [vercel.com](https://vercel.com) et créez un compte gratuit. La méthode la plus simple est de s'inscrire avec votre compte GitHub, ce qui configure automatiquement l'intégration. - -#### Étape 2: Importer le Projet - -Une fois connecté, cliquez sur **"New Project"** dans le dashboard Vercel. Vous verrez une liste de vos repositories GitHub. Sélectionnez le repository `lpdwca_html_css_js_php`. - -#### Étape 3: Configuration (Optionnelle) - -Pour ce projet, aucune configuration n'est nécessaire. Vercel détecte automatiquement qu'il s'agit d'un site statique. Vous pouvez simplement cliquer sur **"Deploy"**. - -#### Étape 4: Déploiement - -Vercel commence le processus de build et de déploiement. Vous pouvez suivre la progression en temps réel dans les logs. Après 1-2 minutes, votre site est en ligne! - -#### Étape 5: Accéder au Site - -Vercel vous fournit une URL du type `votre-projet.vercel.app`. Pour ce projet, c'est `lpdwca-html-css-js-php.vercel.app`. - -### Méthode 2: Via la CLI Vercel (Pour Utilisateurs Avancés) - -#### Installation - -```bash -npm install -g vercel -``` - -#### Connexion - -```bash -vercel login -``` - -#### Déploiement - -```bash -cd /chemin/vers/lpdwca_html_css_js_php -vercel -``` - -La CLI vous guide à travers le processus de configuration et déploie votre projet. - ---- - -## ⚙️ Configuration du Projet - -### Structure du Projet - -Ce portfolio est un site statique composé de fichiers HTML, CSS et JavaScript. Vercel le sert directement sans nécessiter de build step. - -``` -lpdwca_html_css_js_php/ -├── index.html # Page d'accueil -├── README.md # Documentation principale -├── VERCEL_DEPLOYMENT.md # Ce guide -├── course-exercises/ # Exercices JavaScript -├── emmet-mastery/ # Guide Emmet -├── css-zen-garden-demo/ # Démo CSS -├── javascript-reference/ # Référence JavaScript -├── xhtml-reference/ # Référence XHTML -├── mini-projet-bootstrap/ # Projet Bootstrap -├── todolist-app/ # Application Todo -├── resources-and-tools/ # Ressources -├── html/ # Exemples HTML -├── css/ # Exemples CSS -└── js/ # Exemples JavaScript -``` - -### Fichiers Importants - -**index.html**: Point d'entrée principal du site. Vercel sert automatiquement ce fichier à la racine. - -**Symlinks**: Le symlink `todolist -> todolist-app` fonctionne correctement sur Vercel, permettant d'accéder au projet via deux chemins différents. - -**Pas de Build Step**: Aucun processus de compilation n'est nécessaire. Vercel sert les fichiers tels quels. - -### Variables d'Environnement - -Pour ce projet statique, aucune variable d'environnement n'est nécessaire. Si vous ajoutez des fonctionnalités serverless à l'avenir, vous pouvez les configurer dans le dashboard Vercel. - ---- - -## 🎯 Fonctionnalités Utilisées - -### 1. Déploiement Automatique depuis GitHub - -**Configuration**: Intégration GitHub activée dans les paramètres Vercel. - -**Comportement**: Chaque push sur la branche `main` déclenche automatiquement un nouveau déploiement. - -**Exemple**: Les commits `af9c436` et `3e7e2ab` ont automatiquement mis à jour le site en production. - -### 2. Serveur de Fichiers Statiques - -**Fonctionnement**: Vercel sert tous les fichiers HTML, CSS, JavaScript, images et autres ressources statiques avec des performances optimales. - -**Optimisations Appliquées**: -- Compression Brotli pour réduire la taille des fichiers -- Headers de cache appropriés pour les ressources statiques -- HTTP/2 pour le multiplexage des requêtes - -### 3. Routing Automatique - -**index.html**: Vercel sert automatiquement `index.html` pour les chemins de dossier. Par exemple, `/course-exercises/` sert `/course-exercises/index.html`. - -**404 Handling**: Vercel affiche une page 404 standard pour les chemins inexistants. Vous pouvez personnaliser cette page en créant un fichier `404.html` à la racine. - -### 4. HTTPS par Défaut - -**Certificat SSL**: Généré automatiquement pour `lpdwca-html-css-js-php.vercel.app`. - -**Redirection HTTP → HTTPS**: Automatique pour tous les visiteurs. - ---- - -## 🔧 Résolution de Problèmes - -### Problème 1: 404 Not Found - -**Symptôme**: Certaines pages affichent "404: NOT_FOUND". - -**Cause**: Fichier `index.html` manquant dans le dossier. - -**Solution**: Créer un fichier `index.html` dans chaque dossier accessible via URL. - -**Exemple**: Pour `/course-exercises/`, créer `/course-exercises/index.html`. - -**Résolu pour ce Projet**: Tous les dossiers principaux ont maintenant un `index.html`. - -### Problème 2: Symlinks - -**Symptôme**: Les symlinks peuvent ne pas fonctionner sur certaines plateformes. - -**Solution Vercel**: Vercel supporte les symlinks Git. Assurez-vous que le symlink est commité dans Git. - -**Exemple**: `todolist -> todolist-app` fonctionne correctement. - -### Problème 3: Chemins Relatifs - -**Symptôme**: Les liens ou ressources ne se chargent pas correctement. - -**Cause**: Chemins relatifs incorrects. - -**Solution**: Utiliser des chemins relatifs corrects ou des chemins absolus depuis la racine (`/`). - -**Exemple**: Pour lier au CSS depuis un sous-dossier, utiliser `/css/style.css` plutôt que `../css/style.css`. - -### Problème 4: Délai de Déploiement - -**Symptôme**: Les changements ne sont pas visibles immédiatement. - -**Cause**: Le déploiement prend 1-2 minutes. - -**Solution**: Attendre la fin du déploiement. Vérifier le statut dans le dashboard Vercel. - -**Astuce**: Vider le cache du navigateur (Ctrl+F5) pour voir les derniers changements. - -### Problème 5: Erreurs de Build - -**Symptôme**: Le déploiement échoue avec une erreur. - -**Cause**: Erreur dans le code ou configuration incorrecte. - -**Solution**: Consulter les logs de build dans le dashboard Vercel pour identifier l'erreur. - -**Pour ce Projet**: Aucune erreur de build car c'est un site statique simple. - ---- - -## 📚 Ressources Utiles - -### Documentation Officielle - -**Vercel Docs**: [vercel.com/docs](https://vercel.com/docs) -Documentation complète couvrant tous les aspects de Vercel. - -**Vercel CLI**: [vercel.com/docs/cli](https://vercel.com/docs/cli) -Guide pour utiliser Vercel en ligne de commande. - -**Vercel GitHub Integration**: [vercel.com/docs/git](https://vercel.com/docs/git) -Détails sur l'intégration avec GitHub, GitLab et Bitbucket. - -### Tutoriels Vidéo - -**Chaîne YouTube Vercel**: [youtube.com/@vercelhq](https://youtube.com/@vercelhq) -Tutoriels vidéo officiels. - -**Fireship - Vercel in 100 Seconds**: Présentation rapide et claire de Vercel. - -### Communauté - -**Discord Vercel**: Communauté active pour poser des questions. - -**GitHub Discussions**: Forum officiel pour les discussions techniques. - -**Twitter @vercel**: Annonces et mises à jour. - -### Alternatives à Vercel - -**Netlify**: Plateforme similaire avec des fonctionnalités comparables. - -**GitHub Pages**: Gratuit et simple, mais moins de fonctionnalités. - -**Cloudflare Pages**: Performant avec CDN intégré. - -**Render**: Alternative avec support backend. - ---- - -## 🎓 Conseils pour les Étudiants - -### Bonnes Pratiques - -**Commits Fréquents**: Committez régulièrement pour voir vos changements en production rapidement. - -**Messages de Commit Clairs**: Utilisez des messages descriptifs pour suivre l'évolution du projet. - -**Branches pour Expérimenter**: Créez des branches pour tester de nouvelles fonctionnalités sans affecter la production. - -**README à Jour**: Maintenez votre README à jour pour expliquer le projet aux visiteurs. - -### Utilisation Pédagogique - -**Portfolio Professionnel**: Utilisez Vercel pour héberger votre portfolio et le partager avec des employeurs potentiels. - -**Projets d'Équipe**: Collaborez avec d'autres étudiants en utilisant les preview deployments pour chaque pull request. - -**Démonstrations**: Montrez vos projets aux professeurs et pairs via une URL publique. - -**Apprentissage DevOps**: Apprenez les concepts de CI/CD utilisés dans l'industrie. - -### Optimisation des Coûts - -**Plan Gratuit**: Le plan gratuit de Vercel est largement suffisant pour les projets étudiants. - -**Limites**: 100 GB de bande passante/mois est généreux pour un portfolio. - -**Monitoring**: Surveillez votre utilisation dans le dashboard pour éviter les surprises. - ---- - -## 📊 Statistiques de ce Projet - -### Déploiements - -**Nombre Total**: 40+ commits = 40+ déploiements automatiques - -**Derniers Déploiements**: -- `3e7e2ab`: Fix JSON SP index.html -- `af9c436`: Fix course-exercises, emmet-mastery, todolist - -**Temps Moyen de Déploiement**: ~90 secondes - -### Performance - -**Lighthouse Score**: (À mesurer) -- Performance: ~95/100 -- Accessibility: ~90/100 -- Best Practices: ~95/100 -- SEO: ~90/100 - -**Temps de Chargement**: <1 seconde pour la page d'accueil - -**Taille Totale**: ~27,228 lignes de code sur 197 fichiers - ---- - -## 🚀 Prochaines Étapes - -### Améliorations Possibles - -**Analytics**: Activer Vercel Analytics pour suivre les visiteurs et les performances. - -**Domaine Personnalisé**: Ajouter un domaine personnalisé (ex: `portfolio-lpdwca.com`). - -**404 Personnalisée**: Créer une page 404 personnalisée avec navigation. - -**Sitemap**: Générer un sitemap.xml pour améliorer le SEO. - -**Meta Tags**: Ajouter des meta tags Open Graph pour de meilleurs partages sur les réseaux sociaux. - -### Fonctionnalités Avancées - -**Serverless Functions**: Ajouter des APIs backend avec Vercel Functions. - -**Edge Functions**: Utiliser Edge Functions pour du code exécuté au plus près des utilisateurs. - -**Image Optimization**: Utiliser Vercel Image Optimization pour optimiser automatiquement les images. - -**A/B Testing**: Tester différentes versions de pages avec Vercel Edge Config. - ---- - -## 🎉 Conclusion - -Vercel transforme le déploiement web en une expérience simple et agréable. Pour ce projet LP DWCA, Vercel a permis de passer d'un projet local à un portfolio professionnel accessible publiquement en quelques minutes, sans configuration complexe. - -Les avantages sont nombreux: déploiement automatique, performances optimales, HTTPS gratuit, et un workflow moderne qui prépare les étudiants aux pratiques de l'industrie. Le plan gratuit généreux rend Vercel accessible à tous, des étudiants débutants aux développeurs expérimentés. - -En utilisant Vercel pour ce portfolio, vous démontrez non seulement vos compétences en développement web, mais aussi votre maîtrise des outils modernes de déploiement et de DevOps. C'est un atout précieux pour votre carrière future. - -**Portfolio LP DWCA - Propulsé par Vercel! 🚀** - ---- - -**Document créé le**: 10 Octobre 2025 -**Dernière mise à jour**: 10 Octobre 2025 -**Version**: 1.0 -**Auteur**: Mikail Lekesiz -**URL du Projet**: https://lpdwca-html-css-js-php.vercel.app/ -**GitHub**: https://github.com/lekesiz/lpdwca_html_css_js_php - diff --git a/html/practical-examples/semantic/01-blog-article-semantic.html b/html/practical-examples/semantic/01-blog-article-semantic.html index 57bcda3..e76b0c7 100644 --- a/html/practical-examples/semantic/01-blog-article-semantic.html +++ b/html/practical-examples/semantic/01-blog-article-semantic.html @@ -524,11 +524,13 @@

    👨‍💻 À propos de l'auteur

    Contact: - mikail.lekesiz@etu.unistra.fr + mikail.lekesiz@etu.unistra.fr
    + mickael.hoffer@etu.unistra.fr

    Portfolio: - portfolio.lekesiz.fr + portfolio.lekesiz.fr
    + mickael-dev.vercel

    diff --git a/index.html b/index.html index 6c7ebda..ab6dc60 100644 --- a/index.html +++ b/index.html @@ -159,7 +159,8 @@

    LP DWCA - Portfolio Complet

    Formation Développeur Web et Conception d'Applications

    HTML • CSS • JavaScript • PHP • Bootstrap • Emmet

    -

    Par Mikail Lekesiz - DevOps Engineer & Full Stack Developer

    +

    Développé par: Mikail Lekesiz - DevOps Engineer & Full Stack Developer

    +

    Et Mickael Hoffer - Full Stack Developer Junior

    Professeur: ERIC CHRISTOFFEL | Université de Strasbourg

    @@ -226,8 +227,36 @@

    Mini-Projet Bootstrap

+
+
+

Portfolio Responsive ⭐ NOUVEAU!

+

Site web personnel moderne en Bootstrap 5 avec sections présentation, compétences, projets et contact. Entièrement responsive avec animations AOS.

+ Bootstrap 5 + ~1,200 lignes + Responsive +
+ + Voir le Projet + +
+
+
+
+
+

Weather App ⭐ NOUVEAU!

+

Application météo dynamique consommant l’API OpenWeatherMap, avec affichage des conditions en temps réel et design Bootstrap moderne.

+ JavaScript + Bootstrap 5 + API REST +
+ + Voir le Projet + +
+
+
- +
@@ -551,7 +580,7 @@

README Complet

Voir sur GitHub - + Lire README
@@ -580,7 +609,7 @@

Déployé sur Ver Voir en Production - + Guide Vercel

diff --git a/js/OOJS/userManagementSystem.html b/js/OOJS/userManagementSystem.html index 74e78bc..c3ad5fa 100644 --- a/js/OOJS/userManagementSystem.html +++ b/js/OOJS/userManagementSystem.html @@ -101,6 +101,10 @@ .user-card.developer { border-left-color: #2ecc71; } + + .user-card.it_director { + border-left-color: #76027a; + } .user-header { display: flex; @@ -130,6 +134,10 @@ .user-role.developer { background: #2ecc71; } + + .user-role.it_director { + background: #76027a; + } .user-info { color: #7f8c8d; @@ -157,7 +165,7 @@

🏢 Système de Gestion des Utilisateurs

-

Programmation Orientée Objet en JavaScript - Par Mikail Lekesiz (LP DWCA 2025)

+

Programmation Orientée Objet en JavaScript - Par Mikail Lekesiz et Mickael Hoffer (LP DWCA 2025)

Ajouter un Utilisateur

@@ -178,6 +186,7 @@

Ajouter un Utilisateur

@@ -191,7 +200,7 @@

Liste des Utilisateurs

>>> Console JavaScript - OOJS Demo
-
>>> Système initialisé par Mikail Lekesiz
+
>>> Système initialisé par Mikail Lekesiz et Mickael Hoffer
@@ -265,6 +274,35 @@

Liste des Utilisateurs

getInfo() { return `💻 Developer: ${super.getInfo()} | Compétences: ${this.skills.join(', ')}`; } + + manageUser(developer) { + console.log(`Admin ${this.fullName} gère l'utilisateur ${user.fullName}`); + logToConsole(`Admin ${this.fullName} gère ${user.fullName}`); + } + } + + // Classe IT Director hérite de User + class ITDirector extends Admin { + constructor(firstName, lastName, email, skills = []) { + super(firstName, lastName, email); + this.role = 'it_director'; + this.skills = skills; + this.projects = []; + } + + addSkill(skill) { + this.skills.push(skill); + logToConsole(`${this.fullName} a ajouté la compétence: ${skill}`); + } + + getInfo() { + return `💻 IT Director: ${super.getInfo()} | Compétences: ${this.skills.join(', ')}`; + } + + manageUser(user) { + console.log(`IT Director ${this.fullName} gère l'utilisateur ${user.fullName}`); + logToConsole(`IT Director ${this.fullName} gère ${user.fullName}`); + } } // Classe UserManager pour gérer tous les utilisateurs @@ -336,6 +374,9 @@

Liste des Utilisateurs

case 'developer': user = new Developer(firstName, lastName, email, ['JavaScript', 'HTML', 'CSS']); break; + case 'it_director': + user = new ITDirector(firstName, lastName, email, ['JavaScript', 'HTML', 'CSS','PHP','Laravel','MySQL','Java','C++','Vue.js']); + break; default: user = new User(firstName, lastName, email); } @@ -363,6 +404,10 @@

Liste des Utilisateurs

// Créer Mikail Lekesiz comme admin const mikail = new Admin('Mikail', 'Lekesiz', 'mikail@netz-informatique.fr'); userManager.addUser(mikail); + + // Créer Mickael Hoffer comme IT Director + const mickael = new ITDirector('Mickael', 'Hoffer', 'mickael.hoffer@gmail.com', ['React', 'C#', 'Node.js', 'Python','Docker','PHP','Laravel','MySQL','Java','C++','Vue.js']); + userManager.addUser(mickael); // Créer un développeur const dev = new Developer('Jean', 'Dupont', 'jean.dupont@example.com', ['React', 'Node.js', 'Python']); diff --git a/js/json/fetchAPIDemo.html b/js/json/fetchAPIDemo.html index ab485be..63dda83 100644 --- a/js/json/fetchAPIDemo.html +++ b/js/json/fetchAPIDemo.html @@ -228,13 +228,13 @@

📋 Données JSON brutes:

}, { id: 2, - name: "Sophie Martin", - username: "smartin", - email: "sophie.martin@etu.unistra.fr", + name: "Mickael Hoffer", + username: "hoffer", + email: "mickael.hoffer@etu.unistra.fr", phone: "+33 6 23 45 67 89", company: { name: "WebDev Solutions" }, - website: "sophie-martin.dev", - address: { city: "Paris" } + website: "portfolio.mickael-hoffer.fr", + address: { city: "Sélestat" } }, { id: 3, diff --git a/mini-projet-bootstrap/index.html b/mini-projet-bootstrap/index.html index 2c6c88e..c6a791c 100644 --- a/mini-projet-bootstrap/index.html +++ b/mini-projet-bootstrap/index.html @@ -490,8 +490,8 @@

Alert

Bootstrap Mastery
-

Mini-projet réalisé dans le cadre de la formation LP DWCA 2025/2026

-

Professeur: ERIC CHRISTOFFEL

+

Mini-projet réalisé dans le cadre de la formation LP DWCA 2025/2026

+

Professeur: ERIC CHRISTOFFEL

Liens Utiles
@@ -499,11 +499,12 @@
Liens Utiles
  • Documentation Bootstrap
  • GitHub Repository
  • Portfolio Mikail
    • +
  • Portfolio Mickael
    • -
    +

    © 2025 Mikail Lekesiz & Mickael Hoffer - Université de Strasbourg

    diff --git a/package.json b/package.json new file mode 100644 index 0000000..dfbaebd --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "name": "lpdwca_html_css_js_php", + "version": "1.0.0", + "description": "Ce dépôt contient l'ensemble des supports de cours, exercices et **exemples pratiques professionnels** pour la formation **Licence Professionnelle Développeur Web et Conception d'Applications (LP DWCA)** à l'Université de Strasbourg.", + "main": "index.js", + "scripts": { + "start": "php -S 127.0.0.1:8000 -t ./" , + "test": "echo \"Error: no test specified\" && exit 1" +}, + "repository": { + "type": "git", + "url": "git+https://github.com/mickaaa67/lpdwca_html_css_js_php.git" + }, + "keywords": [], + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/mickaaa67/lpdwca_html_css_js_php/issues" + }, + "homepage": "https://github.com/mickaaa67/lpdwca_html_css_js_php#readme" +} diff --git a/portfolio-responsive/index.html b/portfolio-responsive/index.html new file mode 100644 index 0000000..69b4282 --- /dev/null +++ b/portfolio-responsive/index.html @@ -0,0 +1,209 @@ + + + + + + Portfolio Responsive - Projet Bootstrap + + + + + + + +
    + +
    +

    Portfolio Responsive

    +

    Projet Bootstrap complet et adaptatif

    +

    Mickael Hoffer - LP DWCA 2025

    +
    + + +
    +
    +
    +
    +

    Structure & Layout

    +

    Le site est conçu avec le système de grille de Bootstrap, offrant une mise en page fluide et responsive sur tous les appareils.

    +
      +
    • Grille Bootstrap 5
      • +
    • Sections adaptatives
      • +
    • Composants réutilisables
      • +
    • Design cohérent et moderne
      • +
    + + Voir le site + +
    +
    + +
    +
    +
    +

    Fonctionnalités

    +

    Chaque section du portfolio est interactive et optimisée pour la performance et l’expérience utilisateur.

    +
      +
    • Animations AOS
      • +
    • Formulaire de contact fonctionnel
      • +
    • Liens vers projets GitHub
      • +
    • Effet d'introduction “hacking”
      • +
    +
    +
    +
    + + +
    +

    Objectifs pédagogiques

    +
    +
    +
    Compétences Techniques
    +
      +
    • Maîtrise de Bootstrap 5
      • +
    • Création de sites responsives
      • +
    • Utilisation d’animations CSS et JS
      • +
    • Intégration d’icônes et composants
      • +
    +
    +
    +
    Compétences de Conception
    +
      +
    • Organisation de la structure HTML
      • +
    • Harmonisation visuelle
      • +
    • Accessibilité et clarté
      • +
    • Référencement SEO de base
      • +
    +
    +
    +
    + + +
    +

    Crédits

    +

    Projet réalisé dans le cadre de la formation Licence Professionnelle DWCA.

    +

    © 2025 - Portfolio Responsive - Mickael Hoffer

    +
    + + +
    + + Retour à l’accueil + + + GitHub + +
    +
    + + + + + diff --git a/portfolio-responsive/projet/portfolio.html b/portfolio-responsive/projet/portfolio.html new file mode 100644 index 0000000..194eb29 --- /dev/null +++ b/portfolio-responsive/projet/portfolio.html @@ -0,0 +1,295 @@ + + + + + + Mickael Hoffer - Portfolio Bootstrap + + + + + + + +
    +
    +

    Mickael Hoffer

    +

    Développeur Web Full Stack Junior

    +
    + mickael.hoffer@gmail.com + LinkedIn +
    +
    +
    + + +
    +
    +
    +

    À propos de moi

    +

    Passionné par le développement web, la conception d’interfaces modernes et les technologies front & back-end.

    +
    +
    +
    + Mickael Hoffer +
    +
    +

    Profil

    +

    Développeur Full Stack junior, je conçois des applications web performantes et intuitives. + Je maîtrise les langages modernes (HTML, CSS, JavaScript, React.js, PHP, SQL) et m’intéresse à l’optimisation des performances, + la sécurité et l’expérience utilisateur.

    +
      +
    • 67600 Sélestat
      • +
    • mickael.hoffer@gmail.com
      • +
    • Permis B / Véhiculé
      • +
    +
    +
    +
    +
    + + +
    +
    +
    +

    Compétences

    +
    +
    +
    +
    + +
    HTML / CSS / JS
    +

    Structure, animation et interactivité front-end.

    +
    +
    +
    +
    + +
    React.js
    +

    Création d’interfaces dynamiques et réactives.

    +
    +
    +
    +
    + +
    PHP / SQL
    +

    Développement back-end et gestion de bases de données.

    +
    +
    +
    +
    + +
    Git / GitHub
    +

    Versionning, travail collaboratif et déploiement.

    +
    +
    +
    +
    +
    + + +
    +
    +
    +

    Expériences professionnelles

    +
    +
    +
    +
    S2I Evolution - Strasbourg (Oct. 2024 – Nov. 2024)
    +

    Développement d’un site web responsive pour un centre de coworking (React.js, Laravel), + automatisant la réservation pour 2000 utilisateurs.

    +
    +
    +
    Jung Logistique - Sélestat (Sept. 2023 – Sept. 2024)
    +

    Refonte du site interne (.NET, JS, SQL). Développement d’une vue de gestion de stock avec Laravel, + améliorant la performance et la fiabilité des données.

    +
    +
    +
    ONF - Colmar (Fév. 2023 – Avr. 2023)
    +

    Création d’un site e-commerce pour la vente d’équipements forestiers (PHP, Vue.js, SQL).

    +
    +
    +
    +
    + + +
    +
    +
    +

    Formations

    +
    +
      +
    • 🎓 Licence Professionnelle Développement Web – Université de Strasbourg (2025–2026)
      • +
    • 🎓 BTS SIO – Option SLAM – Strasbourg (2021–2024)
      • +
    • 🎓 Bac STI2D – Systèmes d’Information et Numérique – Sélestat (2018–2021)
      • +
    +
    +
    + + +
    +
    +
    +

    Contact

    +

    N’hésitez pas à me contacter pour toute opportunité ou collaboration.

    +
    +
    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    +
    +
    +
    +
    + + +
    +
    +

    © 2025 Mickael Hoffer. Tous droits réservés.

    +
    + + + + +
    +
    +
    + + + + diff --git a/weather-app/index.html b/weather-app/index.html new file mode 100644 index 0000000..922fd8b --- /dev/null +++ b/weather-app/index.html @@ -0,0 +1,135 @@ + + + + + + Weather App - Portfolio Mickael Hoffer + + + + + + + +
    +
    +

    Weather App

    +

    Application météo interactive avec prévisions en temps réel et recherche par ville

    +
    +
    + + +
    +
    +
    + +
    +
    +

    Weather App

    +

    + Développée en JavaScript, HTML et CSS, cette application permet de consulter la météo en temps réel pour n’importe quelle ville. + Elle utilise l’API OpenWeatherMap pour récupérer les données météorologiques et affiche la température, l’humidité, l’état du ciel et un icône dynamique correspondant. +

    +

    Technologies : HTML5, CSS3, JavaScript, API OpenWeatherMap

    +

    Lignes de code : ~450

    +

    Type : Application interactive

    + +
    + + Lancer l'application + +
    +
    +
    + + +
    +
    +

    Fonctionnalités principales

    +
      +
    • Recherche de la météo par ville
      • +
    • Prévisions sur 5 jours
      • +
    • Affichage dynamique avec icônes météo
      • +
    • Design responsive et moderne
      • +
    • Gestion des erreurs pour ville non trouvée
      • +
    +
    +
    +
    +
    +
    + + + + + + + diff --git a/weather-app/projet/weatherAPP.html b/weather-app/projet/weatherAPP.html new file mode 100644 index 0000000..cb42876 --- /dev/null +++ b/weather-app/projet/weatherAPP.html @@ -0,0 +1,147 @@ + + + + + + Weather App + + + +
    +

    Weather App

    + + + +
    + +
    +
    +
    + + + + From 170aa192e3c59c8b2018d387916a9ce3ad8d1f3f Mon Sep 17 00:00:00 2001 From: Micka67 Date: Thu, 27 Nov 2025 01:18:15 +0100 Subject: [PATCH 3/3] =?UTF-8?q?ajout=20chapitre=201=20=C3=A0=206=20exemple?= =?UTF-8?q?s=20+=20introduction=20+=20page=20index/contact/about.html?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/launch.json | 14 + .../examples/01-basic-layout.html | 126 ++++++++ .../examples/02-navigation.html | 154 ++++++++++ mini-projet-bootstrap/examples/03-forms.html | 158 ++++++++++ mini-projet-bootstrap/examples/04-cards.html | 239 +++++++++++++++ mini-projet-bootstrap/examples/05-modals.html | 127 ++++++++ .../examples/06-carousel.html | 189 ++++++++++++ mini-projet-bootstrap/project/about.html | 214 ++++++++++++++ mini-projet-bootstrap/project/contact.html | 148 ++++++++++ mini-projet-bootstrap/project/css/style.css | 0 mini-projet-bootstrap/project/index.html | 276 ++++++++++++++++++ mini-projet-bootstrap/project/js/main.js | 0 .../tutorial/01-introduction.md | 140 +++++++++ .../tutorial/02-installation.md | 253 ++++++++++++++++ .../tutorial/03-grid-system.md | 154 ++++++++++ .../tutorial/04-components.md | 189 ++++++++++++ .../tutorial/05-utilities.md | 181 ++++++++++++ .../tutorial/06-customization.md | 111 +++++++ 18 files changed, 2673 insertions(+) create mode 100644 .vscode/launch.json create mode 100644 mini-projet-bootstrap/examples/01-basic-layout.html create mode 100644 mini-projet-bootstrap/examples/02-navigation.html create mode 100644 mini-projet-bootstrap/examples/03-forms.html create mode 100644 mini-projet-bootstrap/examples/04-cards.html create mode 100644 mini-projet-bootstrap/examples/05-modals.html create mode 100644 mini-projet-bootstrap/examples/06-carousel.html create mode 100644 mini-projet-bootstrap/project/about.html create mode 100644 mini-projet-bootstrap/project/contact.html create mode 100644 mini-projet-bootstrap/project/css/style.css create mode 100644 mini-projet-bootstrap/project/index.html create mode 100644 mini-projet-bootstrap/project/js/main.js create mode 100644 mini-projet-bootstrap/tutorial/01-introduction.md create mode 100644 mini-projet-bootstrap/tutorial/02-installation.md create mode 100644 mini-projet-bootstrap/tutorial/03-grid-system.md create mode 100644 mini-projet-bootstrap/tutorial/04-components.md create mode 100644 mini-projet-bootstrap/tutorial/05-utilities.md create mode 100644 mini-projet-bootstrap/tutorial/06-customization.md diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..f8a870d --- /dev/null +++ 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" + } + ] +} \ No newline at end of file diff --git a/mini-projet-bootstrap/examples/01-basic-layout.html b/mini-projet-bootstrap/examples/01-basic-layout.html new file mode 100644 index 0000000..b4bcb5c --- /dev/null +++ b/mini-projet-bootstrap/examples/01-basic-layout.html @@ -0,0 +1,126 @@ + + + + + + 01 - Basic Layout Bootstrap + + + + + + + +
    + +
    +

    Basic Layout

    +

    Comprendre le système de base des grilles et containers Bootstrap

    +

    Mini-Projet Bootstrap - LP DWCA 2025

    +
    + + +
    +
    +
    +

    Container et Grid

    +

    Bootstrap utilise des containers pour centraliser le contenu et des grilles pour organiser les colonnes.

    +
      +
    • .container : largeur fixe responsive
      • +
    • .container-fluid : largeur pleine largeur
      • +
    • .row : ligne de colonnes
      • +
    • .col-* : colonnes responsives
      • +
    +
    +
    + +
    +
    +

    Exemple Basique

    +

    Voici un layout simple avec 2 colonnes :

    +
    +
    +
    Colonne 1
    +
    Colonne 2
    +
    +
    +

    Les colonnes s’adaptent automatiquement selon la taille de l’écran.

    +
    +
    +
    + + +
    +

    Objectifs

    +
      +
    • Comprendre l’utilisation des containers et grilles
      • +
    • Créer des layouts responsives facilement
      • +
    • Appliquer des colonnes, lignes et espacements corrects
      • +
    • Préparer la structure pour les composants futurs
      • +
    +
    + + +
    + Retour a l'accueil + Chapitre Suivant +
    +
    + + + + diff --git a/mini-projet-bootstrap/examples/02-navigation.html b/mini-projet-bootstrap/examples/02-navigation.html new file mode 100644 index 0000000..0f0d65b --- /dev/null +++ b/mini-projet-bootstrap/examples/02-navigation.html @@ -0,0 +1,154 @@ + + + + + + 02 - Navigation Bootstrap + + + + + + +
    + +
    +

    Navigation Bootstrap

    +

    Apprenez à créer des menus responsives et interactifs

    +

    Mini-Projet Bootstrap - LP DWCA 2025

    +
    + + +
    +
    +
    +

    Navbar de Base

    +

    Bootstrap propose des barres de navigation faciles à intégrer :

    + 
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <a class="navbar-brand" href="#">Logo</a>
+  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse" id="navbarNav">
+    <ul class="navbar-nav">
+      <li class="nav-item"><a class="nav-link" href="#">Accueil</a></li>
+      <li class="nav-item"><a class="nav-link" href="#">Projets</a></li>
+    </ul>
+  </div>
+</nav>
    +
    +
    + +
    +
    +

    Navbar avec Dropdown

    +

    Pour ajouter des menus déroulants :

    + 
    <li class="nav-item dropdown">
+  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Services</a>
+  <ul class="dropdown-menu">
+    <li><a class="dropdown-item" href="#">Web</a></li>
+    <li><a class="dropdown-item" href="#">Mobile</a></li>
+  </ul>
+</li>
    +
    +
    +
    + + +
    +

    Exemple Complet

    +

    Voici un exemple d'une navbar responsive complète :

    + +
    + + +
    + Chapitre Précédent + Chapitre Suivant +
    +
    + + + + diff --git a/mini-projet-bootstrap/examples/03-forms.html b/mini-projet-bootstrap/examples/03-forms.html new file mode 100644 index 0000000..c4ec87b --- /dev/null +++ b/mini-projet-bootstrap/examples/03-forms.html @@ -0,0 +1,158 @@ + + + + + + 03 - Grid System Bootstrap + + + + + + +
    + +
    +

    Système de Grille (Grid System)

    +

    Maîtrisez la structure responsive avec Bootstrap

    +

    Mini-Projet Bootstrap - LP DWCA 2025

    +
    + + +
    +

    Grille de Base

    +

    Bootstrap utilise une grille de 12 colonnes pour créer des layouts flexibles et responsives.

    + 
    <div class="container">
+  <div class="row">
+    <div class="col-4 bg-primary text-white">Col 1</div>
+    <div class="col-4 bg-success text-white">Col 2</div>
+    <div class="col-4 bg-danger text-white">Col 3</div>
+  </div>
+</div>
    +
    + + +
    +

    Exemple Responsive

    +

    Les colonnes s'adaptent selon la taille de l'écran :

    +
    +
    +
    Bloc 1
    +
    Bloc 2
    +
    Bloc 3
    +
    Bloc 4
    +
    +
    +

    ✅ Mobile : 4 lignes empilées | ✅ Tablette : 2 colonnes par ligne | ✅ PC : 4 colonnes côte à côte

    +
    + + +
    +

    Grille Imbriquée

    +
    +
    +
    +
    +
    Sous-col 1
    +
    Sous-col 2
    +
    +
    +
    Colonne latérale
    +
    +
    +
    + + +
    +

    Mise en Page Basique

    +
    +
    +
    En-tête
    +
    +
    + +
    Contenu principal
    +
    +
    +
    Pied de page
    +
    +
    +
    + + +
    + Chapitre Précédent + Chapitre Suivant +
    +
    + + + + diff --git a/mini-projet-bootstrap/examples/04-cards.html b/mini-projet-bootstrap/examples/04-cards.html new file mode 100644 index 0000000..00cf88f --- /dev/null +++ b/mini-projet-bootstrap/examples/04-cards.html @@ -0,0 +1,239 @@ + + + + + + 04 - Composants Bootstrap + + + + + +
    + +
    +

    Composants Bootstrap

    +

    Utiliser les composants pour créer des interfaces modernes et responsives

    +

    Mini-Projet Bootstrap - LP DWCA 2025

    +
    + + +
    +

    Boutons

    +

    Exemples de boutons :

    + + + + + + +
    + + +
    +

    Cartes

    +

    Exemple simple :

    +
    + Image aléatoire +
    +
    Titre de la Card
    +

    Texte descriptif de la card.

    + Action +
    +
    + +

    Exemple grille de cartes :

    +
    +
    +
    + Projet 1 +
    +
    Projet 1
    +

    Description du projet.

    +
    +
    +
    +
    +
    + Projet 2 +
    +
    Projet 2
    +

    Description du projet.

    +
    +
    +
    +
    +
    + + +
    +

    Navbar

    + +
    + + +
    +

    Formulaires

    +
    +
    + + +
    +
    + + +
    + +
    +
    + + +
    +

    Modals

    + + + +
    + + +
    +

    Alerts, Badges & Breadcrumb

    + +

    Nouveau Badge Exemple

    + +
    + + +
    + Chapitre Précédent + Chapitre Suivant +
    +
    + + + + diff --git a/mini-projet-bootstrap/examples/05-modals.html b/mini-projet-bootstrap/examples/05-modals.html new file mode 100644 index 0000000..f1d9043 --- /dev/null +++ b/mini-projet-bootstrap/examples/05-modals.html @@ -0,0 +1,127 @@ + + + + + + 05 - Utilities Bootstrap + + + + + +
    + +
    +

    05 - Utilities Bootstrap

    +

    Découverte des classes utilitaires pour la mise en page, les couleurs, les espacements et la typographie.

    +
    + + +
    +

    Espacements (Margin & Padding)

    +

    Bootstrap utilise les classes m et p pour gérer les marges et les paddings.

    +
    +
    .p-2 (padding)
    +
    .m-3 (margin)
    +
    +
    + + +
    +

    Couleurs de texte et de fond

    +

    Les classes text-* et bg-* changent la couleur.

    +

    Texte primaire

    +

    Texte succès

    +

    Texte danger

    +
    Fond info avec texte blanc
    +
    + + +
    +

    Alignement du texte

    +

    Aligné à gauche (.text-start)

    +

    Aligné au centre (.text-center)

    +

    Aligné à droite (.text-end)

    +
    + + +
    +

    Affichage et taille

    +

    Quelques classes utiles :

    +
    .d-inline-block
    +
    .d-block
    +
    .w-50 (largeur 50%)
    +
    + + +
    +

    Bordures & arrondis

    +
    +
    .border
    +
    .border-primary .rounded
    +
    Rond
    +
    +
    + + +
    + Chapitre Précédent + Chapitre Suivant +
    +
    + + + + diff --git a/mini-projet-bootstrap/examples/06-carousel.html b/mini-projet-bootstrap/examples/06-carousel.html new file mode 100644 index 0000000..79d30f8 --- /dev/null +++ b/mini-projet-bootstrap/examples/06-carousel.html @@ -0,0 +1,189 @@ + + + + + + 06 - Customisation Bootstrap + + + + + +
    + +
    +

    Customisation Bootstrap

    +

    Apprendre à personnaliser Bootstrap avec des couleurs et styles propres

    +

    Mini-Projet Bootstrap - LP DWCA 2025

    +
    + + +
    +

    Couleurs personnalisées

    +

    Exemple de boutons avec couleurs modifiées :

    + + + +
    + + +
    +

    Cards personnalisées

    +

    Exemple de card stylisée :

    +
    + Card custom +
    +
    Card Custom
    +

    Cette card utilise un gradient et une bordure personnalisée.

    + Action +
    +
    +
    + + +
    +

    Navbar personnalisée

    + +
    + + +
    +

    Carousel personnalisé

    + +
    + + +
    + Chapitre Précédent + Retour a l'accueil +
    + +
    + + + + diff --git a/mini-projet-bootstrap/project/about.html b/mini-projet-bootstrap/project/about.html new file mode 100644 index 0000000..ab7d64a --- /dev/null +++ b/mini-projet-bootstrap/project/about.html @@ -0,0 +1,214 @@ + + + + + + À Propos – Mini-Projet Bootstrap + + + + + + + + +



    + +
    + + +
    +

    Notre Mission

    +

    + Notre objectif est de concevoir un mini-projet complet démontrant la puissance, la flexibilité et la simplicité qu’offre Bootstrap dans la création d’interfaces modernes et responsives. +

    +

    + Ce site met en avant la maîtrise des composants, du système de grille, des utilitaires et des techniques de personnalisation. +

    +

    + Ce projet a été réalisé dans le cadre de la formation Licence Professionnelle DWCA 2025/2026 – Université de Strasbourg. +

    +
    +
    + +
    +

    Timeline du Projet

    + +
    +
    +
    📌 Semaine 1
    +

    Mise en place de la structure du projet et réalisation des chapitres 1 et 2.

    +
    +
    +
    📌 Semaine 2
    +

    Étude du Grid System, des composants, des utilitaires et de la personnalisation.

    +
    +
    +
    📌 Semaine 3
    +

    Création d’exemples pratiques et conception du design final du site.

    +
    +
    +
    📌 Semaine 4
    +

    Tests, optimisations, corrections et finalisation du projet.

    +
    +
    +
    +
    + +
    +

    L'Équipe

    + +
    +
    + Mikail +
    Mikail Lekesiz
    +

    DevOps Engineer & Full Stack Developer

    +
    +
    + Mickael +
    Mickael Hoffer
    +

    Développeur Full Stack junior

    +
    +
    +
    +
    + +



    + + + + + + + diff --git a/mini-projet-bootstrap/project/contact.html b/mini-projet-bootstrap/project/contact.html new file mode 100644 index 0000000..c4c9e85 --- /dev/null +++ b/mini-projet-bootstrap/project/contact.html @@ -0,0 +1,148 @@ + + + + + + Contact – Mini-Projet Bootstrap + + + + + + + + +



    + +
    + + +
    +

    Formulaire de Contact

    + +
    +
    +
    + + +
    +
    + + +
    +
    + +
    + + +
    + +
    + + +
    + + +
    +
    + + +
    +

    Informations de Contact

    + +
    +
    +
    📍 Adresse
    +

    Université de Strasbourg
    Campus Illkirch – LP DWCA

    + +
    📞 Téléphone
    +

    03 88 12 34 56

    + +
    📧 Email
    +

    contact@bootstrapproject.fr

    +
    + +
    + +
    +
    +
    +
    +



    + + + + + + + diff --git a/mini-projet-bootstrap/project/css/style.css b/mini-projet-bootstrap/project/css/style.css new file mode 100644 index 0000000..e69de29 diff --git a/mini-projet-bootstrap/project/index.html b/mini-projet-bootstrap/project/index.html new file mode 100644 index 0000000..e2a6878 --- /dev/null +++ b/mini-projet-bootstrap/project/index.html @@ -0,0 +1,276 @@ + + + + + + Mini-Projet Bootstrap + + + + + + + + +



    + +
    + + +
    +

    Bienvenue sur mon Mini-Projet Bootstrap

    +

    Une démonstration complète des composants, utilities et personnalisations Bootstrap

    +

    LP DWCA 2025/2026 - Université de Strasbourg

    +
    + + +
    +

    Projets

    +

    Exemple de grille responsive :

    +
    +
    +
    + Projet 1 +
    +
    Projet 1
    +

    Description du projet 1.

    +
    +
    +
    +
    +
    + Projet 2 +
    +
    Projet 2
    +

    Description du projet 2.

    +
    +
    +
    +
    +
    + Projet 3 +
    +
    Projet 3
    +

    Description du projet 3.

    +
    +
    +
    +
    +
    + + +
    +

    Carousel

    + +
    + + +
    +

    Contact

    +
    +
    + + +
    +
    + + +
    + +
    +
    + + +
    +

    Modal Exemple

    + + + +
    + + +
    +

    Alerts / Badges / Breadcrumb

    + +

    Nouveau Badge Exemple

    + +
    +
    +



    + + + + + + + diff --git a/mini-projet-bootstrap/project/js/main.js b/mini-projet-bootstrap/project/js/main.js new file mode 100644 index 0000000..e69de29 diff --git a/mini-projet-bootstrap/tutorial/01-introduction.md b/mini-projet-bootstrap/tutorial/01-introduction.md new file mode 100644 index 0000000..72ec372 --- /dev/null +++ b/mini-projet-bootstrap/tutorial/01-introduction.md @@ -0,0 +1,140 @@ +📚 Chapitre 1 : Introduction à Bootstrap +Qu'est-ce que Bootstrap ? +Bootstrap est le framework CSS le plus populaire au monde pour créer des sites web responsives et mobiles. Développé initialement par Twitter en 2011, il est maintenant open-source et maintenu par une large communauté. + +🎯 Pourquoi utiliser Bootstrap ? +1. Responsive par Défaut +Bootstrap utilise un système de grille flexible qui s'adapte automatiquement à toutes les tailles d'écran : + +📱 Mobile (< 576px) +📱 Tablette (≥ 576px) +💻 Bureau (≥ 768px) +🖥️ Grand écran de bureau (≥ 992 px) +🖥️ Très grand (≥ 1200 px) +2. Gain de Temps +Au lieu de coder chaque composant from scratch, Bootstrap offre : + +✅ Boutons stylisés +✅ Formulaires validés +✅ Barres de navigation +✅ Cartes de contenu +✅ Fenêtres modales et popups +✅ Carrousels d'images +✅ Et bien plus encore... +3. Compatibilité multi-navigateurs +Bootstrap fonctionne sur tous les navigateurs modernes : + +✅ Chrome +✅ Firefox +✅ Safari +✅ Bord +✅ Opéra +4. Grande communauté +📚 Documentation complète +💬 Forums actifs +🎨 Thèmes gratuits et payants +🔧 Outils et plugins +📊 Bootstrap en Chiffres +Métrique Valeur +Étoiles GitHub 168k+ ⭐ +Sites utilisant Bootstrap Plus de 27 millions 🌐 +Version actuelle 5.3.x 🚀 +Première version 2011 📅 +Licence MIT (Open Source) 📜 +🏗️ Architecture de Bootstrap +Bootstrap est composé de plusieurs parties : + +1. CSS +Grid System (système de grille) +Typographie (typographie) +Couleurs +Espacement +Utilitaires (classes utilitaires) +2. Composants +Boutons +Cartes (cartes) +Barre de navigation +Formulaires +Modaux (fenêtres modales) +Alertes (alertes) +Badges (insignes) +Et plus de 30 autres composants +3. JavaScript +Modal +Dérouler +Infobulle +Popover +Carrousel +Effondrement +Griller +Et plus encore... +4. Icônes +Icônes d'amorçage (plus de 1 800 icônes) +🎨 Exemple Visuel : Avant/Après Bootstrap +Sans Bootstrap + +Résultat : Un bouton basique qui nécessite beaucoup de manuel CSS. + +Avec Bootstrap + +Résultat : Un bouton professionnel avec une seule classe ! + +🔄 Évolution de Bootstrap +Bootstrap 3 (2013) +Introduction au mobile-first +Système de grille à 12 colonnes +Glyphicons intégrés +Bootstrap 4 (2018) +Passage à Flexbox +Suppression de Glyphicons +Nouvelles classes utilitaires +Support de Sass +Bootstrap 5 (2020 - Actuel) +Suppression de jQuery +Nouvelles classes utilitaires +Prise en charge RTL +Composant hors-canevas +Icônes Bootstrap +💡 Cas d'utilisation de Bootstrap +1. Sites Web d'Entreprise +Pages Entreprise +Portefeuilles +Pages de destination +2. Applications Web +Tableaux de bord +panneaux d'administration +Applications SaaS +3. Commerce électronique +Boutiques en ligne +Pages produits +Paniers d'achat +4. Blogs et magazines +Sites de contenu +Magazines en ligne +Portails d'actualités +🎓Ce que Vous Allez Apprendre +Dans ce tutoriel, vous apprendrez : + +Installation - Comment installer et configurer Bootstrap +Grid System - Créer des mises en page responsives +Composants - Utiliser les composants Bootstrap +Utilitaires - Maîtriser les classes utilitaires +Personnalisation - Bootstrap personnalisé +Best Practices - Bonnes pratiques et astuces +🚀 Prêt à Commencer ? +Maintenant que vous comprenez ce qu'est Bootstrap et pourquoi l'utiliser, passons à l'installation ! + +Prochain chapitre : 02 - Installation et Configuration + +📚 Ressources Complémentaires +Site Officiel Bootstrap +Documentation Bootstrap 5 +GitHub Bootstrap +Blog Bootstrap +Auteurs : Mikail Lekesiz +Formation : LP DWCA 2025/2026 +© 2025 - Université de Strasbourg \ No newline at end of file diff --git a/mini-projet-bootstrap/tutorial/02-installation.md b/mini-projet-bootstrap/tutorial/02-installation.md new file mode 100644 index 0000000..d4024d8 --- /dev/null +++ b/mini-projet-bootstrap/tutorial/02-installation.md @@ -0,0 +1,253 @@ +🔧 Chapitre 2 : Installation et Configuration +Méthodes d'Installation +Il existe plusieurs façons d'installer Bootstrap dans votre projet. Nous allons voir les 3 méthodes principales. + +1️⃣ Méthode 1 : CDN (Recommandé pour Débutant) +Qu'est-ce qu'un CDN ? +Un CDN (Content Delivery Network) est un réseau de serveurs qui héberge Bootstrap. C'est la méthode la plus rapide et la plus simple pour commencer. + +Avantages +✅ Pas de téléchargement nécessaire +✅ Mise en cache automatique +✅ Chargement rapide +✅ Parfait pour les débutants +Installation via CDN +Étape 1 : Créer un fichier HTML + + + + + + + Mon Premier Site Bootstrap + + + + + + +

    Hello, Bootstrap!

    + + + + + + +Étape 2 : Ouvrez le fichier dans votre navigateur + +Vous devriez voir un titre et un bouton bleu stylisé ! + +2️⃣ Méthode 2 : Téléchargement +Télécharger Bootstrap +Allez sur getbootstrap.com +Cliquez sur "Télécharger" +Téléchargez la version "Compilé CSS et JS" +Décompressez le fichier ZIP +Structure du dossier +bootstrap-5.3.0/ +├── css/ +│ ├── bootstrap.min.css # CSS minifié (production) +│ ├── bootstrap.css # CSS non minifié (développement) +│ └── bootstrap.min.css.map # Source map +└── js/ + ├── bootstrap.bundle.min.js # JS minifié avec Popper + ├── bootstrap.bundle.js # JS non minifié avec Popper + └── bootstrap.bundle.min.js.map +Utilisation + + + + + + Mon Site Bootstrap + + + + + + +

    Hello, Bootstrap!

    + + + + + +3️⃣ Méthode 3 : NPM (Pour Projets Avancés) +Installation via NPM +# Initialiser un projet Node.js +npm init -y + +# Installer Bootstrap +npm install bootstrap + +# Installer Sass (optionnel) +npm install sass +Utilisation +// Dans votre fichier JavaScript +import 'bootstrap'; +import 'bootstrap/dist/css/bootstrap.min.css'; +🎯 Configuration de base +1. Meta Viewport (OBLIGATOIRE) +Cette balise est essentielle pour le responsive design : + + +Explication: + +width=device-width: La largeur = largeur de l'appareil +initial-scale=1.0Zoom initial à 100% +2. Doctype HTML5 (OBLIGATOIRE) +Bootstrap nécessite HTML5 : + + + +3. Dimensionnement des boîtes +Bootstrap est utilisé box-sizing: border-boxpour tous les éléments. C'est automatique, pas besoin de l'ajouter ! + +📝 Modèle de Démarrage Complet +Voici un modèle HTML complet prêt à l'emploi : + + + + + + + + + + + Mon Site Bootstrap + + + + + + + + + + + + + +
    +

    Hello, Bootstrap!

    +

    Votre site commence ici.

    + +
    + + + + + + + + +🔍 Vérification de l'Installation +Test 1 : Bouton Bootstrap + +✅ Si le bouton est bleu et stylisé → Bootstrap fonctionne ! +❌ Si le bouton est basique → Vérifiez le lien CSS + +Test 2 : Système de grille +
    +
    +
    Colonne 1
    +
    Colonne 2
    +
    +
    +✅ Si vous voyez 2 colonnes côte à côte → Grid fonctionne ! + +Test 3 : Modal (JavaScript) + + + +✅ Si le modal s'ouvre → JavaScript fonctionne ! + +🛠️ Outils de Développement +1. Éditeur de Code +Recommandé : Visual Studio Code + +Extension : Extraits rapides Bootstrap 5 +Extension : Serveur en direct +Extension : Plus joli +2. Navigateur +Recommandé : Chrome ou Firefox + +Outils de développement pour inspecteur +Mode de conception réactive +3. Outils en Ligne +CodePen - Testeur rapide +JSFiddle - Partager des exemples +Bootstrap Builder - Générateur visuel +🎨 Personnalisation (Facultative) +Créer un CSS Personnalisé +/* css/style.css */ + +/* Surcharger les couleurs Bootstrap */ +:root { + --bs-primary: #ff6b6b; + --bs-secondary: #4ecdc4; +} + +/* Ajouter vos propres styles */ +.ma-classe-custom { + background-color: #f0f0f0; + padding: 20px; + border-radius: 10px; +} +Important : Chargez votre CSS après Bootstrap : + + + +⚠️Erreurs Courantes +Erreur 1 : Oublier le Meta Viewport + + + + + + + + + + +Erreur 2 : Mauvais Ordre CSS/JS + + + + + + + +Erreur 3 : Utiliser bootstrap.js au lieu de bootstrap.bundle.js + + + + + +🚀 Prochaine Étape +Maintenant que Bootstrap est installé, apprenons le Grid System ! + +Prochain chapitre : 03 - Système de grille + +📚 Ressources +Documentation d'Installation +CDN jsDelivr +NPM Bootstrap +Auteurs : Mikail Lekesiz +Formation : LP DWCA 2025/2026 +© 2025 - Université de Strasbourg \ No newline at end of file diff --git a/mini-projet-bootstrap/tutorial/03-grid-system.md b/mini-projet-bootstrap/tutorial/03-grid-system.md new file mode 100644 index 0000000..d10c685 --- /dev/null +++ b/mini-projet-bootstrap/tutorial/03-grid-system.md @@ -0,0 +1,154 @@ +# 🧱 Chapitre 3 : Le Système de Grille (Grid System) + +Le **système de grille** est le cœur du framework **Bootstrap**. +C’est lui qui rend le **responsive design** si simple à mettre en place. + +Grâce à lui, tu peux facilement créer des **mises en page flexibles** s’adaptant à toutes les tailles d’écran — du smartphone à l’écran 4K. + +--- + +## 🔍 Principe de Base + +Bootstrap utilise une **grille de 12 colonnes**. + +Chaque ligne (`.row`) peut contenir jusqu’à **12 unités** de largeur totale. +Si la somme dépasse 12, la colonne suivante passe automatiquement à la ligne. + +### Exemple : +```html +
    +
    +
    Col 1 (4)
    +
    Col 2 (4)
    +
    Col 3 (4)
    +
    +
    +✅ Résultat : 3 colonnes de taille égale (4 + 4 + 4 = 12). +Si tu mettais col-6 col-6 col-6, la 3e passerait automatiquement à la ligne. + +🧩 Les Classes Principales +Classe Description +.container Conteneur principal qui centre le contenu +.container-fluid S’étend sur toute la largeur +.row Crée une ligne de la grille +.col Crée une colonne flexible +.col-* Définit une largeur fixe (1 à 12) +.col-sm-*, .col-md-*, .col-lg-*, .col-xl-* Définissent les tailles selon les écrans + +📱 Les Points de Rupture (Breakpoints) +Taille d’écran Classe Exemple Description +Extra small col- .col-12 Téléphones (<576px) +Small col-sm- .col-sm-6 Tablettes (>576px) +Medium col-md- .col-md-4 Ordinateurs portables (>768px) +Large col-lg- .col-lg-3 Écrans larges (>992px) +Extra large col-xl- .col-xl-2 Très grands écrans (>1200px) + +🧮 Exemple Complet Responsive +html +Copier le code +
    +
    +
    Bloc 1
    +
    Bloc 2
    +
    Bloc 3
    +
    Bloc 4
    +
    +
    +✅ Sur mobile : 4 lignes empilées +✅ Sur tablette : 2 colonnes par ligne +✅ Sur PC : 4 colonnes côte à côte + +🧭 Espacement et Alignement +🔸 Marges internes et externes +Bootstrap utilise les classes utilitaires pour la marge (m) et le padding (p) : + +Classe Signification Exemple +m-3 Marge sur tous les côtés margin: 1rem; +mt-5 Marge en haut uniquement margin-top: 3rem; +p-2 Padding sur tous les côtés padding: .5rem; +px-4 Padding horizontal padding-left/right: 1.5rem; + +🔸 Alignement vertical et horizontal +Tu peux aligner facilement tes colonnes avec Flexbox intégré à la grille : + +html +Copier le code +
    +
    Bloc A
    +
    Bloc B
    +
    +align-items-center → aligne verticalement + +justify-content-between → espace horizontalement + +🧰 Grille imbriquée (Nested Grid) +Tu peux imbriquer une grille à l’intérieur d’une autre colonne : + +html +Copier le code +
    +
    +
    +
    +
    Sous-col 1
    +
    Sous-col 2
    +
    +
    +
    Colonne latérale
    +
    +
    +🧭 Exemple Pratique : Mise en page de base +html +Copier le code +
    +
    +
    En-tête
    +
    + +
    + +
    Contenu principal
    +
    + +
    +
    Pied de page
    +
    +
    +💡 Astuce : Cette structure est parfaite pour un site vitrine ou un blog. + +⚠️ Erreurs Courantes +Erreur Correction +Oublier .row avant les colonnes Toujours placer les .col dans une .row +Mettre plus de 12 colonnes dans une ligne Respecter la règle : somme ≤ 12 +Oublier .container Sans lui, la grille ne sera pas centrée +Mélanger les tailles (col-md et col-sm) sans cohérence Toujours du plus petit au plus grand + +🎯 Résumé +Élément Rôle +.container / .container-fluid Conteneur principal +.row Ligne de la grille +.col / .col-* Colonnes flexibles +col-sm, col-md, col-lg Responsive adaptatif +m-*, p-* Marges et espacements + +🚀 Exercice Pratique +Crée une page de profil responsive : + +1 ligne d’en-tête sur toute la largeur + +2 colonnes : photo (4/12) + texte (8/12) + +3 cartes de projets en dessous (col-md-4 chacune) + +👉 Vérifie que sur mobile, tout s’empile correctement. + +📚 Ressources +Documentation officielle Bootstrap Grid + +Flexbox sur MDN Web Docs + +Exemples de grilles Bootstrap sur CodePen + +Auteurs : Mickael Hoffer +Formation : LP DWCA 2025/2026 +© 2025 - Université de Strasbourg \ No newline at end of file diff --git a/mini-projet-bootstrap/tutorial/04-components.md b/mini-projet-bootstrap/tutorial/04-components.md new file mode 100644 index 0000000..305ad65 --- /dev/null +++ b/mini-projet-bootstrap/tutorial/04-components.md @@ -0,0 +1,189 @@ +# 🧩 Chapitre 4 : Les Composants Bootstrap (Components) + +Bootstrap fournit une large gamme de **composants prêts à l'emploi** pour créer rapidement des interfaces modernes et responsives. +Ils sont stylisés et interactifs sans écrire beaucoup de CSS ou JavaScript. + +--- + +## 🔹 Buttons (Boutons) + +### Classes principales +| Classe | Description | +|--------|-------------| +| `.btn` | Classe de base pour tous les boutons | +| `.btn-primary` | Bouton principal (bleu) | +| `.btn-secondary` | Bouton secondaire (gris) | +| `.btn-success` | Bouton succès (vert) | +| `.btn-danger` | Bouton danger (rouge) | +| `.btn-warning` | Bouton avertissement (jaune) | +| `.btn-info` | Bouton info (cyan) | +| `.btn-light` | Bouton clair | +| `.btn-dark` | Bouton sombre | + +### Exemple +```html + + + +🔹 Cards (Cartes) +Les cards permettent d’afficher des contenus regroupés avec style. + +Exemple simple +html +Copier le code +
    + Image +
    +
    Titre de la Card
    +

    Texte descriptif de la card.

    + Action +
    +
    +Exemple grille de cartes +html +Copier le code +
    +
    +
    + ... +
    +
    Projet 1
    +

    Description du projet.

    +
    +
    +
    +
    +
    + ... +
    +
    Projet 2
    +

    Description du projet.

    +
    +
    +
    +
    +🔹 Navbar (Barre de navigation) +La navbar permet de créer des menus responsives facilement. + +Exemple +html +Copier le code + +🔹 Forms (Formulaires) +Bootstrap fournit des styles automatiques pour les formulaires : + +Exemple simple +html +Copier le code +
    +
    + + +
    +
    + + +
    + +
    +Validation intégrée +html +Copier le code +
    + +
    + Ce champ est obligatoire. +
    + +
    +🔹 Modals (Fenêtres Modales) +Les modales permettent d’afficher du contenu en popup. + +Exemple +html +Copier le code + + + +🔹 Alerts, Badges, Breadcrumb +Alerts (Messages) +html +Copier le code + +Badges (Étiquettes) +html +Copier le code +Nouveau +Breadcrumb (Fil d’Ariane) +html +Copier le code + +🚀 Exercice Pratique +Crée une page avec : + +Une navbar en haut + +3 cartes avec image et texte + +Un formulaire de contact + +Un bouton qui ouvre une modal + +Test sur mobile, tablette et ordinateur pour vérifier le responsive. + +📚 Ressources +Documentation officielle Bootstrap Components + +Exemples de Modals Bootstrap + +Exemples de Cards Bootstrap + +Auteurs : Mickael Hoffer +Formation : LP DWCA 2025/2026 +© 2025 - Université de Strasbourg \ No newline at end of file diff --git a/mini-projet-bootstrap/tutorial/05-utilities.md b/mini-projet-bootstrap/tutorial/05-utilities.md new file mode 100644 index 0000000..386f6a9 --- /dev/null +++ b/mini-projet-bootstrap/tutorial/05-utilities.md @@ -0,0 +1,181 @@ +# 🛠 Chapitre 5 : Les Utilitaires Bootstrap (Utilities) + +Bootstrap propose une large gamme de **classes utilitaires** pour gérer rapidement la **mise en page**, **l'espacement**, **les couleurs**, **la typographie**, et bien plus, **sans écrire de CSS**. + +--- + +## 🔹 Espacements : Marges et Padding + +Classes principales pour gérer les marges (`m`) et le padding (`p`) : + +| Classe | Description | Exemple | +|--------|------------|---------| +| `m-3` | Marge sur tous les côtés | `margin: 1rem;` | +| `mt-5` | Marge en haut uniquement | `margin-top: 3rem;` | +| `p-2` | Padding sur tous les côtés | `padding: .5rem;` | +| `px-4` | Padding horizontal | `padding-left/right: 1.5rem;` | + +**Exemple HTML :** +```html +
    Bloc avec padding et marge
    +🔹 Couleurs et arrière-plans +Classes pour la couleur du texte et le fond : + +Classe Description +text-primary Texte bleu +text-success Texte vert +bg-warning Fond jaune +bg-dark text-white Fond sombre avec texte blanc + +Exemple HTML : + +html +Copier le code +

    Texte vert succès

    +
    Fond jaune avec padding
    +🔹 Typographie et texte +Quelques utilitaires typographiques utiles : + +Classe Effet +fw-bold Gras +fst-italic Italique +text-uppercase Majuscules +text-center Centré + +Exemple HTML : + +html +Copier le code +

    Texte en gras et centré

    +🔹 Affichage et Flexbox +Gestion de l'affichage et du positionnement rapide : + +Classe Effet +d-none Masquer un élément +d-flex Flexbox +justify-content-between Espacement horizontal entre éléments +align-items-center Alignement vertical des éléments + +Exemple HTML : + +html +Copier le code +
    + Gauche + Droite +
    +🎯 Résumé +Bootstrap Utilities permettent de : + +Gérer espacement, couleurs, typographie rapidement + +Créer des layouts flexibles sans écrire de CSS + +Combiner plusieurs utilitaires pour gagner du temps + +🚀 Exercice Pratique +Crée une petite page avec : + +Un bloc en bg-primary et texte blanc avec padding p-4 + +Trois paragraphes : texte success, danger et warning + +Une div d-flex justify-content-around avec trois boutons + +📚 Ressources : +Documentation Bootstrap Utilities + +yaml +Copier le code + +--- + +## 🟣 `06-customization.md` + +```markdown +# 🎨 Chapitre 6 : Personnalisation de Bootstrap (Customization) + +Bootstrap peut être entièrement **personnalisé** pour correspondre à votre charte graphique ou vos besoins. + +--- + +## 🔹 1. Modifier les couleurs avec CSS + +Bootstrap v5 utilise des **variables CSS** : + +```css +:root { + --bs-primary: #0dcaf0; + --bs-success: #198754; +} +Toutes les couleurs utilisant ces variables s’adaptent automatiquement. + +🔹 2. Créer ses propres classes +Vous pouvez ajouter vos styles après Bootstrap pour les prioriser : + +css +Copier le code +.custom-btn { + background: linear-gradient(135deg, #0d6efd, #6610f2); + color: white; + border-radius: 8px; + font-weight: bold; +} +Exemple HTML : + +html +Copier le code + +🔹 3. Surcharge des composants +Vous pouvez également modifier : + +Les bordures des cartes + +Les paddings et marges par défaut + +Les typographies + +Exemple HTML : + +html +Copier le code +
    + Carte avec style personnalisé +
    +🔹 4. Combiner utilitaires + CSS perso +Les utilitaires Bootstrap peuvent être combinés avec vos propres classes : + +html +Copier le code +

    + Exemple de texte stylé +

    +🔹 5. Personnalisation avancée (optionnelle) +Pour les développeurs avancés : + +Modifier les variables SCSS avant compilation + +Créer un fichier _custom.scss + +Compiler via Sass ou Vite + +🎯 Résumé +Variables CSS → facile pour couleurs globales + +Classes perso → surcharge rapide + +Flexibilité → combiner Bootstrap et CSS personnalisé + +🚀 Exercice Pratique +Redéfinis la couleur primaire (--bs-primary) + +Crée un bouton gradient avec .custom-btn + +Personnalise une card avec bordure et fond dégradé + +📚 Ressources : +Bootstrap Theming + +Auteurs : Mickael Hoffer +Formation : LP DWCA 2025/2026 +© 2025 - Université de Strasbourg \ No newline at end of file diff --git a/mini-projet-bootstrap/tutorial/06-customization.md b/mini-projet-bootstrap/tutorial/06-customization.md new file mode 100644 index 0000000..efb1175 --- /dev/null +++ b/mini-projet-bootstrap/tutorial/06-customization.md @@ -0,0 +1,111 @@ +🎨 Chapitre 6 : Personnalisation Bootstrap (Customization) + +Bootstrap est très puissant par défaut, mais il est encore plus intéressant quand on adapte son design à sa charte graphique. +Ce chapitre explique comment modifier les couleurs, les boutons, les cartes et combiner CSS perso avec Bootstrap. + +🔹 Modifier les couleurs + +Bootstrap utilise des variables CSS pour les couleurs et styles principaux. +Tu peux les surcharger pour personnaliser l’apparence. + +Exemple : +:root { + --bs-primary: #0dcaf0; /* bleu clair */ + --bs-success: #198754; /* vert */ +} + + +Puis utiliser les classes Bootstrap comme d’habitude : + + + +🔹 Boutons personnalisés + +Tu peux créer des boutons avec dégradé, bordures arrondies, effets hover. + +Exemple : +.custom-btn { + background: linear-gradient(135deg, #0d6efd, #6610f2); + border: none; + color: white; + padding: 12px 30px; + border-radius: 25px; + font-weight: 600; + transition: all 0.3s ease; +} +.custom-btn:hover { + transform: scale(1.05); + box-shadow: 0 5px 15px rgba(13, 110, 253, 0.4); +} + + + +🔹 Cartes personnalisées + +Les cartes peuvent aussi être stylisées avec bordures colorées et fonds dégradés. + +Exemple : +.custom-card { + background: linear-gradient(135deg, #f8f9fa, #e9ecef); + border: 2px solid #0d6efd; + border-radius: 15px; + padding: 20px; + text-align: center; +} + +
    +
    Carte avec style personnalisé
    +

    Cette carte a un fond dégradé et une bordure colorée.

    +
    + +🔹 Combiner CSS perso et utilitaires Bootstrap + +Tu peux mélanger les classes Bootstrap avec ton CSS personnalisé pour plus de flexibilité. + +Exemple : +

    + Texte stylé avec utilitaires et CSS +

    + + +text-primary → couleur primaire + +fw-bold → texte en gras + +text-uppercase → texte en majuscules + +⚠️ Bonnes pratiques + +Toujours commencer par surcharger les variables Bootstrap pour garder une cohérence globale. + +Créer des classes personnalisées pour les composants spécifiques, plutôt que d’écrire trop de styles inline. + +Mélanger avec parcimonie les utilitaires Bootstrap pour ne pas alourdir le code. + +🎯 Résumé +Élément Rôle +:root Définir les variables CSS Bootstrap +.custom-btn Bouton avec style personnalisé +.custom-card Carte avec bordure et fond dégradé +Classes utilitaires Ajouter des effets rapides et cohérents +🚀 Exercice pratique + +Personnalise la couleur primaire de Bootstrap. + +Crée un bouton avec un dégradé unique. + +Crée une carte avec un fond dégradé et une bordure colorée. + +Utilise des classes utilitaires pour styliser un texte dans la carte. + +📚 Ressources + +Documentation Bootstrap - Customization + +Variables CSS Bootstrap + +Exemples de boutons et cartes Bootstrap personnalisés + +Auteurs : Mickael Hoffer +Formation : LP DWCA 2025/2026 +© 2025 - Université de Strasbourg \ No newline at end of file