前端学习网址大全-干货满满-持续更新

文: Jack同学

自己学习中收集的常用的网址，并且去掉了很多没有干货，对学习没有帮助的网站，希望对你有帮助！

视频学习网站

• 腾讯课堂：https://ke.qq.com/
• 慕课网：https://www.imooc.com/
• 网易云课堂：https://study.163.com/

官方文档

官方文档真的太重要了，比如说一个问题去百度，基本上五花八门的结果都有，这时候就需要一份权威的解释。当你兜兜转转很多圈，最后还是得看官方文档。

• W3C官方文档：https://www.w3.org/

如果英文版文档看的不习惯，可以使用下面的MDN文档，虽然没有翻译完，但基本上够用了

• MDN: https://developer.mozilla.org/zh-CN/
• W3school: http://www.w3school.com.cn/ 国内的不是很官方
• Can I use: https://www.caniuse.com/ 一个前端常用查兼容性的网站

还有很多文档网站我把他们放在各个类别中了,这样方便查找

HTML

• HTML标准: https://html.spec.whatwg.org/multipage/rendering.html
• HTML meta标签总结: https://segmentfault.com/a/1190000004279791
• HTML5元素周期表: http://www.xuanfengge.com/funny/html5/element/
• 字符实体元素: https://dev.w3.org/html5/html-author/charref

CSS

• Reset.css https://meyerweb.com/eric/tools/css/reset/
• Normalize.css http://necolas.github.io/normalize.css/
• 通用css笔记建议与指导: https://github.com/chadluo/CSS-Guidelines/blob/master/README.md
• css预处理器 Less: http://lesscss.cn/
• css预处理器 Scss: https://www.sass.hk/
• PostCss: https://postcss.org/
• CssNext: https://cssnext.github.io/

ES6和Babel

• 阮一峰-ES6入门: http://es6.ruanyifeng.com/
• ES6官方文档: https://www.ecma-international.org/ecma-262/6.0/
• Promises/A+规范: https://promisesaplus.com/
• Babel中文网: https://www.babeljs.cn/
• 一口（很长的）气了解 babel: https://zhuanlan.zhihu.com/p/43249121

移动端

• 腾讯移动 Web 前端知识库: https://github.com/AlloyTeam/Mars
• 百度流量统计院: https://mtj.baidu.com/data/mobile/device/
• 草料二维码: https://cli.im/

小程序

• 微信小程序开发文档 https://developers.weixin.qq.com/miniprogram/dev/framework/
• 小程序开发资源汇总: https://github.com/justjavac/awesome-wechat-weapp

Vue

• Vue中文网: https://cn.vuejs.org/index.html
• Vue Cli: https://cli.vuejs.org/zh/
• Vue Router: https://router.vuejs.org/zh/installation.html
• vue-resource: https://github.com/pagekit/vue-resource
• Vue源码分析: https://github.com/ustbhuangyi/vue-analysis
• ElementUI桌面端组件库: https://element.eleme.cn/#/zh-CN
• Mint UI移动端组件库: https://mint-ui.github.io/#!/zh-cn
• iView UI组件库: https://www.iviewui.com/
• Vant UI移动端组件库: https://youzan.github.io/vant/#/zh-CN/intro
• cube-UI移动端组件库: https://didi.github.io/cube-ui/#/zh-CN
• Nuxt.js: https://nuxtjs.org/

React

• React官网: https://reactjs.org/
• React中文网: https://react.docschina.org/
• React小书: http://huziketang.mangojuice.top/books/react/
• React&Webpack小书: https://fakefish.github.io/react-webpack-cookbook/index.html
• 【React深入】从Mixin到HOC再到Hook: https://juejin.im/post/5cad39b3f265da03502b1c0a
• 你需要Mobx还是Redux？ https://juejin.im/post/5a7fd72c5188257a766324ae

NodeJs

• Node.js官网: https://nodejs.org/en/
• Node.js中文网: http://nodejs.cn/
• 深入浅出Node.js https://www.infoq.cn/article/nodejs
• 七天学会Node.js: https://github.com/nqdeng/7-days-nodejs
• 结合源码分析 Node.js 模块加载与运行原理 https://efe.baidu.com/blog/nodejs-module-analyze/
• Express框架: https://expressjs.com/
• Koa框架中文网: https://koa.bootcss.com/
• Nginx服务器: https://juejin.im/post/5c85a64d6fb9a04a0e2e038c

Git

• git教程-廖雪峰 https://www.liaoxuefeng.com/wiki/896043488029600
• 图解Git https://marklodato.github.io/visual-git-guide/index-zh-cn.html

打包工具

• webpack中文文档: https://www.webpackjs.com/
• webpack原理: https://segmentfault.com/a/1190000015088834?utm_source=tag-newest
• gulp.js中文网: https://www.gulpjs.com.cn/
• Parcel打包工具中文网: https://parceljs.org/
• npm包管理工具: https://www.npmjs.com/
• 淘宝npm镜像: http://npm.taobao.org/

JS模块规范

• AMD规范: https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)
• requireJS: https://requirejs.org/
• CMD规范: https://github.com/seajs/seajs/issues/242
• seaJS: https://www.zhangxinxu.com/sp/seajs/
• CommonJS规范: http://javascript.ruanyifeng.com/nodejs/module.html
• ES模块化语法-阮一峰: http://es6.ruanyifeng.com/#docs/module
• 个人文章:
  • 谈谈前端模块化规范: https://segmentfault.com/a/1190000015991869?utm_source=tag-newest
  • require，import区别？https://www.zhihu.com/question/56820346
  • CommonJS模块与ES6模块的区别: https://www.cnblogs.com/unclekeith/p/7679503.html
  • AMD，CMD 规范详解 https://neveryu.github.io/2017/03/20/amd-cmd/

