从毕业到现在,我经常浏览的 20+ 牛逼的站点
Part1浓缩了这20+站点的前端滋补汤~干了 ❗ity 的站点助你一臂之力
1前言
看到很多小伙伴都把自己好用好玩的站点分享出来了,我也是一个收集工具站点的爱好者。
由于有一些比较常见的网站,很多人已经分享过了,下面都是我从收藏夹中几百个网站里筛选出的,我个人认为这些对前端非常有帮助的 20+站点,希望可以在你前行的道路上,对你有所帮助!
原创不易!点赞鼓励~🧡
2freeCodeCamp[1]
一直霸占着 gitHub 排名 No.1 的项目,足足有 329k 个 star!!! 我天~啥时候我开源项目能有它的零头 star~
有足足 500 多种教程,码住,自学妥妥的!
详情请戳 →:freeCodeCamp[2]
3JavaScript 周刊[3]
每个礼拜都会向你发送最新的 JavaScript 文章、新闻和酷项目的时事通讯,在网页中通过填写邮箱订阅,从此再也不怕掉队了~
有了它你就能实时了解到 JavaScript 最新的资讯以及最新的基本动向!
目前已经有 177401 订阅者 出到了 554 期[4]
详情请戳 →:JavaScript 周刊[5]
![](https://filescdn.proginn.com/d2ed3400a5c78c2abd839528721a3f47/134ed2e5d471831959db9820904d642a.webp)
4JavaScript Tips[6]
超多的 JavaScript 小技巧,我天~吃饭睡觉乘车上厕所的时间随便看两个,你的技术就会噌噌噌的上涨!
当然也可以提交你的小技巧到站点,非常有意思~
详情请戳 →:JavaScript Tips[7]
![](https://filescdn.proginn.com/e8f8314c7a6cd679694343b23712b176/b8196c7a99bde6fdabeae01f285b4f18.webp)
5JavaScript 一行代码[8]
你的代码够简洁嘛?想知道更多的代码简洁技巧嘛?快看这里!
目前已经收集了 286 个 JavaScript 一行代码,助你写出更劲道的 JavaScript 代码!
详情请戳 →:JavaScript 一行代码[9]
630SecondsOfCode[10]
目前已经汇总了大量的简短代码,我们平时闲暇的时候,可以学学它里面的一些例子,这也是一个非常好的站点!
30 秒 JavaScript 代码满足你所有开发需求的简短代码片段 !
详情请戳 →:30SecondsOfCode[11]
![](https://filescdn.proginn.com/c7622b6c6b79c4adfcc41354fa7decd2/3756557bb64a9b6f4ad6eac5c165d5fd.webp)
7GRID GARDEN[12]
总共 28 关,以游戏的方式,带你学习 grid 布局,非常的轻松,再也不用枯燥的死记硬背了~
非常好的是它是支持中文的,游戏的关卡也非常的简单,通俗易懂,通过娱乐的方式学习,是我最喜欢的了!
详情请戳 →:GRID GARDEN[13]
![](https://filescdn.proginn.com/568415d14b3f917eb2ba105dc89c62a4/9f7c90b93ec569fc356a4b02aea1fb2f.webp)
8mojs[14]
用简单的几行 js 代码就能写出非常酷炫的动画效果!
也是开发中的一个非常有意思的利器!
详情请戳 →:mojs[15]
![](https://filescdn.proginn.com/d5194de819c9de0b4bd65b2b0ab33887/869f065c5e8803aa7e6a29f622b77f3e.webp)
9CodePen[16]
海量的好玩的作品,可以下载非常多的小工具来辅助开发~支持在线编辑,赶快也上传你的作品吧~
详情请戳 →:CodePen[17]
![](https://filescdn.proginn.com/d86fa4a58c2c6bcaf38d5563f4a9836c/1fef549e8b19f07a1b7bde48c15bb8ea.webp)
10color Hunt[18]
作为前端程序员,不知道如何配色?
不要怕,这里有最好的颜色搭配,供你选择!
color Hunt 作为设计师和艺术家的调色板,快去探索最新精选的调色方案吧~
详情请戳 →:color Hunt[19]
![](https://filescdn.proginn.com/ef8fb8613565ee27287a5fd0975cb7b7/64495949766b96b54f568e2ed33566df.webp)
11无损放大图片[20]
我们都知道,对图片的放大是一定会出现失真的问题,那么怎么才能无损的对图片进行放大呢?
这位日本小哥,基于深度学习,完成了这项功能
详情请戳 →:无损放大图片[21]
![](https://filescdn.proginn.com/045b98c6c89919f585cba933c3823c12/17ece7a1924bac978e4daeb6146a190b.webp)
12w3c 规范检测[22]
检查层叠样式表(CSS)文档和 HTML 或者 XHTML 文档中的 CSS 内容
可以通过输入你的站点,或者上传你的相关文件,来检测你的代码是否严格符合 w3c 的标准规范.
详情请戳 →:w3c 规范检测[23]
![](https://filescdn.proginn.com/e1d6238fad8ca2082013b79a8e8b6f19/0754469d3d4cf5f449fa917532dd4052.webp)
13互联网档案馆[24]
比如你想看五六年前的 Google,百度,看去年的掘金,前年的 bilibili 等等站点的页面构成和样式...
完全可以在这里找到
详情请戳 →:互联网档案馆[25]
![](https://filescdn.proginn.com/e16f55e9c6e0630d4362aac2301d1348/54b20723a94b53e3acf0d17ac0cae43c.webp)
14sketchToy[26]
一款超级超级超级超级好用的免费的在线绘图应用程序,可让您与朋友分享您的工作的逐步回放。无需注册。
它最大的亮点就是它能分享给你的好友,并逐步的回放你的绘画过程!是一个非常有意思的工具.
详情请戳 →:sketchToy[27]
![](https://filescdn.proginn.com/c0be34d9299fbb3792f52bcf5d617979/b580d8f36693cdbbac0b5339c065df30.webp)
15AirDroid[28]
AirDroid 是一个快速、免费的应用,以无线方式通过网页浏览器管理您的设备。
就是可以通过 web 端的网页来链接并管理你的或者他人的手机.
详情请戳 →:AirDroid[29]
![](https://filescdn.proginn.com/fb27d5f6e42fdbee9100eaa4c7d2d50a/3f9e9f30b5f2f3c53206a7a5d2c8eca3.webp)
16img2css[30]
这是一个可以将任何图像转换为纯 css 图像的工具。
是 CSS 哦,不是 Base64,底层的具体实现应该比较复杂,是一个挺有意思的站点
详情请戳 →:img2css[31]
![](https://filescdn.proginn.com/cb94d7c18a2904d47b309a30cdddce5c/bbb4dc5124240a66f8734403f4461b07.webp)
17WallHaven[32]
目前我认为最好的一个图片素材网站,不管是用来做壁纸还是做站点资源图片都是非常不错的!
详情请戳 →:WallHaven[33]
![](https://filescdn.proginn.com/10857c3c66f07aa46b59cff34454b2ac/f7db945e9c3e76dd3deb300f6fb07fba.webp)
![](https://filescdn.proginn.com/0b251bde4920ffe8724e97a57b4b4d23/c7be427fb9cc89c10c3178d9de11ac72.webp)
18ih5[34]
目前很火的低代码,这个平台是零代码ih5[35],通过拖拉拽,生成你想要的 h5 页面,还能制作游戏和全景 3D 海报,简直不要太帅~
详情请戳 →:ih5[36]
![](https://filescdn.proginn.com/d49a10e8e8a9a0b03a2c62a9a8c4591b/4f065674434d13e90313467b822cdbb6.webp)
![](https://filescdn.proginn.com/3646800426be32d9afd1165050579dea/b7bf7e0008708fd398392e82cb0677bb.webp)
19模板王[37]
海量的成品商用站点模板,做博客,做官网...都可以用~免费下载它们的源码!
非常良心的一个网站!
详情请戳 →:模板王[38]
![](https://filescdn.proginn.com/091304b7666329142565e1a358758283/e1353a6ad5266421adc64be9a08d7c4c.webp)
20Figma[39]
web 端的 UI 设计工具,主要是因为它免费
详情请戳 →:Figma[40]
![](https://filescdn.proginn.com/4d6538f2796906c45942d10758adb662/2c23c1f0b8ae6720dc0e6af1aa60fbb3.webp)
21flagCounter[41]
简单的将它生成的代码嵌入到你的站点,就能记录下访问你站点的所有访客都来自哪些国家~
详情请戳 →:flagCounter[42]
![](https://filescdn.proginn.com/3f0de870fc98c949823893ad79a67191/9fada8042c4bb7289db597248a07e8c2.webp)
22最后
我是荣顶,很高兴能在这里和你一起变强!和我一起面向快乐编程! 😉
关注我的公众号 前埔寨,获取更多好玩与有趣的前端知识。如果你也一样对技术热爱并且为之着迷,欢迎加我个人微信(ChicSparrow),我将会拉你入群一起交流学习~ 🦄
参考资料
freeCodeCamp: https://chinese.freecodecamp.org/learn
[2]freeCodeCamp: https://chinese.freecodecamp.org/learn
[3]JavaScript 周刊: https://javascriptweekly.com/issues/554
[4]554 期: https://javascriptweekly.com/issues
[5]JavaScript 周刊: https://javascriptweekly.com/issues/554
[6]JavaScript Tips: https://www.jstips.co/zh_CN/
[7]JavaScript Tips: https://www.jstips.co/zh_CN/
[8]JavaScript 一行代码: https://1loc.dev/
[9]JavaScript 一行代码: https://1loc.dev/
[10]30SecondsOfCode: https://www.30secondsofcode.org/js/p/1
[11]30SecondsOfCode: https://www.30secondsofcode.org/js/p/1
[12]GRID GARDEN: https://cssgridgarden.com/#zh-cn
[13]GRID GARDEN: https://cssgridgarden.com/#zh-cn
[14]mojs: https://mojs.github.io/
[15]mojs: https://mojs.github.io/
[16]CodePen: https://codepen.io/
[17]CodePen: https://codepen.io/
[18]color Hunt: https://colorhunt.co/
[19]color Hunt: https://colorhunt.co/
[20]无损放大图片: http://waifu2x.udp.jp/index.zh-CN.html
[21]无损放大图片: http://waifu2x.udp.jp/index.zh-CN.html
[22]w3c 规范检测: http://jigsaw.w3.org/css-validator/#validate_by_uri
[23]w3c 规范检测: http://jigsaw.w3.org/css-validator/#validate_by_uri
[24]互联网档案馆: http://wzlc0577.com/web/
[25]互联网档案馆: http://wzlc0577.com/web/
[26]sketchToy: https://sketchtoy.com/
[27]sketchToy: https://sketchtoy.com/
[28]AirDroid: https://web.airdroid.com
[29]AirDroid: https://web.airdroid.com
[30]img2css: https://javier.xyz/img2css/
[31]img2css: https://javier.xyz/img2css/
[32]WallHaven: https://wallhaven.cc/
[33]WallHaven: https://wallhaven.cc/
[34]ih5: http://www.ih5.cn/
[35]ih5: http://www.ih5.cn/
[36]ih5: http://www.ih5.cn/
[37]模板王: http://www.mobanwang.com/
[38]模板王: http://www.mobanwang.com/
[39]Figma: https://www.figma.com/
[40]Figma: https://www.figma.com/
[41]flagCounter: https://s11.flagcounter.com/index.html
[42]flagCounter: https://s11.flagcounter.com/index.html