193 lines
9.8 KiB
HTML
193 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Open Learning Hub - Your gateway to free educational resources for coding, science, math, humanities, languages, and more.">
|
|
<meta name="keywords" content="education, free learning, online courses, coding, science, math, humanities, languages, study tools">
|
|
<meta name="author" content="Open Learning Hub">
|
|
<meta property="og:title" content="Open Learning Hub">
|
|
<meta property="og:description" content="Discover free educational resources and daily learning tips.">
|
|
<meta property="og:type" content="website">
|
|
<title>Open Learning Hub</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
<h1>Open Learning Hub</h1>
|
|
<p>Your gateway to free educational resources across the web.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<section id="tip-section">
|
|
<h2>💡 Tip of the Day</h2>
|
|
<p id="daily-tip">Loading tip...</p>
|
|
<button id="new-tip-btn">Get Another Tip</button>
|
|
</section>
|
|
|
|
<section id="resources">
|
|
<h2>Educational Resources</h2>
|
|
<div class="filter-controls">
|
|
<button class="filter-btn active" data-filter="all">All</button>
|
|
<button class="filter-btn" data-filter="coding">Coding</button>
|
|
<button class="filter-btn" data-filter="science">Science</button>
|
|
<button class="filter-btn" data-filter="math">Math</button>
|
|
<button class="filter-btn" data-filter="humanities">Humanities</button>
|
|
<button class="filter-btn" data-filter="languages">Languages</button>
|
|
<button class="filter-btn" data-filter="courses">Online Courses</button>
|
|
<button class="filter-btn" data-filter="tools">Study Tools</button>
|
|
</div>
|
|
|
|
<div class="resource-grid">
|
|
<!-- Coding -->
|
|
<article class="card" data-category="coding">
|
|
<h3>freeCodeCamp</h3>
|
|
<p>Learn to code for free with interactive lessons and projects.</p>
|
|
<a href="https://www.freecodecamp.org" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="coding">
|
|
<h3>MDN Web Docs</h3>
|
|
<p>Resources for developers, by developers. The bible of web dev.</p>
|
|
<a href="https://developer.mozilla.org" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="coding">
|
|
<h3>GitHub</h3>
|
|
<p>The world's largest platform for software development and version control.</p>
|
|
<a href="https://github.com" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="coding">
|
|
<h3>The Odin Project</h3>
|
|
<p>A full stack curriculum that is free and supported by a passionate open source community.</p>
|
|
<a href="https://www.theodinproject.com/" target="_blank">Visit Site</a>
|
|
</article>
|
|
|
|
<!-- Science -->
|
|
<article class="card" data-category="science">
|
|
<h3>NASA</h3>
|
|
<p>Explore the universe with images, videos, and news from NASA.</p>
|
|
<a href="https://www.nasa.gov" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="science">
|
|
<h3>National Geographic</h3>
|
|
<p>World leader in geography, cartography and exploration.</p>
|
|
<a href="https://www.nationalgeographic.com" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="science">
|
|
<h3>Nature</h3>
|
|
<p>Leading international weekly journal of science.</p>
|
|
<a href="https://www.nature.com" target="_blank">Visit Site</a>
|
|
</article>
|
|
|
|
<!-- Math -->
|
|
<article class="card" data-category="math">
|
|
<h3>Khan Academy</h3>
|
|
<p>Free, world-class education for anyone, anywhere.</p>
|
|
<a href="https://www.khanacademy.org" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="math">
|
|
<h3>Wolfram MathWorld</h3>
|
|
<p>The web's most extensive mathematics resource.</p>
|
|
<a href="https://mathworld.wolfram.com" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="math">
|
|
<h3>Desmos</h3>
|
|
<p>Beautiful, free online graphing calculator.</p>
|
|
<a href="https://www.desmos.com" target="_blank">Visit Site</a>
|
|
</article>
|
|
|
|
<!-- Humanities -->
|
|
<article class="card" data-category="humanities">
|
|
<h3>Project Gutenberg</h3>
|
|
<p>A library of over 60,000 free eBooks.</p>
|
|
<a href="https://www.gutenberg.org" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="humanities">
|
|
<h3>Smithsonian</h3>
|
|
<p>Official website of the Smithsonian Institution.</p>
|
|
<a href="https://www.si.edu" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="humanities">
|
|
<h3>Internet Archive</h3>
|
|
<p>Non-profit library of millions of free books, movies, software, and music.</p>
|
|
<a href="https://archive.org" target="_blank">Visit Site</a>
|
|
</article>
|
|
|
|
<!-- Languages -->
|
|
<article class="card" data-category="languages">
|
|
<h3>Duolingo</h3>
|
|
<p>The world's most popular way to learn a language. It's 100% free.</p>
|
|
<a href="https://www.duolingo.com" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="languages">
|
|
<h3>BBC Languages</h3>
|
|
<p>Archived but excellent resources for learning 40 languages.</p>
|
|
<a href="https://www.bbc.co.uk/languages/" target="_blank">Visit Site</a>
|
|
</article>
|
|
|
|
<!-- Online Courses -->
|
|
<article class="card" data-category="courses">
|
|
<h3>Coursera</h3>
|
|
<p>Build skills with courses, certificates, and degrees online from world-class universities.</p>
|
|
<a href="https://www.coursera.org" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="courses">
|
|
<h3>edX</h3>
|
|
<p>Access 2000+ free online courses from 140 leading institutions worldwide.</p>
|
|
<a href="https://www.edx.org" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="courses">
|
|
<h3>MIT OpenCourseWare</h3>
|
|
<p>A web-based publication of virtually all MIT course content.</p>
|
|
<a href="https://ocw.mit.edu" target="_blank">Visit Site</a>
|
|
</article>
|
|
|
|
<!-- Study Tools -->
|
|
<article class="card" data-category="tools">
|
|
<h3>Anki</h3>
|
|
<p>Powerful, intelligent flashcards. Remembering things just became much easier.</p>
|
|
<a href="https://apps.ankiweb.net/" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="tools">
|
|
<h3>Notion</h3>
|
|
<p>The all-in-one workspace for your notes, tasks, wikis, and databases.</p>
|
|
<a href="https://www.notion.so/" target="_blank">Visit Site</a>
|
|
</article>
|
|
<article class="card" data-category="tools">
|
|
<h3>Pomofocus</h3>
|
|
<p>A customizable Pomodoro timer that works on desktop & mobile browser.</p>
|
|
<a href="https://pomofocus.io/" target="_blank">Visit Site</a>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="learning-paths">
|
|
<h2>🚀 Learning Paths</h2>
|
|
<div class="paths-container">
|
|
<div class="path-card">
|
|
<h3>For Beginners</h3>
|
|
<p>Start with <strong>Khan Academy</strong> to build a strong foundation in Math and Science. Then, try <strong>Duolingo</strong> for a new language.</p>
|
|
</div>
|
|
<div class="path-card">
|
|
<h3>For Career Switchers</h3>
|
|
<p>Dive into <strong>freeCodeCamp</strong> or <strong>The Odin Project</strong> (add this!) to learn web development. Supplement with <strong>CS50</strong> on edX.</p>
|
|
</div>
|
|
<div class="path-card">
|
|
<h3>For Lifelong Learners</h3>
|
|
<p>Explore <strong>Project Gutenberg</strong> for classics, <strong>TED Talks</strong> for inspiration, and <strong>Coursera</strong> for specific interests.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2025 Open Learning Hub.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|