Browse Course Catalog › Course Detail
🎬 Simulate:

Course Detail

Course overview

Introduction to Web Development

🏫 Vientiane TVET College

A foundational course for modern web development, covering HTML, CSS, JavaScript, and popular frameworks

IT & Digital Programming Web Development Free
Course cover image

40 hours

Intermediate

Learning objectives and Prerequisites
  • Build websites using HTML5 + CSS3
  • Use JavaScript for interactivity
  • Understand responsive design

No prerequisites

Course content

  • 📄 Introduction to HTML
  • 📄 HTML Structure and Tags
  • 📝 HTML Quiz

10 lessons · quiz
Instructor
Photo

Dr. Somchai Instructor

Web development and Cloud Computing expert with over 10 years of experience

Enrollment CTA
📝 Spec notes — UC-LMS.06 / SCR-LMS.02 (fields, actions, requirements)
Identity
  • Screen: SCR-LMS.02 — Course Detail
  • Use case: UC-LMS.06 — Browse Course Catalog
Brief description

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).

Fields
  • course_title "Course title" — text · data_ref: Course.title · read-only · always
  • cover_image "Cover image" — file · read-only · always (lazy-load)
  • description "Description" — textarea · data_ref: Course.description · read-only · always
  • tag_list "Tag" — text · data_ref: Tag.name · read-only · always
  • duration "Duration (hours)" — number · data_ref: Course.duration · read-only · always
  • difficulty "Difficulty" — enum [beginner, intermediate, advanced] · data_ref: Course.difficulty · read-only · always
  • learning_objectives "Learning objectives" — textarea · data_ref: Course.objectives · visible when has_outcomes==true
  • prerequisites_list "Prerequisites" — text · data_ref: Course.prerequisites · visible when prerequisites!=null
  • content_outline "Content outline" — textarea · data_ref: CourseVersion.snapshot · visible when has_modules==true
  • instructor_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==true
  • payment_failure_banner "Payment failure message" — text · data_ref: Enrollment.status · visible when enrollment.status==pending_payment && payment_failed==true
Actions
  • enroll "Enroll" — enabled when (enrollment==null || enrollment.status==cancelled) && (course.price==0 || subscription_covers==true) · triggers UC-LMS.07-M-1
  • buy_course "Buy Course" — enabled when (enrollment==null || enrollment.status==cancelled) && course.price>0 && subscription_covers==false · triggers UC-LMS.07-A-10A-1
  • continue_learning "Continue Learning" — enabled when enrollment.status==active · triggers UC-LMS.08-M-3
  • retry_payment "Retry Payment" — enabled when enrollment.status==pending_payment && payment_failed==true · triggers UC-LMS.07-A-10A-2
  • cancel_enrollment "Cancel Enrollment" — enabled when enrollment.status==pending_payment && payment_failed==true
Additional requirements
  1. Public access: guests can view the entire page — only clicking "Enroll/Buy" redirects to login first (UC-IDP.02)
  2. Enrollment state check: page load checks enrollment to display the correct CTA (enroll / buy / continue / retry+cancel)
  3. 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
  4. Duplicate enrollment modal: dialog with "Continue Learning" button if enrollment is already active (UC-LMS.07 AF-4A)
  5. Lazy-load cover_image + instructor_photo [refs: NFR-02]