Skip to content
/ Learning-Hub Public

A one stop destination for Data Science Notes, not by topic but by tech stack

License

MIT license
3 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

Developer-Sahil/Learning-Hub

BranchesTags

Repository files navigation

Learning Hub

A clean, structured resource hub for mastering the essentials of Data Science technologies — from Python to SQL.

Overview

Learning Hub is a lightweight, static educational platform designed to provide comprehensive, beginner-friendly tutorials for core data science technologies. The project delivers structured learning content through an intuitive web interface, eliminating information overload by focusing each module entirely on a single technology stack. Built with vanilla HTML/CSS/JavaScript and enhanced with Prism.js for syntax highlighting, the platform serves as a one-stop reference for learners transitioning into data science or reinforcing foundational knowledge.

Live Website: https://developer-sahil.github.io/Learning-Hub/

Tech Stack

Frontend

  • HTML5 - Semantic markup structure
  • CSS3 - Custom animations, gradients, responsive design
  • Vanilla JavaScript - Interactive features, scroll spy, clipboard operations

Libraries & Frameworks

  • Prism.js - Syntax highlighting for code blocks (Python, SQL, Bash)
  • Google Fonts - Inter (UI text), Fira Code (monospace code)

Deployment

  • GitHub Pages - Static site hosting
  • Git - Version control

