记录一些在前端的开发和学习中，利用率很高并收入收藏夹中的网站。
❝「温馨提示」：部分英文网站可使用Chrome浏览器翻译；部分网站打不开需要自(ke)行(xue)解(shang)决(wang)；会持续更新；
❞
一、开发工具
❝人与动物的最大区别是制造和使用工具。
❞
1.文档
❝❞
文档是开发过程中必不可少的，下面的工具可以帮你快速的查阅文档。
1.1 「MDN web docs」
MDN web docs 是一个Mozilla公司出品的web文档，专门提供开放网络（Open Web）技术有关的信息，非常专业、全面、规范！
1.2 「DevDocs」
DevDocs 是一个开源项目，里面收录了大量文档，支持模糊匹配，并且可以离线查阅。更重要的是，DevDocs是拥有自定义界面的，这意味着你可以通过简单的设置，就得到一个专属的文档查阅工具。
1.3 「CanIUse」
CanIUse 是一个专门用来查浏览器兼容的网站，只需要输入想要查询的API或CSS名称，即可看到各浏览器各版本的兼容信息。
1.4 「30 seconds of code」
30 seconds of code 是一个GitHub的开源项目，收集了很多实用的代码段。最开始的时候只有js，随着项目贡献者的增多，现在已经支持很多。入选条件相当严格，所以代码片段的实用性和规范性都非常高，但需要一些英语功底才能流畅阅读。
1.5 「Dash」
Dash 是一款macOS端 API 文档浏览器和功能代码文档管理器，目前有超过200+的API可供下载，离线开发/出差开发必备神器。
2.布局
❝如今，
❞弹性布局(Flex Layout)浏览器兼容已经不再是一个问题，简单、方便、快速的弹性盒模型(Flexbox)和网格(Grid)搭配，前端布局不再有难题。
2.1 「A Complete Guide to Flexbox」
A Complete Guide to Flexbox 是一篇关于Flexbox的详尽教学（英文），图文并茂，清晰的解释了flex各属性的效果。
2.2 「flexboxfroggy」
flexboxfroggy 是一款用于学习Flexbox的青蛙小游戏，相信打通24关之后的你，面对flex布局的问题一定是手到擒来。
2.3 「Flexbox playground」
Flexbox playground 一个可以帮助你更好的理解Flexbox的相关知识点的网站，也可以用于调试各种flex布局。
2.4 「A Complete Guide to Grid」
A Complete Guide to Grid 是一篇关于Grid详尽教学（英文），图文并茂，清晰的解释了grid∂各属性的效果。
2.5 「grid-garden」
grid-garden是一款用来学习Grid的花园小游戏 ，和上面的青蛙小游戏是同一个团队出品。
2.6 「Grid Critters」
Grid Critters 一个是用来学习Grid在线游戏，将Grid的实现原理可视化的展现出来，不过实在是太贵了！但这里有一篇利用Grid Critters的可视化，总结出的Grid元素flow机制（英文），可以窥其一二。
「文章链接」
2.7 「Grid by Example」
Grid by Example 是一个Google程序媛Rachel Andrew写的Grid教程，罗列了非常多的Grid布局情况。
3.图标
❝前端开发过程中，图标是必不可少的。在弹性布局(Flex Layout)和响应式布局(Responsive layout)下的页面，图片会存在很多问题。因此，
❞矢量图标和svg变成为主流。
3.1 「Iconfont」
Iconfont 是一个阿里巴巴旗下的矢量图标库。
3.2 「Loading.io」
Loading.io 是一个可以在线制作动态svg图标的网站，虽然专业版的功能需要付费，但是动画属性和SVG图片很容易就可以被扒下来（前端没有秘密）。
3.3 「font-awesome」
font-awesome 是国外一款知名的图标库，专门为bootstrap设计。bootstrap在国外较火，因此font-awesome 有很大的用户群体。
4.图表
❝❞
数据可视化的核心便是图表。如今大数据时代，大屏展示、数据可视化的需求也越来越大。
4.1 「Echarts」
Echarts 是一个百度旗下的图表库，是国内图表类第三方库的老大，底层是canvas，提供了丰富的可视化图表。
4.2 「Datav.GeoAtlas」
Datav.GeoAtlas 是一个阿里云旗下的GIS数据平台，可以下载全国的GeoJSON格式数据（精确到县级）。
5.文本
❝前端处理文本，官方唯一指定神器——
❞正则表达式。
5.1 「Regexr」
Regex 是一个在线的学习、测试正则表达式的工具。
6.CSS
❝对CSS运用不熟练时，不妨实用
❞CSS自动生成工具，更加直观的理解CSS属性的效果。
6.1 「CSS3 Perspective Playground」
CSSPerspective透视效果 生成器
6.2 「animista」
CSS animate 动画效果 生成器
6.3 「CSS clip-path maker」
CSS clip-path 裁剪路径 生成器
6.4 「FANCY-BORDER-RADIUS」
CSS border-radius 边框圆角 生成器
6.5 「CSS triangle generator」
CSS triangle 三角形 生成器
6.6 「Make a smooth shadow」
CSS box-shadow 盒阴影 生成器
6.7 「CSS Grid Generator」
CSS Grid 生成器
6.8 「CSS3Preview」
CSS text-shadow 文本阴影、text-fill-stroke 文字填充、tranform 变换 生成器
6.9 「CSS3渐变背景代码生成工具」
CSS linear-gradient & radial-gradien 渐变 生成器
6.10 「CSS Sprites Generator」
精灵图 生成器
6.11 「easings」
Easing Funtion 缓动函数 生成器
6.12 「cubic-bezier」
cubic-bezier 贝塞尔曲线 生成器
7.命名
❝被名词难倒不知如何
❞翻译？不存在的
7.1 「codelf」
codelf 是一个变量名抓取网站，会在GitHub, Bitbucket, GitLab搜索正在使用的相关变量名，集思广益。
二、设计
❝设计，让你
❞与众不同。
1.页面
❝让人
❞眼前一亮的页面总是让人回味。以下网站会让你发现很多有趣的设计。
1.1 「CodePen」
codepen 是一个在线的前端代码编辑并运行的网站，支持前端现今的众多技术，并且有非常多的让人惊叹的前端作品。如果你是一名前端开发，请一定要来这里看看大佬的作品。
1.2 「Dribbble」
Dribbble 是一个面向创作家、艺术工作者、设计师等创意类作品的人群，提供作品在线交流的网站。这里可以发现世界顶端的设计师。
1.3 「CSS创意特效」
CSS创意特效 是@前端小智的csdn专栏，收集了一些有创意的css特效，可以得到一些灵感和启发。
2.颜色
❝色彩是设计的灵魂，也是美学的基础。以下网站可以帮你更好的
❞搭配颜色。
2.1 「picular」
picular 是一款色彩、颜色搜索引擎，通过不同的关键词，来寻找颜色。
2.2 「Flatuicolors」
Flatuicolors 是一个采集了扁平化设计中最受欢迎色彩的网站，支持一键取色。
2.3 「Colorsinspo」
Colorsinspo 是一个收集了色彩大神的作品的选色网站，帮助你更快理解配色知识。
3.素材
❝素材网站很多，但是版权不可侵。以下网站可以搜集到
❞免版税的素材。
3.1 「Depositphotos」
Depositphotos 是一个免版税照片库、矢量图片库和视频影像库。
3.2 「ecrettmusic」
ecrettmusic 是一款提供免版税歌曲的网站，是利用AI编曲的哦！
三、学习
❝❞
学习能力，才是程序员最核心的竞争力。
1.技术文章
❝文章的知识
❞密度大，学习效率高。
1.1 「掘金」
掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Medium。我爱掘金
1.2 「CSS-Tricks」
CSS-Tricks 是一个国外的优秀前端开发博客，主要分享使用CSS样式的技巧、经验和教程等。每日都会发一些质量极高文章（英文）。
2.博客
❝博客是程序员的标准配置，记录也是一种
❞成长。
2.1 「博客园」
博客园 是一个国内知名博客平台
2.2 「CSDN」
CSDN 是一个国内知名博客平台
2.3 「简书」
简书 是一个国内知名博客平台
2.4 「杨青青个人博客」
杨青青个人博客 是一个专注前端设计领域8年以上的女程序员的个人网站，其中优秀个人博客板块收录了非常多优秀的个人博客。
2.5 「阮一峰的网络日志」
阮一峰的网络日志 是阮大神的技术博客，有各种通俗易懂的教程和科技爱好者周刊。
2.6 「翁天信的博客」
翁天信的博客 是Homeschool（在家上学）的代表人物翁天信的博客，每年都会重新设计一次个人网站。从他的事迹可以汲取到很多动力。
3.提问
❝❞
面向搜索引擎编程是程序员的必经之路。
3.1 「Stackoverflow」
Stackoverflow 是一个万能的提问平台，只要问题问得对，都能找到答案！（英文）
3.2 「思否」
思否 是一款中文版的stackoverflow，但内容较少。
4.其他
❝只要想学，网络可以提供给你所有的
❞资源。
4.1 「GitHub」
GitHub 是全球最大的交友网站
4.2 「Web前端导航」
Web前端导航 是一个集合了市面知名的前端资源的导航网站。
4.3 「DoYouDo」
DoYouDo 是学习PS等一票设计软件的网站（非广告）
4.4 「Freecodecamp」
freeCodeCamp 是一个帮助你学习编程的开源社区，见名知意。网站准备了成千上万个编程关卡来帮助提升你的编程技能，通过以后还会有证书哦！
4.5 「Codesandbox」
CodeSandbox 是一个在线的代码编辑器，主要聚焦于创建 Web 应用项目。
4.6 「v2ex」
V2EX Way 2 EXplore 是一个关于分享和探索的地方，官方自称为一个”由设计师、程序员及有创意的人参与的社区“。
四、其他
❝收藏夹中的
❞其他类型的网站
1.自动化
❝❞
自动化最重要的一点是，全面。
1.1 「gitignore.io」
gitignore.io 是一个只能生成gitigonre文件的网站。
2.浏览器
❝用好
❞浏览器帮助开发也是一门学问
2.1 「Chrome Devtools 高级调试指南」
Chrome Devtools 高级调试指南 是一篇让你的开发速度加倍，学习高级Chrome调试技巧的文章。
2.2 「Chrome插件库」
Chrome插件库 是一个提供Chorme上热门的插件的网站。
3.面试
❝掘金的面经已经非常全面了，以下是国外的一些
❞面经项目。
3.1 「30 seconds of interviews」
30 seconds of interviews 是一个开源的，精选的常见Web开发面试问题集合，可帮助您为下一次面试做准备。（英文）
4.输出
❝总结
❞输出是整个学习的最后一环。
4.1 「ProcessOn」
ProcessOn 是一个在线协作绘制流程图的平台。
4.2 「Shields.io」
Shields.io 是一个生成项目首页各式各样的小徽章的网站。
4.3 「Canva」
Canva 是一个提供了海量的免费设计模板的在在线设计网站。
4.4 「创客贴」
创客贴 是一个极简好用的在线平面设计作图网站。
4.5 「mdnice」
mdnice 是一个开源的markdown编辑器，专门针对于于微信公众号文章排版而设计出来的在线工具。
4.6 「carbon」
Carbon 是一个免费的开源库，用于创建和分享源代码的美观图片。
写在后面
❝这份网站合集是工作之余收藏并归类的，集百家之言，有且并不局限于：同事的分享、大佬的文章、平日的闲逛、视频的一帧等。此外，大家有好用的网站也可以在评论区推荐哦～
❞
本文使用 mdnice 排版
