How do I create a course just like the Webflow University

Community resources
1

I know this has been asked before, but nobody seems to have responded with any guidance. Thank you in advance for your help.

I’d really like to create a course just like the WebFlow University Crash Course with:

  • Scrolling side bar with Video titles, times and clickable links
  • An embedded video box adjacent to it which populates with the clicked like

Here’s the reference link:

Read only link:
https://preview.webflow.com/preview/velocity-website?utm_medium=preview_link&utm_source=dashboard&utm_content=velocity-website&preview=4c43046c8a60d1efd62811ade3240d87&workflow=preview

2

Unfortunately “how do I build this solution?” type questions don’t lend themselves well to an answer, because there are too many variables, like…

  • What are your skills, and level of coding expertise?
  • Is this a one-off thing, for one screen, or are you trying to build a reusable system?
  • Can the content and design be static, or do they have to be dynamic to the shape of e.g. a new course?
  • How much are you willing to spend monthly on 3rd party services?
  • How much are you willing to spend to have a dev help you with the sticky bits?

Webflow is great at building UI’s, but any time you’re trying to build application-like behavior, those questions come into play. That might help you understand why these types of questions get few clear answers.
Too many possibilities, too little chance that a “guess” would be right, so why write anything?

But here are the very basics you need to know.

Overall you’ve got 3 possible directions;

STATIC ONLY
You have a page, and you want it to look something like the Webflow 101 crash course page. Yes you can build this manually. You can either;

  1. You can use a tab element, with the tabs positioned at right, and type in the times, names, icons, etc. exactly how you want. In the content, your video. Simple, and highly styleable, but very static. Adding a new course item requires the designer.
  2. Use interactions. Look up “accordion interaction”, and learn from it. You could do something similarish to build this, but it will take a decent level of skill with layouts and interactions.

SEMI-DYNAMIC
This means some CMS use. Creating Courses, and Lessons is easy. Navigation is the harder bit, particularly if you chapter divisions. Nested collection lists could work as long as you have no more than 5 lessons per chapter. You may be able still use a tab component, with Finsweet’s CMS tabs?

Other things like video-autoplan on tab switch probably means scripting.

FULLY-DYNAMIC
Here you’re trying to design a course-building system. It needs editor-level ability for your course designers to manage and modify both the content and the lesson hierarchy. Ideally, things like video playback time are detected automatically, and content types show the right icons. Features like COMING SOON, and RECENTLY UPDATED also appear on lessons. Further complications if you need different authors to be restricted to editing their own course content, and no one else’s.

In Webflow-land, that means looking into headless CMS options courseware back-ends, membership systems, authoring systems.