Giter Site home page Giter Site logo

genesis-fe-school's Introduction

Genesis Front-end School

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.

Preview

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.

Preview

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.

Preview

Additional tasks:

  • errors handling from the API (network error, ...);
  • adaptive for the mobile version;
  • video loading animation;
  • the code is covered by tests;

Preview Preview

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.