Add interactive CNN convolution & pooling tutorial lesson

[LMK89]

Summary

Added a comprehensive interactive educational lesson on Convolutional Neural Networks (CNNs), specifically covering convolution operations and pooling layers. The lesson includes visual demonstrations, interactive demos, and self-assessment quizzes.

Key Changes

• New lesson file: 2026-08-25-cnn-convolution-4bbe45f2.html — A complete standalone HTML lesson with:

  • Hero header with lesson introduction
  • 7 main sections covering CNN fundamentals, state tracing, interactive demos, data quality, real-world applications, exercises, and quizzes
  • Dark/light mode support with CSS custom properties
  • Responsive design (mobile-friendly)

• Interactive features:

  • Live kernel convolution demo where users can step through the convolution process on a 6×6 image
  • Switchable kernel types (vertical edge detection, horizontal edge detection, blur)
  • Visual highlighting of the sliding window during convolution
  • Step-by-step visualization of convolution → ReLU → pooling pipeline
  • Real-time calculation display showing the mathematical operations

• Educational content:

  • ASCII diagrams showing the 4-stage processing pipeline
  • Comparison tables for good vs. bad data practices
  • Code examples in PyTorch showing proper data augmentation and normalization
  • 5-question quiz with immediate feedback
  • Practical exercise with manual calculation

• Updated README: Added entry for the new lesson in the lesson index table

Implementation Details

• Pure HTML/CSS/JavaScript with no external dependencies
• Smooth animations and transitions for better UX
• Semantic HTML structure with accessibility considerations
• Modular CSS with CSS variables for theming
• Interactive state management for the convolution demo (phase tracking, position tracking)
• Quiz system with answer validation and score calculation

https://claude.ai/code/session_011PnTV3vAzu7pYuuzrTte2D