企业官网建设流程全解析

"前端开发者"这个称呼，听起来好像就是把设计稿切成页面，可真入了行你会发现，它包着的东西远比想象中多：要会写页面，还得懂浏览器兼容、性能优化、工程化配置、交互动效，偶尔还得处理后端同事甩过来的奇怪问题。我入行前三年一直觉得"巨佬"离自己很远，后来有一天整理浏览器书签，把自己日常高频访问的网站归了归档，才想明白一个道理：人和人的差距，很多时候不在于脑子里存了多少代码，而在于收藏夹里有多少靠谱的入口。

这篇就把我自己这几年真正高频使用、觉得值得放进收藏夹的41个网站按用途整理出来。我从画静态页面干到带项目、做性能优化，几乎每个阶段都用得上这41个网站里的某几个组合。不管你是刚入门、刚转行，还是干了几年感觉在原地踏步，都可以拿这个清单自查一遍：哪些已经在收藏夹里，哪些还很陌生。陌生不可怕，可怕的是根本不知道它的存在。

1. 文档与标准：最容易被忽视却最该打好的底子

很多新人喜欢在搜索引擎里找答案，搜出来的博客质量参差不齐，有的还是五六年前的写法，照着抄完发现浏览器根本不吃那套。我的经验是：遇到问题先查权威文档，比看十篇转载博客都强。文档类网站是我收藏夹里最早建立起来的一批。

1.1 MDN 和 Can I use：验证一个API能不能用的标准答案

MDN Web Docs（developer.mozilla.org）几乎是前端开发者最该刻进DNA的网站。它覆盖了HTML、CSS、JavaScript、Web API的全部官方文档，每个API都有语法说明、示例代码、浏览器兼容性表格，甚至还有polyfill建议。我查"这个API可以用于生产环境吗"这种问题时，第一个动作就是打开MDN对应的页面翻底部的兼容性表。很多实际的坑，比如某个API在iOS Safari的旧版本上有bug、某个CSS属性在Firefox里需要加前缀，MDN的兼容性表格里直接就有标注。

Can I use（caniuse.com）则是一个纯粹的"浏览器支持查询器"。它的数据源和MDN互补，界面更直观：输入一个特性名，它会按浏览器版本列出支持情况，还会给出全球使用率的统计。前端圈子里流行一句话："如果一个特性的Can I use全绿，你才能放心用；如果有红，要么加polyfill，要么换方案。"我实际做移动端项目时，使用率数据特别关键——比如某个API虽然IE不支持，但你的用户群根本不碰IE，那就不用为IE兜底。这个网站教会我的是：兼容性不是"全都要支持"，而是"你的用户需要什么就支持什么"。

1.2 JavaScript.info、TS 文档、TC39：搭建完整知识体系

JavaScript.info（javascript.info）是我见过的把JS语言特性讲得最透彻的免费电子书。它从变量、函数讲到原型、异步、模块化，每一个章节都有可运行的例子和练习题。跟很多教程不同，它讲的是"语言本身"而不是"某个框架怎么用"，所以不会过时。我当年系统刷了一遍之后，再看框架源码里的很多写法都通透了。

TypeScript 官方文档（typescriptlang.org）可能很多人觉得"不就是查类型语法嘛"，但真正把它读透的人不多。TypeScript 文档里的Handbook部分，尤其是"Type Manipulation"那一章，把泛型、条件类型、映射类型、模板字面量类型讲得极其细致。配合官方的"TypeScript Playground"，你可以一边写类型一边看编译后的JS代码，这是理解类型体操最好的方式。我自己写复杂业务组件时，很多类型定义都是从文档里的例子改出来的。

ECMAScript 规范（tc39.es/ecma262）是另一个容易被忽略的高价值入口。其实日常开发不需要通读规范，但API的准确行为、边界情况，只有规范说了算。我建议收藏TC39的Proposals页面，它列出了正在提案中的新特性以及阶段：Stage 0到Stage 4。看到某个语法在Stage 3，你就知道它可以用了但要加编译插件；看到Stage 4，说明已经定稿，下一版规范就会包含它。这个页面让我养成了"提前感知语言演进"的习惯，不至于每次新特性落地都一脸懵。

2. 在线编码与调试：十分钟从想法到可复现案例

写代码最怕什么？最怕别人问你"你这个bug能复现吗"，你支支吾吾说"在我电脑上是好的"。在线编码工具解决了这个问题：不需要本地环境，打开浏览器就能跑代码、分享链接、让别人直接看到现象。这类网站我平时用得非常勤。

