Education and Learning UI/UX

Latest Update v1.3.1 – 09 February 2019See details

Tutorio Bootstrap v1.3.1 - Dark Mode

Tutorio Bootstrap - Education Platform UI/UX

Tutorio Bootstrap - Learning Management System

Tutorio Bootstrap - eLearning

Tutorio Bootstrap - LMS

Tutorio Bootstrap - Learning Dashboard

Tutorio Bootstrap - Online Learning

Tutorio Bootstrap - Lessons

Tutorio Bootstrap - Courses

Tutorio Bootstrap - Education

Tutorio is a beautifully crafted user interface for modern education learning platforms and online courses websites. Tutorio includes examples for all the website pages possibly needed for a learning management system application or e-learning website, covering the most important roles in any learning application, the student and the teacher.

  • Complete UI/UX for Education Platform, Learning Management System
  • Manage Courses, Lessons and Quizzes, Video Tutorials, Classes
  • Learning Dashboard for Students and Teachers

Landing, Courses, Lessons and Catalog pages

  • Home landing page with large hero header, learning features, courses, learning paths and testimonials
  • Library course catalog with featured learning paths and top courses by category
  • Course Category catalog details with top and trending category courses and teachers
  • Explore Courses catalog with sidebar filters
  • Explore Courses List view mode
  • Learning Paths for guided learning tracks on a specific subject
  • Course Details page with large hero header, table of contents, about the course and author, feedback and student ratings
  • Lesson Details page with top bullet navigation between the course lessons and quizzes and large video player
  • Learning Path Details page with large hero header, introduction to the particular topic, skill assessment and courses by skill level.

Student pages

  • Private Take Course pages for paying members with access to all course lessons and download lesson files
  • Student Dashboard with subscription status, recent courses, student rewards, quiz performance and forum activity
  • Take Quiz page with a sidebar navigation for the quiz questions, a quiz countdown timer and quiz statistics
  • Quiz Results page displaying the summary of a single quiz submission by a student, displaying the correct answers and offering the possibility to restart the quiz
  • Edit Account page with common editable profile fields (avatar image upload, the student name, email, password, etc) and Account Billing settings with saved payment methods
  • My Courses page displaying only the courses started by the student, with progress activity
  • Billing with payment history, past invoices and overdue payment notice with the option to pay
  • Printable Invoice template page
  • Student Public Profile displaying acquired skills with courses completed by the student and rewards
  • … and more

Teacher pages

  • Teacher Dashboard with earnings statistics displaying the last 30 days, sales by Course, latest transactions and latest student comments
  • Course Manager displaying the instructor courses portfolio
  • Create or Edit Quiz with basic quiz information such as title, associated course, image uploader, quiz time limit, sortable quiz questions and a custom question modal interface
  • Instructor Public Profile displaying the instructor rating and a public portfolio of all the courses by the instructor
  • Earnings page with sales statistics by year and by course
  • Statement page with detailed transaction history
  • … and more

Utility pages

  • Login / Signup pages
  • Discussions Home with categorised discussion threads and search
  • Discussion Details page displaying a complete discussion on a subject with replies
  • Ask Question page allowing the student to start a discussion
  • … and more

Latest Update

Tutorio v1.3.1 – 09 February 2019

  • add new dark mode
  • IE11 fixes

Tutorio v1.2.0 – 05 February 2019

Tutorio Bootstrap v1.2.0 - Teal Light and Teal Dark

  • add new teal light skin
  • add new teal dark skin

Tutorio v1.1.0 – 01 February 2019

  • fix dropup effects
  • fix header shadow color
  • add navbar light
  • add RTL
  • add app settings
  • move mini navbar to fixed bottom
  • add black logo variant
  • add @2x png assets
  • fix some paragraph margins