All published tutorials are available at stepify.landingpad.digital/tutorials.
Tutorials Listing Page
The listing page shows all published tutorials as cards. Each card displays:
-
A thumbnail screenshot from the tutorial
-
The platform name (e.g. Chatwoot, Odoo CRM)
-
The tutorial title
-
Step count, duration, and creation date
Filtering by Platform
Use the filter buttons at the top to show tutorials for a specific platform. Click "All" to show everything.
Video Preview
Hover over a tutorial card to see a short video preview of the walkthrough. This gives you a quick sense of what the tutorial covers before clicking in.
Tutorial Detail Page
Click any tutorial card to open its full detail page. The page has two columns:
Left Column: Video and Transcript
-
Video Player: Watch the full tutorial walkthrough. The video includes captions that are on by default — use the CC button to toggle them.
-
Step Markers: Below the video, coloured dots show where each step starts. Click any dot to jump to that point in the video.
-
Transcript: A full text transcript of the video narration, useful for searching or reading along.
Right Column: Step-by-Step Guide
Each step shows:
-
A numbered badge
-
A description of what happens in that step
-
A screenshot (click to view full-size in a lightbox)
Navigate between screenshots using arrow keys when the lightbox is open.
Accessibility Features
-
Keyboard navigation: All interactive elements are keyboard-accessible
-
Screen reader support: Semantic HTML with ARIA landmarks and labels
-
Captions: Video captions are on by default
-
Light/Dark mode: Click the sun/moon icon in the top bar, or let it follow your system preference
-
Reduced motion: Video previews are disabled when your system prefers reduced motion