github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-05-10 15:49:25 -05:00
Code Issues 81 Packages Projects Releases 24 Wiki Activity

fix(labs,slides): put lab preview first, add visible carousel controls

Browse Source 
Labs: moved the lab preview mockup before stats/CTAs so the experience
is the first thing visitors see after the title.

Slides: styled carousel arrows as dark circular buttons and added
pink dot indicators so users know they can browse slide previews.
This commit is contained in:
Vijay Janapa Reddi
2026-03-20 08:59:00 -04:00
parent aecd7b488f
commit dc33025836
2 changed files with 92 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
labs/index.qmd
View File

@@ -232,20 +232,6 @@ subtitle: "33 interactive labs that run entirely in your browser. No install. No
}
</style>
<!-- Stats -->
<div class="stats-row">
<div class="stat"><span class="stat-num">33</span><span class="stat-lbl">Labs</span></div>
<div class="stat"><span class="stat-num">2</span><span class="stat-lbl">Volumes</span></div>
<div class="stat"><span class="stat-num">~50</span><span class="stat-lbl">Min Each</span></div>
</div>
<!-- Actions -->
<div class="action-row">
<a href="vol1/lab_01_ml_intro/" class="btn-accent">Launch Lab 01 &rarr;</a>
<a href="vol1/lab_00_introduction/" class="btn-outline">Start Orientation</a>
<a href="https://github.com/harvard-edge/cs249r_book/discussions" class="btn-outline">Share Feedback</a>
</div>
<!-- Lab Preview Window -->
<a href="vol1/lab_01_ml_intro/" class="lab-preview-link" aria-label="Launch Lab 01: The AI Triad">
<div class="lab-window">
@@ -349,6 +335,20 @@ subtitle: "33 interactive labs that run entirely in your browser. No install. No
</div>
</div>
</a>
<!-- Actions -->
<div class="action-row">
<a href="vol1/lab_01_ml_intro/" class="btn-accent">Launch Lab 01 &rarr;</a>
<a href="vol1/lab_00_introduction/" class="btn-outline">Start Orientation</a>
<a href="https://github.com/harvard-edge/cs249r_book/discussions" class="btn-outline">Share Feedback</a>
</div>
<!-- Stats -->
<div class="stats-row">
<div class="stat"><span class="stat-num">33</span><span class="stat-lbl">Labs</span></div>
<div class="stat"><span class="stat-num">2</span><span class="stat-lbl">Volumes</span></div>
<div class="stat"><span class="stat-num">~50</span><span class="stat-lbl">Min Each</span></div>
</div>
```
Every lab follows the same three-step structure: read a real-world scenario, commit a prediction before seeing any data, then explore the simulator to discover whether your intuition was right. The prediction lock ensures you can't just passively watch --- you have to think first.

80
slides/index.qmd
View File

@@ -2,8 +2,7 @@
pagetitle: "Lecture Slides"
title: "Lecture Slides"
subtitle: "35 Beamer decks with speaker notes, active learning, and 266 original SVG diagrams. Free to download, customize, and teach from."
page-layout: article
toc: false
toc: true
---
```{=html}
@@ -199,6 +198,43 @@ toc: false
font-weight: 600;
vertical-align: middle;
}
/* ── Carousel Controls ───────────────────────────────────────────── */
#slideCarousel {
position: relative;
}
#slideCarousel .carousel-control-prev,
#slideCarousel .carousel-control-next {
width: 40px; height: 40px;
top: 50%; transform: translateY(-50%);
background: rgba(0,0,0,0.5);
border-radius: 50%;
opacity: 0.7;
transition: opacity 0.2s;
}
#slideCarousel .carousel-control-prev { left: 8px; }
#slideCarousel .carousel-control-next { right: 8px; }
#slideCarousel .carousel-control-prev:hover,
#slideCarousel .carousel-control-next:hover { opacity: 1; }
#slideCarousel .carousel-control-prev-icon,
#slideCarousel .carousel-control-next-icon {
width: 16px; height: 16px;
}
#slideCarousel .carousel-indicators {
bottom: -8px;
}
#slideCarousel .carousel-indicators button {
width: 8px; height: 8px;
border-radius: 50%;
background: #94a3b8;
border: none;
opacity: 0.5;
margin: 0 4px;
}
#slideCarousel .carousel-indicators button.active {
background: #BE185D;
opacity: 1;
}
</style>
<!-- Stats -->
@@ -210,6 +246,46 @@ toc: false
<div class="stat"><span class="stat-num">1,099</span><span class="stat-lbl">Speaker Notes</span></div>
</div>
<!-- Slide Preview Carousel -->
<div id="slideCarousel" class="carousel slide mb-4" data-bs-ride="carousel" data-bs-interval="4000">
<div class="carousel-inner" style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1rem;">
<div class="carousel-item active">
<img src="vol1/01_introduction/images/iron-law-visual.svg" class="d-block mx-auto" alt="Iron Law of ML Systems" style="max-height: 320px; width: auto;">
<p style="text-align:center; font-size: 0.8rem; color: #64748b; margin-top: 0.5rem;">Ch 1: The Iron Law of ML Systems</p>
</div>
<div class="carousel-item">
<img src="vol1/01_introduction/images/deployment-spectrum.svg" class="d-block mx-auto" alt="Deployment Spectrum" style="max-height: 320px; width: auto;">
<p style="text-align:center; font-size: 0.8rem; color: #64748b; margin-top: 0.5rem;">Ch 1: Deployment Spectrum — Cloud to TinyML</p>
</div>
<div class="carousel-item">
<img src="vol1/01_introduction/images/dam-taxonomy.svg" class="d-block mx-auto" alt="D·A·M Taxonomy" style="max-height: 320px; width: auto;">
<p style="text-align:center; font-size: 0.8rem; color: #64748b; margin-top: 0.5rem;">Ch 1: Data · Algorithm · Machine Taxonomy</p>
</div>
<div class="carousel-item">
<img src="vol1/01_introduction/images/compute-growth.svg" class="d-block mx-auto" alt="Compute Growth" style="max-height: 320px; width: auto;">
<p style="text-align:center; font-size: 0.8rem; color: #64748b; margin-top: 0.5rem;">Ch 1: AI Compute Growth Over Time</p>
</div>
<div class="carousel-item">
<img src="vol1/01_introduction/images/five-percent-problem.svg" class="d-block mx-auto" alt="The 5% Problem" style="max-height: 320px; width: auto;">
<p style="text-align:center; font-size: 0.8rem; color: #64748b; margin-top: 0.5rem;">Ch 1: The Hidden Technical Debt of ML Systems</p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#slideCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#slideCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
<div class="carousel-indicators">
<button type="button" data-bs-target="#slideCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#slideCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#slideCarousel" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#slideCarousel" data-bs-slide-to="3"></button>
<button type="button" data-bs-target="#slideCarousel" data-bs-slide-to="4"></button>
</div>
</div>
<p style="text-align: center; font-size: 0.82rem; color: #64748b; margin-top: -0.5rem; margin-bottom: 1.5rem;">266 original SVG diagrams included across all decks — editable source files, not locked images.</p>
<!-- Actions -->
<div class="action-row">
<a href="https://github.com/harvard-edge/cs249r_book/releases/tag/slides-latest" class="btn-accent" target="_blank">Download All (PDF + PPTX)</a>