This component is for the Course landing page UI. The goal is to allow users to view the title and duration of all the modules, click on the drop down for each to view the titles of each lesson under it and time required to complete it in HH:MM:SS format.
NOTE: Use dummy, hardcoded data for now and focus only on the UI part of the code.
List of features
1) A heading (like Modules and Lessons), Total number of modules, lessons and total tile required to complete the course.
2) List of module titles along with the number of lessons under them and the time required to complete it.
3) Dropdown list for each module showing the list of all lesson titles and the time required to complete each lesson.
For inspiration you can refer to similar standard components on other E-Learning platforms (Coursera, Udemy). Here is an example:
Details
This component is for the Course landing page UI. The goal is to allow users to view the title and duration of all the modules, click on the drop down for each to view the titles of each lesson under it and time required to complete it in HH:MM:SS format.
NOTE: Use dummy, hardcoded data for now and focus only on the UI part of the code.
List of features
1) A heading (like Modules and Lessons), Total number of modules, lessons and total tile required to complete the course. 2) List of module titles along with the number of lessons under them and the time required to complete it. 3) Dropdown list for each module showing the list of all lesson titles and the time required to complete each lesson.
For inspiration you can refer to similar standard components on other E-Learning platforms (Coursera, Udemy). Here is an example: