Web Tutor
AI explainer · live preview
Run
Reset
HTML
CSS
JS
TS
NoSQL
SQL
<div id="app"> <h1>👋 Hello, World!</h1> <p>Edit me & run. Ask the tutor for help.</p> </div>
body { font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: #0a0e17; color: #e2e8f0; } #app { text-align: center; padding: 2rem; background: rgba(20, 28, 48, 0.5); border-radius: 20px; backdrop-filter: blur(8px); } h1 { color: #60a5fa; }
document.querySelector('#app h1')?.addEventListener('click', () => { alert('✨ Hello from Web Tutor!'); });
// TypeScript example interface User { name: string; age: number; } const greet = (user: User): string => { return `Hello, ${user.name}!`; }; console.log(greet({ name: 'Tutor', age: 2026 }));
// MongoDB (NoSQL) example db.users.insertOne({ name: "Alex", role: "developer", skills: ["JavaScript", "React", "Node"] }); db.users.find({ role: "developer" }).pretty();
-- SQL example CREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100), email VARCHAR(100) UNIQUE, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); INSERT INTO users (name, email) VALUES ('Taylor', 'taylor@dev.com'); SELECT * FROM users WHERE email LIKE '%@dev.com';
Tutor
AI
Ask a question to get started
e.g. "Explain this code" or "Add a button"
API Key
Enter your OpenRouter API key to enable the AI tutor. Your key is stored locally.
Save Key
Cancel