【Code with SOLO】用 SOLO 打造学习资源导航站，16个免费平台一站直达
摘要
平时收藏了大量学习网站，却总是找不到？用 TRAE SOLO 快速开发了一个「学习资源导航站」，精选 16 个国家级与国际知名免费学习平台，支持分类筛选和关键词搜索，让优质学习资源触手可及。
背景
我的角色：一名热爱学习的开发者
遇到的问题：
收藏夹里堆了几十个学习网站，想用的时候翻半天找不到
很多优质免费平台（如国家智慧教育平台）知道的人不多
朋友、同学经常问我"有什么好的免费学习网站推荐"
每次都要重复整理推荐列表，效率很低
我的目标：做一个美观实用的学习资源导航网站，把优质平台分类整理好，方便自己使用，也能分享给有需要的人。
实践过程
Phase 1：需求分析与内容整理（15分钟）
首先整理了 16 个精选平台的详细信息，按 4 大分类组织：
分类 平台数 代表平台
国家级平台 5 个 国家中小学智慧教育平台、国家高等教育智慧教育平台
国际平台 4 个 Khan Academy、Coursera、edX、MIT OCW
复习资料 3 个 中国大学MOOC、学堂在线、菁优网
学术研究 3 个 Google Scholar、知网、ResearchGate
关键 Prompt：
Plain Text
1
2
3
4
5
我：帮我设计一个学习资源导航网站，包含16个平台的信息，
按4个分类展示，需要支持分类筛选和搜索功能。
每个平台卡片要展示：名称、网址、特点、适用人群。
SOLO：[生成了完整的 HTML/CSS/JS 代码]
Phase 2：界面设计与开发（40分钟）
设计思路：
渐变 Hero 区域，展示核心数据（16个平台、4大分类、100%免费）
浮动搜索栏，支持实时搜索
分类筛选标签页（全部/国家级/国际/复习/学术）
卡片式布局，每个平台一张卡片
每个分类使用不同的主题色（红/蓝/绿/紫）
SOLO 帮我完成：
完整的 CSS 样式系统（CSS 变量 + 渐变 + 动画）
响应式布局（Grid + Flexbox）
卡片悬停动效
回到顶部按钮
Phase 3：交互功能开发（25分钟）
功能实现：
分类筛选：点击标签页切换分类，平滑过渡
实时搜索：支持按名称、特点、关键词、适用人群搜索
空状态处理：搜索无结果时显示友好提示
回到顶部：滚动超过 400px 自动显示
关键 Prompt：
Plain Text
1
2
3
4
5
6
7
我：帮我实现以下交互功能：
- 点击分类标签筛选对应平台的卡片
- 搜索框实时过滤，匹配平台名称、特点和适用人群
- 搜索无结果时显示空状态提示
- 滚动超过一定距离显示回到顶部按钮
SOLO：[生成了完整的 JavaScript 交互代码]
Phase 4：细节优化（10分钟）
调整卡片间距和圆角
添加平台徽章（
强烈推荐 / 
热门 / ✓免费）
优化移动端适配
添加数据属性支持关键词搜索
成果展示
网站功能
功能 说明
分类筛选 4 大分类一键切换
实时搜索 支持名称、特点、人群多维搜索
主题配色 每个分类独立配色方案
响应式 完美适配手机/平板/电脑
回到顶部 滚动自动显示
技术亮点
纯原生技术栈：HTML5 + CSS3 + Vanilla JS，零依赖零构建
CSS 变量系统：统一管理颜色、间距、阴影等设计令牌
渐变主题：每个分类使用独特的渐变配色
Grid 自适应布局：自动适配不同屏幕尺寸
代码统计
开发时间：约 1.5 小时
代码行数：约 610 行
文件数量：1 个 HTML 文件（内联 CSS + JS）
效果与总结
效率提升
任务 之前 现在
找学习网站 翻收藏夹 5 分钟 打开导航站 10 秒
推荐学习资源 每次重新整理 15 分钟 分享一个链接
发现新平台 靠偶然看到 一站浏览 16 个精选平台
SOLO 在开发中的作用
快速原型：一个 Prompt 就生成了完整的页面骨架
样式优化：帮我实现了专业的渐变配色和卡片设计
交互开发：搜索和筛选功能一次生成即可运行
响应式适配：自动处理了移动端布局
可复用的方法
内容先行：先把数据整理好（平台名称、网址、特点），再让 SOLO 生成界面
分步迭代：先出骨架 → 再加样式 → 最后加交互，每一步都验证
内联开发：单 HTML 文件包含所有代码，方便分享和部署
参赛信息
赛道：Code with SOLO
项目状态： 已完成，可直接打开使用
在线演示：打开 index.html 即可
致谢
感谢 TRAE 团队提供的 SOLO 挑战赛平台。SOLO 让我从"整理学习资源"的想法到"一个可分享的网站"，只用了不到 2 小时。这种效率在以前是不可想象的！
希望这个导航站能帮助更多人发现优质免费学习资源，让知识真正触手可及。