浏览器知识

• 图解浏览器的基本工作原理 https://zhuanlan.zhihu.com/p/47407398

设计模式和函数式编程

• undersercore源码分析: https://yoyoyohamapi.gitbooks.io/undersercore-analysis/content/

数据结构/算法与计算机基础

• 大前端开发者需要了解的基础编译原理和语言知识http://fullstack.blog/2017/06/24/%E5%A4%A7%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%80%85%E9%9C%80%E8%A6%81%E4%BA%86%E8%A7%A3%E7%9A%84%E5%9F%BA%E7%A1%80%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86%E5%92%8C%E8%AF%AD%E8%A8%80%E7%9F%A5%E8%AF%86/
• 数据结构和算法之美 https://time.geekbang.org/column/intro/126
• LeetCode动画演示: https://github.com/MisterBooo/LeetCodeAnimation
• 用JavaScript实现的算法和数据结构，附详细解释和刷题指南 https://github.com/ConardLi/awesome-coding-js
• 30-seconds-of-code中文版 https://github.com/ConardLi/30-seconds-of-code-Zh-CN
• 力扣刷题 https://leetcode-cn.com/problemset/all/

前端性能

• 深入理解前端性能监控 https://juejin.im/post/5caaacc0e51d452b45296487#heading-5

TypeScript

• TypeScript Handbook（中文版） https://zhongsp.gitbooks.io/typescript-handbook/content/

Web安全

• 常见六大Web安全攻防解析 https://github.com/ljianshu/Blog/issues/56

数据库

• • mongodb官网 https://www.mongodb.com/
• MongoDB中文社区 http://www.mongoing.com/
• mongoosejs https://mongoosejs.com/docs/index.html
• RObo 3T https://robomongo.org/

网络请求

• axios中文网 http://www.axios-js.com/
• Fetch-MDN教程 https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

数据mock

• mockjs官网 http://mockjs.com/
• mockjs语法规则 https://github.com/nuysoft/Mock/wiki/Syntax-Specification
• Easy Mock https://www.easy-mock.com/login
• RAP2淘宝 http://rap2.taobao.org/

前端测试与集成

• mocha官网 https://mochajs.org/
• mocha中文文档 https://segmentfault.com/a/1190000011362879
• mocha-廖雪峰教程 https://www.liaoxuefeng.com/wiki/1022910821149312/1101741181366880
• Jenkins持续集成-廖雪峰教程 https://www.liaoxuefeng.com/article/1083282007018592

图标字体

• 阿里巴巴矢量图标库 https://www.iconfont.cn/
• favicon.ico在线制作 http://cn.faviconico.org/favicon

前端在线编辑器

• jsfiddle https://jsfiddle.net
• codepen https://codepen.io/
• dabblet http://dabblet.com
• jsbin https://jsbin.com/
• jsrun https://jsrun.net/

个人类博客

• 廖雪峰个人博客 https://www.liaoxuefeng.com/
• 阮一峰个人博客 http://www.ruanyifeng.com/home.html

技术社区/论坛/平台

• 简书 https://www.jianshu.com/
• 掘金 https://juejin.im/
• 思否 https://segmentfault.com/
• infoQ https://www.infoq.cn/
• stackoverflow https://stackoverflow.com/
• 码云 https://gitee.com
• gitlab https://about.gitlab.com/
• github https://github.com/

前端与设计/切图

• 蓝湖 https://lanhuapp.com/
• sketch中文网 http://www.sketchcn.com/
• svg在线画图 https://editor.method.ac/
• 像素大厨pxcook https://www.fancynode.com.cn/pxcook
• 在线ps软件 https://www.uupoop.com/

前端与PPT

• 声享-在线制作PPT https://ppt.baomitu.com/

刷题网

• 猿圈 https://st.oxcoder.com/#/exercise/home
• 赛码网 http://www.acmcoder.com/index
• 牛客网 https://www.nowcoder.com/

兼职外包

• 猿急送 https://www.yuanjisong.com/
• 程序员客栈 https://www.proginn.com/
• 云沃客 https://www.clouderwork.com/
• 快码 https://www.kuai.ma/index.html

免费api和开放平台

• 免费api接口: https://segmentfault.com/a/1190000017047048?utm_source=tag-newest
• 免费api接口: http://www.laifudao.com/api.asp
• 免费api接口: https://gank.io/api
• 阿里巴巴开放平台 https://open.1688.com/
• 腾讯开放平台 https://open.tencent.com/
• 新浪微博开放平台 https://open.weibo.com/
• 微信公众平台 https://mp.weixin.qq.com/

CDN服务

• 七牛云 http://staticfile.org/
• cdnjs https://cdnjs.com/

学习集合

• 印记中国 https://www.docschina.org/
• 前端开发相关的优秀网站、博客、以及活跃开发者 https://github.com/foru17/front-end-collect
• Front-End-learning-resource https://github.com/helloqingfeng/Awsome-Front-End-learning-resource/tree/master/01-FE-learning-master

图书资源搜索

• 鸠摩搜书 https://www.jiumodiary.com/

代码之外

• 互联网术语大全 https://www.jianshu.com/p/9a7ca206c1ab
• 新人如何快速融入技术实力强的前端团队 https://juejin.im/post/5cb860a86fb9a06890705f14
• 如何在工作内外获得持续的技术成长 https://juejin.im/post/5cbd7477f265da039d32834e
• 互联网沟通、问答、学习的艺术 https://zhuanlan.zhihu.com/p/41431775
• 经常加班至深夜，怎样才能保持身体健康？ https://www.zhihu.com/question/21790919