A minimalist, single-file slide deck to teach college students what Linux is and how to install Linux Mint Cinnamon via dual-boot.
Built with plain HTML + Tailwind CDN (no build step), so you can run it by simply opening index.html.
- Explain Operating Systems at a high level.
- Compare major OSes (Windows, macOS, Linux).
- Motivate why Linux helps CS students (customization, performance, transparency).
- Clarify Linux concepts (kernel, distros, DEs, package managers).
- Walk through Linux Mint Cinnamon installation:
- Windows dual-boot (live demo format).
- macOS installation (reference instructions).
- Show a short post-install checklist to get students productive.
- Clone or download this repository.
- Ensure the
assets/folder is present (logos, penguin, images/GIFs). - Double-click
index.htmlto open in your browser.
No Node, no bundlers, no frameworks—just HTML, CSS (via Tailwind CDN), and a bit of JavaScript.
Running a tiny local server avoids any browser restrictions and makes embedded scripts snappier:
# Option A: Python 3
python3 -m http.server 5500
# Option B: Node (if installed)
npx serve .Then visit: http://localhost:5500/index.html
- Next / Prev:
→/←keys (or on-screen buttons) - Fullscreen: press
f - Touch: swipe left/right on mobile
- Direct slide: click the dots in the top-right
.
├─ index.html # The entire deck (slides + controls)
├─ README.md # You are here
└─ assets/ # Images & media used in slides
├─ penguin.png
├─ windows.png
├─ macos.png
├─ linux.png
├─ iceberg.png # Distro complexity meme (optional)
├─ statcounter.png # Offline fallback for OS market share chart (optional)
├─ coding.gif # Optional looping background
└─ coding.mp4 # Optional video background
You can rename or swap any asset—just update the
<img src="...">/<video src="...">paths inindex.html.
-
Online features (optional):
- Tenor coding GIF embed
- StatCounter market share live chart
- Google Fonts
-
Offline: The deck still works!
- Swap online images with local ones in
/assets. - Comment out the StatCounter
<script>tags and useassets/statcounter.pngas a fallback if you want a static chart.
- Swap online images with local ones in
-
What are Operating Systems? (simple stack diagram)
-
Major Operating Systems (Windows/macOS/Linux + coding GIF + chart)
-
Why Windows/macOS can limit CS learning (and when you still need them)
-
Why Linux is the solution (optimized, customizable, open-source, free)
-
Understanding Linux (kernel, distros, DEs, packages, services, CLI)
-
Choosing a Distro (iceberg meme; we start with Linux Mint Cinnamon)
-
What you’ll need (USB 8GB+, laptop, 30 GB free space, courage)
-
Install Flow: Single Slide
- Windows dual-boot (live demo path)
- macOS (Option key boot + rEFInd note)
-
Visual Guide (Mint live desktop, installer welcome, GRUB)
-
Congrats 🎉
- Swap theme color in
:rootCSS variables for Ubuntu/Arch flavors. - Replace the background penguin or add distro logos per slide.
- Insert your university branding (logo in the title slide).
- Expand the post-install checklist (dotfiles, shell, editor config, language packs).
- GIF/Chart not loading: You might be offline. Use local image fallbacks, or run a local server.
- Fonts look different: Google Fonts require internet; it’ll fall back to system fonts if offline.
- Slides don’t advance: Ensure the page has focus, then try the arrow keys or on-screen buttons.
- Penguin & distro logos: respective trademark owners.
- Mint desktop & GRUB screenshots: Wikimedia Commons (example sources referenced in code comments).
- Tenor coding GIF embed: tenor.com
- OS market share chart: StatCounter Global Stats
This project is for educational use in a student workshop. Please respect all trademarks and image licenses.
MIT — feel free to fork, remix, and present. Attribution appreciated if you share publicly!