Teaching Demo

🔥 Youth Trivia 💬

Explore the difference between Static HTML and Server-Side Rendering

This project demonstrates the same page built with two different approaches

Choose a Version

HTML5 + CSS

Pure static HTML file served directly by the web server. No JavaScript, no framework - just HTML and CSS.

  • Static content
  • No reactivity
  • Instant load
  • SEO-friendly
View Static Version

Svelte 5

Server-side rendered with Svelte 5 and SvelteKit. Full interactivity with reactive state management.

  • SSR + Hydration
  • Reactive state
  • Live search
  • Dynamic GIFs
View Svelte Version

What's the Difference?

Static HTML

The HTML version is a single file that contains all content pre-rendered. When you request the page, the server simply sends the file as-is. There's no processing, no database queries, no JavaScript execution.

Server-Side Rendering

The Svelte version renders HTML on the server for each request, then "hydrates" it with JavaScript in the browser. This enables interactive features like search autocomplete and dynamic content loading.

Trade-offs

Static HTML is simpler and faster for static content. SSR adds complexity but enables interactivity, personalization, and dynamic data. Choose based on your needs.

Learn More — A Visual Guide for Everyone

Both versions display 43 slang terms in English, German, and Swiss German

Cursor Debug Training

Practice debugging in Cursor with two graded exercises. Pick the level that matches your experience. Both come from github.com/Bliblofy/YouthTrivia.

Beginner Basic Training Plain HTML, CSS, and vanilla JS. No npm. Clone one folder, open it in your browser, fix 5 visible bugs with the inspector.
Advanced Advanced Training Full SvelteKit stack. Bugs in the Svelte component, server load, and POST endpoint — including a deliberate 500 you'll have to fix first.