3 page de projet + chapitre 1-6#2
Open
mickaaa67 wants to merge 38 commits into
Open
Conversation
- README.md mis à jour avec informations complètes - Ajout index.html pour navigation facile - Nouveaux exemples CSS: * portfolioGridLayout.html (CSS Grid) * modernNavbar.html (Flexbox) * responsiveCards.html (Flexbox) - Nouveaux exemples JavaScript: * todoAppModern.html (App complète avec localStorage) * userManagementSystem.html (OOJS avancé) * fetchAPIDemo.html (Fetch API & JSON) - Nouveau exemple PHP: * contactFormAdvanced.php (Validation serveur) Par: Mikail Lekesiz - DevOps Engineer & Full Stack Developer Formation: LP DWCA 2025 - Université de Strasbourg
- Remplacement de 'Christoffel' par 'Lekesiz' - Remplacement de 'Eric' par 'Mikail' - Remplacement de 'echristof67' par 'lekesiz' - Mise à jour de tous les exemples de code - Variables, noms et données personnalisées Fichiers modifiés: 12 - js/exercises.js - js/introJS_solution.html - js/json/*.html (10 fichiers) Par: Mikail Lekesiz
Ajout complet de l'activité JSON To-Do-List avec toutes les étapes: Etape 1A - Structure d'une tâche: - JSON_1A_Tache.json - Propriétés: id, libellé, description, dates, statut, auteur Etape 1B - Paramètre Priorité: - JSON_1B_Priorite.json - 6 niveaux de priorité (Critique à Non urgent) Etape 1C - Autres paramètres: - JSON_1C_Complexite.json (5 niveaux) - JSON_1C_Categorie.json (7 catégories) - JSON_1C_DureeEstimee.json (7 plages de durée) Etape 1D - Tâches complètes: - JSON_1D_Taches_Completes.json - 4 tâches avec références aux paramètres via ID Etape 1E - Page HTML: - JSON_1E_TodoList.html - Affichage complet avec variables JS - Console.log() pour toutes les données - Tableau visuel avec résolution des références - Design moderne et responsive Documentation: - README.md complet avec explications Toutes les structures JSON sont compactées comme demandé. Données réalistes basées sur les projets de Mikail Lekesiz. Par: Mikail Lekesiz - LP DWCA 2025
Application complète de gestion de tâches avec localStorage Etape N2a - Formulaire statique: - N2a_form_statique.html - Formulaire HTML écrit 'à la main' - Design responsive mobile-friendly - Tous les champs de formulaire statiques - Listes déroulantes codées en dur Etape N2b - Formulaire dynamique: - N2b_form_dynamique.html - Génération dynamique avec JavaScript - Listes créées à partir des données JSON - Même design mais 100% dynamique Etape N3 - LocalStorage: - N3_localStorage.html - Lecture/écriture du localStorage - Génération automatique des ID (length + 1) - parse() et stringify() - Statistiques en temps réel - Boutons pour consulter et effacer Etape N4 - Dashboard complet: - index.html (Application finale) - Dashboard avec statistiques (Total, En cours, Terminées) - Filtres par statut (Toutes, Planifiées, En cours, Terminées) - Affichage de toutes les tâches avec badges - Modification via modal - Marquer comme terminée - Suppression avec confirmation - Design moderne et professionnel - Responsive (mobile, tablette, desktop) - Animations et transitions Documentation: - README.md complet - Explications de chaque étape - Guide d'utilisation - Concepts techniques Fonctionnalités: ✅ CRUD complet (Create, Read, Update, Delete) ✅ Persistance avec localStorage ✅ Interface moderne et intuitive ✅ Responsive design ✅ Filtres et statistiques ✅ Gestion d'état ✅ Validation des formulaires Technologies: - HTML5 (structure sémantique) - CSS3 (Flexbox, Grid, animations) - JavaScript ES6+ (classes, arrow functions, template literals) - localStorage API - JSON (parse, stringify) Par: Mikail Lekesiz - LP DWCA 2025
- christof@unistra.fr → mikail.lekesiz@etu.unistra.fr - christof@gmail.com → mikail.lekesiz@gmail.com Updated in 10 JSON example files (exJSON_1 to exJSON_10) Par: Mikail Lekesiz
Structure organisée selon les spécifications du cours:
SP/
└── Etape1/
├── Etape1A/ - Structure d'une tâche
│ └── etapa1A.json (format compacté)
├── Etape1B/ - Paramètre Priorité
│ └── etapa1B.json (6 niveaux)
├── Etape1C/ - Autres paramètres
│ ├── etapa1C_complexite.json (5 niveaux)
│ ├── etapa1C_categorie.json (7 catégories)
│ └── etapa1C_duree.json (7 plages)
├── Etape1D/ - Tâches complètes
│ └── etapa1D.json (4 tâches avec références)
└── Etape1E/ - Page HTML d'affichage
└── etapa1E.html (affichage complet + tableaux)
Documentation:
- README.md complet avec explications détaillées
- Description de chaque étape
- Concepts JSON démontrés
- Relations Primary/Foreign Keys
Fichiers JSON:
✅ Format compacté (une seule ligne)
✅ Relations via ID (pas de duplication)
✅ Données cohérentes
✅ Nomenclature: etapa1A, etapa1B, etc.
Page HTML (Etape1E):
✅ Design moderne et responsive
✅ Affichage des JSON en <pre>
✅ Tableaux HTML pour lisibilité
✅ Résolution des références (ID → valeur)
✅ Console logs détaillés
✅ Badges colorés selon priorité/statut
Par: Mikail Lekesiz - LP DWCA 2025
…tent Changements: - Remplacement des données JSONPlaceholder par des données personnalisées - Utilisateurs: Mikail Lekesiz et équipe LP DWCA - Posts: Projets réels (To-Do-List, JSON, Fetch API, etc.) - Todos: Tâches réelles du projet LP DWCA Données personnalisées: ✅ 6 utilisateurs (étudiants LP DWCA) ✅ 10 posts (projets et apprentissages) ✅ 20 todos (tâches réelles) Utilisateurs: - Mikail Lekesiz (Netz Informatique) - Sophie Martin (WebDev Solutions) - Thomas Dubois (Cloud Innovations) - Emma Bernard (AI Research Lab) - Lucas Petit (DevOps Pro) - Léa Moreau (Design Studio) Tous avec emails @etu.unistra.fr et villes françaises Par: Mikail Lekesiz - LP DWCA 2025
…ions 🎯 OBJECTIF: Créer des exemples pratiques et éducatifs pour chaque concept du cours LP DWCA. Chaque exemple démontre des cas d'usage réels avec explications détaillées. ✨ NOUVEAUX FICHIERS: 📝 HTML Practical Examples: 1. html/practical-examples/forms/01-contact-form-professional.html - Formulaire de contact professionnel complet - Validation HTML5 (required, pattern, minlength, etc.) - Design moderne et responsive - Gestion JavaScript de la soumission - Explications détaillées de chaque attribut 2. html/practical-examples/semantic/01-blog-article-semantic.html - Article de blog avec toutes les balises sémantiques HTML5 - <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> - <figure>, <figcaption>, <time>, <address> - Design magazine moderne - SEO et accessibilité 🎨 CSS Practical Examples: 1. css/practical-examples/flexbox/01-pricing-table-flexbox.html - Tableau de tarifs avec 3 plans (Basique, Pro, Entreprise) - Utilisation complète de Flexbox - display: flex, justify-content, align-items, gap, flex-wrap - Responsive automatique - Effets hover et animations - Notes pédagogiques détaillées 📚 CARACTÉRISTIQUES: ✅ Code commenté ligne par ligne (français) ✅ Notes pédagogiques dans chaque exemple ✅ Console logs pour le debugging ✅ Design moderne et responsive ✅ Cas d'usage réels (SaaS, blogs, e-commerce) ✅ Best practices ✅ Explications des concepts 📖 DOCUMENTATION: ✅ README.md mis à jour avec: - Structure des nouveaux exemples - Objectifs pédagogiques - Guide d'utilisation - Ressources complémentaires ✅ README_OLD.md - Backup de l'ancien README 🎓 APPROCHE PÉDAGOGIQUE: Chaque exemple contient: 1. Objectifs pédagogiques clairs 2. Commentaires détaillés 3. Notes éducatives 4. Code propre et moderne 5. Console logs explicatifs 🚀 PROCHAINES ÉTAPES: - CSS Grid examples - JavaScript DOM manipulation - OOJS examples - API integration examples - Integrated projects Par: Mikail Lekesiz - LP DWCA 2025 Formation: Université de Strasbourg
✨ NOUVEAU FICHIER: 📁 css/practical-examples/grid/01-photo-gallery.html - Galerie photos masonry-style avec CSS Grid - Layout automatique et responsive - grid-template-columns: repeat(auto-fill, minmax()) - grid-row: span pour hauteurs variables - 12 photos avec descriptions - ~350 lignes avec explications détaillées 🎯 CONCEPTS DÉMONTRÉS: - CSS Grid layout avancé - Masonry effect (Pinterest-style) - Responsive automatique sans media queries complexes - grid-auto-rows + grid-row: span - gap pour espacement - Hover effects et transitions 📚 CARACTÉRISTIQUES: ✅ Code commenté ligne par ligne (français) ✅ Note pédagogique détaillée ✅ Console logs pour le debugging ✅ Design moderne et professionnel ✅ Images Unsplash haute qualité ✅ Cas d'usage réel (portfolios, galeries) 🎓 APPROCHE PÉDAGOGIQUE: - Explications des propriétés Grid - Comparaison avec Flexbox - Best practices - Cas d'usage réels (Pinterest, Instagram, Unsplash) Par: Mikail Lekesiz - LP DWCA 2025
- Guide complet avec cheat sheet exhaustif (~900 lignes) - 7 exemples pratiques d'utilisation d'Emmet (~700 lignes) - Projet showcase complet créé avec Emmet (~650 lignes) - README détaillé avec documentation complète Démonstration de maîtrise complète d'Emmet pour LP DWCA 2025/2026 Auteur: Mikail Lekesiz | Professeur: ERIC CHRISTOFFEL
- Exemple pratique complet démontrant la compréhension des concepts - Variables: var, let, const - Types primitifs: string, number, boolean, undefined, null - Opérateurs: arithmétiques, comparaison, logiques, affectation - Template literals - Interface interactive avec exécution en temps réel - Documentation pédagogique complète Par Mikail Lekesiz - LP DWCA 2025
COURSE EXERCISES: - Chapter 1: Variables, Types, Operators (467 lines) - Chapter 1: Control Flow (if, for, while, switch) - Chapter 1: Functions (declaration, expression, arrow) - Chapter 2: OOJS + JSON + DOM (combined example) Total: 4 exemples interactifs complets MINI-PROJET BOOTSTRAP: - Page complète Bootstrap 5.3 - 50+ composants démontrés - Grid system, Forms, Modal, Cards, etc. - Responsive design complet - Par Mikail Lekesiz & Mickael Hoffer - Documentation complète Par Mikail Lekesiz - LP DWCA 2025
RESOURCES & TOOLS: - Page interactive avec toutes les ressources utilisées - 15+ ressources documentées - 7 catégories (Cours, Validation, Formatage, Dev, Apprentissage, Design, Utilisation) - Liens vers tous les outils (W3C Validator, JSON Editor, etc.) - Documentation de l'utilisation pratique dans mes projets - Design moderne avec Bootstrap 5.3 - Animations et interactions RESSOURCES INCLUSES: - Repository GitHub du professeur - Tableau des cours LP DWCA - W3C Validator, JSON Editor, XML Viewer - W3Schools, MDN, Pierre Giraud - CSS Zen Garden - Et plus... Par Mikail Lekesiz - LP DWCA 2025
Change the background color of the CTA button.
- Updated README.md with all 7 project categories - Updated index.html with Bootstrap design and all projects - Added statistics: 38+ files, ~10,665 lines - Added Resources & Tools section - Professional layout with cards and badges
…n Garden, JavaScript Reference)
…ery, add todolist symlink
…olders) - Created index.html for CSS examples (13 folders) - Created index.html for HTML examples (4 folders) - Created index.html for JavaScript examples (7 folders) - Created index.html for Emmet Mastery (3 folders) - Created index.html for Course Exercises (4 folders) - Created index.html for other modules (6 folders) - Added VERCEL_DEPLOYMENT.md comprehensive guide - Total: 38 new files All subdirectories now have proper navigation pages. Fixes 404 errors on Vercel deployment.
- Added prominent Vercel section with logo - Highlighted key features (Auto Deploy, CDN, HTTPS, Performance) - Added production URL and guide link - Modern dark theme matching Vercel branding
- Complete Tailwind CSS educational module - README with philosophy, advantages, comparison - Bootstrap vs Tailwind comparison examples - Showcase landing page with modern design - Main index.html navigation page - Total: ~2,500 lines of code - 5 sections: docs, comparison, showcase, examples, interactive Features demonstrated: - Utility-first approach - Responsive design - Gradients and animations - Modern components - Dark mode support
- Updated stats: 240+ files, ~36,218 lines - Added Tailwind CSS Mastery to project table - Added Tailwind CSS card to index.html - Updated modules count: 10 → 11 New module features: - Utility-first CSS framework - Bootstrap vs Tailwind comparison - Interactive showcase landing page - Complete documentation
…on and CSS control
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Chapitre 1 à 6 exemples + introduction + Pages About et Contact terminées avec design cohérent, footer uniforme et hover sur les images rondes des auteurs.