网站

# 个人收藏夹

# 推荐

关注公众号[有趣研究社]，回复前端资源，获取前端学习资料 (opens new window)

# 文档

MDN (opens new window) | MDN-JS标准内置对象 (opens new window) Web技术权威文档
DevDocs (opens new window) Web 开发技术文档，非常不错的学习手册！
现代JavaScript教程 (opens new window) 以最新标准为基准的JS教程
ES5教程 (opens new window) 阮一峰的JS教程
ES6教程 (opens new window) 阮一峰的ES6教程
Bash 脚本教程 (opens new window) 阮一峰编写
ECMA (opens new window) ECMA官网
菜鸟教程 (opens new window) 涵盖多种语言的初级教程
腾讯云开发者手册 (opens new window)

# 社区

Github (opens new window) 程序员同性交友社区
掘金 (opens new window) 一个帮助开发者成长的社区
简书 (opens new window) 有很多频道的创作社区
思否 (opens new window) 解决技术问题的社区
stack overflow (opens new window) 同上，外网的
InfoQ (opens new window) 促进软件开发及相关领域知识与创新的传播
V2EX (opens new window) 创意工作者们的社区
鱼塘热榜 (opens new window) 划水网站，收集了很多网站，当天热门文章
码力全开资源库 (opens new window) 很全很强大，独立开发者/设计干货/优质利器/工具资源...

# 社区互动

# 技巧

Google 趋势 (opens new window) 查看某项技术或关键字的热度趋势，可用于分析某项技术的发展前景，或对比某两项技术的热度。
百度指数 (opens new window) 同上，但百度的数据仅限国内。

# 博客

阮一峰的网络日志 (opens new window)
samanthaming (opens new window) 对前端小知识点的总结，并为每个知识点制作精美的小卡片。

# 电子书

高教书苑 (opens new window) 高等教育出版社的书籍，包含多种学科。
SoBooks (opens new window) 免费的电子书资源网站
识典古籍 (opens new window) 古籍数字化平台

# 优秀文章

我做系统架构的一些原则 (opens new window) 作者对系统架构的方法论总结
灵活运用CSS开发技巧 (opens new window)
防御性CSS (opens new window)

# 视频

bilibili (opens new window) B站，上面很多免费教学视频
慕课网 (opens new window) 实战视频教程
妙味课堂 (opens new window) 比较系统的前端入门视频教程
中国大学MOOC (opens new window) 涵盖计算机、外语、心理学等专业免费课程
终身教育平台 (opens new window) 涵盖生活、兴趣、职场、技能、老年、学历等免费课程
egghead (opens new window) 质量还不错的短视频教程，外网

# Github

Repobeats (opens new window) 生成仓库的动态数据统计图

github 短域名服务 (opens new window)
shields (opens new window) 徽章图标
followers 全球排名 (opens new window)
star-history (opens new window) 展示一个项目 Stars 增长曲线

# 评论系统

giscus (opens new window) 由 GitHub Discussions (opens new window) 驱动的评论系统

# 前端小工具

Can I use (opens new window) 查看属性和方法的兼容性
30 seconds of code (opens new window) 收集了许多有用的代码小片段

# 代码编辑

codepen (opens new window) 在线代码编辑与演示
codesandbox (opens new window) 内嵌VSCode的在线IDE

# Emoji表情

emoji表情 (opens new window)
emoji表情备忘录 (opens new window)
根据文本匹配emoji (opens new window)
gitmoji (opens new window) 通过 emoji 表达 git 的操作内容

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

# 图片工具

tinypng图片压缩 (opens new window) 压缩png很有用
微图 (opens new window) 浏览器端图片压缩，不会上传图片到服务器
Squoosh (opens new window) 谷歌出品在线免费图片压缩工具（jpg、png等,压缩效果比tinypng稍好）
waifu2x (opens new window) 通过卷积网络放大图片
vectormagic (opens new window) 转换矢量图
vectorizer (opens new window) 真正的 png 转 svg 神器
在线AI图片处理 (opens new window) 黑白修复、无损放大、动漫化、铅笔画等。
remove (opens new window) AI抠图（抠背景）
magic eraser (opens new window) AI抠图（抠前景）
backgroundremover (opens new window) 又一个抠图的

# SVG

# 音视频工具

