前端工作学习相关网站收集整理

33,929

平时上网有随手收藏感兴趣网站的习惯,上学的时候大部分收藏的都是游戏音乐电影不可描述之类的网站,工作之后反而全是技术学习资讯之类的了。前几天整理浏览器书签的时候,发现竟然有二百多个书签了,而且一不小误删了几十个恢复起来非常麻烦,于是觉得有必要换种方式记录一下,同时精选一些觉得不错的网站分享给有需要的同学。

文章(包括以往的文章)和浏览器导出的完整书签放在github上以作备份,后面可能会更新添加新内容。

项目地址:github.com/hoc2019/blo…

如果部分国外网站访问不了的,请自行解决。

开发工具

平时工作开发时用到的一些辅助工具类网站

网址 说明
regexr.com 正则表达式验证匹配
www.gitignore.io 根据选择生成.gitignore文件
unbug.github.io/codelf 变量命名推荐(支持中文)
www.html.cn/tool/css3Pr… css box-shadow阴影预览及代码生成
www.internetke.com/jsEffects/2… css渐变预览及代码生成
xuanfengge.com/easeing/cea… css动画缓动函数预览及生成
www.toptal.com/developers/… 多张图片合成雪碧图,并生成对应css
tool.lu 众多工具集合,包括时间戳转换,进制转换等
www.bootcdn.cncdn.baomitu.com 国内的CDN库,速度快
www.jsdelivr.com 国外的cdn库,支持github,npm,WordPress

在线编辑

代码在线编辑运行

网址 说明
jsrun.net 国内网站,有代码提示,支持cdn库导入,不支持创建项目,有代码示例市场。
jsbin.com 国外网站,功能少,支持本地搭建
codepen.io 国外网站,支持cdn库导入,支持创建项目(非会员只支持一个项目),有大量丰富的代码示例市场。
stackblitz.com 国外网站,有代码提示,支持npm,可以创建项目(默认创建类型没有vue)。
codesandbox.io 国外网站,支持npm和cdn库导入,可以创建各种类型项目

编程题库

通过刷题和编程训练来提升编程思想

注:据fcc社区说法,旧版题目已不再维护更新,推荐使用新版,账号不互通。(感谢Ricowang评论指出)

视频教程

技术分享和教程视频。

网址 说明
Frontendmasters 有很多大佬的课程,英语课程,英文字幕,少部分课程免费,大部分需要订阅会员,费用较贵,可以等黑五打折时买年费。
Egghead 英语课程,英文字幕。
IT大咖说 国内技术大会分享录像为主。
慕课 国内网站,免费课挺多,实战课付费,按课付费,价格偏贵。(其他如腾讯课堂,网易云课堂等都差不多一个路数)
Udemy 网站有中文语言和中文课程,大部分英文课程也有中文字幕,按课收费,打折中的付费课程还算能接受。

可能看视频更加清楚直观,所以很多人都更喜欢看视频,尤其是刚入门的时候。网上现在也有很多培训机构的课程视频,能找到了也可以看一看,但是进阶时建议多看些国外视频,拓宽下视野,顺便练下英语能力。

上面大部分网站的视频还是付费的,如果想看免费的视频其实可以看youtube,上面技术分享的视频也非常多,重点是都是免费的。

下面推荐几个youtube的技术账号,可以关注一下。

这只是我关注的一部分,还有非常多,大家可以自行探索。

文章资讯博客

学习技术,了解行业最新动态。

国内

国外

建议申请一个专门用来接收订阅邮件的邮箱,因为会接收到大量邮件

问答论坛

开发中遇到问题,去这些地方就对了。

网站 说明
知乎 没什么说的,有了知乎应该没有人会再去用百度知道那垃圾东西了吧。
Segmentfault 更专注技术问题。
Stack Overflow Segmentfault的外国原版,非常强大。
cnodejs node社区
react-china react社区
V2EX 程序员的1024?

开源框架和库的问题,去github上找到项目查询issue通常都能找到解决方案。

github相关

毕竟全球最大同性交友平台,上面牛逼的人和项目非常至多,除了轮子也有很多教程,这里推荐一些对前端学习有帮助的项目。

项目名 说明
30-seconds-of-code 短小精悍的工具函数,有中文版。
Front-end-Developer-Interview-Questions 前端面试题整理,有中文版,没答案。
front-end-interview-handbook 前端面试手册,有中文版,带答案。
Front-End-Checklist 前端开发清单
javascript-algorithms js算法和数据结构
33-js-concepts 前端开发需要掌握的33个概念,有中文版。
awesome-javascript javascript资源列表,有中文版
nodebestpractices node最佳实践列表,有中文版。

在github上,awesome-*相似名称可以找到其他类似项目,比如node资源列表awesome-node,react资源列表awesome-react。

学习的时候不建议以面试题为主,不容易形成体系。

最后

这里整理的网站,是我比较常看的,一些久未更新的就没有列出来,而且可能会遗漏一些网站,如果大家还有其他优秀的学习网站也可以评论分享出来,希望这些网站能够大家的学习和平时开发带来帮助。