| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SkillSync: Gen AI Mastery</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --primary: #4361ee; |
| --secondary: #3f37c9; |
| --accent: #4895ef; |
| --light: #f8f9fa; |
| --dark: #212529; |
| --success: #4cc9f0; |
| --warning: #f72585; |
| --gradient: linear-gradient(135deg, #4361ee, #3f37c9); |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| body { |
| background-color: #f5f7fa; |
| color: var(--dark); |
| line-height: 1.6; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 20px; |
| } |
| |
| |
| header { |
| background: var(--gradient); |
| color: white; |
| padding: 1rem 0; |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
| } |
| |
| .header-content { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| font-size: 1.5rem; |
| font-weight: bold; |
| } |
| |
| .logo i { |
| font-size: 2rem; |
| } |
| |
| nav ul { |
| display: flex; |
| list-style: none; |
| gap: 2rem; |
| } |
| |
| nav a { |
| color: white; |
| text-decoration: none; |
| font-weight: 500; |
| transition: opacity 0.3s; |
| } |
| |
| nav a:hover { |
| opacity: 0.8; |
| } |
| |
| .user-actions { |
| display: flex; |
| gap: 1rem; |
| } |
| |
| .btn { |
| padding: 0.5rem 1.5rem; |
| border-radius: 50px; |
| border: none; |
| cursor: pointer; |
| font-weight: 600; |
| transition: all 0.3s; |
| } |
| |
| .btn-primary { |
| background: white; |
| color: var(--primary); |
| } |
| |
| .btn-primary:hover { |
| background: var(--light); |
| } |
| |
| .btn-secondary { |
| background: transparent; |
| color: white; |
| border: 2px solid white; |
| } |
| |
| .btn-secondary:hover { |
| background: rgba(255, 255, 255, 0.1); |
| } |
| |
| |
| .hero { |
| background: var(--gradient); |
| color: white; |
| padding: 4rem 0; |
| text-align: center; |
| margin-bottom: 2rem; |
| } |
| |
| .hero h1 { |
| font-size: 3rem; |
| margin-bottom: 1rem; |
| } |
| |
| .hero p { |
| font-size: 1.2rem; |
| max-width: 800px; |
| margin: 0 auto 2rem; |
| opacity: 0.9; |
| } |
| |
| .hero-stats { |
| display: flex; |
| justify-content: center; |
| gap: 3rem; |
| margin-top: 2rem; |
| } |
| |
| .stat { |
| text-align: center; |
| } |
| |
| .stat-number { |
| font-size: 2.5rem; |
| font-weight: bold; |
| } |
| |
| .stat-label { |
| opacity: 0.8; |
| } |
| |
| |
| .course-nav { |
| background: white; |
| border-radius: 12px; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
| margin-bottom: 2rem; |
| overflow: hidden; |
| } |
| |
| .course-tabs { |
| display: flex; |
| border-bottom: 1px solid #eee; |
| } |
| |
| .course-tab { |
| padding: 1rem 2rem; |
| cursor: pointer; |
| font-weight: 600; |
| color: #777; |
| transition: all 0.3s; |
| position: relative; |
| } |
| |
| .course-tab.active { |
| color: var(--primary); |
| } |
| |
| .course-tab.active::after { |
| content: ''; |
| position: absolute; |
| bottom: -1px; |
| left: 0; |
| width: 100%; |
| height: 3px; |
| background: var(--primary); |
| } |
| |
| |
| .modules-container { |
| margin-bottom: 3rem; |
| } |
| |
| .section-title { |
| font-size: 1.8rem; |
| margin-bottom: 1.5rem; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .section-title i { |
| color: var(--primary); |
| } |
| |
| .module-card { |
| background: white; |
| border-radius: 12px; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
| margin-bottom: 1.5rem; |
| overflow: hidden; |
| transition: transform 0.3s; |
| } |
| |
| .module-card:hover { |
| transform: translateY(-5px); |
| } |
| |
| .module-header { |
| padding: 1.5rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| cursor: pointer; |
| } |
| |
| .module-info { |
| display: flex; |
| align-items: center; |
| gap: 15px; |
| } |
| |
| .module-number { |
| width: 40px; |
| height: 40px; |
| background: var(--gradient); |
| color: white; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| } |
| |
| .module-title { |
| font-size: 1.2rem; |
| font-weight: 600; |
| } |
| |
| .module-progress { |
| width: 100px; |
| height: 6px; |
| background: #eee; |
| border-radius: 3px; |
| overflow: hidden; |
| } |
| |
| .progress-bar { |
| height: 100%; |
| background: var(--gradient); |
| border-radius: 3px; |
| } |
| |
| .module-content { |
| padding: 0 1.5rem 1.5rem; |
| display: none; |
| } |
| |
| .module-content.active { |
| display: block; |
| } |
| |
| .lesson-list { |
| list-style: none; |
| } |
| |
| .lesson-item { |
| padding: 1rem; |
| border-bottom: 1px solid #eee; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .lesson-item:last-child { |
| border-bottom: none; |
| } |
| |
| .lesson-info { |
| display: flex; |
| align-items: center; |
| gap: 15px; |
| } |
| |
| .lesson-icon { |
| width: 32px; |
| height: 32px; |
| background: #f0f4ff; |
| color: var(--primary); |
| border-radius: 8px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .lesson-status { |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| color: #777; |
| font-size: 0.9rem; |
| } |
| |
| .lesson-status i { |
| color: var(--success); |
| } |
| |
| |
| .quiz-container { |
| background: white; |
| border-radius: 12px; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
| padding: 2rem; |
| margin-bottom: 2rem; |
| } |
| |
| .quiz-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 2rem; |
| } |
| |
| .quiz-title { |
| font-size: 1.5rem; |
| } |
| |
| .quiz-timer { |
| background: #f8f9fa; |
| padding: 0.5rem 1rem; |
| border-radius: 50px; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .question-container { |
| margin-bottom: 2rem; |
| } |
| |
| .question-text { |
| font-size: 1.2rem; |
| margin-bottom: 1.5rem; |
| } |
| |
| .options-list { |
| display: flex; |
| flex-direction: column; |
| gap: 1rem; |
| } |
| |
| .option-item { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 1rem; |
| border: 2px solid #eee; |
| border-radius: 8px; |
| cursor: pointer; |
| transition: all 0.3s; |
| } |
| |
| .option-item:hover { |
| border-color: var(--primary); |
| background: #f8f9ff; |
| } |
| |
| .option-item.selected { |
| border-color: var(--primary); |
| background: #f0f4ff; |
| } |
| |
| .option-item.correct { |
| border-color: var(--success); |
| background: rgba(76, 201, 240, 0.1); |
| } |
| |
| .option-item.incorrect { |
| border-color: var(--warning); |
| background: rgba(247, 37, 133, 0.1); |
| } |
| |
| .quiz-actions { |
| display: flex; |
| justify-content: space-between; |
| margin-top: 2rem; |
| } |
| |
| |
| .assignment-container { |
| background: white; |
| border-radius: 12px; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
| padding: 2rem; |
| margin-bottom: 2rem; |
| } |
| |
| .assignment-header { |
| margin-bottom: 2rem; |
| } |
| |
| .assignment-title { |
| font-size: 1.5rem; |
| margin-bottom: 0.5rem; |
| } |
| |
| .assignment-meta { |
| display: flex; |
| gap: 2rem; |
| color: #777; |
| } |
| |
| .assignment-meta span { |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| } |
| |
| .assignment-description { |
| margin-bottom: 2rem; |
| line-height: 1.8; |
| } |
| |
| .task-list { |
| list-style: none; |
| margin-bottom: 2rem; |
| } |
| |
| .task-item { |
| padding: 1rem; |
| background: #f8f9fa; |
| border-radius: 8px; |
| margin-bottom: 1rem; |
| display: flex; |
| align-items: flex-start; |
| gap: 15px; |
| } |
| |
| .task-number { |
| background: var(--gradient); |
| color: white; |
| width: 28px; |
| height: 28px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 0.8rem; |
| flex-shrink: 0; |
| } |
| |
| .deliverables { |
| background: #f0f4ff; |
| padding: 1.5rem; |
| border-radius: 8px; |
| margin-bottom: 2rem; |
| } |
| |
| .deliverables h4 { |
| margin-bottom: 1rem; |
| color: var(--primary); |
| } |
| |
| .deliverables ul { |
| margin-left: 1.5rem; |
| } |
| |
| .deliverables li { |
| margin-bottom: 0.5rem; |
| } |
| |
| .submission-form { |
| border-top: 1px solid #eee; |
| padding-top: 2rem; |
| } |
| |
| .form-group { |
| margin-bottom: 1.5rem; |
| } |
| |
| .form-group label { |
| display: block; |
| margin-bottom: 0.5rem; |
| font-weight: 600; |
| } |
| |
| .form-control { |
| width: 100%; |
| padding: 0.75rem; |
| border: 1px solid #ddd; |
| border-radius: 8px; |
| font-size: 1rem; |
| } |
| |
| textarea.form-control { |
| min-height: 100px; |
| resize: vertical; |
| } |
| |
| .file-upload { |
| border: 2px dashed #ddd; |
| padding: 2rem; |
| text-align: center; |
| border-radius: 8px; |
| cursor: pointer; |
| transition: all 0.3s; |
| } |
| |
| .file-upload:hover { |
| border-color: var(--primary); |
| background: #f8f9ff; |
| } |
| |
| .file-upload i { |
| font-size: 2rem; |
| color: var(--primary); |
| margin-bottom: 1rem; |
| } |
| |
| |
| footer { |
| background: var(--dark); |
| color: white; |
| padding: 3rem 0; |
| margin-top: 3rem; |
| } |
| |
| .footer-content { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 2rem; |
| } |
| |
| .footer-column h3 { |
| margin-bottom: 1.5rem; |
| font-size: 1.2rem; |
| } |
| |
| .footer-column ul { |
| list-style: none; |
| } |
| |
| .footer-column li { |
| margin-bottom: 0.75rem; |
| } |
| |
| .footer-column a { |
| color: #aaa; |
| text-decoration: none; |
| transition: color 0.3s; |
| } |
| |
| .footer-column a:hover { |
| color: white; |
| } |
| |
| .copyright { |
| text-align: center; |
| margin-top: 2rem; |
| padding-top: 2rem; |
| border-top: 1px solid #333; |
| color: #aaa; |
| } |
| |
| |
| @media (max-width: 768px) { |
| .hero h1 { |
| font-size: 2rem; |
| } |
| |
| .hero-stats { |
| flex-direction: column; |
| gap: 1.5rem; |
| } |
| |
| .course-tabs { |
| overflow-x: auto; |
| } |
| |
| .course-tab { |
| padding: 0.75rem 1rem; |
| white-space: nowrap; |
| } |
| |
| .footer-content { |
| grid-template-columns: 1fr; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header> |
| <div class="container header-content"> |
| <div class="logo"> |
| <i class="fas fa-graduation-cap"></i> |
| <span>SkillSync</span> |
| </div> |
| <nav> |
| <ul> |
| <li><a href="#" class="active">Courses</a></li> |
| <li><a href="#">My Learning</a></li> |
| <li><a href="#">Community</a></li> |
| <li><a href="#">Resources</a></li> |
| </ul> |
| </nav> |
| <div class="user-actions"> |
| <button class="btn btn-secondary">Sign In</button> |
| <button class="btn btn-primary">Enroll Now</button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="hero"> |
| <div class="container"> |
| <h1>Generative AI Mastery</h1> |
| <p>A comprehensive journey from foundational machine learning concepts to advanced generative AI techniques and deployment strategies.</p> |
| <div class="hero-stats"> |
| <div class="stat"> |
| <div class="stat-number">5</div> |
| <div class="stat-label">Modules</div> |
| </div> |
| <div class="stat"> |
| <div class="stat-number">25+</div> |
| <div class="stat-label">Hours</div> |
| </div> |
| <div class="stat"> |
| <div class="stat-number">15</div> |
| <div class="stat-label">Quizzes</div> |
| </div> |
| <div class="stat"> |
| <div class="stat-number">5</div> |
| <div class="stat-label">Projects</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <main class="container"> |
| |
| <div class="course-nav"> |
| <div class="course-tabs"> |
| <div class="course-tab active" data-tab="modules">Modules</div> |
| <div class="course-tab" data-tab="quizzes">Quizzes</div> |
| <div class="course-tab" data-tab="assignments">Assignments</div> |
| <div class="course-tab" data-tab="capstone">Capstone Project</div> |
| </div> |
| </div> |
|
|
| |
| <div id="modules" class="tab-content active"> |
| <div class="modules-container"> |
| <h2 class="section-title"><i class="fas fa-book-open"></i> Course Modules</h2> |
| |
| |
| <div class="module-card"> |
| <div class="module-header" onclick="toggleModule(this)"> |
| <div class="module-info"> |
| <div class="module-number">1</div> |
| <div> |
| <div class="module-title">Foundations of AI & Machine Learning</div> |
| <div class="module-lessons">5 Lessons • 1 Quiz • 1 Assignment</div> |
| </div> |
| </div> |
| <div> |
| <div class="module-progress"> |
| <div class="progress-bar" style="width: 20%;"></div> |
| </div> |
| <div class="module-status">20% Complete</div> |
| </div> |
| </div> |
| <div class="module-content"> |
| <ul class="lesson-list"> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Introduction to Machine Learning</div> |
| <div class="lesson-status">20 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status"><i class="fas fa-check-circle"></i> Completed</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-file-alt"></i></div> |
| <div> |
| <div>Supervised, Unsupervised, and Reinforcement Learning</div> |
| <div class="lesson-status">30 min • Reading</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Neural Networks & Deep Learning</div> |
| <div class="lesson-status">45 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Training Neural Networks</div> |
| <div class="lesson-status">35 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-question-circle"></i></div> |
| <div> |
| <div>Module 1 Quiz</div> |
| <div class="lesson-status">15 min • 5 Questions</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="module-card"> |
| <div class="module-header" onclick="toggleModule(this)"> |
| <div class="module-info"> |
| <div class="module-number">2</div> |
| <div> |
| <div class="module-title">Advanced AI Architectures</div> |
| <div class="module-lessons">6 Lessons • 1 Quiz • 1 Assignment</div> |
| </div> |
| </div> |
| <div> |
| <div class="module-progress"> |
| <div class="progress-bar" style="width: 0%;"></div> |
| </div> |
| <div class="module-status">0% Complete</div> |
| </div> |
| </div> |
| <div class="module-content"> |
| <ul class="lesson-list"> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Computer Vision Fundamentals</div> |
| <div class="lesson-status">40 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Natural Language Processing</div> |
| <div class="lesson-status">45 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Reinforcement Learning</div> |
| <div class="lesson-status">35 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-question-circle"></i></div> |
| <div> |
| <div>Module 2 Quiz</div> |
| <div class="lesson-status">15 min • 5 Questions</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="module-card"> |
| <div class="module-header" onclick="toggleModule(this)"> |
| <div class="module-info"> |
| <div class="module-number">3</div> |
| <div> |
| <div class="module-title">Generative AI & LLMs</div> |
| <div class="module-lessons">6 Lessons • 1 Quiz • 1 Assignment</div> |
| </div> |
| </div> |
| <div> |
| <div class="module-progress"> |
| <div class="progress-bar" style="width: 0%;"></div> |
| </div> |
| <div class="module-status">0% Complete</div> |
| </div> |
| </div> |
| <div class="module-content"> |
| <ul class="lesson-list"> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Large Language Models (LLMs)</div> |
| <div class="lesson-status">50 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Retrieval-Augmented Generation (RAG)</div> |
| <div class="lesson-status">45 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Fine-Tuning LLMs</div> |
| <div class="lesson-status">40 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-question-circle"></i></div> |
| <div> |
| <div>Module 3 Quiz</div> |
| <div class="lesson-status">15 min • 5 Questions</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="module-card"> |
| <div class="module-header" onclick="toggleModule(this)"> |
| <div class="module-info"> |
| <div class="module-number">4</div> |
| <div> |
| <div class="module-title">Optimizing & Deploying Gen AI Models</div> |
| <div class="module-lessons">6 Lessons • 1 Quiz • 1 Assignment</div> |
| </div> |
| </div> |
| <div> |
| <div class="module-progress"> |
| <div class="progress-bar" style="width: 0%;"></div> |
| </div> |
| <div class="module-status">0% Complete</div> |
| </div> |
| </div> |
| <div class="module-content"> |
| <ul class="lesson-list"> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Model Compression Techniques</div> |
| <div class="lesson-status">45 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Model Training at Scale</div> |
| <div class="lesson-status">40 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Deployment Strategies</div> |
| <div class="lesson-status">50 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-question-circle"></i></div> |
| <div> |
| <div>Module 4 Quiz</div> |
| <div class="lesson-status">15 min • 5 Questions</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="module-card"> |
| <div class="module-header" onclick="toggleModule(this)"> |
| <div class="module-info"> |
| <div class="module-number">5</div> |
| <div> |
| <div class="module-title">Leveraging Gen AI for Real-World Applications</div> |
| <div class="module-lessons">6 Lessons • 1 Quiz • 1 Assignment</div> |
| </div> |
| </div> |
| <div> |
| <div class="module-progress"> |
| <div class="progress-bar" style="width: 0%;"></div> |
| </div> |
| <div class="module-status">0% Complete</div> |
| </div> |
| </div> |
| <div class="module-content"> |
| <ul class="lesson-list"> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Industry Use Cases</div> |
| <div class="lesson-status">35 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-play-circle"></i></div> |
| <div> |
| <div>Building End-to-End AI Products</div> |
| <div class="lesson-status">45 min • Video</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| <li class="lesson-item"> |
| <div class="lesson-info"> |
| <div class="lesson-icon"><i class="fas fa-question-circle"></i></div> |
| <div> |
| <div>Module 5 Quiz</div> |
| <div class="lesson-status">15 min • 5 Questions</div> |
| </div> |
| </div> |
| <div class="lesson-status">Not started</div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="quizzes" class="tab-content"> |
| <div class="quiz-container"> |
| <div class="quiz-header"> |
| <h2 class="quiz-title">Module 1: ML & Neural Network Fundamentals</h2> |
| <div class="quiz-timer"> |
| <i class="fas fa-clock"></i> |
| <span>15:00</span> |
| </div> |
| </div> |
| |
| <div class="question-container"> |
| <h3 class="question-text">1. Which of the following is an example of unsupervised learning?</h3> |
| <div class="options-list"> |
| <div class="option-item" onclick="selectOption(this)"> |
| <input type="radio" name="q1" id="q1a"> |
| <label for="q1a">Image classification</label> |
| </div> |
| <div class="option-item" onclick="selectOption(this)"> |
| <input type="radio" name="q1" id="q1b"> |
| <label for="q1b">Customer segmentation</label> |
| </div> |
| <div class="option-item" onclick="selectOption(this)"> |
| <input type="radio" name="q1" id="q1c"> |
| <label for="q1c">Spam detection</label> |
| </div> |
| <div class="option-item" onclick="selectOption(this)"> |
| <input type="radio" name="q1" id="q1d"> |
| <label for="q1d">Weather prediction</label> |
| </div> |
| </div> |
| </div> |
| |
| <div class="question-container"> |
| <h3 class="question-text">2. What problem does high bias typically indicate?</h3> |
| <div class="options-list"> |
| <div class="option-item" onclick="selectOption(this)"> |
| <input type="radio" name="q2" id="q2a"> |
| <label for="q2a">Overfitting</label> |
| </div> |
| <div class="option-item" onclick="selectOption(this)"> |
| <input type="radio" name="q2" id="q2b"> |
| <label for="q2b">Underfitting</label> |
| </div> |
| <div class="option-item" onclick="selectOption(this)"> |
| <input type="radio" name="q2" id="q2c"> |
| <label for="q2c">Good generalization</label> |
| </div> |
| <div class="option-item" onclick="selectOption(this)"> |
| <input type="radio" name="q2" id="q2d"> |
| <label for="q2d">None of the above</label> |
| </div> |
| </div> |
| </div> |
| |
| <div class="quiz-actions"> |
| <button class="btn btn-secondary">Previous</button> |
| <button class="btn btn-primary" onclick="submitQuiz()">Submit Answers</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="assignments" class="tab-content"> |
| <div class="assignment-container"> |
| <div class="assignment-header"> |
| <h2 class="assignment-title">Assignment 1: Building Your First Neural Network</h2> |
| <div class="assignment-meta"> |
| <span><i class="fas fa-clock"></i> 3-4 hours</span> |
| <span><i class="fas fa-star"></i> 100 points</span> |
| <span><i class="fas fa-calendar"></i> Due: May 15, 2025</span> |
| </div> |
| </div> |
| |
| <div class="assignment-description"> |
| <h3>Objective</h3> |
| <p>Implement a simple feedforward neural network for image classification using the MNIST dataset. This assignment will help you understand the fundamentals of neural network architecture, training process, and optimization techniques.</p> |
| </div> |
| |
| <h3>Tasks</h3> |
| <ul class="task-list"> |
| <li class="task-item"> |
| <div class="task-number">1</div> |
| <div>Load and preprocess the MNIST dataset. Ensure proper normalization of pixel values and splitting into training and validation sets.</div> |
| </li> |
| <li class="task-item"> |
| <div class="task-number">2</div> |
| <div>Build a neural network with: Input layer (784 neurons), Two hidden layers (128 & 64 neurons, ReLU activation), Output layer (10 neurons, softmax activation).</div> |
| </li> |
| <li class="task-item"> |
| <div class="task-number">3</div> |
| <div>Train the model using gradient descent optimizer. Experiment with different learning rates and observe the impact on convergence.</div> |
| </li> |
| <li class="task-item"> |
| <div class="task-number">4</div> |
| <div>Implement dropout regularization and compare model performance with and without regularization.</div> |
| </li> |
| <li class="task-item"> |
| <div class="task-number">5</div> |
| <div>Analyze the bias-variance tradeoff in your model and document your findings.</div> |
| </li> |
| </ul> |
| |
| <div class="deliverables"> |
| <h4>Deliverables</h4> |
| <ul> |
| <li>Jupyter notebook with code and explanations</li> |
| <li>Performance comparison report (accuracy, loss curves)</li> |
| <li>1-page reflection on bias-variance tradeoff observed</li> |
| </ul> |
| </div> |
| |
| <div class="submission-form"> |
| <h3>Submit Your Work</h3> |
| <div class="form-group"> |
| <label for="submission-title">Submission Title</label> |
| <input type="text" id="submission-title" class="form-control" placeholder="Enter a title for your submission"> |
| </div> |
| <div class="form-group"> |
| <label for="submission-notes">Notes to Reviewer</label> |
| <textarea id="submission-notes" class="form-control" placeholder="Add any notes or comments about your submission"></textarea> |
| </div> |
| <div class="form-group"> |
| <label>Upload Files</label> |
| <div class="file-upload"> |
| <i class="fas fa-cloud-upload-alt"></i> |
| <p>Drag and drop files here or click to browse</p> |
| <p class="small">Accepted formats: .ipynb, .pdf, .zip (Max size: 50MB)</p> |
| </div> |
| </div> |
| <button class="btn btn-primary">Submit Assignment</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="capstone" class="tab-content"> |
| <div class="assignment-container"> |
| <div class="assignment-header"> |
| <h2 class="assignment-title">Final Capstone Project: Domain-Specific RAG Chatbot</h2> |
| <div class="assignment-meta"> |
| <span><i class="fas fa-clock"></i> 20-25 hours</span> |
| <span><i class="fas fa-star"></i> 500 points</span> |
| <span><i class="fas fa-calendar"></i> Due: June 30, 2025</span> |
| </div> |
| </div> |
| |
| <div class="assignment-description"> |
| <h3>Objective</h3> |
| <p>Build and deploy an end-to-end domain-specific RAG chatbot. This project integrates all the concepts learned throughout the course, from neural network fundamentals to LLM deployment.</p> |
| </div> |
| |
| <h3>Requirements</h3> |
| <ul class="task-list"> |
| <li class="task-item"> |
| <div class="task-number">1</div> |
| <div><strong>Data Preparation:</strong> Collect and preprocess domain-specific documents. Create an efficient embedding structure.</div> |
| </li> |
| <li class="task-item"> |
| <div class="task-number">2</div> |
| <div><strong>Model Implementation:</strong> Implement retrieval system with appropriate vector database. Fine-tune or prompt-engineer an LLM for your domain. Implement conversation memory.</div> |
| </li> |
| <li class="task-item"> |
| <div class="task-number">3</div> |
| <div><strong>Optimization:</strong> Apply at least two optimization techniques. Benchmark performance improvements.</div> |
| </li> |
| <li class="task-item"> |
| <div class="task-number">4</div> |
| <div><strong>Deployment:</strong> Create a user-friendly interface. Deploy your solution (cloud or local). Implement basic monitoring.</div> |
| </li> |
| <li class="task-item"> |
| <div class="task-number">5</div> |
| <div><strong>Evaluation:</strong> Test with at least 20 domain-specific queries. Compare performance with and without RAG. Document limitations and future improvements.</div> |
| </li> |
| </ul> |
| |
| <div class="deliverables"> |
| <h4>Deliverables</h4> |
| <ul> |
| <li>Complete codebase with documentation</li> |
| <li>Technical report (3-5 pages) explaining architecture and decisions</li> |
| <li>Demo video (3-5 minutes)</li> |
| <li>User feedback from at least 3 testers</li> |
| <li>Future improvements roadmap</li> |
| </ul> |
| </div> |
| |
| <div class="submission-form"> |
| <h3>Submit Your Project</h3> |
| <div class="form-group"> |
| <label for="project-title">Project Title</label> |
| <input type="text" id="project-title" class="form-control" placeholder="Enter a title for your project"> |
| </div> |
| <div class="form-group"> |
| <label for="project-description">Project Description</label> |
| <textarea id="project-description" class="form-control" placeholder="Describe your project, architecture choices, and key features"></textarea> |
| </div> |
| <div class="form-group"> |
| <label for="project-url">Demo URL (Optional)</label> |
| <input type="text" id="project-url" class="form-control" placeholder="Enter the URL to your live demo"> |
| </div> |
| <div class="form-group"> |
| <label>Upload Files</label> |
| <div class="file-upload"> |
| <i class="fas fa-cloud-upload-alt"></i> |
| <p>Drag and drop files here or click to browse</p> |
| <p class="small">Accepted formats: .zip, .pdf, .mp4 (Max size: 100MB)</p> |
| </div> |
| </div> |
| <button class="btn btn-primary">Submit Project</button> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer> |
| <div class="container"> |
| <div class="footer-content"> |
| <div class="footer-column"> |
| <h3>SkillSync</h3> |
| <p>Empowering learners with cutting-edge AI education.</p> |
| </div> |
| <div class="footer-column"> |
| <h3>Courses</h3> |
| <ul> |
| <li><a href="#">Machine Learning</a></li> |
| <li><a href="#">Deep Learning</a></li> |
| <li><a href="#">Generative AI</a></li> |
| <li><a href="#">NLP & LLMs</a></li> |
| </ul> |
| </div> |
| <div class="footer-column"> |
| <h3>Resources</h3> |
| <ul> |
| <li><a href="#">Documentation</a></li> |
| <li><a href="#">Tutorials</a></li> |
| <li><a href="#">Blog</a></li> |
| <li><a href="#">Community</a></li> |
| </ul> |
| </div> |
| <div class="footer-column"> |
| <h3>Company</h3> |
| <ul> |
| <li><a href="#">About Us</a></li> |
| <li><a href="#">Careers</a></li> |
| <li><a href="#">Contact</a></li> |
| <li><a href="#">Privacy Policy</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="copyright"> |
| <p>© 2025 SkillSync. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.querySelectorAll('.course-tab').forEach(tab => { |
| tab.addEventListener('click', function() { |
| |
| document.querySelectorAll('.course-tab').forEach(t => t.classList.remove('active')); |
| |
| |
| this.classList.add('active'); |
| |
| |
| document.querySelectorAll('.tab-content').forEach(content => { |
| content.classList.remove('active'); |
| }); |
| |
| |
| const tabId = this.getAttribute('data-tab'); |
| document.getElementById(tabId).classList.add('active'); |
| }); |
| }); |
| |
| |
| function toggleModule(header) { |
| const content = header.nextElementSibling; |
| content.classList.toggle('active'); |
| } |
| |
| |
| function selectOption(option) { |
| |
| const options = option.parentElement.querySelectorAll('.option-item'); |
| options.forEach(opt => opt.classList.remove('selected')); |
| |
| |
| option.classList.add('selected'); |
| |
| |
| option.querySelector('input').checked = true; |
| } |
| |
| |
| function submitQuiz() { |
| |
| alert('Quiz submitted successfully! Your score will be available shortly.'); |
| } |
| |
| |
| document.querySelector('.module-content').classList.add('active'); |
| </script> |
| </body> |
| </html> |
|
|
