🎬 Simulate:

Course List SCR-LMS.06 · UC-LMS.11

Web Development Fundamentals

Learn web development from the ground up, covering HTML, CSS, JavaScript, and Responsive Design for beginners who want to build solid Front-End skills.

Inst. Sumalee Rakrian

Self-paced Paid

248 Learners 4.7

Review Content

Learning Objectives

Understand HTML structure and the use of semantic elements

Design UI with CSS, Flexbox, and Grid confidently

Write basic JavaScript to add interactivity to web pages

Course Description

Learn web development from the ground up, covering HTML, CSS, JavaScript, and Responsive Design for beginners who want to build solid Front-End Development skills.

Owner

Inst. Sumalee Rakrian

Skill Development Institute, Bangkok

Course Details Read-only

Course Thumbnail

Course Title

Web Development Fundamentals

Beginner 720 min All ages

Description

Learn web development from the ground up, covering HTML, CSS, JavaScript, and Responsive Design for beginners who want to build solid Front-End Development skills.

Objectives

Understand HTML structure · Design UI with CSS Flexbox and Grid · Write basic JavaScript · Build responsive layouts

Duration (minutes)

720

Total estimated study time

Difficulty Level

Beginner

Level of course content

Age Restriction

All ages

Minimum age or content rating

Prerequisites

Introduction to Python Programming

Grading Description

Learners are evaluated based on quiz scores (50%), assignment submissions (30%), and lesson completion (20%). Minimum passing score: 70%.

Course Page Section Visibility

Include "About this course" section

Include "Learning outcomes" section

Show module structure in catalog

Include recommendations section

Include testimonials section

Include reviews section

Include forum

Course Settings (Published)

Published · 12 Jan 2025 Read-only

Course Type

Self-paced

Learn at your own pace and schedule

Pricing

Paid

Payment required before enrollment

Assignment

Enabled

This course includes assignments

Published by

Super Admin

superadmin@backoffice.ac.th

Tags

Web Development TVET

These Tags and Settings are defined by Super Admin via UC-LMS.19 — editable from the Manage Course Library page only

Paid Tags Read-only

Set by Central Reviewer via Course Library (UC-LMS.19) — Program Admin cannot edit these tags

Python Data Science Web Development

Free Tags Editable

Tags from Free Tag Groups, managed within your institution

Select Free Tags for this course within your active Working Institute

Course Sharing Editable

Control whether this Course appears in other institutions' Course Catalog under the "SHARED BY OTHERS" group (UC-LMS.18 / SCR-LMS.51)

Share this Course with other institutions

ON — Course appears in SHARED BY OTHERS when another institution's Program Admin opens Course Catalog

OFF default — Course is not visible to other institutions

Grading Settings Editable

Choose how this course computes final grades for its cohorts, within your active Working Institute

Grading Mode

Review Period (days)

How long an auto-computed grade stays under review before the system publishes it automatically

Cancel

Adding, editing, and removing instructors is done on the dedicated Manage Instructor screen (UC-LMS.01 / SCR-LMS.33).

2 instructors Manage Instructors

Inst. Sumalee Rakrian Owner

sumalee.r@example.ac.th

Modified:2 Jan 2025 · By:admin@institution.ac.th

Inst. Piya Srisard Co-instructor

piya.s@example.ac.th

Modified:15 Jan 2025 · By:admin@institution.ac.th

Screen Flow (from flow.puml):

Save (UC-LMS.11) — Tags saved successfully Cancel / Back — return to Course List

📝 Spec notes — UC-LMS.11 / SCR-LMS.06 (fields, actions, requirements)

Identity

Screen: SCR-LMS.06 — Course Admin Detail
Use case: UC-LMS.11 — Manage Course

Brief description

Course detail page for Program Admin (UC-LMS.11). Opened from SCR-LMS.03 course list. Shows 3 tabs: Tab 1 Course Overview (read-only: CCM snapshot + Course Details + Published Settings), Tab Course Settings (UC-LMS.11 mode: Paid Tags read-only + Free Tags editable + Course Sharing is_shared toggle + Grading Settings → Save/Cancel), Tab Instructors (UC-LMS.01). Review Content button in banner opens the Lesson Player (SCR-PLY.01) in a new browser tab, in Preview mode, via SUC-PLY-01.

Fields

