Course Detail
Introduction to Web Development
🏫 Vientiane TVET College
A foundational course for modern web development, covering HTML, CSS, JavaScript, and popular frameworks
40 hours
Intermediate
- Build websites using HTML5 + CSS3
- Use JavaScript for interactivity
- Understand responsive design
No prerequisites
- 📄 Introduction to HTML
- 📄 HTML Structure and Tags
- 📝 HTML Quiz
Dr. Somchai Instructor
Web development and Cloud Computing expert with over 10 years of experience
Screen Flow (from flow.puml):
📝 Spec notes — UC-LMS.06 / SCR-LMS.02 (fields, actions, requirements)
- Screen: SCR-LMS.02 — Course Detail
- Use case: UC-LMS.06 — Browse Course Catalog
Course detail page accessible to all users without login. Displays full information — title, description, objectives, prerequisites, duration, difficulty, content outline, instructor, tags, and price. For unenrolled users — shows "Enroll" button (free/subscription course) or "Buy Course" button (paid course). For enrolled users — shows "Continue Learning" button. Guests clicking any button are redirected to login first (UC-IDP.02).
course_title"Course title" — text · data_ref: Course.title · read-only · alwayscover_image"Cover image" — file · read-only · always (lazy-load)description"Description" — textarea · data_ref: Course.description · read-only · alwaystag_list"Tag" — text · data_ref: Tag.name · read-only · alwaysduration"Duration (hours)" — number · data_ref: Course.duration · read-only · alwaysdifficulty"Difficulty" — enum [beginner, intermediate, advanced] · data_ref: Course.difficulty · read-only · alwayslearning_objectives"Learning objectives" — textarea · data_ref: Course.objectives · visible when has_outcomes==trueprerequisites_list"Prerequisites" — text · data_ref: Course.prerequisites · visible when prerequisites!=nullcontent_outline"Content outline" — textarea · data_ref: CourseVersion.snapshot · visible when has_modules==trueinstructor_photo"Instructor photo" — file · read-only · always (lazy-load; cross-module: InstructorProfile)instructor_name"Instructor name" — text · read-only · always (cross-module: InstructorProfile)instructor_bio"Instructor bio" — textarea · read-only · always (cross-module: InstructorProfile)price_display"Price" — text · read-only · always · fallback: "Free" (cross-module: Billing)enrollment_success_banner"Enrollment success banner" — text · data_ref: Enrollment.status · visible when enrollment.status==active && just_enrolled==truepayment_failure_banner"Payment failure message" — text · data_ref: Enrollment.status · visible when enrollment.status==pending_payment && payment_failed==true
enroll"Enroll" — enabled when (enrollment==null || enrollment.status==cancelled) && (course.price==0 || subscription_covers==true) · triggers UC-LMS.07-M-1buy_course"Buy Course" — enabled when (enrollment==null || enrollment.status==cancelled) && course.price>0 && subscription_covers==false · triggers UC-LMS.07-A-10A-1continue_learning"Continue Learning" — enabled when enrollment.status==active · triggers UC-LMS.08-M-3retry_payment"Retry Payment" — enabled when enrollment.status==pending_payment && payment_failed==true · triggers UC-LMS.07-A-10A-2cancel_enrollment"Cancel Enrollment" — enabled when enrollment.status==pending_payment && payment_failed==true
- Public access: guests can view the entire page — only clicking "Enroll/Buy" redirects to login first (UC-IDP.02)
- Enrollment state check: page load checks enrollment to display the correct CTA (enroll / buy / continue / retry+cancel)
- Prerequisites missing modal: modal lists missing courses with links to each Course Detail (UC-LMS.07 AF-3A); enroll button is disabled in this state
- Duplicate enrollment modal: dialog with "Continue Learning" button if enrollment is already active (UC-LMS.07 AF-4A)
- Lazy-load cover_image + instructor_photo [refs: NFR-02]