An interactive, browser-based tutorial for teaching web development fundamentals and SQL database querying. Students can learn HTML structure, CSS styling, and SQL queries all in one place, with live code examples and a fully functional SQL playground powered by SQL.js.
- Interactive SQL Playground: Run real SQL queries in the browser (no server needed!)
- Comprehensive Coverage: HTML basics, CSS styling, and SQL fundamentals
- Hands-on Learning: Students can experiment and see results immediately
- Teacher Version: Includes complete solutions and teaching notes
- Mobile Responsive: Works on all devices
- No Installation Required: Runs entirely in the browser
sql-tutorial-site/
├── index.html # Main student tutorial page
├── teacher.html # Teacher version with solutions
├── styles.css # Stylesheet for both pages
├── tutorial.js # JavaScript for SQL functionality
└── README.md # This file
- Download all files to a folder
- Open
index.htmlin any modern web browser - Start learning!
Students don't need to install anything - it runs completely in the browser using SQL.js (SQLite compiled to JavaScript).
Follow these steps to host the tutorial online so students can access it via a link:
- Go to github.com
- Click "Sign up" and create a free account
- Once logged in, click the "+" icon in the top right
- Select "New repository"
- Fill in the details:
- Repository name:
sql-tutorial(or any name you prefer) - Description: "Interactive HTML, CSS & SQL Tutorial"
- Make it Public (required for free GitHub Pages)
- Check "Add a README file"
- Repository name:
- Click "Create repository"
- On your repository page, click "Add file" → "Upload files"
- Drag and drop these files:
index.htmlstyles.csstutorial.jsREADME.md(optional - there's already one)
- Scroll down and click "Commit changes"
# Clone your repository
git clone https://github.com/YOUR-USERNAME/sql-tutorial.git
cd sql-tutorial
# Copy the tutorial files into this directory
# (copy index.html, styles.css, tutorial.js here)
# Add and commit
git add .
git commit -m "Add SQL tutorial files"
git push origin main- In your repository, click "Settings" (top right)
- In the left sidebar, click "Pages"
- Under "Source", select:
- Branch: main (or master)
- Folder: / (root)
- Click "Save"
After a few minutes, your site will be live at:
https://YOUR-USERNAME.github.io/sql-tutorial/
For example: https://johndoe.github.io/sql-tutorial/
- Keep the file named
index.html(this is the default page GitHub Pages serves) - All other files (
styles.css,tutorial.js,teacher.html) must be in the same directory - File names are case-sensitive!
- GitHub Pages serves everything over HTTPS automatically
- Students can safely access the tutorial from any device
- This tutorial runs entirely in the browser using SQL.js
- No database server needed
- SQL.js is loaded from a CDN (Content Delivery Network)
- Edit your files locally
- Upload them to GitHub (same process as Step 3)
- Changes appear on your site within minutes
HTML:
- Document structure and basic tags
- Forms and input elements
- Semantic HTML
CSS:
- Selectors and properties
- Box model
- Basic styling and layout
SQL:
- SELECT queries with WHERE clauses
- ORDER BY sorting
- INSERT, UPDATE, DELETE operations
- Aggregate functions (COUNT, AVG, etc.)
- Start Simple: Have students run the example queries first
- Encourage Experimentation: Breaking things is part of learning
- Use DevTools: Teach students to press F12 to see the console
- Check Solutions: All answers are in
teacher.html - Reset Database: Students can reset to original data anytime
The tutorial includes two tables:
Students Table:
- id, name, age, grade
- 8 sample students
Courses Table:
- id, name, instructor, credits
- 6 sample courses
Edit index.html and add to the exercises section:
<div class="exercise">
<h4>Exercise X: Your Title</h4>
<p>Your question here</p>
<details>
<summary>Show Hint</summary>
<p>Your hint here</p>
</details>
</div>Edit tutorial.js - look for the initializeDatabase() function:
// Add more sample data
db.run(`
INSERT INTO students (name, age, grade) VALUES
('New Student', 20, 88.0);
`);
// Create new tables
db.run(`
CREATE TABLE your_table (
id INTEGER PRIMARY KEY,
column1 TEXT
);
`);Edit styles.css to change colors, fonts, or layout.
- Make sure you're using a modern browser (Chrome, Firefox, Edge, Safari)
- Check your internet connection (SQL.js loads from CDN)
- Try hard-refreshing the page (Ctrl+Shift+R or Cmd+Shift+R)
- Wait 5-10 minutes after enabling GitHub Pages
- Check that the repository is Public
- Verify the file is named
index.html(case-sensitive!)
- Make sure
styles.cssis in the same folder asindex.html - Check for typos in the file name
- Try clearing your browser cache
- SQL.js requires an internet connection to load initially
- Make sure JavaScript is enabled in your browser
- Check the browser console (F12) for error messages
Works on all modern browsers:
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
Mobile browsers:
- iOS Safari
- Chrome for Android
This tutorial is free to use for educational purposes. Feel free to:
- Share with students
- Modify for your curriculum
- Use in online or in-person classes
- Please cite Jsaaron.com and Joshua Aaron as the Author
- Review the
teacher.htmlfile for all solutions - The teaching notes section has helpful tips
- Check the assessment rubric for grading guidance
- Read error messages carefully - they tell you what's wrong
- Try the example queries before writing your own
- Use the "Reset Database" button if you get stuck
- Practice makes perfect!
- SQL.js: SQLite compiled to JavaScript via Emscripten
- SQL Tutorial Database: Sample data designed for learning
- Built with vanilla HTML, CSS, and JavaScript
If you have questions about deployment:
- Check GitHub's official Pages documentation
- Search for "GitHub Pages tutorial" on YouTube
- Ask in the GitHub Community Forum
Happy Teaching! 🎓