迅捷视频转换器 (opens new window) 在线转换各种视频格式
迅捷音频转换器 (opens new window) 在线转换各种音频格式
修剪音频 (opens new window) 在线修剪或剪切任何音频文件

# 思维导图

processon在线作图 (opens new window) 流程图、思维导图、原型图等
百度脑图 (opens new window) 思维导图
plectica 绘制知识图谱

# CSS

各种CSS生成器和JS代码片段 (opens new window)

CSS Tricks (opens new window) CSS技巧收集与演示
CSS生成器 (opens new window)
CSS渐变生成器 (opens new window)
CSS3-Box Shadow(阴影) (opens new window)
贝塞尔曲线生成器 (opens new window)
花纹背景生成器 (opens new window)
花纹背景-pattern.css (opens new window)
3D字体 (opens new window)
css-tricks (opens new window) css技巧文章
You-need-to-know-css (opens new window) CSS的各种DEMO，很全
animista (opens new window) CSS动画可视化工具，复制代码就能用
navnav (opens new window) 各种炫酷的CSS动画组件

# CDN加速

jsDelivr (opens new window) 国外的一家优秀的公共 CDN 服务提供商
unpkg (opens new window) cdn 服务

# 网站托管

vercel (opens new window) 好用的网站托管服务

# 正则

正则可视化 (opens new window)
iHateRegex (opens new window) 正则搜索，细节做得很好
正则迷你书 (opens new window) 学习正则的小手册

# 其他

Linux命令手册 (opens new window)
carbon代码图片生成器 (opens new window) 生成好看的代码图片

# 设计

创造师导航 (opens new window)
设计师网址导航 (opens new window)
remove (opens new window) AI抠图，抠图算法很厉害
Manypixels (opens new window) 插画
Undraw (opens new window) 插画
storytale (opens new window) 插画，种类丰富，包含3D插画
uimovement (opens new window) 能从这个网站找到不少动画交互的灵感
awwwards (opens new window)是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站
dribbble (opens new window) 经常能在上面找到很多有创意好看的 gif 或者图片
Bēhance (opens new window) dribbble 是设计师的微博，Bēhance 是设计师的博客
Logojoy (opens new window) 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。
brandmark (opens new window) 另一个在线制作 logo 网站
instant (opens new window) 又一个 logo 制作网站
namecheap (opens new window)又一个 logo 制作网站
logo-maker (opens new window) 又一个 logo 制作网站这个更简单点就是选模板之后微调
coolors (opens new window) 帮你在线配色的网站你能找到不少配色灵感
colorhunt (opens new window) 另一个配色网站
uigradients (opens new window) 渐变色网站
designcap (opens new window) 在线海报设计
Flat UI 色表 (opens new window) Flat UI 色表
0to255 (opens new window) 颜色梯度
Ikonate (opens new window) 提供免费的图标 icons
remixicon (opens new window) 又一个提供免费图标 icons
feather (opens new window) 免费的 icons
nord (opens new window) 北欧性冷淡风主题配色
Unsplash (opens new window) 提供免费的高清图片
Pexels (opens new window) 提供免费的高清图片
colorkitty (opens new window) 从你的图片中提取配色
design.youzan (opens new window) 有赞设计原则
iconfont (opens new window) 阿里巴巴矢量图标库
undraw (opens new window) 免费的矢量插画
icomoon (opens new window) 矢量图标库
cssicon (opens new window) 所有的 icon 都是纯 css 画的缺点：icon 不够多
CSS triangle generator (opens new window) 帮你快速用 css 做出三角形
clippy (opens new window) 在线帮你使用 css clip-path 做出各种形状的图形
Lorem Picsum (opens new window) 提供免费的占位图
Canva 可画 (opens new window) 生成插画、封面、海报、头像等
404页 (opens new window) 404页素材
collectui (opens new window) 按功能组件分类的设计图
smartmockups (opens new window) 产品模板生成工具

# 图库

uigradients (opens new window) 渐变色生成工具
freepik (opens new window) banner 图库
觅元素 (opens new window)一天免费下载十张 psd（免抠元素）
搞定设计 (opens new window) 可以抠图
vectorizer (opens new window) 真正的 png 转 svg 神器
站酷 (opens new window) 国内优秀的设计作品展示
花瓣 (opens new window)
虎克 (opens new window) ps 学习教程
beTheme (opens new window)
UI 中国 (opens new window)
wallhaven (opens new window) 壁纸网站-

