Download index.html from MAALOUFimad02/Machine_Learning_Training: direct link, hf CLI and curl.
- Browser
- Download file 31.3 kB
-
https://huggingface.co/spaces/MAALOUFimad02/Machine_Learning_Training/resolve/main/index.html
- Command line
-
hf download hf://spaces/MAALOUFimad02/Machine_Learning_Training/index.html
-
curl -L -o index.html https://huggingface.co/spaces/MAALOUFimad02/Machine_Learning_Training/resolve/main/index.html
31.3 kB
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ML Academy — Plateforme de Formation Machine Learning</title> | |
| <link rel="stylesheet" href="css/shared.css"> | |
| <style> | |
| /* HERO SECTION */ | |
| .hero { | |
| min-height: calc(100vh - var(--navbar-height)); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| padding: var(--space-3xl) var(--space-xl); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), | |
| radial-gradient(ellipse at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%), | |
| radial-gradient(ellipse at 50% 50%, rgba(245, 158, 11, 0.05) 0%, transparent 70%); | |
| animation: pulse 8s ease-in-out infinite; | |
| } | |
| .hero-eyebrow { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| padding: var(--space-xs) var(--space-md); | |
| background: rgba(99, 102, 241, 0.1); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| border-radius: 20px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.75rem; | |
| color: var(--primary-light); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: var(--space-lg); | |
| animation: fadeInDown 0.6s ease 0.2s both; | |
| } | |
| .hero-eyebrow .pulse { | |
| width: 6px; | |
| height: 6px; | |
| background: var(--success); | |
| border-radius: 50%; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .hero-title { | |
| font-size: clamp(2.5rem, 6vw, 4.5rem); | |
| font-weight: 800; | |
| line-height: 1.1; | |
| margin-bottom: var(--space-md); | |
| animation: fadeInUp 0.6s ease 0.3s both; | |
| } | |
| .hero-subtitle { | |
| font-size: clamp(1rem, 2vw, 1.25rem); | |
| color: var(--text-secondary); | |
| max-width: 600px; | |
| margin-bottom: var(--space-xl); | |
| line-height: 1.7; | |
| animation: fadeInUp 0.6s ease 0.4s both; | |
| } | |
| .hero-cta { | |
| display: flex; | |
| gap: var(--space-md); | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| margin-bottom: var(--space-2xl); | |
| animation: fadeInUp 0.6s ease 0.5s both; | |
| } | |
| .hero-stats { | |
| display: flex; | |
| gap: var(--space-2xl); | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| padding-top: var(--space-xl); | |
| border-top: 1px solid var(--border-color); | |
| animation: fadeInUp 0.6s ease 0.6s both; | |
| } | |
| .hero-stat { | |
| text-align: center; | |
| } | |
| .hero-stat-value { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| line-height: 1; | |
| } | |
| .hero-stat-value span { | |
| font-size: 1rem; | |
| color: var(--primary-light); | |
| } | |
| .hero-stat-label { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-top: var(--space-xs); | |
| } | |
| /* FEATURES SECTION */ | |
| .features { | |
| padding: var(--space-3xl) var(--space-xl); | |
| background: var(--bg-secondary); | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: var(--space-2xl); | |
| } | |
| .section-eyebrow { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.75rem; | |
| color: var(--primary-light); | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .section-title { | |
| font-size: clamp(1.75rem, 4vw, 2.5rem); | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .section-subtitle { | |
| font-size: 1rem; | |
| color: var(--text-secondary); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: var(--space-lg); | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .feature-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-xl); | |
| transition: all var(--transition-base); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| transform: scaleX(0); | |
| transition: transform var(--transition-base); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-8px); | |
| border-color: var(--border-light); | |
| box-shadow: var(--shadow-lg), var(--shadow-glow); | |
| } | |
| .feature-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: white; | |
| margin-bottom: var(--space-md); | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .feature-title { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .feature-text { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| margin-bottom: var(--space-md); | |
| } | |
| .feature-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--space-xs); | |
| } | |
| /* MODULES SECTION */ | |
| .modules { | |
| padding: var(--space-3xl) var(--space-xl); | |
| } | |
| .modules-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: var(--space-lg); | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .module-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| transition: all var(--transition-base); | |
| text-decoration: none; | |
| color: inherit; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .module-card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary); | |
| box-shadow: var(--shadow-lg), var(--shadow-glow); | |
| } | |
| .module-header { | |
| padding: var(--space-lg); | |
| display: flex; | |
| align-items: flex-start; | |
| gap: var(--space-md); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .module-icon { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| } | |
| .module-icon.blue { background: rgba(99, 102, 241, 0.2); color: var(--primary-light); } | |
| .module-icon.green { background: rgba(16, 185, 129, 0.2); color: var(--success); } | |
| .module-icon.orange { background: rgba(249, 115, 22, 0.2); color: var(--warning); } | |
| .module-info { | |
| flex: 1; | |
| } | |
| .module-label { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.65rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: var(--space-xs); | |
| } | |
| .module-title { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| .module-body { | |
| padding: var(--space-lg); | |
| flex: 1; | |
| } | |
| .module-desc { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| margin-bottom: var(--space-md); | |
| } | |
| .module-meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--space-xs); | |
| } | |
| .module-footer { | |
| padding: var(--space-md) var(--space-lg); | |
| background: var(--bg-tertiary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .module-arrow { | |
| color: var(--primary-light); | |
| transition: transform var(--transition-base); | |
| } | |
| .module-card:hover .module-arrow { | |
| transform: translateX(5px); | |
| } | |
| /* TIMELINE SECTION */ | |
| .timeline { | |
| padding: var(--space-3xl) var(--space-xl); | |
| background: var(--bg-secondary); | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .timeline-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .timeline-item { | |
| display: flex; | |
| gap: var(--space-lg); | |
| padding: var(--space-md) 0; | |
| position: relative; | |
| } | |
| .timeline-item:not(:last-child)::before { | |
| content: ''; | |
| position: absolute; | |
| left: 15px; | |
| top: 45px; | |
| bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(180deg, var(--primary), var(--secondary)); | |
| } | |
| .timeline-dot { | |
| width: 32px; | |
| height: 32px; | |
| background: var(--bg-card); | |
| border: 2px solid var(--primary); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| color: var(--primary-light); | |
| flex-shrink: 0; | |
| z-index: 1; | |
| } | |
| .timeline-content { | |
| flex: 1; | |
| padding-bottom: var(--space-lg); | |
| } | |
| .timeline-time { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.75rem; | |
| color: var(--primary-light); | |
| margin-bottom: var(--space-xs); | |
| } | |
| .timeline-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: var(--space-xs); | |
| } | |
| .timeline-text { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| /* CTA SECTION */ | |
| .cta { | |
| padding: var(--space-3xl) var(--space-xl); | |
| text-align: center; | |
| } | |
| .cta-box { | |
| max-width: 700px; | |
| margin: 0 auto; | |
| padding: var(--space-3xl); | |
| background: linear-gradient(135deg, var(--bg-card), var(--bg-tertiary)); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-xl); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cta-box::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%); | |
| animation: rotate 20s linear infinite; | |
| } | |
| .cta-content { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .cta-title { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: var(--space-md); | |
| } | |
| .cta-text { | |
| font-size: 1rem; | |
| color: var(--text-secondary); | |
| margin-bottom: var(--space-xl); | |
| } | |
| .cta-buttons { | |
| display: flex; | |
| gap: var(--space-md); | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| /* FLOATING SHAPES */ | |
| .floating-shape { | |
| position: absolute; | |
| border-radius: 50%; | |
| opacity: 0.1; | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .shape-1 { | |
| width: 300px; | |
| height: 300px; | |
| background: var(--primary); | |
| top: 10%; | |
| right: -100px; | |
| animation-delay: 0s; | |
| } | |
| .shape-2 { | |
| width: 200px; | |
| height: 200px; | |
| background: var(--secondary); | |
| bottom: 20%; | |
| left: -50px; | |
| animation-delay: 2s; | |
| } | |
| .shape-3 { | |
| width: 150px; | |
| height: 150px; | |
| background: var(--accent); | |
| top: 50%; | |
| right: 10%; | |
| animation-delay: 4s; | |
| } | |
| /* AUTHOR FOOTER */ | |
| .author-footer { | |
| background: var(--bg-secondary); | |
| border-top: 1px solid var(--border-color); | |
| padding: var(--space-xl); | |
| text-align: center; | |
| } | |
| .author-info { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--space-xl); | |
| flex-wrap: wrap; | |
| margin-bottom: var(--space-md); | |
| } | |
| .author-link { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| transition: color var(--transition-base); | |
| } | |
| .author-link:hover { | |
| color: var(--primary-light); | |
| } | |
| .author-link svg { | |
| width: 18px; | |
| height: 18px; | |
| fill: currentColor; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Particles Background --> | |
| <div class="particles-container"> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="navbar"> | |
| <a href="index.html" class="navbar-brand"> | |
| <div class="brand-logo">ML</div> | |
| <span>ML Academy</span> | |
| </a> | |
| <div class="navbar-nav"> | |
| <a href="index.html" class="nav-link active"> | |
| <span class="nav-icon">[H]</span> | |
| <span>Accueil</span> | |
| </a> | |
| <a href="cours.html" class="nav-link"> | |
| <span class="nav-icon">[C]</span> | |
| <span>Cours</span> | |
| </a> | |
| <a href="tp.html" class="nav-link"> | |
| <span class="nav-icon">[T]</span> | |
| <span>TPs</span> | |
| </a> | |
| <a href="feedback.html" class="nav-link"> | |
| <span class="nav-icon">[F]</span> | |
| <span>Contact</span> | |
| </a> | |
| </div> | |
| <div class="nav-badge"> | |
| <div class="dot"></div> | |
| <span>Google Colab Ready</span> | |
| </div> | |
| </nav> | |
| <!-- Page Wrapper --> | |
| <div class="page-wrapper"> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="hero-bg"></div> | |
| <div class="floating-shape shape-1"></div> | |
| <div class="floating-shape shape-2"></div> | |
| <div class="floating-shape shape-3"></div> | |
| <div class="hero-eyebrow"> | |
| <div class="pulse"></div> | |
| <span>Formation 2025/2026 — 100% Pratique</span> | |
| </div> | |
| <h1 class="hero-title"> | |
| Maitrisez le <span class="gradient-text">Machine Learning</span><br> | |
| par la pratique | |
| </h1> | |
| <p class="hero-subtitle"> | |
| Apprenez les algorithmes ML essentiels a travers des projets concrets | |
| avec des datasets reels de Kaggle. De zero a heros en quelques seances. | |
| </p> | |
| <div class="hero-cta"> | |
| <a href="cours.html" class="btn btn-primary btn-lg"> | |
| Commencer les cours | |
| </a> | |
| <a href="tp.html" class="btn btn-secondary btn-lg"> | |
| Voir les TPs | |
| </a> | |
| </div> | |
| <div class="hero-stats"> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value">8<span>+</span></div> | |
| <div class="hero-stat-label">Algorithmes</div> | |
| </div> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value">6<span></span></div> | |
| <div class="hero-stat-label">TPs Complets</div> | |
| </div> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value">4<span></span></div> | |
| <div class="hero-stat-label">Datasets Reels</div> | |
| </div> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value">0<span></span></div> | |
| <div class="hero-stat-label">Installation</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features"> | |
| <div class="section-header scroll-animate"> | |
| <div class="section-eyebrow">Pourquoi cette formation</div> | |
| <h2 class="section-title">Ce que vous allez apprendre</h2> | |
| <p class="section-subtitle"> | |
| Une approche progressive alliant theorie solide et pratique intensive | |
| sur des problemes reels du monde de la data science. | |
| </p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card scroll-animate"> | |
| <div class="feature-icon">D</div> | |
| <h3 class="feature-title">Pretraitement des Donnees</h3> | |
| <p class="feature-text"> | |
| Maitrisez le nettoyage, la normalisation et l'ingenierie des features | |
| pour preparer vos donnees a l'entrainement. | |
| </p> | |
| <div class="feature-tags"> | |
| <span class="badge badge-primary">Pandas</span> | |
| <span class="badge badge-secondary">NumPy</span> | |
| <span class="badge badge-success">Scikit-learn</span> | |
| </div> | |
| </div> | |
| <div class="feature-card scroll-animate"> | |
| <div class="feature-icon">A</div> | |
| <h3 class="feature-title">Algorithmes de ML</h3> | |
| <p class="feature-text"> | |
| Comprendre et implementer les algorithmes fondamentaux : | |
| Regression, Classification, Clustering et Deep Learning. | |
| </p> | |
| <div class="feature-tags"> | |
| <span class="badge badge-primary">Regression</span> | |
| <span class="badge badge-secondary">Random Forest</span> | |
| <span class="badge badge-accent">Neural Networks</span> | |
| </div> | |
| </div> | |
| <div class="feature-card scroll-animate"> | |
| <div class="feature-icon">E</div> | |
| <h3 class="feature-title">Evaluation & Optimisation</h3> | |
| <p class="feature-text"> | |
| Apprenez a mesurer la performance de vos modeles et a les optimiser | |
| avec les bonnes metriques et techniques. | |
| </p> | |
| <div class="feature-tags"> | |
| <span class="badge badge-success">Cross-validation</span> | |
| <span class="badge badge-warning">Grid Search</span> | |
| <span class="badge badge-primary">Metriques</span> | |
| </div> | |
| </div> | |
| <div class="feature-card scroll-animate"> | |
| <div class="feature-icon">P</div> | |
| <h3 class="feature-title">Projets Concrets</h3> | |
| <p class="feature-text"> | |
| Travaillez sur des datasets reels de Kaggle : Titanic, Housing, | |
| Iris et bien d'autres pour construire votre portfolio. | |
| </p> | |
| <div class="feature-tags"> | |
| <span class="badge badge-success">Kaggle</span> | |
| <span class="badge badge-accent">Portfolio</span> | |
| <span class="badge badge-secondary">GitHub</span> | |
| </div> | |
| </div> | |
| <div class="feature-card scroll-animate"> | |
| <div class="feature-icon">T</div> | |
| <h3 class="feature-title">Series Temporelles</h3> | |
| <p class="feature-text"> | |
| Decouvrez les techniques specifiques pour predire des donnees | |
| temporelles avec LSTM et les modeles ARIMA. | |
| </p> | |
| <div class="feature-tags"> | |
| <span class="badge badge-primary">LSTM</span> | |
| <span class="badge badge-secondary">TensorFlow</span> | |
| <span class="badge badge-warning">Time Series</span> | |
| </div> | |
| </div> | |
| <div class="feature-card scroll-animate"> | |
| <div class="feature-icon">X</div> | |
| <h3 class="feature-title">Deploiement</h3> | |
| <p class="feature-text"> | |
| Apprenez a mettre vos modeles en production avec des API | |
| et des interfaces web interactives. | |
| </p> | |
| <div class="feature-tags"> | |
| <span class="badge badge-success">FastAPI</span> | |
| <span class="badge badge-primary">Streamlit</span> | |
| <span class="badge badge-secondary">Docker</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Modules Section --> | |
| <section class="modules"> | |
| <div class="section-header scroll-animate"> | |
| <div class="section-eyebrow">Parcours de formation</div> | |
| <h2 class="section-title">Accedez aux modules</h2> | |
| <p class="section-subtitle"> | |
| Trois espaces dedies pour une progression optimale dans votre apprentissage. | |
| </p> | |
| </div> | |
| <div class="modules-grid"> | |
| <a href="cours.html" class="module-card scroll-animate"> | |
| <div class="module-header"> | |
| <div class="module-icon blue">C</div> | |
| <div class="module-info"> | |
| <div class="module-label">Module 1</div> | |
| <h3 class="module-title">Cours Theoriques</h3> | |
| </div> | |
| </div> | |
| <div class="module-body"> | |
| <p class="module-desc"> | |
| Contenu theorique complet avec equations mathematiques, | |
| explications detaillees et exemples de code Python annote. | |
| </p> | |
| <div class="module-meta"> | |
| <span class="badge badge-primary">Theorie</span> | |
| <span class="badge badge-secondary">Mathematiques</span> | |
| <span class="badge badge-success">Python</span> | |
| </div> | |
| </div> | |
| <div class="module-footer"> | |
| <span style="font-size: 0.8rem; color: var(--text-muted);">8 chapitres</span> | |
| <span class="module-arrow">→</span> | |
| </div> | |
| </a> | |
| <a href="tp.html" class="module-card scroll-animate"> | |
| <div class="module-header"> | |
| <div class="module-icon green">T</div> | |
| <div class="module-info"> | |
| <div class="module-label">Module 2</div> | |
| <h3 class="module-title">Travaux Pratiques</h3> | |
| </div> | |
| </div> | |
| <div class="module-body"> | |
| <p class="module-desc"> | |
| 6 notebooks Google Colab guides etape par etape sur des datasets | |
| reels de Kaggle. Pret a executer sans installation. | |
| </p> | |
| <div class="module-meta"> | |
| <span class="badge badge-success">Google Colab</span> | |
| <span class="badge badge-accent">Guide</span> | |
| <span class="badge badge-warning">Kaggle</span> | |
| </div> | |
| </div> | |
| <div class="module-footer"> | |
| <span style="font-size: 0.8rem; color: var(--text-muted);">6 notebooks</span> | |
| <span class="module-arrow">→</span> | |
| </div> | |
| </a> | |
| <a href="feedback.html" class="module-card scroll-animate"> | |
| <div class="module-header"> | |
| <div class="module-icon orange">F</div> | |
| <div class="module-info"> | |
| <div class="module-label">Module 3</div> | |
| <h3 class="module-title">Questions & Feedback</h3> | |
| </div> | |
| </div> | |
| <div class="module-body"> | |
| <p class="module-desc"> | |
| Posez vos questions, evaluez la formation et accedez a la FAQ | |
| pour resoudre vos doutes rapidement. | |
| </p> | |
| <div class="module-meta"> | |
| <span class="badge badge-primary">FAQ</span> | |
| <span class="badge badge-secondary">Support</span> | |
| <span class="badge badge-success">Feedback</span> | |
| </div> | |
| </div> | |
| <div class="module-footer"> | |
| <span style="font-size: 0.8rem; color: var(--text-muted);">Reponses 24h</span> | |
| <span class="module-arrow">→</span> | |
| </div> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Timeline Section --> | |
| <section class="timeline"> | |
| <div class="section-header scroll-animate"> | |
| <div class="section-eyebrow">Organisation</div> | |
| <h2 class="section-title">Plan de la formation</h2> | |
| <p class="section-subtitle"> | |
| Un parcours progressif de 8 seances pour maitriser le Machine Learning. | |
| </p> | |
| </div> | |
| <div class="timeline-container"> | |
| <div class="timeline-item scroll-animate"> | |
| <div class="timeline-dot">1</div> | |
| <div class="timeline-content"> | |
| <div class="timeline-time"> 1 </div> | |
| <h3 class="timeline-title">Introduction au ML & Python</h3> | |
| <p class="timeline-text"> | |
| Fondamentaux du Machine Learning, environnement Python, | |
| NumPy et Pandas pour la manipulation de donnees. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="timeline-item scroll-animate"> | |
| <div class="timeline-dot">2</div> | |
| <div class="timeline-content"> | |
| <div class="timeline-time"> 2 </div> | |
| <h3 class="timeline-title">Pretraitement des Donnees</h3> | |
| <p class="timeline-text"> | |
| Nettoyage, normalisation, encodage des variables categorielles | |
| et feature engineering. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="timeline-item scroll-animate"> | |
| <div class="timeline-dot">3</div> | |
| <div class="timeline-content"> | |
| <div class="timeline-time"> 3 </div> | |
| <h3 class="timeline-title">Regression Lineaire & Logistique</h3> | |
| <p class="timeline-text"> | |
| Algorithmes de base, equations mathematiques, | |
| implementation avec scikit-learn. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="timeline-item scroll-animate"> | |
| <div class="timeline-dot">4</div> | |
| <div class="timeline-content"> | |
| <div class="timeline-time"> 4 </div> | |
| <h3 class="timeline-title">Arbres de Decision & Random Forest</h3> | |
| <p class="timeline-text"> | |
| Classification avec arbres, bagging, boosting et | |
| importance des features. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="timeline-item scroll-animate"> | |
| <div class="timeline-dot">5</div> | |
| <div class="timeline-content"> | |
| <div class="timeline-time"> 5 </div> | |
| <h3 class="timeline-title">Reseaux de Neurones avec Keras</h3> | |
| <p class="timeline-text"> | |
| Introduction au Deep Learning, perceptron multicouche, | |
| activation et backpropagation. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="timeline-item scroll-animate"> | |
| <div class="timeline-dot">6</div> | |
| <div class="timeline-content"> | |
| <div class="timeline-time"> 6 </div> | |
| <h3 class="timeline-title">Series Temporelles & LSTM</h3> | |
| <p class="timeline-text"> | |
| Prediction de donnees temporelles, reseaux recurrents | |
| et modeles LSTM avec TensorFlow. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="timeline-item scroll-animate"> | |
| <div class="timeline-dot">7</div> | |
| <div class="timeline-content"> | |
| <div class="timeline-time"> 7 </div> | |
| <h3 class="timeline-title">Evaluation & Optimisation</h3> | |
| <p class="timeline-text"> | |
| Metriques de performance, cross-validation, | |
| grid search et eviter l'overfitting. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="timeline-item scroll-animate"> | |
| <div class="timeline-dot">8</div> | |
| <div class="timeline-content"> | |
| <div class="timeline-time"> 8 </div> | |
| <h3 class="timeline-title">Projet Final & Deploiement</h3> | |
| <p class="timeline-text"> | |
| Realisation d'un projet complet et mise en production | |
| avec une API simple. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="cta"> | |
| <div class="cta-box scroll-animate"> | |
| <div class="cta-content"> | |
| <h2 class="cta-title">Pret a commencer ?</h2> | |
| <p class="cta-text"> | |
| Rejoignez des centaines d'etudiants qui ont deja maitrise | |
| le Machine Learning avec notre formation. | |
| </p> | |
| <div class="cta-buttons"> | |
| <a href="cours.html" class="btn btn-primary btn-lg"> | |
| Commencer maintenant | |
| </a> | |
| <a href="tp.html" class="btn btn-outline btn-lg"> | |
| Voir les notebooks | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Author Footer --> | |
| <footer class="author-footer"> | |
| <div class="author-info"> | |
| <a href="mailto:imadmaalouf02@gmail.com" class="author-link"> | |
| <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg> | |
| imadmaalouf02@gmail.com | |
| </a> | |
| <a href="https://github.com/imadmaalouf02" target="_blank" class="author-link"> | |
| <svg viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> | |
| GitHub | |
| </a> | |
| <a href="https://huggingface.co/spaces/MAALOOUF/ML_Training" target="_blank" class="author-link"> | |
| <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg> | |
| Hugging Face Space | |
| </a> | |
| </div> | |
| </footer> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <p class="footer-text"> | |
| ML Academy — Formation Machine Learning — | |
| <span class="footer-brand">GE-MCI 4A</span> — Promotion 2025/2026 | |
| </p> | |
| <p class="footer-text" style="margin-top: var(--space-sm);"> | |
| Google Colab · Python · Scikit-learn · TensorFlow · Kaggle | |
| </p> | |
| <p class="footer-text" style="margin-top: var(--space-sm); font-size: 0.75rem; color: var(--text-muted);"> | |
| Formateur : Imad Maalouf | |
| </p> | |
| </footer> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="js/shared.js"></script> | |
| <script> | |
| // Scroll animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.scroll-animate').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Stagger animation for cards | |
| document.querySelectorAll('.features-grid, .modules-grid').forEach(grid => { | |
| const cards = grid.querySelectorAll('.feature-card, .module-card'); | |
| cards.forEach((card, index) => { | |
| card.style.animationDelay = `${index * 0.1}s`; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |