lambert/learning-workshops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
learning-workshops/index.html
T

336 lines
18 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学习工坊合集 - 前端技术学习站点</title>
<meta name="description" content="汇总前端技术学习站点，包含TailwindCSS、Next.js、TypeScript、前端性能优化等主流技术栈的系统学习资源">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#8B5CF6',
dark: '#1E293B',
light: '#F8FAFC'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.card-hover {
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-4px);
}
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📚</text></svg>">
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen">
<!-- 导航栏 -->
<header class="bg-white border-b border-gray-100 sticky top-0 z-50 shadow-sm">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<a href="./" class="flex items-center gap-2 text-2xl font-bold">
<span class="text-primary">📚</span>
<span>学习工坊合集</span>
</a>
<a href="https://github.com/CoderLambert/learning-workshops" target="_blank" class="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
<i class="fa fa-github text-lg"></i>
<span class="hidden sm:inline">GitHub</span>
</a>
</div>
</header>
<!-- Hero区域 -->
<section class="py-16 md:py-24 text-center">
<div class="container mx-auto px-4">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6">
<span class="bg-gradient-to-r from-primary to-secondary text-gradient">一站式前端技术学习</span>
</h1>
<p class="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto mb-8">
系统整理主流前端技术栈知识点，提供渐进式学习、闪卡复习、进度跟踪功能，助你高效掌握前端技术
</p>
<div class="flex flex-wrap gap-4 justify-center">
<a href="#sites" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-semibold rounded-lg shadow-lg shadow-primary/20 card-hover">
浏览学习站点
</a>
<a href="https://github.com/CoderLambert/learning-workshops" target="_blank" class="px-6 py-3 bg-white hover:bg-gray-50 text-gray-800 font-semibold rounded-lg border border-gray-200 shadow-sm card-hover">
Star收藏仓库
</a>
</div>
</div>
</section>
<!-- 站点列表 -->
<section id="sites" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center">🎯 全部学习站点</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
<!-- 家常菜学习工坊站点 -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-xl p-6 card-hover">
<div class="w-14 h-14 bg-orange-50 rounded-lg flex items-center justify-center mb-4">
<span class="text-2xl">🍳</span>
</div>
<h3 class="text-xl font-bold mb-2">家常菜学习工坊</h3>
<p class="text-gray-600 mb-6 leading-relaxed">
从零开始学做菜，包含基础技巧、家常菜谱、菜系做法、烘焙入门，新手也能轻松变大厨
</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-2.5 py-1 bg-orange-50 text-orange-700 text-xs font-semibold rounded-full">菜谱</span>
<span class="px-2.5 py-1 bg-orange-50 text-orange-700 text-xs font-semibold rounded-full">烹饪</span>
<span class="px-2.5 py-1 bg-orange-50 text-orange-700 text-xs font-semibold rounded-full">家常菜</span>
</div>
<a href="./cooking-workshop/" class="inline-flex items-center gap-2 text-orange-600 font-semibold hover:gap-3 transition-all">
立即学习
<i class="fa fa-arrow-right"></i>
</a>
</div>
<!-- TypeScript站点 -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-xl p-6 card-hover">
<div class="w-14 h-14 bg-blue-50 rounded-lg flex items-center justify-center mb-4">
<span class="text-2xl">📘</span>
</div>
<h3 class="text-xl font-bold mb-2">TypeScript 学习工坊</h3>
<p class="text-gray-600 mb-6 leading-relaxed">
系统学习TypeScript最新版本(5.5+)核心特性、类型系统、高级用法和最佳实践，提升代码质量和开发效率
</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-2.5 py-1 bg-blue-50 text-blue-700 text-xs font-semibold rounded-full">TypeScript</span>
<span class="px-2.5 py-1 bg-blue-50 text-blue-700 text-xs font-semibold rounded-full">类型系统</span>
<span class="px-2.5 py-1 bg-blue-50 text-blue-700 text-xs font-semibold rounded-full">最新版本</span>
</div>
<a href="./typescript-workshop/" class="inline-flex items-center gap-2 text-blue-600 font-semibold hover:gap-3 transition-all">
立即学习
<i class="fa fa-arrow-right"></i>
</a>
</div>
<!-- Claude Code站点 -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-xl p-6 card-hover">
<div class="w-14 h-14 bg-purple-50 rounded-lg flex items-center justify-center mb-4">
<span class="text-2xl">🤖</span>
</div>
<h3 class="text-xl font-bold mb-2">Claude Code 学习工坊</h3>
<p class="text-gray-600 mb-6 leading-relaxed">
系统学习Claude Code AI代码助手，包含10个核心知识点、使用技巧、最佳实践，助你提升10倍开发效率
</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-2.5 py-1 bg-purple-50 text-purple-700 text-xs font-semibold rounded-full">AI编程</span>
<span class="px-2.5 py-1 bg-purple-50 text-purple-700 text-xs font-semibold rounded-full">Claude</span>
<span class="px-2.5 py-1 bg-purple-50 text-purple-700 text-xs font-semibold rounded-full">开发效率</span>
</div>
<a href="./claude-code-workshop/" class="inline-flex items-center gap-2 text-purple-600 font-semibold hover:gap-3 transition-all">
立即学习
<i class="fa fa-arrow-right"></i>
</a>
</div>
<!-- TailwindCSS站点 -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-xl p-6 card-hover">
<div class="w-14 h-14 bg-blue-50 rounded-lg flex items-center justify-center mb-4">
<span class="text-2xl">🎨</span>
</div>
<h3 class="text-xl font-bold mb-2">TailwindCSS v4 学习工坊</h3>
<p class="text-gray-600 mb-6 leading-relaxed">
系统学习TailwindCSS v4最新特性，包含30个核心知识点、示例代码、测试题，支持闪卡复习和本地进度跟踪
</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-2.5 py-1 bg-blue-50 text-blue-700 text-xs font-semibold rounded-full">CSS</span>
<span class="px-2.5 py-1 bg-blue-50 text-blue-700 text-xs font-semibold rounded-full">原子化CSS</span>
<span class="px-2.5 py-1 bg-blue-50 text-blue-700 text-xs font-semibold rounded-full">v4新特性</span>
</div>
<a href="./tailwindcss4-workshop/" class="inline-flex items-center gap-2 text-primary font-semibold hover:text-primary/80">
开始学习 <i class="fa fa-arrow-right"></i>
</a>
</div>
<!-- Next.js站点 -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-xl p-6 card-hover">
<div class="w-14 h-14 bg-purple-50 rounded-lg flex items-center justify-center mb-4">
<span class="text-2xl">▲</span>
</div>
<h3 class="text-xl font-bold mb-2">Next.js 学习站点</h3>
<p class="text-gray-600 mb-6 leading-relaxed">
全栈React框架Next.js系统学习，包含App Router、服务端组件、数据请求、部署等完整知识点，渐进式学习
</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-2.5 py-1 bg-purple-50 text-purple-700 text-xs font-semibold rounded-full">React</span>
<span class="px-2.5 py-1 bg-purple-50 text-purple-700 text-xs font-semibold rounded-full">全栈框架</span>
<span class="px-2.5 py-1 bg-purple-50 text-purple-700 text-xs font-semibold rounded-full">App Router</span>
</div>
<a href="./nextjs-workshop/" class="inline-flex items-center gap-2 text-primary font-semibold hover:text-primary/80">
开始学习 <i class="fa fa-arrow-right"></i>
</a>
</div>
<!-- 前端性能优化站点 -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-xl p-6 card-hover">
<div class="w-14 h-14 bg-emerald-50 rounded-lg flex items-center justify-center mb-4">
<span class="text-2xl">⚡</span>
</div>
<h3 class="text-xl font-bold mb-2">前端性能优化学习工坊</h3>
<p class="text-gray-600 mb-6 leading-relaxed">
系统学习前端性能优化，包含18个核心知识点，覆盖Core Web Vitals指标、图片/JS/CSS优化、性能分析工具、缓存策略和实战案例
</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-2.5 py-1 bg-emerald-50 text-emerald-700 text-xs font-semibold rounded-full">性能优化</span>
<span class="px-2.5 py-1 bg-emerald-50 text-emerald-700 text-xs font-semibold rounded-full">Core Web Vitals</span>
<span class="px-2.5 py-1 bg-emerald-50 text-emerald-700 text-xs font-semibold rounded-full">Lighthouse</span>
</div>
<a href="./frontend-performance-workshop/" class="inline-flex items-center gap-2 text-emerald-600 font-semibold hover:gap-3 transition-all">
立即学习
<i class="fa fa-arrow-right"></i>
</a>
</div>
<!-- React 18站点 -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-xl p-6 card-hover">
<div class="w-14 h-14 bg-sky-50 rounded-lg flex items-center justify-center mb-4">
<span class="text-2xl">⚛️</span>
</div>
<h3 class="text-xl font-bold mb-2">React 18+ 学习工坊</h3>
<p class="text-gray-600 mb-6 leading-relaxed">
系统学习React 18+，包含20个核心知识点，覆盖并发模式、Server Components、Next.js App Router、Hooks进阶、性能优化和最佳实践
</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-2.5 py-1 bg-sky-50 text-sky-700 text-xs font-semibold rounded-full">React 18</span>
<span class="px-2.5 py-1 bg-sky-50 text-sky-700 text-xs font-semibold rounded-full">Server Components</span>
<span class="px-2.5 py-1 bg-sky-50 text-sky-700 text-xs font-semibold rounded-full">App Router</span>
</div>
<a href="./react18-workshop/" class="inline-flex items-center gap-2 text-sky-600 font-semibold hover:gap-3 transition-all">
立即学习
<i class="fa fa-arrow-right"></i>
</a>
</div>
<!-- 现代CSS学习工坊站点 -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-xl p-6 card-hover">
<div class="w-14 h-14 bg-rose-50 rounded-lg flex items-center justify-center mb-4">
<span class="text-2xl">🎨</span>
</div>
<h3 class="text-xl font-bold mb-2">现代CSS学习工坊</h3>
<p class="text-gray-600 mb-6 leading-relaxed">
系统学习现代CSS核心特性，包含18个知识点，覆盖Flexbox、Grid、容器查询、:has()选择器、滚动驱动动画等前沿特性
</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-2.5 py-1 bg-rose-50 text-rose-700 text-xs font-semibold rounded-full">CSS</span>
<span class="px-2.5 py-1 bg-rose-50 text-rose-700 text-xs font-semibold rounded-full">容器查询</span>
<span class="px-2.5 py-1 bg-rose-50 text-rose-700 text-xs font-semibold rounded-full">:has()</span>
</div>
<a href="./modern-css-workshop/" class="inline-flex items-center gap-2 text-rose-600 font-semibold hover:gap-3 transition-all">
立即学习
<i class="fa fa-arrow-right"></i>
</a>
</div>
<!-- Vue 3学习工坊站点 -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-xl p-6 card-hover">
<div class="w-14 h-14 bg-emerald-50 rounded-lg flex items-center justify-center mb-4">
<span class="text-2xl">🌿</span>
</div>
<h3 class="text-xl font-bold mb-2">Vue 3 学习工坊</h3>
<p class="text-gray-600 mb-6 leading-relaxed">
系统学习 Vue 3 核心特性，包含 18 个知识点，覆盖组合式 API、响应式系统、组件通信、Vue Router、Pinia 状态管理等
</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-2.5 py-1 bg-emerald-50 text-emerald-700 text-xs font-semibold rounded-full">Vue 3</span>
<span class="px-2.5 py-1 bg-emerald-50 text-emerald-700 text-xs font-semibold rounded-full">Composition API</span>
<span class="px-2.5 py-1 bg-emerald-50 text-emerald-700 text-xs font-semibold rounded-full">Pinia</span>
</div>
<a href="./vue3-workshop/" class="inline-flex items-center gap-2 text-emerald-600 font-semibold hover:gap-3 transition-all">
立即学习
<i class="fa fa-arrow-right"></i>
</a>
</div>
<!-- 预留占位卡片 -->
<div class="bg-white border border-dashed border-gray-300 rounded-xl p-6 flex flex-col items-center justify-center text-center text-gray-400">
<div class="w-14 h-14 bg-gray-50 rounded-lg flex items-center justify-center mb-4">
<i class="fa fa-plus text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">更多站点筹备中</h3>
<p class="text-gray-500 mb-6">
SvelteKit、前端工程等更多技术栈学习站点即将上线，敬请期待
</p>
<a href="https://github.com/CoderLambert/learning-workshops" target="_blank" class="inline-flex items-center gap-2 text-gray-600 font-semibold hover:text-gray-800">
关注仓库动态 <i class="fa fa-star-o"></i>
</a>
</div>
</div>
</div>
</section>
<!-- 特性介绍 -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center">✨ 站点特性</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="text-center p-6">
<div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-graduation-cap text-2xl text-primary"></i>
</div>
<h3 class="text-xl font-bold mb-3">系统化学习</h3>
<p class="text-gray-600">
按知识点体系整理，从基础到进阶循序渐进，每个知识点都附带示例代码和测试题，学练结合
</p>
</div>
<div class="text-center p-6">
<div class="w-16 h-16 bg-purple-50 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-credit-card text-2xl text-secondary"></i>
</div>
<h3 class="text-xl font-bold mb-3">闪卡复习模式</h3>
<p class="text-gray-600">
闪卡记忆模式高效复习知识点，支持键盘快捷操作，利用间隔重复记忆法提升学习效率
</p>
</div>
<div class="text-center p-6">
<div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-line-chart text-2xl text-green-600"></i>
</div>
<h3 class="text-xl font-bold mb-3">进度本地跟踪</h3>
<p class="text-gray-600">
学习进度本地存储，自动记录已学知识点和掌握情况，支持多设备PWA离线访问
</p>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4 text-center">
<p class="mb-4 text-xl font-bold">📚 学习工坊合集</p>
<p class="text-gray-400 mb-6">
持续更新前端主流技术栈学习资源，助力开发者高效成长
</p>
<div class="flex justify-center gap-4 mb-6">
<a href="https://github.com/CoderLambert" target="_blank" class="text-gray-400 hover:text-white transition-colors text-xl">
<i class="fa fa-github"></i>
</a>
</div>
<p class="text-gray-500 text-sm">
© 2026 CoderLambert. 学习站点资源仅供学习使用，如有侵权请联系删除
</p>
</div>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink