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/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 :

+ +
+ +
+

📖 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/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/index.html b/mini-projet-bootstrap/index.html index 13226d5..c6a791c 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
    @@ -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/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 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

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