Live page: https://imykhailychenko.github.io/genesis-fe-school/
The last 10 courses must be displayed in the course page. The course includes:
- Photo of the course.
- Title of the course.
- Number of lessons, skills and rating.
- We display 10 courses on the page and add pagination.
- Additionally: when hovering, play the video without sound.
The course view page displays the first video from the course, details about the course, and a list of lessons:
- When clicking on a lesson (if it is not blocked), the current video will open for viewing, the user must understand which lesson from the course he is viewing.
- It is necessary to save the progress of watching the video and the lesson of the course (save locally).
- If the lesson is blocked, show it to the user.
Additionally:
- Make picture in picture functionality (without third-party libraries):
- The video can be displayed on top of the page when clicked. At the same time, the video is located in the lower right corner of the page and you can go to other pages.
- Add a change in video playback speed via the keyboard (without third-party libraries):
- Also display information next to the video on how to use it.
Additional tasks:
- errors handling from the API (network error, ...);
- adaptive for the mobile version;
- video loading animation;
- the code is covered by tests;