2.1 六个在线工具的定位与真实体感

CodePen是最出名的前端Demo社区，尤其适合CSS效果、单页面小游戏、SVG动画这类"视觉展示型"代码。它的社区氛围特别好，首页全是世界各地开发者提交的酷炫效果，点进去能看到源码，是偷师CSS技巧的高频去处。我用它做过很多次"效果可行性验证"——比如一个复杂的布局方案，不确定行不行，先建个Pen验证再说，不污染项目。

CodeSandbox主打完整项目级别的在线开发体验。它能在浏览器里跑React、Vue、Angular等脚手架项目，支持npm依赖安装和自动部署。过去我和同事沟通一个复杂组件bug时，直接把整个项目上传到CodeSandbox，对方打开链接就能复现，效率比截图高十倍。它的缺点是项目一大就会卡，尤其是安装依赖的时候，内存占用比较感人。

StackBlitz同样是在线IDE，但体验比CodeSandbox顺滑不少。它基于WebContainers技术，把Node.js环境都搬到了浏览器里，秒开项目、秒装依赖。我用它写一些独立的小工具组件，或者验证Vite工程里的问题，体感非常接近本地VS Code。

JSFiddle是老牌在线工具了，界面朴素但很稳。它的定位是"快速验证一段JS逻辑"，不需要React/Vue这类框架，纯HTML/CSS/JS跑起来就行。遇到一个算法问题、一段正则、一次异步调用的结果不确定时，我习惯直接打开JSFiddle然后粘贴代码运行。

regex101是正则表达式调试神器。左边写正则，中间填测试文本，右边实时展示匹配结果、分组信息、甚至每个步骤的匹配过程。它还能生成多种语言的正则代码片段。我至今记得刚学正则时对着(?=)这种前瞻写法一头雾水，是regex101一步步展示了匹配过程，才彻底搞懂。

JSON格式化工具（json.cn）这个说实话不是技术含量多高的网站，但胜在实用：粘贴一串压缩过的JSON，它能帮你格式化、校验合法性、转义、压缩、甚至生成Go/Java等语言的结构体。我在联调接口时天天用，后端返回的JSON结构乱七八糟时，先丢进去格式化，再对着字段看。

2.2 我的日常调试流程：先小后大，能复现再说

这些工具用熟了之后，慢慢会形成一套个人工作流。我解决一个bug时通常分三步走：

1. 先最小化复现。把问题代码抽出来，去掉业务依赖和无关样式，放进CodePen或JSFiddle里，能稳定复现才说明问题被隔离了。
2. 再对照预期。打开MDN查API文档，对照自己的调用方式，看是不是参数用错了、返回值和预期不一致。
3. 最后问对人。复现链接准备好后，不管是发内部群还是去Stack Overflow提问，别人打开链接一目了然，不用猜来猜去。

这个流程看起来简单，但能帮你省掉大量来回沟通的成本。很多人提问为什么没回复？不是别人不想帮忙，是你连复现条件都没给清楚。

3. 设计与灵感：前端不只是写逻辑，更是做视觉载体

很多前端开发者忽视设计能力的积累，觉得那是UI设计师的事。但真到了实际工作中，你会发现：设计稿没标注的地方需要自己补，设计稿交付延迟时老板催着要页面，甚至小公司根本没有专职UI。这时候，会逛设计站点、能从优秀作品中提炼视觉规则的人，天然就多一层竞争力。

3.1 逛设计站不是在抄，是在学"为什么这么设计"

Dribbble（dribbble.com）是被前端圈称为"追波"的设计作品社区，大量UI设计师在上面发作品，包括界面设计、插画、动效、品牌设计。我逛Dribbble的习惯是带着问题去：比如"卡片式布局的阴影怎么打更高级""仪表盘数据页怎么排版更清爽"，搜到的不是答案，而是思路。真正落地时还要结合自己的业务场景调整。

Awwwards（awwwards.com）是专门评选优秀网站设计的平台，拿到Awwwards认证的站点通常交互、动效、视觉都极其出色。这个网站适合用来提升"整站审美"，看别人如何组织信息架构、如何安排页面节奏、如何让动效服务于内容而非炫技。我筹备项目视觉方案时会专门花时间逛Awwwards，把触动人心的页面存下来，总结它们共性的设计语言。

Behance（behance.net）是Adobe旗下的作品集社区，作品完整度更高，很多设计师会放完整的项目拆解，包括设计过程、情绪板、原型图。看这些过程文档对前端特别有帮助——你能理解一个界面是怎么从需求推导出来的，为什么这个按钮放在这里、为什么用这个间距体系，而不只是看到一个结果。