active_tab — enum [course_overview, course_settings, instructor_management] · default: course_overview
course_title "Course Title" — text · data_ref: Course.title · read-only · Tab 1
course_description "Description" — textarea · data_ref: Course.description · read-only · Tab 1
course_objectives "Objectives" — textarea · data_ref: Course.objectives · read-only · Tab 1
owner_instructor_name "Owner" — computed (CourseInstructor.role=owner) · read-only · Tab 1
published_course_type "Course Type" — enum · data_ref: Course.course_type · read-only · Tab 1 Published Settings
published_pricing "Pricing" — enum · data_ref: Course.access_mode · read-only · Tab 1 Published Settings
overview_tags "Tags" — computed chips · data_ref: CourseTag + InstituteCourseTag · read-only · Tab 1
inst_tags_paid "Paid Tags" — read-only chip list · data_ref: CourseTag · visibility: active_tab == course_settings · read-only
inst_tags_free "Free Tags" — multi-select (TagGroup.is_paid=false) · data_ref: InstituteCourseTag · visibility: active_tab == course_settings · editable
is_shared "Course Sharing" — boolean toggle · data_ref: InstituteCourse.is_shared · fallback false · visibility: active_tab == course_settings && mode == uc_lms_11 · editable (Program Admin, active Working Institute only)
grading_mode "Grading Mode" — enum [auto, manual] · data_ref: InstituteCourse.grading_mode · default auto · visibility: active_tab == course_settings && mode == uc_lms_11 · editable
grade_review_grace_period_days "Review Period (days)" — number · data_ref: InstituteCourse.grade_review_grace_period_days · default 3 · visibility: grading_mode == auto only (hidden for manual) · editable

Actions

switch_tab "(click Tab)" — always enabled
save "Save" — enabled when: active_tab == course_settings · triggers UC-LMS.11-M-7
cancel "Cancel" — enabled when: active_tab == course_settings · triggers UC-LMS.11-A-7A-1
review_content "Review Content" — always enabled · opens the Lesson Player (SCR-PLY.01) in a new browser tab, in Preview mode, via SUC-PLY-01

Additional requirements

Tab 1 Course Overview — displays Course data read-only in 3 sections: (1) CCM snapshot metadata — read-only in all scenarios [SS-CCM.11]; (2) Course Details; (3) Published Course Settings (set by Central Reviewer via UC-LMS.19)
Review Content button — shown in the top banner; opens the Lesson Player (SCR-PLY.01) in a new browser tab, in Preview mode, via SUC-PLY-01; always accessible [refs: UC-LMS.11 AR-5]
Course Settings tab — 3 sections in UC-LMS.11 mode: (1) Paid Tags = read-only chip list (CourseTag, set by Central Reviewer via UC-LMS.19); (2) Free Tags = editable multi-select (InstituteCourseTag, TagGroup.is_paid=false); (3) Course Sharing = is_shared toggle (InstituteCourse.is_shared, default false); Program Admin cannot change Pricing Type [refs: UC-LMS.12, UC-LMS.19]
Visibility scope — Program Admin sees only courses in their institution; enforce server-side [refs: NFR-10, UC-LMS.11 AR-1]
Tab Instructors — shows course instructor list (SCR-LMS.33 / UC-LMS.01); always enabled in UC-LMS.11
Paid Tags (inst_tags_paid) — read-only; sourced from CourseTag; Central Reviewer sets via UC-LMS.19; lock icon on each chip [refs: UC-LMS.11 AR-6]
Free Tags (inst_tags_free) — editable; stored in InstituteCourseTag (course_id, institute_id, tag_id); Tags must exist with TagGroup.is_paid=false; cannot create new Tags from this screen [refs: UC-LMS.11 AR-7, AR-8]
AF-5A — if no Free Tag Group is available → show empty state with message; Paid Tags section still displays normally; Save / Cancel still available
Course Sharing (is_shared) — Program Admin can edit only for Courses in their active Working Institute; default = false; stored in InstituteCourse.is_shared; takes effect immediately on other institutions' SHARED BY OTHERS; enforce server-side [refs: UC-LMS.11 AR-9]
Grading Settings — grading_mode defaults to auto when the Course is first added; grade_review_grace_period_days shown only when grading_mode == auto (default 3 days), hidden for manual; both saved in InstituteCourse for that institution; changing them affects future grade computations only (UC-LMS.23) — instructors can still review/adjust auto-computed grades during the review period or enter grades directly in manual mode [refs: SS-LMS.12]

⚠ Open issues (UC-LMS.11)

The scope enforcement rule "Program Admin sees only Courses in their institution" is a cross-module pattern — decide whether to create SS-02 or inline in each UC [refs: UC-LMS.11 AR-1]