前端 Web 开发资源整理

1,801 阅读5分钟
原文链接: zhuanlan.zhihu.com

记得大学做小组项目开发的时候,一个小组项目获得了老师的表扬,说页面美,有想点击的欲望,而我们其他大部分都不注重前端的页面展示和布局,都还振振有词的说只要功能实现了就OK了,页面美不美无所谓,现在想想当时好傻啊。

后来,有小伙伴自己做了个小游戏,类似扫雷这种,都觉得简单好玩,老师还提名表扬呢,那时没深究是怎么开发的,现在想想就是纯前端的简单小游戏啊。

工作后,发现前端才是王道啊,先不说大家说的什么“整个互联网都缺前端啊”这种话题,就说要抓取用户眼球,让用户有点击的欲望,这都是前端工作啊,毕竟用户才不关心“你咋实现这个功能的”,只要看着舒服就行。

其实,说这么多,我只想说,如果你想学前端,现在还来得及。我平时会留意各种资源,因此,这里整理一番,可能更适合有一定基础的前端学习者看~

说明:关于前端学习网站,太多了,什么官方文档啦、各种在线学习网站啦,只要你想学前端,那么一搜就全出来了,因此啊,我就不整理介绍了;

我主要整理3个部分:

  • 1)想开发项目,哪里找教程?
  • 2)关于前端的有趣网站;
  • 3)分享一些合集资源;

一、前端项目哪里找?

前端的入门教程网上很多,只要你搜索呼啦啦就出来了,因此啊,就不整理了。主要整理一下,哪里可以找到前端项目,就是有源代码的,可以拿来学习或者拿来用的。

  • 没有详细的教程,但可以找到项目并查看源代码和效果图:

1、CodePen

网站里有很多很酷的特效,而且看到它们的源代码,也可以看到效果图。

其实类似的网站有很多,就不一一介绍了:


2、 CodePlayer

网站里有各种项目效果,选择自己想学的,同样可以看到源代码和效果图,和codepen不同的是你可以看到作者是怎样把代码打出来的。

3、html5tricks

网站里有很多前端实现的功能,可以在线查看效果,也可以下载源码的。

  • 有详细的教程,而且步骤详细,教你一步步开发出项目:

4、phodal/ideabook

一个练手项目集,有很多实战项目,有步骤、效果图,同样可以看到源代码啊。

5、实验楼-WEB

网站里有很多前端项目教程,可以跟着教程一步步在环境中实现,并查看效果图,同样可以下载源代码,非常适合项目实战学习。

二、前端有趣的网站:

1、JS1k

大名鼎鼎的js1K,1K字节以内的Javascript代码,实现一个酷炫的动画、特效、小游戏之类的。官网从2010年开始征集参赛作品,现在已经办了7年了,还在办。

2、Can I use

CAN I USE,相信每个前端同学都不陌生,查询浏览器兼容性的利器。

3、JSHint

一个在线JS检测工具,可以检测JavaScript代码中的错误和潜在问题。

4、aaencode

将JS代码转换成常用的网络表情,例如“(゚Θ゚)”。转换的代码并不复杂,可以在源代码里看到。

类似的还有:


一个在线混淆工具,通过先进的算法,来混淆你的JavaScript代码,使其不可读。该工具还可以减小文件的大小,以便快速加载。

5、Best CSS Button Generator

网站主要提供各种按钮的CSS代码,你可以从预设的按钮中选择并使用模板用于自己的设计,还可以查看源代码,非常适合学习。

还有一个类似的:


网站是一个完整的代码生成器,可以自定义输入域或CSS3按钮,同样可以查看源代码,适合学习。

6、CSS属性指引

一份清单,按字母表顺序列出了每个CSS属性。

7、frontendrescue

里面分享了网络上关于前端的各种资源、大牛等信息,总之很多资源就对了。

三、一些整理的合集资源:

资源太多了,我就把平时mark的一些合集资源整理出来吧;

一些整理好的合集资源:

前端开发怎能少的了 Chrome 呢,因此单独对 Chrome 的一些资源整理一番:


以上就是我整理的的关于前端的学习资源,如果你还有其他的不错的前端资源,欢迎留言啊,我随时添加进来~