🎓 The WeWeb Academy Page

In the following tutorial, we build the WeWeb Academy page from scratch:

00:00 – Intro

03:45 – How we organized the data in Airtable

05:00 – Add and sort Airtable data in WeWeb

09:24 – Design a page in the style of WeWeb's academy page

10:00 – Hero Section with a search

13:40 – Video Section with columns

14:58 – Display data (repeated items) to show a list of courses and list of video lessons

19:17 – Style buttons (margins, padding, background color, round corners, font weight)

20:30 – Display and style list of images (image size, flexbox settings, corner radius, border color)

22:28 – Style the background color of the page or project body

24:15 – Link a repeated item to an external resource (e.g. link a video thumbnail to a YouTube video)

24:47 – Add a hover effect when a user hovers over a video thumbnail

25:40 – Display filtered data based on a user's search term

32:00 – Benefits of setting the filters at collection level (not on page)

33:46 – Display filtered data based on the category selected by the user

36:16 – Lookup depth: what it is and when you need it

38:30 – We were very unlucky, Airtable was down for 2 minutes right in the middle of our live 😅

42:00 – Change button style when user selects course (conditional styling)

44:05 – Display a message if no lessons found (conditional display)

49:45 – Benefits of filtering at collection level vs filtering on page

53:09 – Display filtered data based on a select dropdown

56:35 – Display a loader while collection is fetching