Content Studio — Courses
CONTENT STUDIO SUB-PAGE · EDUCATIONAL COURSES

Educational Courses

Content Studio/educational-videos/ · Content Storage/educational-videos/

Structured educational mini-courses and tutorial series. Each course has a detail page with description, prerequisites, lesson playlist, and a built-in video player. Course content is organized into sequential lessons with a playlist sidebar.

Structured educational mini-courses ও tutorial series। প্রতিটি course-এ description, prerequisites, lesson playlist এবং built-in video player আছে। Lessons sequential order-এ playlist sidebar সহ।

Course Cards Playlist Sidebar Video Player Progress Tracking Prerequisites Lesson Sequence
Course Library
MATLAB for Engineers — Full Course
12 lessons · 3.5 hrs · Intermediate
45% complete · Lesson 6 / 12
L1 — Introduction to MATLAB
L2 — Matrices & Arrays
L3 — Plotting & Visualization
L4 — Signal Processing
SECTION 01

Course Listing & Cards

The course listing page (course-listing-new.html) displays courses as large cards with thumbnail, title, lesson count, duration, prerequisite level, and a progress bar if the user has started. Category filter narrows by subject.

Course listing page-এ large card। Thumbnail, title, lesson count, duration, prerequisite level এবং progress bar। Category filter subject অনুযায়ী narrow করে।

Course Card Grid
Large cards with thumbnail, lesson count, duration, difficulty level badge
Progress Bar
Shows % completion for started courses — stored in localStorage
Subject Category Filter
Filter by MATLAB, Arduino, Electronics, AI, Programming — instant update
Course Card Layout
Arduino Fundamentals
8 lessons · 2 hrsBeginner
SECTION 02

Course Viewer with Playlist

The course viewer (course-viewer-new.html) shows a video player on the left and a lesson playlist sidebar on the right. Completed lessons get a checkmark — progress is saved to localStorage. The player uses YouTube iframe with custom controls.

Course viewer-এ left side-এ video player, right side-এ lesson playlist sidebar। Completed lessons-এ checkmark। Progress localStorage-এ save হয়।

Player + Playlist Layout
Side-by-side video player (left) and sequential lesson playlist (right)
Lesson Completion Tracking
Mark lessons complete manually or auto-detect from video end event
Auto Next Lesson
After video ends, automatically queues the next lesson after a 3-second countdown
Viewer Layout
L1 — Intro
L2 — Arrays
L3 — Plots
SECTION 03

Course Detail Page

The course detail page (course-detail.html) shows full course information — overview, what you'll learn, prerequisites list, full lesson syllabus, instructor notes, and a prominent CTA button to start or continue the course.

Course detail page-এ full course information। Overview, what you'll learn, prerequisites list, full lesson syllabus, instructor notes এবং Start/Continue button।

Full Lesson Syllabus
Expandable lesson list with icons — locked until prerequisites are shown
Prerequisites & Level
Clearly stated prerequisites and difficulty level (Beginner / Intermediate / Advanced)
Start / Continue CTA
Smart CTA — shows "Start Course" or "Continue (Lesson X)" based on progress
Course Detail
What you'll learn
Prerequisites
Lesson Syllabus
Continue — Lesson 6

Educational Courses — File Reference

FileTypeDescription
Content Studio/educational-videos/course-listing-new.htmlPageCourse listing with cards, progress bars, category filter
Content Studio/educational-videos/course-detail.htmlPageCourse detail — overview, syllabus, prerequisites, Start/Continue CTA
Content Studio/educational-videos/course-viewer-new.htmlPageCourse viewer with YouTube player + lesson playlist sidebar
Content Studio/educational-videos/courses.jsonDataCourse metadata: title, lessons, duration, level, thumbnail, YouTube IDs
Content Storage/educational-videos/StorageCourse thumbnails, supplementary files (PDFs, code), and note files