Skip to content

Commit 017c301

Browse files
apartsinclaude
andcommitted
QA sweep: responsive CSS, format consistency, cross-refs, conformance checklist
Add responsive CSS media queries (1024/768/480px breakpoints) across all 141 section files for tablet and mobile rendering. Fix inline styles on whats-next, bibliography, and callout elements by moving to CSS classes. Add missing CSS definitions (code-caption, research-frontier, whats-next) to style blocks. Fix non-canonical callout class names. Add header navigation links (module label to index, part subtitle to part index). Add code captions after code blocks. Create CONFORMANCE_CHECKLIST.md as single source of truth for all formatting, structural, and content requirements (24 categories, A through X). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 44abdbf commit 017c301

160 files changed

Lines changed: 9544 additions & 2325 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

CONFORMANCE_CHECKLIST.md

Lines changed: 433 additions & 0 deletions
Large diffs are not rendered by default.

part-1-foundations/module-00-ml-pytorch-foundations/section-0.1.html

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -376,13 +376,44 @@
376376
margin-top: 1.5rem;
377377
}
378378

379+
a.cross-ref { color: var(--accent, #0f3460); }
380+
.illustration img { max-width: 100%; border-radius: 8px; }
381+
.whats-next h3 { color: #1565c0; margin-bottom: 0.8rem; }
382+
.whats-next { background: linear-gradient(135deg, #e3f2fd, #e8eaf6); border: 1px solid #90caf9; border-radius: 10px; padding: 1.5rem 1.8rem; margin: 2rem 0; }
383+
384+
/* Tablet */
385+
@media (max-width: 1024px) {
386+
.content { max-width: 100%; padding: 2rem 1.5rem; }
387+
.chapter-header { padding: 3rem 1.5rem; }
388+
.chapter-header h1 { font-size: 2rem; }
389+
.epigraph, .prerequisites { max-width: 90%; }
390+
svg { max-width: 100%; height: auto; }
391+
}
392+
@media (max-width: 768px) {
393+
.content { padding: 1.5rem 1rem; }
394+
.chapter-header h1 { font-size: 1.6rem; }
395+
.chapter-header .subtitle { font-size: 1rem; }
396+
body { font-size: 16px; line-height: 1.75; }
397+
h2 { font-size: 1.5rem; }
398+
h3 { font-size: 1.2rem; }
399+
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
400+
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
401+
.callout { margin-left: 0; margin-right: 0; }
402+
}
403+
@media (max-width: 480px) {
404+
.content { padding: 1rem 0.75rem; }
405+
.epigraph, .prerequisites { max-width: 100%; margin-left: 0; margin-right: 0; }
406+
.chapter-header h1 { font-size: 1.4rem; }
407+
}
408+
379409
</style>
380410
</head>
381411
<body>
382412
<header class="chapter-header">
383413
<a href="../../index.html" class="module-label" style="color: rgba(255,255,255,0.7); text-decoration: none;">Module 00 &middot; Section 0.1</a>
384414
<h1>ML Basics: Features, Optimization &amp; Generalization</h1>
385415
<div class="subtitle">From raw data to learning machines: the fundamental ideas that make machine learning work</div>
416+
<p style="margin-top: 0.5rem;"><a href="../index.html" style="color: rgba(255,255,255,0.85); text-decoration: none;">Part 1: Foundations</a></p>
386417
</header>
387418

388419
<blockquote class="epigraph">
@@ -413,7 +444,7 @@ <h3>Why Representation Matters</h3>
413444

414445
<div class="callout key-insight">
415446
<div class="callout-title">&#128161; Key Insight</div>
416-
<p>A good representation makes the relationship between inputs and outputs <em>simple enough for the model to learn</em>. In deep learning (and particularly in LLMs), the model learns its own representations automatically. This is one of the key breakthroughs that makes deep learning so powerful, and we will explore it in <a href="section-0.2.html" style="color: var(--accent, #0f3460);">Section 0.2</a>.</p>
447+
<p>A good representation makes the relationship between inputs and outputs <em>simple enough for the model to learn</em>. In deep learning (and particularly in LLMs), the model learns its own representations automatically. This is one of the key breakthroughs that makes deep learning so powerful, and we will explore it in <a href="section-0.2.html" class="cross-ref">Section 0.2</a>.</p>
417448
</div>
418449

419450
<h3>Common Feature Engineering Techniques</h3>
@@ -524,7 +555,7 @@ <h3>Why Gradient Descent Works</h3>
524555
<p>We could try random guessing, but the space is impossibly large. Instead, we use a beautiful insight from calculus: <strong>the gradient tells us which direction is uphill</strong>. If we walk in the opposite direction, we go downhill, reducing the loss.</p>
525556

526557
<figure class="illustration">
527-
<img src="images/gradient-descent-landscape.png" alt="A hilly landscape illustrating gradient descent, showing a path from a high point down to the lowest valley" style="max-width: 100%; border-radius: 8px;">
558+
<img src="images/gradient-descent-landscape.png" alt="A hilly landscape illustrating gradient descent, showing a path from a high point down to the lowest valley">
528559
<figcaption>Gradient descent navigates a loss landscape by following the steepest downhill direction at each step, seeking the lowest valley (minimum loss).</figcaption>
529560
</figure>
530561

@@ -630,7 +661,7 @@ <h3>Variants of Gradient Descent</h3>
630661
<h2>4. Overfitting, Underfitting, and Regularization</h2>
631662

632663
<figure class="illustration">
633-
<img src="images/overfitting-vs-generalization.png" alt="Side-by-side comparison of an overfitting model that memorizes noise versus a well-generalized model that captures the true pattern" style="max-width: 100%; border-radius: 8px;">
664+
<img src="images/overfitting-vs-generalization.png" alt="Side-by-side comparison of an overfitting model that memorizes noise versus a well-generalized model that captures the true pattern">
634665
<figcaption>Overfitting versus generalization: the model on the left has memorized every training point (including noise), while the model on the right captures the underlying pattern.</figcaption>
635666
</figure>
636667

@@ -891,7 +922,7 @@ <h2>7. Putting It All Together: The Full Pipeline</h2>
891922
<li><strong>Diagnosis:</strong> If training accuracy is 95% but test accuracy is 70%, you are overfitting. Consider stronger regularization, more data, or fewer features. If both training and test accuracy are 65%, you are underfitting. Consider a more powerful model (e.g., a neural network) or better features.</li>
892923
</ol>
893924

894-
<p>This exact workflow scales to far more complex settings. When researchers train GPT-style models, they follow the same logical steps at a vastly larger scale: represent text as token sequences (features), define cross-entropy loss over next-token prediction, optimize with Adam (a sophisticated variant of SGD that adapts the learning rate per parameter; we will explain Adam in detail in <a href="section-0.3.html" style="color: var(--accent, #0f3460);">Section 0.3</a>), apply dropout and weight decay, and evaluate on held-out benchmarks. In Section 0.3, you will implement this entire workflow in PyTorch, the framework used for most modern LLM research.</p>
925+
<p>This exact workflow scales to far more complex settings. When researchers train GPT-style models, they follow the same logical steps at a vastly larger scale: represent text as token sequences (features), define cross-entropy loss over next-token prediction, optimize with Adam (a sophisticated variant of SGD that adapts the learning rate per parameter; we will explain Adam in detail in <a href="section-0.3.html" class="cross-ref">Section 0.3</a>), apply dropout and weight decay, and evaluate on held-out benchmarks. In Section 0.3, you will implement this entire workflow in PyTorch, the framework used for most modern LLM research.</p>
895926

896927
<!-- Interactive Quiz -->
897928
<div class="quiz">
@@ -952,8 +983,8 @@ <h2>Key Takeaways</h2>
952983
</ol>
953984
</div>
954985

955-
<div class="whats-next" style="background: linear-gradient(135deg, #e3f2fd, #e8eaf6); border: 1px solid #90caf9; border-radius: 10px; padding: 1.5rem 1.8rem; margin: 2rem 0;">
956-
<h3 style="color: #1565c0; margin-bottom: 0.8rem;">What's Next?</h3>
986+
<div class="whats-next">
987+
<h3>What's Next?</h3>
957988
<p>In the next section, <a href="section-0.2.html">Section 0.2: Deep Learning Essentials</a>, we build on these ML fundamentals by exploring deep learning essentials, including neural network architectures and training techniques.</p>
958989
</div>
959990

@@ -974,7 +1005,7 @@ <h3 style="color: #1565c0; margin-bottom: 0.8rem;">What's Next?</h3>
9741005
<p class="bib-ref">
9751006
<a href="https://hastie.su.domains/ElemStatLearn/" target="_blank" rel="noopener">Hastie, T., Tibshirani, R., &amp; Friedman, J. (2009). <em>The Elements of Statistical Learning</em> (2nd ed.). Springer.</a>
9761007
</p>
977-
<p class="bib-annotation">Comprehensive treatment of the bias-variance tradeoff, cross-validation, and regularization methods discussed in this section. <a href="../../part-2-understanding-llms/module-07-modern-llm-landscape/index.html" style="color: var(--accent, #0f3460);">Chapter 7</a> (model assessment) is especially relevant. Freely available online and ideal for practitioners who want statistical depth without full measure theory.</p>
1008+
<p class="bib-annotation">Comprehensive treatment of the bias-variance tradeoff, cross-validation, and regularization methods discussed in this section. <a href="../../part-2-understanding-llms/module-07-modern-llm-landscape/index.html" class="cross-ref">Chapter 7</a> (model assessment) is especially relevant. Freely available online and ideal for practitioners who want statistical depth without full measure theory.</p>
9781009
<span class="bib-meta">Book</span>
9791010
</div>
9801011

part-1-foundations/module-00-ml-pytorch-foundations/section-0.2.html

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -409,13 +409,44 @@
409409
margin-top: 1.5rem;
410410
}
411411

412+
a.cross-ref { color: var(--accent, #0f3460); }
413+
.illustration img { max-width: 100%; border-radius: 8px; }
414+
.whats-next h3 { color: #1565c0; margin-bottom: 0.8rem; }
415+
.whats-next { background: linear-gradient(135deg, #e3f2fd, #e8eaf6); border: 1px solid #90caf9; border-radius: 10px; padding: 1.5rem 1.8rem; margin: 2rem 0; }
416+
417+
/* Tablet */
418+
@media (max-width: 1024px) {
419+
.content { max-width: 100%; padding: 2rem 1.5rem; }
420+
.chapter-header { padding: 3rem 1.5rem; }
421+
.chapter-header h1 { font-size: 2rem; }
422+
.epigraph, .prerequisites { max-width: 90%; }
423+
svg { max-width: 100%; height: auto; }
424+
}
425+
@media (max-width: 768px) {
426+
.content { padding: 1.5rem 1rem; }
427+
.chapter-header h1 { font-size: 1.6rem; }
428+
.chapter-header .subtitle { font-size: 1rem; }
429+
body { font-size: 16px; line-height: 1.75; }
430+
h2 { font-size: 1.5rem; }
431+
h3 { font-size: 1.2rem; }
432+
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
433+
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
434+
.callout { margin-left: 0; margin-right: 0; }
435+
}
436+
@media (max-width: 480px) {
437+
.content { padding: 1rem 0.75rem; }
438+
.epigraph, .prerequisites { max-width: 100%; margin-left: 0; margin-right: 0; }
439+
.chapter-header h1 { font-size: 1.4rem; }
440+
}
441+
412442
</style>
413443
</head>
414444
<body>
415445
<header class="chapter-header">
416446
<a href="../../index.html" class="module-label" style="color: rgba(255,255,255,0.7); text-decoration: none;">Module 00 &middot; Section 0.2</a>
417447
<h1>Deep Learning Essentials</h1>
418448
<div class="subtitle">From single neurons to powerful networks: the building blocks of modern AI</div>
449+
<p style="margin-top: 0.5rem;"><a href="../index.html" style="color: rgba(255,255,255,0.85); text-decoration: none;">Part 1: Foundations</a></p>
419450
</header>
420451

421452
<blockquote class="epigraph">
@@ -427,13 +458,13 @@ <h1>Deep Learning Essentials</h1>
427458

428459
<div class="callout big-picture">
429460
<div class="callout-title">Big Picture: From Basic ML to Neural Networks</div>
430-
<p>In <a href="section-0.1.html" style="color: var(--accent, #0f3460);">Section 0.1</a>, you learned how a model can learn from data using gradient descent and loss functions. Those ideas were powerful, but they were limited to finding simple patterns (linear boundaries, shallow decision trees). Deep learning changed everything by <em>stacking layers of simple functions</em> to learn extraordinarily complex representations. This single idea, composing simple transformations into deep hierarchies, is what lets a neural network translate languages, generate images, and power the conversational AI systems you will build in this book.</p>
461+
<p>In <a href="section-0.1.html" class="cross-ref">Section 0.1</a>, you learned how a model can learn from data using gradient descent and loss functions. Those ideas were powerful, but they were limited to finding simple patterns (linear boundaries, shallow decision trees). Deep learning changed everything by <em>stacking layers of simple functions</em> to learn extraordinarily complex representations. This single idea, composing simple transformations into deep hierarchies, is what lets a neural network translate languages, generate images, and power the conversational AI systems you will build in this book.</p>
431462
</div>
432463

433464
<h2>1. Neural Network Fundamentals</h2>
434465

435466
<figure class="illustration">
436-
<img src="images/neural-network-machine.png" alt="A stylized neural network depicted as an interconnected machine with layers of processing units" style="max-width: 100%; border-radius: 8px;">
467+
<img src="images/neural-network-machine.png" alt="A stylized neural network depicted as an interconnected machine with layers of processing units">
437468
<figcaption>Neural networks are layered machines: raw inputs flow in, pass through layers of learned transformations, and emerge as predictions.</figcaption>
438469
</figure>
439470

@@ -672,7 +703,7 @@ <h4>Debugging a Vanishing Gradient in Production</h4>
672703

673704
<h2>3. Regularization Techniques</h2>
674705

675-
<p>In <a href="section-0.1.html" style="color: var(--accent, #0f3460);">Section 0.1</a>, you learned that overfitting occurs when a model memorizes training data instead of learning general patterns. Deep networks, with their enormous capacity, are especially prone to this. Here are the three most important tools for fighting overfitting in deep learning.</p>
706+
<p>In <a href="section-0.1.html" class="cross-ref">Section 0.1</a>, you learned that overfitting occurs when a model memorizes training data instead of learning general patterns. Deep networks, with their enormous capacity, are especially prone to this. Here are the three most important tools for fighting overfitting in deep learning.</p>
676707

677708
<h3>3.1 Dropout</h3>
678709

@@ -971,8 +1002,8 @@ <h2>Key Takeaways</h2>
9711002
</ol>
9721003
</div>
9731004

974-
<div class="whats-next" style="background: linear-gradient(135deg, #e3f2fd, #e8eaf6); border: 1px solid #90caf9; border-radius: 10px; padding: 1.5rem 1.8rem; margin: 2rem 0;">
975-
<h3 style="color: #1565c0; margin-bottom: 0.8rem;">What's Next?</h3>
1005+
<div class="whats-next">
1006+
<h3>What's Next?</h3>
9761007
<p>In the next section, <a href="section-0.3.html">Section 0.3: PyTorch Tutorial</a>, we put theory into practice with a hands-on PyTorch tutorial, learning the framework that powers most modern LLM research.</p>
9771008
</div>
9781009

0 commit comments

Comments
 (0)