设计灵感
国际知名的网页设计评奖平台,获奖作品适合每天逛着培养审美
玻璃温室 · 前端学习导航
让好网站在这里向阳生长
按用途分类的优秀前端网站,每站配中英双语说明和结构化详情。逛一逛,审美就慢慢长出来了。
分类
标签
设计灵感
设计灵感
30 种设计风格的完整提示词库:看中哪种风格,复制对应提示词直接喂给 AI
设计灵感
全球设计师作品社区,找 UI 视觉灵感的主流去处
设计灵感
精选落地页设计画廊,做营销页前先来这里看
设计灵感
真实 App 界面截图库,移动端设计的实用参考(以 iOS 为主)
设计灵感
每日精选的设计灵感聚合:网页、品牌、动效、3D 等十余个门类一网打尽
设计灵感
老牌优秀网站展示馆,按行业/风格/主题筛选
交互动效参考
交互动效参考
前端代码游乐场,动效小样和实验的集中地
交互动效参考
创意网页交互教程老牌站点,demo 完成度高
交互动效参考
缓动函数可视化对照表,调动画“手感”的基础工具(有中文版)
交互动效参考
业界标准 JS 动画库,官网 showcase 本身就是动效灵感库
交互动效参考
Lottie 动画资源库与工具站,找现成轻量矢量动效的主要去处
交互动效参考
状态驱动的交互动画平台,做可交互角色和微动效
教程学习
教程学习
CSS 技巧老牌博客,广泛引用的 Flex/Grid 完全指南出自这里
教程学习
免费编程学习平台,边做项目边学,修完主线可拿免费认证
教程学习
拿真实设计稿练前端还原的挑战平台,练手和攒作品集都合适
教程学习
《现代 JavaScript 教程》,从入门到进阶的系统性免费教材(有中文版)
教程学习
精品前端博客,CSS 和动效教程讲得又深又有趣
教程学习
中文技术社区,前端内容和国内技术动态的重要来源
教程学习
前端设计模式与渲染策略的现代化指南
教程学习
Google 出品的 Web 开发最佳实践,性能与体验课程都在这
文档与工具
文档与工具
浏览器兼容性查询工具,写前先查省掉返工
文档与工具
配色方案生成器,按一下出整套配色
文档与工具
免费网络字体库,中文/西文字体一站取用
文档与工具
开源图标库,线性风格干净利落,适合做项目图标
文档与工具
Web 技术权威文档,查 HTML/CSS/JS 标准先来这里(有中文)
文档与工具
React 官方文档,教程和实践指南质量很高(有中文版)
文档与工具
正则表达式在线调试器,实时解释匹配过程
文档与工具
水墨风的 React 组件库:让界面长出水墨气质的开源设计系统
文档与工具
原子化 CSS 框架官方站,文档本身就是设计系统教科书
文档与工具
TypeScript 官网,手册和在线 Playground 都在这
文档与工具
新一代前端构建工具官网,本项目就基于它
推荐一个站点
知道值得收录的前端网站?填个名字和网址告诉我们。
点击提交会在 GitHub 打开推荐页(需 GitHub 账号);提交后由人工审核,收录前会撰写中英双语介绍。
常见问题
这是什么站?
一个精选前端网站导航:按用途分成设计灵感、交互动效、教程学习、文档与工具四类,每站配有中英双语说明和结构化详情页,帮你快速找到值得逛的好站点。
收录标准是什么?
宁缺毋滥:只收人工精选过的优秀站点,优先看内容质量、更新频率和对前端学习者的实际价值,不追求大而全。
怎么推荐站点?
用页面底部的推荐表单(或在 GitHub 直接开 issue):点击提交会跳转到 GitHub 完成推荐,提交后由人工审核,通过后会撰写中英双语介绍再上线。
为什么中英双语?
站点说明同时写中英两语:既方便自己双语检索,也让不同语言的访客都能读懂每站是做什么的——自用和公开是同一套标准。
分类是怎么划分的?
按用途分四类:设计灵感(找视觉参考)、交互动效(看效果怎么实现)、教程学习(系统提升)、文档与工具(日常查证提效);每个站点归入其最主要的用途。
内容怎么更新?
全站由数据文件驱动:增改站点后重新构建即可生效,列表与详情页随数据一并更新,无需逐页手改。
关于本站
前端学习导航站是一份持续维护的前端学习导航与精选策展:按用途组织优秀网站,让你在对的场景找到对的参考,逛一逛,审美就慢慢长出来。
每个站点都配中英双语说明与结构化详情页(是什么、怎么用、核心特点),跨语言检索和阅读都不迷路。
全站由数据文件驱动静态生成,每个收录站点都有独立的详情页,共同形成一套可被检索的前端网站详情页矩阵。