Land-book（land-book.com）是落地页灵感库，专门收录各种产品官网、营销页面。前端开发做官网首页、活动页时，land-book是很好的参考来源：看别人的首屏文案、视觉焦点、滚动叙事怎么设计，比自己闭门造车强太多。

Mobbin（mobbin.com）收录了大量移动端App的完整页面截图，按App名称、组件类型、页面类型分类。做H5活动页或者小程序页面时，我会先去Mobbin搜同类型App的页面设计，看看成熟的交互模式长什么样，尤其是表单页、个人中心页、列表页这些高频场景，基本上翻一遍就能找到灵感。

Godly（godly.website）是一个高质量的网页设计合集，收录标准比Awwwards接地气一些，每个作品都标注了使用的技术栈或者视觉特点。它是我快速找"现代网页设计趋势"的地方，比如Glassmorphism、大字号排版、复古像素风等等，Godly上的案例更新频率很高。

3.2 素材与配色：让页面有质感的速成路径

设计灵感之外，素材库也是前端生产力的一部分。Unsplash（unsplash.com）是我最常用的免费高清图库，图片质量极高，且基于CC0协议可免费商用。Pexels（pexels.com）同样提供免费图片和视频素材，我偶尔做视频背景时去上面搜素材。这两个站点的共同点是搜索质量高、图片尺寸大、授权清晰，商用不担心被告。

IconFont（iconfont.cn）是阿里出的矢量图标库，是我管理小图标的首选。它支持图标搜索、批量下载SVG、直接生成字体图标文件，还能建立自己的项目库方便团队共享。Font Awesome（fontawesome.com）是老牌图标字体库，胜在覆盖面广，需要一些通用图标时直接引它的CDN就能用。

Google Fonts（fonts.google.com）是字体选择神器，支持预览、对比、生成嵌入代码，并且自动按需子集化加载字体，不用自己处理字体格式转换。国内用户如果网络环境受限，可以用本地静态资源的方式引入字体文件，处理方式其实很简单，有兴趣的可以搜一下字体子集化的原理。

Coolors（coolors.co）是配色方案生成器，我每次拿不定配色时的救场工具。它能一键生成一套协调配色，还能锁定某个主色再去探索搭配。做项目给客户选色时，我经常先出几套Coolors配色方案让客户挑，比纯靠嘴说"这个红色更好看"高效得多。

4. 动效与交互库：让页面"活"起来之前先想清楚

动效是前端进阶的重要方向，但也是最容易翻车的地方。动效做得太花哨，用户操作路径变复杂；做得太生硬，又显得页面死板。我在项目里沉淀下来一套动效选型的思路，配合几个常用的动效库，基本能覆盖大多数业务场景。

4.1 五个武器库各自的适用战场

GSAP（greensock.com/gsap）是我心中JS动效库的首选。它最强大的地方是时间线控制：你可以把多个元素的动画编排在一个时间线上，精确控制先后顺序、重叠、缓动。GSAP的生态也很全，ScrollTrigger、SplitText、MorphSVG这些插件解决了滚动动效、文字逐字出现、SVG形变等高频需求。它的性能在复杂动效下依然很稳，不像某些库一跑就掉帧。

Three.js（threejs.org）是WebGL三维框架，适合做3D场景、粒子效果、产品展示这类沉浸式体验。我自己不常做3D，但需要处理全景看房、3D商品展示时，Three.js是绕不开的选择。它官网的示例库本身就是最好的学习资料，几乎每个示例都带有代码面板，可以直接改参数观察效果。

Swiper（swiperjs.com）是最常用的移动端滑动库。它的优势在于对移动端手势的兼容处理非常成熟——惯性滚动、多指缩放、循环播放、自动轮播都是做好的，直接调参就行。我做移动端H5轮播图从来不会自己写手势逻辑，一律用Swiper，省时省心还稳。

Animate.css（animate.style）是一个纯CSS的预置动画库，通过给元素加上对应的class就能实现淡入、弹跳、翻转、旋转等几十种动画。它的价值在于"快速见效"：做活动页急着上效果时，先套用Animate.css看个大概，后续有需要再改自定义动画。

Hover.css（ianlunn.github.io/Hover）收录了大量hover悬停效果，从图标抖动到按钮渐变，都封装成了现成的CSS类。我一般在写通用组件、做按钮样式统一时参考它的实现，挑几个合适的效果微调后直接融入项目。它不是必需的库，但作为灵感源和实现参考很值得收藏。

