Little Learning Magic is a full-screen, slide-based learning website I built for children — a warm, picture-book-style journey through 40 effective study methods organized into five categories: time management, memory strengthening, deep understanding, interaction and motivation, and emotions and habits.
Why
Learning methods are abstract until they are seen. The idea was to turn each method into a bright, self-contained "slide" a child can page through — one idea per screen, with a picture and a single takeaway — rather than a wall of text.
Highlights
- 40 AI-generated educational illustrations, each built around a young student, giving every method a memorable visual anchor.
- A three-layer navigation system: category overview cards → category title pages → a dynamic top nav, so a child always knows where they are.
- Keyboard, touch and swipe paging with native CSS scroll-snap — no dependencies, works offline from a single HTML file.
- Responsive by design: side-by-side on desktop, stacked automatically on mobile.
Tech
Zero-dependency HTML/CSS/JS — CSS scroll snap for paging, IntersectionObserver for current-slide detection, and a playful typographic pairing (ZCOOL KuaiLe headings + Noto Sans SC body) over a pastel palette.