网页基础
让结构、样式和浏览器行为形成完整心智模型。
- HTML 与可访问性
- CSS 布局与响应式
- JavaScript 基础
学习方向
前端开发
从语义化页面与交互基础出发，做出快速、易用、能上线的产品界面。
技能地图
从基础到真实交付
工程能力
用类型、组件和数据流维护复杂界面。
- TypeScript
- React 与状态管理
- 请求、缓存与错误状态
产品质量
不仅做出来，还要在真实设备上好用。
- 性能与 Core Web Vitals
- 测试与调试
- 设计系统
交付与作品集
把需求、实现与迭代过程讲清楚。
- 部署与域名
- 项目叙事
- 开源 issue 与 PR
把技能用起来
推荐学习与实践条目
查看本方向全部机会 →开源项目前端入门可直接上手
非模块 jsx 文件的错误/无帮助的错误消息
非模块、脚本、jsx、jsxImportSource - 在我尝试的每个版本中都是这种行为，我已经查看了 FAQ 中关于 jsx 的条目，我确实安装了那个包。错误消息应该给出真正的问题，即脚本不能导入模块。变通方法：export {}
microsoft/TypeScript约 4 小时
竞赛人工智能 · 前端 · 后端进阶截止 2026年10月15日
2026 AIC「AI+开源」算法主题赛
面向全球在校大学生，使用开源软件、模型或数据开发可运行的 AI 应用、开发工具，或形成可核验的开源贡献。
全球校园人工智能算法精英大赛全国组委会¥500.00全球
开源项目前端进阶
Astro
内容站点框架，社区对新贡献者的响应速度在前端项目里属于快的。
Astro约 2 小时typescript
开源项目前端进阶
Excalidraw
手绘风白板，改动效果肉眼可见，适合第一次体会「我的代码上线了」。
Excalidraw约 2 小时reacttypescript
开源项目前端进阶
MUI
React 组件库，长期维护一批标注清楚的 good first issue。
MUI约 2 小时reacttypescript
开源项目前端进阶
Next.js
React 全栈框架官方仓库，适合从文档、测试和 Good First Issue 开始参与。
Vercel约 2 小时reacttypescript
开源项目前端进阶
React
React 官方仓库，可通过文档、测试用例和问题讨论理解现代 UI 运行机制。
Meta约 2 小时javascriptreact
开源项目前端进阶
Storybook
组件开发与文档工具，任务颗粒度小，适合把「跑通本地开发环境」这一关先过掉。
Storybook约 2 小时typescript