个人收藏夹

推荐

• panjiachen by 花裤衩

• 编程导航 by 程序员鱼皮

• 编程自学之路 by 程序羊

• 前端知识图谱+B站资源整合 by 技术胖

• 大圣编程自学网 by 大圣

• 开发者武器库

• 工具大全

文档

• MDN | MDN-JS标准内置对象 Web技术权威文档

• DevDocs Web 开发技术文档，非常不错的学习手册！

• 现代JavaScript教程 以最新标准为基准的JS教程

• ES5教程 阮一峰的JS教程

• ES6教程 阮一峰的ES6教程

• Bash 脚本教程 阮一峰编写

• ECMA ECMA官网

• 菜鸟教程 涵盖多种语言的初级教程

• 腾讯云开发者手册

社区

• Github 程序员同性交友社区

• 掘金 一个帮助开发者成长的社区

• 简书 有很多频道的创作社区

• 思否 解决技术问题的社区

• stack overflow 同上，外网的

• InfoQ 促进软件开发及相关领域知识与创新的传播

• V2EX 创意工作者们的社区

• 鱼塘热榜 划水网站，收集了很多网站，当天热门文章

• 码力全开资源库 很全很强大，独立开发者/设计干货/优质利器/工具资源...

社区互动

• gitter

• 兔小巢

技巧

• Google 趋势 查看某项技术或关键字的热度趋势，可用于分析某项技术的发展前景，或对比某两项技术的热度。

• 百度指数 同上，但百度的数据仅限国内。

博客

• 阮一峰的网络日志

• samanthaming 对前端小知识点的总结，并为每个知识点制作精美的小卡片。

电子书