4.2 我的动效实现顺序：样式在前，性能兜底

做动效我给自己定了三条铁律：第一，能用CSS完成的效果，绝不用JS库。第二，用库之前先想清楚交互目的，动效是辅助理解、引导注意力的，不是装饰。第三，性能优先，优先使用transform和opacity这类不触发重排的属性，实在复杂的动效才考虑上GSAP这类库。

举个实际场景：做一个列表项的淡入出场效果，最简单的方案是给每个子项加transition配合延时实现，完全不需要引入任何库。只有当出现"滚动到某个区域再触发一系列交互动画""多个元素组成复杂时间线编排"时，我才会把GSAP请出来。这样项目体积小，页面流畅，代码也容易维护。

5. 性能与兼容性：上线的最后一公里

页面做出来只是第一步，真正上线后用户访问卡不卡、功能崩不崩，才是考验前端功力的地方。这一块必须靠工具量化，不能靠感觉。

5.1 用数据说话：性能报告怎么读

PageSpeed Insights（pagespeed.web.dev）是Google提供的性能检测工具，输入URL就会给出移动端和桌面端的性能评分，涵盖FCP、LCP、CLS、INP等核心指标，还会直接给出优化建议。我做性能优化时，第一步永远是跑一次PageSpeed，把评分和诊断项截下来作为基准。

WebPageTest（webpagetest.org）比PageSpeed更专业，支持选择全球不同节点、模拟不同网络速度、设置设备类型，并提供完整的资源加载瀑布图。它能让你清楚地看到：哪个请求阻塞了渲染、哪个图片体积超了、哪个脚本执行时间太长。我遇到过明明用了懒加载但首屏依然很慢的情况，WebPageTest的瀑布图一看，发现是某个第三方统计脚本在首屏同步执行，换掉之后首屏直接快了一秒多。

这两个工具的定位不同：PageSpeed Insights适合日常快速体检，WebPageTest适合深度分析。我通常先跑PageSpeed拿到整体判断，再针对重点问题去WebPageTest上挖细节。对比下来，你会发现性能优化的核心思路其实很朴素：减少请求数、压缩资源体积、优化加载顺序、避免阻塞渲染。

5.2 兼容性测试：土办法和洋办法搭配

BrowserStack（browserstack.com）提供云端真机和浏览器测试服务，覆盖大量版本的Windows、macOS、iOS、Android设备组合。它的价值在于"在没有真机的情况下验证真实环境"：比如某个样式在旧版Chrome上变了形，我本地模拟不出来，就扔到BrowserStack上开一台对应版本的系统实测。

土办法也有土办法的用处。我现在开发时习惯Chrome、Firefox、Edge各开一个窗口做基本验证，再用DevTools的设备模拟调主要移动端尺寸。对于小改动，这些土办法就够用；只有涉及重要页面更新，或者用户反馈了某个具体设备的问题，才动用BrowserStack。毕竟云端真机是付费服务，不能随手乱开。

6. 学习进阶与面试：从"会做"到"懂为什么"

工作一两年后的瓶颈期，大多来自"会做但不理解为什么"。会调API、会写组件，但遇到没见过的场景就手足无措。这个阶段需要系统性的学习和刻意练习。

6.1 一份可持续的自学路线

roadmap.sh（roadmap.sh）是我逢人必推的学习路线图网站。它按前端、后端、DevOps、AI等方向画出了完整的技能树，标出每个阶段该学什么、学到什么程度。我每年年初都会对照前端路线图自查一遍：哪些技能点已经掌握，哪些还在补，哪些已经过时。它还提供交互式的to-do列表，可以记录进度，很适合做年度学习规划。

30 seconds of code（30secondsofcode.org）收录了大量短小精悍的代码片段，每个都配了清晰的解释和示例。它是碎片时间学习神器：刷完一个数组去重，理解了隐藏在代码背后的原理；刷完一个防抖节流，再也不会用错地方。它的分门别类做得也好，按JavaScript、CSS、React、Python等区分，方便按需查阅。

You Don't Know JS（github.com/getify/You-Dont-Know-JS）是Kyle Simpson写的一套开源JS丛书。它对闭包、this、原型链、异步与性能的讲解，是我见过最透彻的。当时我一口气读完《作用域与闭包》和《this与对象原型》，很多之前"好像懂了但又说不清"的概念彻底通了。这套书在GitHub上开源免费阅读，网上也有中文翻译版，不过建议有条件还是啃原版，原版的表达更精准。

