async function showCourseDetail(courseId) { const course = COURSE_PATHWAYS[courseId]; if (!course) return; const photoUrl = getCoursePhoto(course.id); document.getElementById('courseListView').style.display = 'none'; const detailView = document.getElementById('courseDetailView'); detailView.classList.add('active'); // Check access let hasAccess = false; if (window.dopeCourses && typeof dopeCourses.hasCourseAccess === 'function') { try { hasAccess = await dopeCourses.hasCourseAccess(courseId); } catch (e) { hasAccess = false; } } if (!hasAccess) { // Show preview/teaser only detailView.innerHTML = ` Back to All Courses
${course.title} course hero image

${course.title} (Preview)

${course.subtitle}

${course.description}

$${course.price}One-time
${course.duration}Total Duration
${course.lessons.length}Lessons
${course.level}Level

Or get access to ALL courses with a $14/month membership

Course Preview

See a sample lesson below. To access the full curriculum, labs, quizzes, and resources, please purchase the course or subscribe.

Sample Lesson:
${course.lessons[0].title}

${course.lessons[0].description}

`; return; } // ...existing code for full detail view... detailView.innerHTML = ` Back to All Courses
${course.title} course hero image

${course.title}

${course.subtitle}

${course.description}

$${course.price}One-time
${course.duration}Total Duration
${course.lessons.length}Lessons
${course.level}Level

Or get access to ALL courses with a $14/month membership

${course.certifications ? ` } .cert-spotlight-card span { display: inline-block; margin-top: 0.85rem; color: #10b981; font-size: 0.9rem; font-weight: bold; } .filter-btn:hover, .filter-btn.active { background: #7b4df2; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(123, 77, 242, 0.4); } .courses-container { max-width: 1400px; margin: 2rem auto; padding: 0 2rem 4rem; } .course-detail-view { display: none; max-width: 1200px; margin: 0 auto; padding: 2rem; } } .course-detail-view.active { display: block; } .course-header { background: linear-gradient(135deg, #171d3f, #0b1025); border: 2px solid #7b4df2; border-radius: 20px; padding: 3rem; margin-bottom: 2rem; text-align: center; position: relative; overflow: hidden; } .course-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 24, 39, 0.1), rgba(17, 24, 39, 0.72)); pointer-events: none; } .course-header > * { position: relative; z-index: 1; } .course-hero-image { width: min(100%, 920px); height: clamp(220px, 32vw, 340px); object-fit: cover; display: block; margin: 0 auto 1.5rem; border-radius: 18px; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 18px 40px rgba(0,0,0,0.24); } .course-header h2 { font-size: 2.5rem; color: #77efe3; margin-bottom: 0.5rem; } .course-header .subtitle { font-size: 1.3rem; color: #cbbcff; margin-bottom: 2rem; } .course-meta { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } .meta-item { background: rgba(255,255,255,0.1); padding: 1rem 2rem; border-radius: 10px; } .meta-item strong { display: block; font-size: 1.8rem; color: #77efe3; } .lessons-grid { display: grid; gap: 1.5rem; margin-bottom: 3rem; } .lesson-card { background: linear-gradient(135deg, #171d3f, #0b1025); border: 2px solid #7b4df2; border-radius: 15px; padding: 1rem; display: flex; gap: 1.5rem; transition: all 0.3s; cursor: pointer; align-items: stretch; } .lesson-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(123, 77, 242, 0.3); border-color: #77efe3; } .lesson-card.expanded { border-color: #10b981; background: linear-gradient(135deg, #0b1025, #171d3f); } .lesson-details { display: none; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid rgba(123, 77, 242, 0.3); } .lesson-card.expanded .lesson-details { display: block; } .detail-section { margin: 1.5rem 0; padding: 1.5rem; background: rgba(255,255,255,0.03); border-radius: 10px; border-left: 4px solid #7b4df2; } .detail-section h4 { color: #77efe3; margin-bottom: 1rem; font-size: 1.2rem; } .materials-list, .lab-list { list-style: none; padding-left: 0; } .materials-list li, .lab-list li { padding: 0.8rem; color: #e0e0e0; border-bottom: 1px solid rgba(123, 77, 242, 0.2); background: rgba(255,255,255,0.02); margin-bottom: 0.5rem; border-radius: 5px; } .quiz-question { background: rgba(123, 77, 242, 0.15); padding: 1.2rem; border-radius: 8px; margin-bottom: 1rem; border-left: 4px solid #cbbcff; } .quiz-question p { color: #77efe3; font-weight: bold; margin-bottom: 0.8rem; } .quiz-options { padding-left: 1.5rem; list-style: none; } .quiz-options { list-style: none; padding-left: 0; } .quiz-options li { color: #e0e0e0; padding: 0.6rem 1rem; margin: 0.3rem 0; background: rgba(255,255,255,0.03); border-radius: 5px; border-left: 3px solid #7b4df2; transition: all 0.3s; cursor: pointer; } .quiz-options li:hover { background: rgba(123, 77, 242, 0.1); transform: translateX(5px); } .quiz-option[data-correct="true"].revealed { color: #10b981 !important; font-weight: bold; background: rgba(16, 185, 129, 0.15) !important; border-left: 3px solid #10b981; padding: 0.6rem 1rem; } .quiz-option[data-correct="true"].revealed::after { content: ' โœ“ Correct Answer'; color: #10b981; font-weight: bold; margin-left: 0.5rem; } .btn-reveal-answers:hover { transform: scale(1.02); box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); } .expand-icon { float: right; color: #7b4df2; transition: transform 0.3s; font-size: 1.2rem; } .lesson-card.expanded .expand-icon { transform: rotate(180deg); color: #10b981; } .lesson-number { min-width: 240px; width: 240px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .course-card-image { width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block; } .lesson-content { flex: 1; padding: 0.4rem 0.2rem 0.2rem 0; } .lesson-content h3 { color: #77efe3; margin-bottom: 0.5rem; } .lesson-content .duration { color: #cbbcff; font-size: 0.9rem; margin-bottom: 0.5rem; } .lesson-content p { color: #e0e0e0; margin-bottom: 0.5rem; } .topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .topic-tag { background: rgba(123, 77, 242, 0.3); padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.85rem; color: #cbbcff; } .cta-section { background: linear-gradient(135deg, #7b4df2, #5f39c7); border-radius: 20px; padding: 3rem; text-align: center; } .cta-section h3 { font-size: 2rem; margin-bottom: 1rem; } .btn-enroll { display: inline-block; padding: 1.2rem 3rem; background: #77efe3; color: #0b1025; text-decoration: none; border-radius: 10px; font-size: 1.3rem; font-weight: bold; margin-top: 1rem; transition: all 0.3s; border: none; cursor: pointer; } .btn-enroll:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(255, 204, 0, 0.4); } .btn-back { display: inline-block; padding: 0.8rem 2rem; background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; border-radius: 10px; margin-bottom: 2rem; transition: all 0.3s; } .btn-back:hover { background: rgba(255,255,255,0.2); } footer { text-align: center; padding: 2rem; color: #aaa; margin-top: 4rem; } @media (max-width: 768px) { .hero h1 { font-size: 2rem; } .lesson-card { flex-direction: column; } .lesson-number { width: 100%; min-width: 100%; } .course-card-image { min-height: 220px; } }

Professional Course Pathways

Industry-competitive training designed to launch and advance your tech career. From cloud fundamentals to advanced specializations.

Featured Microsoft Certification Tracks

These new dedicated pages turn the Azure tracks from generic catalog items into real landing pages with SEO, syllabus content, free labs, and direct navigation.

Free Cloud Career Starter Kit

Get the 7-day roadmap, certification checklist, and interview prep guide.

Check your email to confirm your subscription. Redirecting to the starter kit.