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

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

文章（包括以往的文章）和浏览器导出的完整书签放在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.cn 或 cdn.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库导入，能够建立各类类型项目

编程题库

经过刷题和编程训练来提高编程思想

• freecodecamp
• freecodecamp中文版（旧版）
• freecodecamp中文版（新版）
• leetcode
• leetcode中文版
• 赛码
• scriptoj
• codewars
• codecademy

注：据fcc社区说法，旧版题目已再也不维护更新，推荐使用新版，帐号不互通。（感谢Ricowang评论指出）

视频教程

技术分享和教程视频。

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

可能看视频更加清楚直观，因此不少人都更喜欢看视频，尤为是刚入门的时候。网上如今也有不少培训机构的课程视频，能找到了也能够看一看，可是进阶时建议多看些国外视频，拓宽下视野，顺便练下英语能力。

上面大部分网站的视频仍是付费的，若是想看免费的视频其实能够看youtube，上面技术分享的视频也很是多，重点是都是免费的。

下面推荐几个youtube的技术帐号，能够关注一下。

• freeCodeCamp.org
• Red Stapler
• LearnCode.academy
• Wes Bos
• Coding Tech

这只是我关注的一部分，还有很是多，你们能够自行探索。

文章资讯博客

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

国内

• 掘金
• 博客园
• CSDN
• 简书
• infoQ
• 大前端
• 众诚翻译
• w3ctech
• v8
• w3cplus
• 张鑫旭博客
• TechBridge博客
• 酷壳 左耳听风博客
• 淘宝 FED
• 京东凹凸实验室
• 百度 FEX （技术周刊还在更新）
• 奇舞周刊 （建议公众号订阅）
• 大搜车技术团队博客

国外

• Echojs
• Front-End Front
• Hashnode
• css-tricks
• Devchat （音频形式）
• Medium （可订阅邮件）
• Dev （可订阅邮件）
• HTML5 Weekly （可订阅邮件）
• CSS Weekly （可订阅邮件）
• JavaScript Weekly （可订阅邮件）
• React Status （可订阅邮件）
• Ponyfoo （可订阅邮件）
• Jake Archibald blog
• Dan Abramov blog
• David Walsh Blog

建议申请一个专门用来接收订阅邮件的邮箱，由于会接收到大量邮件

问答论坛

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

网站	说明
知乎	没什么说的，有了知乎应该没有人会再去用百度知道那垃圾东西了吧。
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。

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

最后

这里整理的网站，是我比较常看的，一些久未更新的就没有列出来，并且可能会遗漏一些网站，若是你们还有其余优秀的学习网站也能够评论分享出来，但愿这些网站可以你们的学习和平时开发带来帮助。