6.2 面试刷题的姿势与前端转后端的路径

LeetCode（leetcode.com）是算法刷题平台，大厂面试绕不开。我的建议是别盲目追求题量，按专题刷更有效：数组、链表、树、动态规划、回溯，把每个专题的基础题刷透，比漫无目的地刷一百道混个眼熟强。我在准备跳槽面试时，每天固定刷三道题，并且坚持写解题思路（哪怕只是简单注释），效果比光看不练好太多。

张鑫旭的博客（zhangxinxu.com）是国产CSS领域的质量标杆。张鑫旭老师写文章特别接地气，每个CSS属性、每个布局技巧都追根溯源，还配大量动图演示。我做CSS遇到样式问题时的第一反应就是去搜他的博客，基本上都能找到温和而详尽的解释。他的站点文章已经积累了几百篇，精华区的"CSS世界"系列值得反复读。

阮一峰的网络日志（ruanyifeng.com）不只是技术教程，更是一个持续更新的科技视野窗口。他写的ES6教程是国内很多人入门JS的起点，他的每周科技周刊则汇总了本周值得读的科技文章、工具和观点。我每周五固定刷一篇周刊，用它保持对行业动态的敏感度。

这几年经常看到有人讨论"前端开发者该不该学后端"，我自己也经历过这个阶段。我的看法是：不用急着二选一，先把前端技能夯实，再顺着自己的业务需要往上游延伸。如果你选的是Java方向，完全可以参考roadmap.sh上的后端路线图，从Java基础语法、Spring Boot框架、MySQL、Redis这些模块按顺序推进。前端转后端最大的优势不是技术起点，而是你早就有了一套"找资料、看文档、提问题、快速验证"的方法论。本书单里的在线工具和社区资源，放到Java学习里照样是利器。

7. 社区与问答：问问题也是一门手艺

技术人不可能一个人闭门造车，学会高效提问、高效获取信息，是职业发展的重要能力。高质量的社区和问答平台，能帮你省下大量自己摸索的时间。

7.1 提问前先做三件事

Stack Overflow（stackoverflow.com）是所有程序员的老朋友，但很多人不会用。它的核心规则是"提问前先搜"：同一个问题大概率已经被问过无数遍了，搜到了就直接看答案，搜不到再发新问题。发问题时，记得提供最小的复现代码、完整的报错信息、已经尝试过的方案，这三样缺一不可。我每次提问都按这个格式准备，回复率和回复质量明显高很多。

GitHub（github.com）不只是代码托管平台，还是一个巨大的学习资源库。你可以通过阅读知名项目的源码学习工程化写法，通过Issues了解一个库的已知问题和设计取舍，通过Discussions参与技术讨论。遇到一个库的用法问题，我先去Issues里搜，很多文档没写清楚的边界情况在Issues里都有讨论。学会用GitHub的搜索语法（比如限定仓库名、路径、时间范围）也是前端进阶的一项硬技能。

7.2 高质量信息源怎么挑

Hacker News（news.ycombinator.com）是国外极客圈的核心信息源，每天的热榜技术话题质量很高。它不像社交媒体那样充斥着情绪化内容，讨论氛围理性、信息密度大。我习惯每天花十分钟扫一眼排行，里面经常能看到关于新技术、新工具、新理念的深度讨论，是对中文技术社区内容的一个补充。

DEV Community（dev.to）是一个氛围友好的开发者博客社区，很多一线开发者在上面分享实战经验。它的文章质量比一般的技术号高不少，因为作者大多是真在做项目的工程师。我收藏了不少"我在生产环境遇到的坑""这个库的内部原理"类的文章，都是教科书里不会写但实际很有用的知识。

顺手整理一个收藏夹也是能力

从收藏夹里挑出这41个网站的过程，等于是把过去几年的工作习惯翻了一遍。真要说"因为有这些网站就成了巨佬"，那是玩笑话，但这些网站确实在无数个关键时刻帮我快速定位了问题、补齐了盲区。比收藏更重要的是使用：收藏了但从来不用，它们就只是几个URL而已。

最后分享一个小技巧：我每周末都会花半小时翻一下本周收藏的网页，能用得上立刻试用，用不上就删掉。收藏夹从几百条精简到几十条之后，效率反而高了很多。信息爆炸的时代，筛选信息的能力比囤积信息重要一百倍。希望这份清单能帮你少走几步弯路，也欢迎你在实践后回来交流，看看哪几个网站对你帮助最大。