index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SQL Query Lab — Learn SQL Online for Free | Practice Every SQL Statement</title>
<meta name="description" content="Learn SQL interactively with 74 exercises across hospital, company, and school databases. Practice SELECT, JOIN, GROUP BY, and more — no signup required, runs in your browser.">
<meta name="keywords" content="learn SQL, SQL practice, SQL exercises, SQL tutorial, SQL queries, SQL beginner, SQL training">
<meta name="robots" content="index, follow">
<meta name="google-site-verification" content="DIk04djlQ2BpCJ07bQAHr2LT7TD_gGwZRLSrRqCcDmg">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3725043505429613" crossorigin="anonymous"></script>
<link rel="canonical" href="https://learn-sql-practice.vercel.app/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Figtree:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://learn-sql-practice.vercel.app/">
<meta property="og:title" content="SQL Query Lab — Learn SQL Online for Free">
<meta property="og:description" content="Practice SQL interactively with 74 exercises across 3 real databases. No signup required. Works in any browser.">
<meta property="og:image" content="https://learn-sql-practice.vercel.app/og-image.png">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SQL Query Lab — Learn SQL Online for Free">
<meta name="twitter:description" content="Practice SQL interactively with 74 exercises. No signup. No setup. Free forever.">

<!-- SoftwareApplication Schema -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "SQL Query Lab",
  "applicationCategory": "EducationApplication",
  "operatingSystem": "Any",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "description": "Learn SQL interactively with 74 practice exercises across real database schemas. Free, no signup required.",
  "url": "https://learn-sql-practice.vercel.app/"
}
</script>

<style>
:root {
  --bg: #0f0f14;
  --surface: #1a1a24;
  --surface-2: #222233;
  --border: #2a2a3a;
  --border-bright: #3a3a50;
  --text: #e8e6e1;
  --text-dim: #8a8a9a;
  --text-muted: #5a5a6a;
  --accent: #7f6bff;
  --accent-bright: #9f8fff;
  --accent-dim: #5a4aaf;
  --error: #ef4444;
  --success: #3fc36c;
  --font: 'Figtree', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  min-height: 100vh;
}

/* NAV */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 48px;
  border-bottom: 1px solid var(--border);
}
nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
nav .brand .mark {
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 18px;
  color: #fff;
}
nav .brand .name {
  font-size: 1.1rem;
  font-weight: 600;
}
nav .cta-btn {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 7px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: opacity 0.2s;
}
nav .cta-btn:hover { opacity: 0.85; }

/* HERO */
.hero {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 48px 60px;
  text-align: center;
}
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 400;
  line-height: 1.12;
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent-bright);
}
.hero .subtitle {
  font-size: 1.2rem;
  color: var(--text-dim);
  margin-bottom: 40px;
  line-height: 1.7;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.hero .cta-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero .cta-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  transition: opacity 0.2s;
}
.hero .cta-primary:hover { opacity: 0.85; }
.hero .cta-secondary {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border-bright);
  color: var(--text-dim);
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 1.05rem;
  transition: border-color 0.2s, color 0.2s;
}
.hero .cta-secondary:hover { border-color: var(--text-dim); color: var(--text); }