# 3D

sketchfab (opens new window) 3D模型

# 交互

微交互 (opens new window) 里面收集了市面上很多很好的微交互例子值得学习
Little Big Details (opens new window) 同上，一个国外微交互汇集网站
cruip (opens new window) 登录页的各种页面设计，可以免费下载模板
Comixify (opens new window) 一个波兰团队做了非常好玩的工具，可以把视频自动转成漫画，上图是他们提供的 demo，效果很棒。
taiko-web (opens new window) 太鼓达人网页版只能说很 6

# 有趣

电脑恶搞 (opens new window) 收集了一些恶搞小网页，比如xp系统蓝屏、黑客界面等
neocities (opens new window) 上面托管了很多有趣的网站
奇趣网站收藏家 (opens new window) 收藏了很多有趣的网站
FC在线模拟器(小霸王游戏机) (opens new window) 童年回忆
帮你百度一下 (opens new window) 可以点我测试一下 (opens new window)-
国际版 (opens new window) 同帮我百度一下-点我测试一下 (opens new window)-
URL 地址播放 Emojis 动画 (opens new window) 在地址栏里面播放 emoji
Can't Unsee (opens new window) 强烈建议前端、客户端、UI 开发的同学玩下，检查一下自己对设计稿的敏感度怎么样
ggtalk (opens new window) 平时一直在听的一个技术博客
awesome-comment (opens new window) 里面收集了很多有趣的代码注释
text-img (opens new window) 都将图片转化为 ascii 用来写注释
ascii video (opens new window) 使用ascii编码生成视频动画
weird-fonts (opens new window) 将普通字母转化为特殊 unicode
snake (opens new window) 在地址栏里面玩贪吃蛇
zero-width-lib (opens new window) 利用零宽度字符实现隐形水印、加密信息分享、逃脱词匹配，很有创意
abbreviations (opens new window) 查看一个简写是什么意思的网站
magi (opens new window) ai 搜索神器，超屌
在线取名 (opens new window) 解决取名难问题，超多名字生成
像素画GIF (opens new window)
猫咪生成器 (opens new window)

# 生成器

卡通头像生成器 (opens new window) 上传真人头像生成卡通头像
artbreeder (opens new window) 动漫图生成真人图像
声音生成器 (opens new window) 生成下雨、咖啡厅、海浪、火车等声音，可几种声音合成
诺基亚短信图片生成器 (opens new window)
到账语音生成器 (opens new window) 支付宝到账1亿元

# 元宇宙

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

# 教程

npx (opens new window) 教你怎么合理的使用 npx
hacksplaining (opens new window) 网络安全学习网站
mobile-web-best-practice (opens new window) 移动 web 最佳实践

# 产品

Product Hunt (opens new window) 好产品推荐
产品大牛 (opens new window) 什么有很多完整的产品原型可以借鉴
磨刀 (opens new window) 快速出 ui 原型

# 实用

webden (opens new window) 在线网页编辑器，轻便快捷
browser-update (opens new window) 浏览器版本更新提示插件
typeform (opens new window) 一个国外的在线调查问卷网站
VideoFk (opens new window) VideoFk 视频在线解析下载
全历史 (opens new window) 历史内容聚合网站
UzerMe (opens new window) 云端办公工具
SoBooks (opens new window) 强大的电子书资源网站
稿定设计 (opens new window) 键式设计工具+智能抠图
大力盘 (opens new window) 百度网盘搜索
ENFI 下载器 (opens new window) 不限速下载器
来画视频 (opens new window) 像做 PPT 一样做短视频
Arkie 海报制作工具 (opens new window)
优品 PPT (opens new window)
比格 PPT (opens new window)
高清免费图片 (opens new window)
高清免费图片 2 (opens new window)
shapedivider (opens new window) 生成波浪分隔线
Notion (opens new window) 知识库、快速笔记、TaskList、日记、读书清单，各种类型，应有尽有

# Talk

peerigon-talks (opens new window) 收集了不少有意思的 talks

# 算法

leetcode (opens new window) 用 js 刷 leetcode

# nginx

nginx 可视化配置工具 (opens new window)

# 生活

Ventusky (opens new window) 风雨气温图

编辑

上次更新: 2025/11/29, 15:32:48

常用的前端轮子→