Build a Full Stack E-Learning App | NextJS, Strapi, Typescript, MUI - 5. Lessons
📚 We build out the Lessons UI for our courses page so that we can watch each video lesson one by one. We'll also introduce URL parameters for our lessons in a way that we can distinguish exactly which lesson and course a user is on. Finally we touch up the Course Card components to make sure we introduce individual thumbnail images for each course to make our courses stand out that bit more.
Links 🔗
► https://github.com/thehashton/curious...
💬 Join us on our discord here:
► / discord
Visit our website:
► https://www.curiousbyte.dev
FOLLOW ✅
► / thehashton
► / curious_byte
SUPPORT THE CHANNEL ❤️
► https://www.buymeacoffee.com/curiousbyte
#frontend #webdev #developer #javascript #typescript #webdevelopment #mui #courses #coursesinengineering #learningplatform #elearning #elearningdevelopment #lessons #ui
0:00 Intro
1:53 What UI we're building
5:00 Images Next config
5:25 Strapi Thumbnail content type
6:15 Update fetch hook (populate)
6:52 Housekeeping
7:15 Typescript types file
8:30 Adding course thumbnail UI
18:48 Splitting courses into 2 components
21:56 Course Player component
23:29 Course List component
25:20 Video URL
27:50 URL parameters
35:00 Course List scroll styling
36:57 Lesson selected style
38:10 Course Header Fix
38:49 Lesson videos
44:35 Summary
45:01 Outro
Watch video Build a Full Stack E-Learning App | NextJS, Strapi, Typescript, MUI - 5. Lessons online without registration, duration hours minute second in high quality. This video was added by user Frontend Now 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,75 once and liked it 3 people.