• 高教书苑 高等教育出版社的书籍，包含多种学科。 <!-- * [前端电子书收集](http://www.yuanchengcheng.vip/books) -->

• SoBooks 免费的电子书资源网站

• 识典古籍 古籍数字化平台

优秀文章

• 我做系统架构的一些原则 作者对系统架构的方法论总结

• 灵活运用CSS开发技巧

• 防御性CSS

视频

• bilibili B站，上面很多免费教学视频

• 慕课网 实战视频教程

• 妙味课堂 比较系统的前端入门视频教程

• 中国大学MOOC 涵盖计算机、外语、心理学等专业免费课程

• 终身教育平台 涵盖生活、兴趣、职场、技能、老年、学历等免费课程

• egghead 质量还不错的短视频教程，外网

Github

• Repobeats 生成仓库的动态数据统计图

• github 短域名服务

• shields 徽章图标

• followers 全球排名

• star-history 展示一个项目 Stars 增长曲线

评论系统

• giscus 由 GitHub Discussions 驱动的评论系统

前端小工具

• Can I use 查看属性和方法的兼容性

• 30 seconds of code 收集了许多有用的代码小片段

代码编辑

• codepen 在线代码编辑与演示

• codesandbox 内嵌VSCode的在线IDE

Emoji表情

• emoji表情

• emoji表情备忘录

• 根据文本匹配emoji

• gitmoji 通过 emoji 表达 git 的操作内容

在任意输入框快速打开emoji表情方法： Windows系统下按Win + . Mac系统下按Control + Command + 空格

图片工具

• tinypng图片压缩 压缩png很有用

• 微图 浏览器端图片压缩，不会上传图片到服务器

• Squoosh 谷歌出品在线免费图片压缩工具（jpg、png等,压缩效果比tinypng稍好）

• waifu2x 通过卷积网络放大图片

• vectormagic 转换矢量图

• vectorizer 真正的 png 转 svg 神器

• 在线AI图片处理 黑白修复、无损放大、动漫化、铅笔画等。

• remove AI抠图（抠背景）

• magic eraser AI抠图（抠前景）

• backgroundremover 又一个抠图的

SVG

• svg编辑器-E2.Cool

• svg编辑器-i排版

音视频工具

• 迅捷视频转换器 在线转换各种视频格式

• 迅捷音频转换器 在线转换各种音频格式

• 修剪音频 在线修剪或剪切任何音频文件

思维导图

• processon在线作图 流程图、思维导图、原型图等

• 百度脑图 思维导图

• plectica 绘制知识图谱

CSS

• 各种CSS生成器和JS代码片段

• CSS Tricks CSS技巧收集与演示

• CSS生成器

• CSS渐变生成器

• CSS3-Box Shadow(阴影)

• 贝塞尔曲线生成器

• 花纹背景生成器

• 花纹背景-pattern.css

• 3D字体

• css-tricks css技巧文章

• You-need-to-know-css CSS的各种DEMO，很全

• animista CSS动画可视化工具，复制代码就能用

• navnav 各种炫酷的CSS动画组件

CDN加速

• jsDelivr 国外的一家优秀的公共 CDN 服务提供商

• unpkg cdn 服务

网站托管

• vercel 好用的网站托管服务

正则

• 正则可视化

• iHateRegex 正则搜索，细节做得很好

• 正则迷你书 学习正则的小手册

其他

• Linux命令手册

• carbon代码图片生成器 生成好看的代码图片

设计

• 创造师导航

• 设计师网址导航

• remove AI抠图，抠图算法很厉害

• Manypixels 插画

• Undraw 插画

• storytale 插画，种类丰富，包含3D插画

• uimovement 能从这个网站找到不少动画交互的灵感

• awwwards是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站

• dribbble 经常能在上面找到很多有创意好看的 gif 或者图片

• Bēhance dribbble 是设计师的微博，Bēhance 是设计师的博客

• Logojoy 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。

• brandmark 另一个在线制作 logo 网站

• instant 又一个 logo 制作网站

• namecheap又一个 logo 制作网站

• logo-maker 又一个 logo 制作网站 这个更简单点 就是选模板之后微调

• coolors 帮你在线配色的网站 你能找到不少配色灵感

• colorhunt 另一个配色网站

• uigradients 渐变色网站

• designcap 在线海报设计

• Flat UI 色表 Flat UI 色表

• 0to255 颜色梯度

• Ikonate 提供免费的图标 icons

• remixicon 又一个提供免费图标 icons

• feather 免费的 icons

• nord 北欧性冷淡风主题配色

• Unsplash 提供免费的高清图片

• Pexels 提供免费的高清图片

• colorkitty 从你的图片中提取配色

• design.youzan 有赞设计原则

• iconfont 阿里巴巴矢量图标库

• undraw 免费的矢量插画

• icomoon 矢量图标库

• cssicon 所有的 icon 都是纯 css 画的 缺点：icon 不够多

• CSS triangle generator 帮你快速用 css 做出三角形

• clippy 在线帮你使用 css clip-path 做出各种形状的图形

• Lorem Picsum 提供免费的占位图

• Canva 可画 生成插画、封面、海报、头像等

• 404页 404页素材

• collectui 按功能组件分类的设计图

• smartmockups 产品模板生成工具

图库

• uigradients 渐变色生成工具

• freepik banner 图库

• 觅元素一天免费下载十张 psd（免抠元素）

• 搞定设计 可以抠图

• vectorizer 真正的 png 转 svg 神器

• 站酷 国内优秀的设计作品展示

• 花瓣

• 虎克 ps 学习教程

• beTheme

• UI 中国

• wallhaven 壁纸网站-

3D

• sketchfab 3D模型

交互

• 微交互 里面收集了市面上很多很好的微交互例子 值得学习

• Little Big Details 同上，一个国外微交互汇集网站

• cruip 登录页的各种页面设计，可以免费下载模板

• Comixify 一个波兰团队做了非常好玩的工具，可以把视频自动转成漫画，上图是他们提供的 demo，效果很棒。

• taiko-web 太鼓达人网页版 只能说很 6

有趣

• 电脑恶搞 收集了一些恶搞小网页，比如xp系统蓝屏、黑客界面等

• neocities 上面托管了很多有趣的网站

• 奇趣网站收藏家 收藏了很多有趣的网站

• FC在线模拟器(小霸王游戏机) 童年回忆

• 帮你百度一下 可以 点我测试一下-

• 国际版 同帮我百度一下-点我测试一下-

• URL 地址播放 Emojis 动画 在地址栏里面播放 emoji

• Can't Unsee 强烈建议前端、客户端、UI 开发的同学玩下，检查一下自己对设计稿的敏感度怎么样

• ggtalk 平时一直在听的一个技术博客

• awesome-comment 里面收集了很多有趣的代码注释

• text-img 都将图片转化为 ascii 用来写注释

• ascii video 使用ascii编码生成视频动画

• weird-fonts 将普通字母转化为 特殊 unicode

• snake 在地址栏里面玩贪吃蛇

• zero-width-lib 利用零宽度字符实现 隐形水印、加密信息分享、逃脱词匹配，很有创意

• abbreviations 查看一个简写是什么意思的网站

• magi ai 搜索神器，超屌

• 在线取名 解决取名难问题，超多名字生成

• 像素画GIF

• 猫咪生成器

生成器

• 卡通头像生成器 上传真人头像生成卡通头像

• artbreeder 动漫图生成真人图像

• 声音生成器 生成下雨、咖啡厅、海浪、火车等声音，可几种声音合成

• 诺基亚短信图片生成器

• 到账语音生成器 支付宝到账1亿元

元宇宙

符合元宇宙特征的几个网站，允许用户拥有虚拟土地，在上面构建自己的世界：

• 沙盒

• 梦境空间

• Decentraland

教程

• npx 教你怎么合理的使用 npx

• hacksplaining 网络安全学习网站

• mobile-web-best-practice 移动 web 最佳实践

产品

• Product Hunt 好产品推荐

• 产品大牛 什么有很多完整的产品原型可以借鉴

• 磨刀 快速出 ui 原型

实用

• webden 在线网页编辑器，轻便快捷

• browser-update 浏览器版本更新提示插件

• typeform 一个国外的在线调查问卷网站

• VideoFk VideoFk 视频在线解析下载

• 全历史 历史内容聚合网站

• UzerMe 云端办公工具

• SoBooks 强大的电子书资源网站

• 稿定设计 键式设计工具+智能抠图

• 大力盘 百度网盘搜索

• ENFI 下载器 不限速下载器

• 来画视频 像做 PPT 一样做短视频

• Arkie 海报制作工具

• 优品 PPT

• 比格 PPT

• 高清免费图片

• 高清免费图片 2

• shapedivider 生成波浪分隔线

• Notion 知识库、快速笔记、TaskList、日记、读书清单，各种类型，应有尽有

Talk

• peerigon-talks 收集了不少有意思的 talks

算法

• leetcode 用 js 刷 leetcode

nginx

• nginx 可视化配置工具

生活

• Ventusky 风雨气温图