Ep 8- Dashboard: Setup Course Page Template | LMS with WWX
ฝัง
- เผยแพร่เมื่อ 15 พ.ค. 2024
- View the live demo:
• Build an LMS app with ...
In this eighth part of the flowacademy series we are going to learn how to construct the Course Page template. We will walkthrough our @Webflow build, explore the database and api endpoint setup over on Xano (@nocodebackend) and then finally learn to setup the requests and actions on @Wized .
HIRE ME FOR YOUR NEXT WIZED BUILD:
www.upwork.com/fl/~01f1c6797a...
GET XANO AT 10% DISCOUNT:
xano.io/mgfswoqi
GET 50% OFF YOUR FIRST MONTH WITH DOCUGENERATE(www.docugenerate.com/) WITH THIS PROMO (AS USED IN THIS DEMO):
50OFFAONNOY
(DocuGenerate provides a flexible and scalable platform for generating high-quality documents, whether it's for creating contracts, agreements, invoices, proposals, letters, certificates or any other type of document.)
Create an account on Wized and build incredible apps like Flowacademy:
www.wized.com/?via=aonnoy
CLONEABLE:
webflow.com/made-in-webflow/w...
CHAPTERS:
00:00 : Intro
02:51 : Webflow Build Walkthrough - Skeleton Loader
04:05 : Webflow Build Walkthrough - Breadcrumbs
04:21 : Webflow Build Walkthrough - Video Player
09:21 : Webflow Build Walkthrough - Why Codesandbox
11:44 : Webflow Build Walkthrough - Chapters Playlist
14:24 : Webflow Build Walkthrough - Quill Js Editor
25:34 : Webflow Build Walkthrough - Disqus Comments
28:15 : Xano API Endpoint - Get Chapter Details
53:12 : Xano API Endpoint - Get Notes
53:58 : Xano Add Note API Endpoint
55:23 : Xano Edit Note API Endpoint
56:18 : Xano Remove Note API Endpoint
56:36 : Xano Update Chapter Course Progress API Endpoint
01:25:55 : Wized General Walkthrough
01:28:43 : 00. Get User Details - Action
01:29:49 : 01. Get Chapter Details - Action
01:30:04 : 02. Set Chapter Detail Variable
01:30:52 : 03. Set Chapters Playlist Variable
01:31:24 : 04. Set Visibility to Course Loader - Action
01:32:00 : 05. Set Visibility to Course content
01:32:45 : 07. Add attribute to video player - Action
01:34:13 : 08. Run plyr JS and its other functions - Action
01:42:20 : Skipping through Action 9-19
01:42:54 : 20. Set Chapter Last Played till variable - Action
01:43:25 : 21. Set Chapter Completed Variable
01:44:08 : 22. Update Chapter Completed Variable - Action
01:45:03 : 23. Set Visibility for Chapter Completed Icon - Action
01:45:40 : 24. Set visibility to completed icon (real time) - Action
01:47:40 : 25. Set Realtime playback duration
01:48:44 : 26. Run Quill Editor JS - Action
01:53:47 : 28. Load Notes - Action
01:54:36 : Quick Walkthrough from action 29-34
01:56:14 : 35. Set Note ID to variable - Action
01:56:56 : 36. Prevent Default Action - Action
01:59:01 : Quick Walkthrough actions from 38-40
RESOURCES:
1. Checkout Yacine's amazing Wized Beginner Tutorials ( @WizedDev )
/ @wizeddev
---
Follow me:
Instagram: / aonnoyux
X: / aonnoyux
Linkedin: / aonnoy-sengupta
Dribbble: dribbble.com/aonnoysengupta
Email: hello@aonnoysengupta.com
---
TAGS
#webflow #wized #webapplication - วิทยาศาสตร์และเทคโนโลยี