/* STATS */
.stats {
  display: flex;
  gap: 0;
  justify-content: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0 48px;
}
.stats .stat {
  flex: 1;
  max-width: 200px;
  padding: 32px 24px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.stats .stat:last-child { border-right: none; }
.stats .stat .number {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 500;
  color: var(--accent-bright);
}
.stats .stat .label {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-top: 4px;
}

/* FEATURES */
.features {
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 48px;
}
.features h2 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 48px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
}
.feature h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.feature h3 .icon {
  width: 20px;
  height: 20px;
  background: var(--accent-dim);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.feature p {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* EXERCISES */
.exercises {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 48px 64px;
}
.exercises h2 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 48px;
}
.exercise-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.exercise-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.exercise-item .difficulty {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 56px;
  text-align: center;
}
.exercise-item .difficulty.easy { background: rgba(63,195,108,0.15); color: var(--success); }
.exercise-item .difficulty.medium { background: rgba(251,191,36,0.15); color: #fbbf24; }
.exercise-item .difficulty.hard { background: rgba(239,68,68,0.15); color: var(--error); }
.exercise-item .exercise-name { font-size: 0.95rem; font-weight: 500; }
.exercise-item .exercise-category { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }

/* CTA BANNER */
.cta-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 800px;
  margin: 0 auto 64px;
  padding: 48px;
  text-align: center;
}
.cta-banner h2 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 16px;
}
.cta-banner p {
  color: var(--text-dim);
  margin-bottom: 32px;
  font-size: 1.05rem;
}
.cta-banner .cta-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 600;
}