Design System

  • Custom CSS architecture with modular stylesheets (common.css, notes.css, home.css)
  • Gradient-based purple color scheme (#667eea to #764ba2)
  • Animated particle background effects
  • Glassmorphism UI elements with backdrop-filter

Motivation

The data science learning landscape is fragmented—beginners often struggle to find consolidated, high-quality resources that cover fundamentals without vendor lock-in or paywall restrictions. Existing platforms either oversimplify content to the point of uselessness or overwhelm learners with enterprise-grade complexity. This gap creates friction for self-learners, students, and professionals seeking career transitions.

Learning Hub addresses these pain points by providing:

  1. Zero-cost access to production-quality educational content
  2. Single-stack focus per module to prevent cognitive overload
  3. Progressive disclosure of concepts from basics to advanced topics
  4. Copy-paste ready code with syntax highlighting and clipboard integration
  5. Responsive design for learning on any device

The project democratizes data science education by removing financial and technical barriers, enabling anyone with internet access to build competency in Python, NumPy, Pandas, SQL, and Statistics through self-paced learning.

System Architecture

High-Level Design

┌──────────────────────────────────┐
│      GitHub Pages (CDN)          │
│   Static Asset Distribution      │
└────────────┬─────────────────────┘
             │ HTTPS
             ▼
┌──────────────────────────────────┐
│      User Browser (Client)       │
│  ┌────────────────────────────┐  │
│  │   HTML Structure Layer     │  │
│  │   - Semantic markup        │  │
│  │   - Navigation components  │  │
│  └────────────┬───────────────┘  │
│               │                   │
│  ┌────────────▼───────────────┐  │
│  │   CSS Presentation Layer   │  │
│  │   - Gradient animations    │  │
│  │   - Responsive layouts     │  │
│  │   - Particle effects       │  │
│  └────────────┬───────────────┘  │
│               │                   │
│  ┌────────────▼───────────────┐  │
│  │   JavaScript Behavior      │  │
│  │   - Scroll spy (sidebar)   │  │
│  │   - Copy-to-clipboard      │  │
│  │   - Particle generation    │  │
│  └────────────┬───────────────┘  │
│               │                   │
│  ┌────────────▼───────────────┐  │
│  │   Prism.js (External CDN)  │  │
│  │   - Syntax highlighting    │  │
│  │   - Language detection     │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘

Low-Level Design

Page Structure Flow

index.html (Landing)
    ↓
Hero Section → Course Cards → Footer
    ↓ (Click course)
    ↓
{topic}-notes.html (Content Page)
    ↓
┌────────────────────────────────┐
│  Sticky Navigation Bar         │
└────────────────────────────────┘
    ↓
┌───────────┬────────────────────┐
│  Sidebar  │  Main Content      │
│  (TOC)    │                    │
│           │  Hero Section      │
│  Scroll   │      ↓             │
│  Spy      │  Section Cards     │
│  Active   │  - Introduction    │
│  Link     │  - Code Examples   │
│           │  - Explanations    │
│           │  - Exercises       │
└───────────┴────────────────────┘
    ↓
┌────────────────────────────────┐
│  Footer (Social Links)         │
└────────────────────────────────┘

Code Block Component Architecture

<div class="code-container">
  <div class="code-header">
    <span>Language</span>
    <button class="copy-btn">Copy</button>
  </div>
  <pre><code class="language-python">
    # Code here
  </code></pre>
</div>

Event Flow:

  1. User clicks "Copy" button
  2. JavaScript selects <code> element text content
  3. navigator.clipboard.writeText() called
  4. Button text changes to "✓ Copied!"
  5. 2-second timeout resets button state

Scroll Spy Implementation

// 1. Get all sections with IDs
sections = document.querySelectorAll('section')

// 2. On window scroll event
window.addEventListener('scroll', () => {
  // 3. Calculate current section
  currentSection = sections.find(section => 
    pageYOffset >= section.offsetTop - 200
  )
  
  // 4. Update sidebar active link
  navLinks.forEach(link => {
    link.classList.toggle('active', 
      link.href.endsWith('#' + currentSection.id)
    )
  })
})

Particle Animation System

// Generate 30 floating particles
for (let i = 0; i < 30; i++) {
  particle = createElement('div')
  particle.className = 'particle'
  particle.style = {
    width: random(20-100) + 'px',
    left: random(0-100) + '%',
    top: random(0-100) + '%',
    animationDelay: random(0-20) + 's',
    animationDuration: random(15-35) + 's'
  }
  // CSS keyframes handle actual movement
}

File Organization

/
├── index.html              # Landing page with course cards
├── about.html              # Author bio and project info
├── {topic}-notes.html      # 5 content pages (Python, NumPy, etc.)
├── css/
│   ├── common.css          # Shared styles (nav, footer, particles)
│   ├── notes.css           # Content page styles (sidebar, cards)
│   └── home.css            # Landing page specific styles
├── js/
│   ├── common.js           # Particle generation
│   └── notes.js            # Copy buttons, scroll spy
└── data macsot.png         # Hero section illustration

Architecture Decisions

1. Static Site Over Dynamic Framework

  • Decision: Pure HTML/CSS/JS without React/Vue/Angular
  • Rationale:
    • Zero build step enables instant deployment via GitHub Pages
    • No JavaScript framework lock-in reduces maintenance burden
    • Faster page loads (no framework overhead ~40KB+)
    • Accessible to beginners examining source code
    • SEO-friendly with server-side rendered content
  • Trade-off: Manual HTML duplication for navigation/footer across pages. Acceptable for 7-page site; would require templating at 20+ pages.

2. CDN-Hosted Libraries (Prism.js, Google Fonts)

  • Decision: Link external CDN resources instead of self-hosting
  • Rationale:
    • Leverages browser caching (users likely have cached Inter font from other sites)
    • Reduces repository size (no 500KB+ font files)
    • Prism.js auto-updates for security patches
    • Faster global delivery via CDN edge networks
  • Mitigation: Specify exact versions to prevent breaking changes (prism@1.29.0)

3. Modular CSS Architecture

  • Decision: Split styles into common.css, notes.css, home.css
  • Rationale:
    • Reduces CSS payload per page (notes pages don't load home-specific styles)
    • Easier maintenance (edit sidebar in one place affects all content pages)
    • Clear separation of concerns
    • Enables selective caching (common.css cached long-term)

4. Vanilla JavaScript Over jQuery/Libraries

  • Decision: Write scroll spy, clipboard, animations in plain JavaScript
  • Rationale:
    • Modern browser APIs (Intersection Observer, Clipboard API) eliminate need for jQuery
    • 30KB+ savings by avoiding jQuery dependency
    • Better performance (native DOM methods faster than abstraction layer)
    • Educational value (demonstrates modern JS patterns)

5. Client-Side Syntax Highlighting (Prism.js)

  • Decision: Use Prism.js for code highlighting vs. pre-rendered HTML
  • Rationale:
    • Enables code editing without rebuilding site
    • Smaller HTML files (no inline style attributes per token)
    • Supports 200+ languages with plug-and-play components
    • Accessible (preserves semantic <code> structure for screen readers)
  • Trade-off: 0.1s flash of unstyled code before Prism loads. Acceptable for educational content.

6. GitHub Pages Deployment

  • Decision: Use GitHub Pages instead of Netlify/Vercel
  • Rationale:
    • Native integration with GitHub repository
    • Zero configuration (push to main → auto-deploy)
    • Free HTTPS with custom domain support
    • Built-in CDN (GitHub's global edge network)
    • Version control tied to deployment history

Failure Points & Mitigation Strategy

1. CDN Unavailability (Prism.js, Google Fonts)

Failure: CDN outage causes broken syntax highlighting or font loading

  • Symptom: Code blocks render as plain text; fallback system fonts used
  • Detection: Browser console shows 404/timeout errors for CDN resources
  • Mitigation:
    • Prism.js: Site remains functional (code readable, just unstyled)
    • Fonts: CSS specifies fallback stack ('Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI')
    • Future improvement: Self-host critical assets with CDN as fallback
    • Monitor CDN status via status.prismjs.com

2. Browser Clipboard API Restrictions

Failure: navigator.clipboard.writeText() fails in non-HTTPS context

  • Symptom: Copy button does nothing or shows "Failed" message
  • Root Cause: Clipboard API requires secure context (HTTPS or localhost)
  • Mitigation:
    • GitHub Pages enforces HTTPS (resolves production issue)
    • Fallback: document.execCommand('copy') for older browsers
    • Error handling displays "✗ Failed" instead of silent failure
    • Development: Use python -m http.server with HTTPS proxy

3. Mobile Layout Breakpoints

Failure: Content overflows or becomes unreadable on small screens

  • Symptom: Sidebar overlaps content; code blocks exceed viewport width
  • Mitigation:
    • Media queries at 768px collapse sidebar to full-width
    • overflow-x: auto on code containers enables horizontal scroll
    • viewport meta tag prevents zoom issues
    • Testing: Use Chrome DevTools device emulation for 320px-1920px
    • Flexbox/Grid auto-wrap prevents rigid layouts

4. JavaScript Disabled Users

Failure: Particles don't render; copy buttons non-functional

  • Symptom: Static page without interactive features
  • Mitigation:
    • Progressive enhancement: Core content (HTML/CSS) works without JS
    • Particles are decorative (no functional impact)
    • Code blocks remain readable (Prism degrades gracefully)
    • Copy buttons hidden with <noscript> message: "Enable JS for copy feature"
    • All navigation works via standard <a> links

5. Prism.js Language Detection Failure

Failure: Wrong language syntax highlighting applied

  • Symptom: Python code highlighted as JavaScript
  • Root Cause: Missing class="language-python" on <code> tag
  • Mitigation:
    • Explicit language classes in HTML (language-python, language-sql)
    • Prism components loaded in order (core → language modules)
    • Validation: Check DevTools for Prism errors in console
    • Manual testing of each code block type during content addition

6. Broken Internal Links

Failure: Navigation links point to non-existent pages/anchors

  • Symptom: 404 errors or scroll to wrong section
  • Mitigation:
    • Consistent ID naming convention (#intro, #install, etc.)
    • Pre-deployment checklist: click every link in nav/sidebar
    • Automated testing (future): Broken link checker in CI/CD
    • HTML validation via W3C Validator

7. Browser Cache Staleness

Failure: Users see outdated CSS/JS after site updates

  • Symptom: New features missing; old styles applied
  • Root Cause: Aggressive browser caching of static assets
  • Mitigation:
    • GitHub Pages sets Cache-Control: max-age=600 (10 min)
    • Hard refresh instructions on About page (Ctrl+Shift+R)
    • Future: Cache busting with versioned filenames (common.v2.css)
    • Service Worker for controlled cache updates

8. Slow Page Load on Poor Connections

Failure: 3+ second load time on 3G networks

  • Symptom: Blank screen with loading indicator
  • Mitigation:
    • Minified CSS (reduces 15KB → 10KB)
    • Lazy load hero images with loading="lazy"
    • Inline critical CSS (above-the-fold styles in <head>)
    • Font subsetting (load only Latin characters)
    • Monitoring: Lighthouse CI scores for performance regression

9. Cross-Browser Compatibility Issues

Failure: CSS Grid/Flexbox renders incorrectly in older browsers

  • Symptom: Layout broken in IE11, Safari <12
  • Mitigation:
    • Target modern evergreen browsers (Chrome/Firefox/Safari/Edge last 2 versions)
    • Autoprefixer in build pipeline (if adopting build tools)
    • Flexbox fallbacks for Grid layouts
    • Testing: BrowserStack for IE11, Safari iOS verification
    • @supports queries for feature detection

10. Content Duplication in Footer/Navigation

Failure: Update social links in one page, forget other 6 pages

  • Symptom: Inconsistent contact info across site
  • Root Cause: Manual HTML duplication (no templating)
  • Mitigation:
    • Master checklist: "Update all 7 pages when changing shared content"
    • Future: Server-side includes or static site generator (11ty, Jekyll)
    • Git pre-commit hook to lint for mismatched navigation blocks
    • Consider component-based architecture at 10+ pages

Development Workflow

# Clone repository
git clone https://github.com/Developer-Sahil/Learning-Hub.git
cd Learning-Hub

# No build step required! Just open in browser
python -m http.server 8000
# Visit http://localhost:8000

# Make changes
# - Edit HTML files directly
# - Update CSS in css/ directory
# - Modify JS in js/ directory

# Test changes
# - Check all pages in different browsers
# - Verify mobile responsiveness
# - Test copy-to-clipboard functionality

# Commit and push
git add .
git commit -m "Update Python notes with decorators section"
git push origin main

# GitHub Pages auto-deploys within 1-2 minutes

Content Structure

Each topic follows a consistent pedagogical structure:

  1. Introduction - Motivation and use cases
  2. Installation - Setup instructions
  3. Core Concepts - Fundamental building blocks
  4. Operations - Common patterns and methods
  5. Advanced Topics - Expert-level techniques
  6. Best Practices - Production-ready guidelines
  7. Next Steps - Links to related topics

Python Notes: Variables, data types, control flow, functions, OOP, modules, file I/O
NumPy Notes: Arrays, broadcasting, linear algebra, random numbers, performance optimization
Pandas Notes: DataFrames, filtering, grouping, merging, time series, I/O operations
SQL Notes: SELECT queries, JOINs, aggregations, subqueries, transactions, window functions
Statistics Notes: Descriptive stats, probability, hypothesis testing, regression, ANOVA

Performance Metrics

Lighthouse Scores (Target):

  • Performance: 95+
  • Accessibility: 100
  • Best Practices: 100
  • SEO: 100

Bundle Sizes:

  • HTML: ~15KB per page (gzipped)
  • CSS (combined): ~18KB (gzipped)
  • JavaScript: ~3KB (gzipped)
  • Prism.js: ~12KB (gzipped, via CDN)

Page Load Metrics:

  • First Contentful Paint: <1s
  • Time to Interactive: <2s
  • Total Blocking Time: <200ms

Contributing Guidelines

  1. Content Additions: Follow existing section structure and tone
  2. Code Examples: Include output comments for clarity
  3. Styling: Maintain gradient purple theme and glassmorphism aesthetic
  4. Accessibility: Ensure WCAG 2.1 AA compliance (color contrast 4.5:1 minimum)
  5. Testing: Verify on Chrome, Firefox, Safari before PR
  6. Commit Messages: Use conventional commits (feat:, fix:, docs:)

Roadmap

v1.0 (Current): Python, NumPy, Pandas, SQL, Statistics
v1.1 (Planned): Machine Learning Basics, Data Visualization (Matplotlib/Seaborn)
v2.0 (Future): Interactive code playgrounds with Pyodide, progress tracking, quizzes

License

MIT License - Free to use, modify, and distribute with attribution.

Author

Sahil Sharma
Final-year CSE Student | Data Analyst | AI/DS Enthusiast

Built with passion for learners everywhere. If you find this helpful, consider starring the repository! ⭐

Acknowledgments

  • Prism.js for syntax highlighting
  • Google Fonts for Inter and Fira Code typefaces
  • Kaggle, official documentation sites, and the open-source community for educational inspiration

About

A one stop destination for Data Science Notes, not by topic but by tech stack

Resources

Readme

License

MIT license
Activity

Stars

3 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages