Fall 2025 | MWF 10:00-10:50 AM
+ ``` + +3. **Instructor info** (around line 80): + ```html +Prof. Jane Doe
+ Email: jane.doe@university.edu
+ Office: Walker Hall 315
+ Office Hours: MW 2-4 PM or by appointment
This course covers modern web development including HTML5, CSS3, + JavaScript, responsive design, and web frameworks...
+ ``` + +**Pro tip:** Search for "CUSTOMIZE" comments in the HTMLโthey mark all places that typically need updates. + +## ๐ Database Setup (Optional - For Attendance Tracking) + +**Do you need this?** Only if you want to track student attendance using the built-in attendance pages. Most users skip this and just use the presentation features. + +### Setting Up Attendance Tracking + +**Prerequisites:** +- Deployed to Netlify (serverless functions required) +- Free Neon PostgreSQL account + +**Step-by-step setup:** + +1. **Create a Neon database:** + - Go to [neon.tech](https://neon.tech) and sign up (free tier is plenty) + - Create a new project + - Copy your connection string (looks like: `postgresql://user:pass@host/db`) + +2. **Run the database schema:** + - In Neon's SQL Editor, run this SQL: + ```sql + -- Students table + CREATE TABLE students ( + id SERIAL PRIMARY KEY, + first_name VARCHAR(100) NOT NULL, + last_name VARCHAR(100) NOT NULL, + full_name VARCHAR(200) NOT NULL, + card_data TEXT, -- Optional: for card swipe systems + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + UNIQUE(first_name, last_name) + ); + + -- Attendance records table + CREATE TABLE attendance ( + id SERIAL PRIMARY KEY, + student_id INTEGER REFERENCES students(id) ON DELETE CASCADE, + attendance_date DATE NOT NULL, + timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + is_late BOOLEAN DEFAULT false, -- Optional: mark late arrivals + UNIQUE(student_id, attendance_date) -- Prevent duplicate records + ); + + -- Index for faster lookups + CREATE INDEX idx_attendance_date ON attendance(attendance_date); + CREATE INDEX idx_student_name ON students(last_name, first_name); + ``` + +3. **Add DATABASE_URL to Netlify:** + - In Netlify: Site settings โ Environment variables + - Variable name: `DATABASE_URL` + - Value: Your Neon connection string + - Click **Save** + - Redeploy your site + +4. **Register students:** + - Visit: `https://your-site.netlify.app/pages/register-students.html` + - Enter student names one by one + - Or bulk import via SQL: + ```sql + INSERT INTO students (first_name, last_name, full_name) + VALUES + ('John', 'Doe', 'John Doe'), + ('Jane', 'Smith', 'Jane Smith'); + ``` + +5. **Test attendance:** + - Visit: `https://your-site.netlify.app/pages/attendance.html` + - Search for a student name + - Click to mark present + - Check `pages/attendance-overview.html` to see reports + +**Security note:** The attendance functions use basic authentication. For production with sensitive data, consider adding proper authentication (e.g., OAuth, password protection). + +## Keyboard Shortcuts (In Presentations) + +- **Arrow Keys**: Navigate slides +- **Space**: Next slide +- **Home/End**: First/Last slide +- **F**: Toggle fullscreen +- **T**: Toggle theme +- **Esc**: Exit fullscreen + +## ๐ Deployment Options + +Your course website is just static files, so it can be hosted almost anywhere. Here are the most common options: + +### Option 1: GitHub Pages (Free & Easy) + +**Best for:** Simple deployments without attendance tracking + +**Advantages:** +- โ Completely free +- โ Automatic deployment on every push +- โ Built-in HTTPS +- โ Custom domain support + +**Limitations:** +- โ No serverless functions (attendance tracking won't work) + +**Setup Steps:** + +1. **Push your code to GitHub:** + ```bash + git add . + git commit -m "Initial course website setup" + git push origin main + ``` + +2. **Enable GitHub Pages:** + - Go to your repository on GitHub + - Click **Settings** โ **Pages** + - Under "Source", select **"Deploy from a branch"** + - Select branch: **`main`**, folder: **`/ (root)`** + - Click **Save** + +3. **Wait for deployment** (1-2 minutes): + - Go to **Actions** tab to watch the deployment + - Once complete, your site will be at: + ``` + https://YOUR-USERNAME.github.io/YOUR-REPO-NAME/ + ``` + +4. **Test your site:** + - Visit the URL + - Test navigation, theme toggle, and lecture links + - Share the URL with your students! + +**Troubleshooting:** +- If pages don't load, check that `index.html` is in the root directory +- If styles are broken, verify all paths are relative (e.g., `./styles/` not `/styles/`) + +--- + +### Option 2: Netlify (Full Features) + +**Best for:** Deployments with attendance tracking or advanced features + +**Advantages:** +- โ Serverless functions (attendance tracking works!) +- โ Deploy previews for every PR +- โ Custom domains with free SSL +- โ Environment variables for secrets +- โ Automatic deployments + +**Setup Steps:** + +1. **Create Netlify account:** + - Go to [netlify.com](https://netlify.com) and sign up (free tier is plenty) + +2. **Connect your repository:** + - Click **"Add new site"** โ **"Import an existing project"** + - Choose **GitHub** and authorize Netlify + - Select your course website repository + +3. **Configure build settings:** + - Build command: *leave empty* (it's a static site) + - Publish directory: `.` (root directory) + - Click **"Deploy site"** + +4. **Set up environment variables** (if using attendance): + - Go to **Site settings** โ **Environment variables** + - Add variable: `DATABASE_URL` + - Value: Your Neon PostgreSQL connection string (see [Database Setup](#database-setup)) + +5. **Access your site:** + - Netlify provides a URL like: `https://random-name-12345.netlify.app` + - You can customize this or add your own domain + +6. **Automatic deployments:** + - Every push to `main` automatically deploys + - Pull requests get preview URLs for testing + +**Pro tip:** Use Netlify's deploy previews to test changes before merging to main. + +--- + +### Option 3: Other Platforms + +This template works with any static hosting provider: + +| Provider | Free Tier | Serverless Functions | Custom Domain | +|----------|-----------|---------------------|---------------| +| **Vercel** | โ Yes | โ Yes | โ Yes | +| **Cloudflare Pages** | โ Yes | โ Yes (Workers) | โ Yes | +| **AWS S3 + CloudFront** | โ ๏ธ Free tier | โ Requires Lambda | โ Yes | +| **Azure Static Web Apps** | โ Yes | โ Yes | โ Yes | + +**General deployment steps:** +1. Build/bundle: None needed (already static HTML/CSS/JS) +2. Publish directory: Root directory (where `index.html` is) +3. Environment variables: `DATABASE_URL` if using attendance + +--- + +### Custom Domain Setup + +After deploying to any platform, you can add a custom domain: + +**For GitHub Pages:** +1. Go to Settings โ Pages +2. Enter your domain (e.g., `csci3403.university.edu`) +3. Add DNS records (CNAME or A record) per GitHub's instructions + +**For Netlify:** +1. Go to Site settings โ Domain management +2. Click "Add custom domain" +3. Follow DNS configuration instructions + +**Pro tip:** Most universities allow faculty to create subdomains for courses. Contact your IT department. + +## โ Frequently Asked Questions + +### General Questions + +**Q: Do I need to know how to code to use this template?** +A: Basic HTML knowledge helps, but the automated setup wizard (`initialize-course.sh`) can handle most customization. For creating lectures, you can copy the template and modify the textโno coding required. + +**Q: Is this template free to use?** +A: Yes! It's MIT licensed, which means you can use it for any educational purpose, modify it, and even share your modified version. + +**Q: Can I use this for non-course websites?** +A: Absolutely! While designed for courses, the presentation system works great for any sequential content: training materials, workshops, conference talks, etc. + +**Q: How many students can this handle?** +A: The static site itself scales infinitely (it's just HTML). If using attendance tracking, Neon's free tier handles 10GB, which is enough for thousands of students across multiple semesters. + +### Technical Questions + +**Q: Why aren't my lectures showing up on the homepage?** +A: Check these common issues: +1. Ensure the lecture `date` is in `YYYY-MM-DD` format +2. Verify the lecture is added to the `lectures` array in `index.html` +3. Check browser console (F12) for JavaScript errors +4. Ensure the `link` path is correct (relative to `index.html`) + +**Q: How do I make lectures available immediately (ignore the date check)?** +A: In `index.html`, find this code: +```javascript +const isAvailable = currentDate >= new Date(lecture.date); +``` +Replace it with: +```javascript +const isAvailable = true; // All lectures always available +``` + +**Q: The theme toggle isn't working. What's wrong?** +A: Make sure both CSS files are linked in your HTML: +```html + + +``` +And that `presentation.js` is loaded at the bottom of the ``. + +**Q: Can I add videos to my slides?** +A: Yes! Just add HTML5 video tags in your slide content: +```html + +``` + +**Q: How do I export lectures to PDF?** +A: Open the lecture in your browser and use Print (Ctrl+P / Cmd+P). The CSS includes print styles that work well for PDF export. For best results: +1. Set orientation to "Landscape" +2. Enable "Background graphics" +3. Print to PDF + +**Q: Can I password-protect my course site?** +A: GitHub Pages and Netlify don't have built-in password protection on free tiers. Options: +- Use Netlify's password protection (requires paid plan) +- Deploy to a platform with authentication (e.g., Vercel with auth) +- Use your university's LMS integration +- Keep the repository private (but then you can't use GitHub Pages) + +### Customization Questions + +**Q: How do I change the favicon?** +A: Replace `images/favicon.png` with your own image (recommended: 32x32 or 64x64 PNG). + +**Q: Can I use Google Fonts or custom fonts?** +A: Yes! Add to the `` of your HTML: +```html + +``` +Then update `theme-variables.css`: +```css +--font-family: 'Roboto', sans-serif; +``` + +**Q: How do I add a syllabus page?** +A: Create `pages/syllabus.html`, copy the structure from `index.html`, and add content. Link to it from your homepage quick links. + +**Q: Can I add code syntax highlighting to slides?** +A: Yes! Include a library like Prism.js or Highlight.js. Add to your lecture HTML: +```html + + +``` +Then use: +```html +
+def hello():
+ print("Hello, world!")
+