/* FAQ */
.faq {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 48px 80px;
}
.faq h2 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 40px;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}
.faq-item p {
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* FOOTER */
footer {
  border-top: 1px solid var(--border);
  padding: 32px 48px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}
footer a { color: var(--text-dim); text-decoration: none; }
footer a:hover { color: var(--text); }

@media (max-width: 640px) {
  nav { padding: 16px 20px; }
  .hero { padding: 60px 20px 40px; }
  .stats { flex-wrap: wrap; margin: 0 20px; }
  .stats .stat { border-right: none; border-bottom: 1px solid var(--border); min-width: 50%; }
  .features { padding: 48px 20px; }
  .exercises { padding: 0 20px 48px; }
  .cta-banner { margin: 0 20px 48px; padding: 32px 24px; }
  .faq { padding: 0 20px 64px; }
  footer { padding: 24px 20px; }
}
</style>
</head>
<body>

<nav>
  <div class="brand">
    <span class="mark">Q</span>
    <span class="name">SQL Query Lab</span>
  </div>
  <a href="/app" class="cta-btn">Start practicing free</a>
</nav>

<main>
  <section class="hero">
    <h1>Learn SQL <em>interactively</em></h1>
    <p class="subtitle">Practice real SQL queries against actual databases. 74 exercises across three schemas — hospital, company, and school. No signup. No setup. Free forever.</p>
    <div class="cta-group">
      <a href="/app" class="cta-primary">Start practicing — it's free</a>
      <a href="/app?mode=mssql" class="cta-secondary">Try SQL translation tool</a>
    </div>
  </section>

  <section class="stats">
    <div class="stat">
      <div class="number">74</div>
      <div class="label">Practice exercises</div>
    </div>
    <div class="stat">
      <div class="number">3</div>
      <div class="label">Real database schemas</div>
    </div>
    <div class="stat">
      <div class="number">0</div>
      <div class="label">Signup required</div>
    </div>
    <div class="stat">
      <div class="number">100%</div>
      <div class="label">Free to use</div>
    </div>
  </section>

  <section class="features">
    <h2>Everything you need to learn SQL</h2>
    <div class="features-grid">
      <div class="feature">
        <h3><span class="icon">▶</span> Run real queries</h3>
        <p>Execute SQL against in-browser SQLite databases. No server setup, no installs — just open the browser and write queries. See results instantly.</p>
      </div>
      <div class="feature">
        <h3><span class="icon">✓</span> Instant feedback</h3>
        <p>Your output is compared against the expected result row-by-row and column-by-column. Get precise feedback on exactly which cell differs if your answer is wrong.</p>
      </div>
      <div class="feature">
        <h3><span class="icon">◈</span> SQL to T-SQL translation</h3>
        <p>Write SQLite SQL in the editor, click Translate, and see the equivalent Microsoft SQL Server T-SQL. Learn the syntax differences between SQLite and SQL Server.</p>
      </div>
      <div class="feature">
        <h3><span class="icon">◆</span> Sandbox mode</h3>
        <p>Your own scratchpad. Write any SQL — CREATE TABLE, INSERT, UPDATE, DELETE — and see the changes persist. Reset the database anytime to restore seed data.</p>
      </div>
      <div class="feature">
        <h3><span class="icon">▶</span> Live SQL Server</h3>
        <p>Connect to your own SQL Server instance (or Azure SQL). Run real queries against production or development databases, with encrypted credential storage.</p>
      </div>
      <div class="feature">
        <h3><span class="icon">⊙</span> Schema explorer</h3>
        <p>Browse tables, columns, and foreign key relationships before writing queries. The schema panel shows you exactly what data is available to query.</p>
      </div>
    </div>
  </section>

  <section class="exercises">
    <h2>Sample exercises</h2>
    <div class="exercise-list">
      <div class="exercise-item">
        <span class="difficulty easy">Easy</span>
        <span class="exercise-name">Select all columns from patients</span>
        <span class="exercise-category">SELECT basics</span>
      </div>
      <div class="exercise-item">
        <span class="difficulty easy">Easy</span>
        <span class="exercise-name">Filter with WHERE on a date column</span>
        <span class="exercise-category">Filtering</span>
      </div>
      <div class="exercise-item">
        <span class="difficulty medium">Medium</span>
        <span class="exercise-name">JOIN two tables to combine results</span>
        <span class="exercise-category">JOINs</span>
      </div>
      <div class="exercise-item">
        <span class="difficulty medium">Medium</span>
        <span class="exercise-name">GROUP BY with aggregate functions</span>
        <span class="exercise-category">Aggregation</span>
      </div>
      <div class="exercise-item">
        <span class="difficulty hard">Hard</span>
        <span class="exercise-name">Subquery in the WHERE clause</span>
        <span class="exercise-category">Subqueries</span>
      </div>
    </div>
  </section>

  <section class="cta-banner">
    <h2>Ready to practice SQL?</h2>
    <p>No account needed. No downloads. Just open the browser and start writing queries.</p>
    <a href="/app" class="cta-primary">Go to SQL Query Lab — it's free</a>
  </section>

  <section class="faq">
    <h2>Frequently asked questions</h2>
    <div class="faq-item">
      <h3>Is SQL Query Lab really free to use?</h3>
      <p>Yes, SQL Query Lab is completely free. No signup, no account required. You open the app and start practicing SQL immediately.</p>
    </div>
    <div class="faq-item">
      <h3>What SQL topics can I practice?</h3>
      <p>SQL Query Lab covers SELECT statements, JOINs, GROUP BY, HAVING, subqueries, window functions, DML (INSERT, UPDATE, DELETE), and DDL (CREATE, ALTER, DROP). All 74 exercises span three real database schemas: hospital, company, and school.</p>
    </div>
    <div class="faq-item">
      <h3>Do I need to install anything?</h3>
      <p>No installation required. SQL Query Lab runs entirely in your browser. The SQL engine (sql.js) runs as WebAssembly, so all database operations happen client-side. For practice mode, no server is needed.</p>
    </div>
    <div class="faq-item">
      <h3>Can I connect to my own SQL Server database?</h3>
      <p>Yes. SQL Query Lab has a Live SQL Server mode where you can connect to your own SQL Server or Azure SQL instance. Credentials are encrypted server-side and never stored in the browser.</p>
    </div>
    <div class="faq-item">
      <h3>How does the feedback work?</h3>
      <p>After you run your query, SQL Query Lab compares your result set against the expected answer row-by-row and column-by-column. You'll see exactly which row or cell differs if your answer is incorrect. Correct answers are saved and your progress is tracked.</p>
    </div>
  </section>
</main>

<footer>
  <p>SQL Query Lab — Practice every SQL statement · <a href="/app">Open the app</a> · <a href="/app/learn-sql-browser/">Learn SQL Guide</a> · <a href="/privacy.html">Privacy Policy</a> · <a href="/terms.html">Terms of Service</a></p>
</footer>

</body>
</html>