关于javascript:前端大牛学习路径和资源集合小白入门必看超级长建议收藏

GitHub 上有一个很有名的 Roadmap：https://github.com/kamranahmedse/developer-roadmap

想成为一名前端大牛，依照这个路线学习，足以帮忙你疾速成长。

从一名小白开始入门前端，到前端进阶，再到成长为技术大牛。

首先学习 HTML、CSS 和 JavaScript 的基础知识。你能够在以下几个网站学习这些基础知识：

W3school：http://www.w3school.com.cn/

MDN 官网教程：https://developer.mozilla.org/zh-CN/

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

freecodecamp 学习网站：https://www.freecodecamp.com/

之后你就须要学习一些包治理，包含 npm，yarn 等等。

接下来学习 CSS 预处理，CSS 的一些框架的应用，最常见的就是 Bootstrap 等。以及 CSS Architecture。

这里举荐一些好用的前端库：

Sass: CSS 的扩大，能够申明变量，引入模块，嵌套属性等等。
Less: 为 CSS 增加申明变量，款式模块，命名空间，继承等个性。
Stylus: 写 CSS 再也不必写烦人的括号啦～
Bootstrap: 全世界最风行的响应式前端框架。
Foundation: 提供了很多模版，针对网站、挪动端、邮件提供了很多好用的模块和款式。
Semantic UI: 集体十分喜爱的一个前端框架，款式十分难看，更重要的是就像它语义 UI 的名称一样，类命名特地敌对，写网页就像和人谈话一样。
uikit: 丑陋、可定制，行将公布 uikit3 版本，感兴趣能够试试看。

之后学习一些构建工具及其他工具的应用，并尽量明确其原理。包含但不限于以下工具：

Grunt: JavaScript 自动化工具。
Gulp: 个人感觉是最好用的自动化构建工具。
webpack：模块化加载构建所有，CSS/JS 连图片都能够
npm: NPM 虽好，不要太依赖袄。
Bower: 前端框架包管理工具，各类框架和库一键装置。

之后进行前端框架的抉择和学习，包含但不限于以下框架：

Vue：宽泛应用的前端框架，认真学。
React：也是一个宽泛应用的前端框架，最好把这个和 Vue 都认真学习好。
jQuery: 方便快捷，功能强大全面，居家旅行必备，近乎 JS 的替代品，你能够不会 js，然而不能不会 jQuery。
BackBoneJS: 模型、视图、汇合、事件，让你的前端代码更有框架感。
D3.js: 数据可视化必学必会，只有你想不进去的，没有 D3 画不进去的。
React: 学会 React，再学学 React-native，你就能从一个前端化身 Web app 工程师、IOS/Andorid 开发者、桌面利用工程师……
jQuery UI: 几行代码就能写一个带动画带 ajax 的 Web 利用。
jQuery Mobile: 挪动端专用 js 开发框架，和下面的相似袄。
Underscore.js: 非入侵式框架，提供了泛滥有用的函数办法，补救 jQuery 的有余。
Moment.js: 原生的 JS 显示输入日期工夫真的很苦楚，Moment 为你解决了所有啦～
Lodash: 模块化且高效，lodash 和 underscore 很类似。
Ruby on Rails: Ruby on Rails 是一款用 ruby 语言编写 Web 利用的 MVC 框架，github 就是用它写的！
AngularJS: Google 主导的 Web 开发框架，数据绑定、MVVM，很惋惜被起初更灵便的 React、Vue 等框架抢去了风头。
Ember.js: 用来开发单页 Web 利用的 JS 前端 MVC 框架。
Express: Node.js 上的 Web 框架，搭建网站或 API 服务只有一秒钟！
Meteor: JS 全端框架，是的，你只须要学习 JavaScript 一门语言，就能够实现 Web 利用前后端、数据库的开发。
Django: Python 的 Web 框架，人生苦短，请用 Python.
Flask: Python 的 Web 框架，据说只有学好 flask 就能随便找到好工作？
ASP.net: 老一辈人的最爱。
Laravel: 最优雅性感的 PHP Web 框架，好用到不能再好用，优雅到不能再优雅，毕竟 PHP 是全世界最好的语言嘛。
Phalcon: 用 C 语言扩大的，据说是最快的 PHP 框架。

框架和常识学习好了，要学习如何进行测试，次要包含这部分内容：

之后要学习 PWA，这是当前的发展趋势：

之后学习一些更深刻的内容：

前端入门教程
瘳雪峰的 Javascript 教程
前端工程师必备的 PS 技能——切图篇
联合个人经历总结的前端入门办法
作者的简书地址
作者的 CSDN 地址
HTML 修真录 —— 初识 ” 异界 ”
HTML 修真录 ——“ 深渊三君王 ”
HTML 根底入门
HTML 根底晋升
CSS 根底入门
CSS 盒模型
CSS 浮动
CSS 定位

深刻了解 HTML5 标签
如何写出高效率的 HTML
HTML meta 标签总结与属性应用介绍
戏说 HTML5
编写高质量的 HTML 代码
如何解决 img 标签高低呈现的间隙
五分钟学会 Canvas 根底（一）
五分钟学会 Canvas 根底（二）
模拟 LED 灯的滚动文字效果
对于 Canvas 的兄弟 SVG 的基础教程
HTML 5 动态效果制作方法整顿
Canvas 成果实例
细数前端中的一些黑科技
前端 Meta 用法大汇总
HTML5 新个性

CSS 语法参考
如何编写可保护的 CSS
CSS3 动画手册
腾讯 css3 动画制作工具
志爷 css 小工具汇合
css3 js 挪动大杂烩
bouncejs 触摸库
animate.css
全局 CSS 的终结
browserhacks
CSS3 其余属性
弹性盒模型详解
CSS3 动画
2D 变形 &3D 变形
蒙版 mask

YOU MIGHT NOT NEED JQUERY
jQuery API 中文文档
hemin 在线版
css88 jq api
css88 jqui api
学习 jquery
jquery 源码查找
Web 前端资源汇总(jQuery,Js,Css3 等)

Angular.js 的一些学习资源
angularjs 中文社区
Angularjs 源码学习
Angularjs 源码学习
angular 对 bootstrap 的封装
angularjs + nodejs
吕大豹 Angularjs
AngularJS 最佳实际
Angular 的一些扩大指令
Angular 数据绑定原理
一些扩大 Angular UI 组件
Ember 和 AngularJS 的性能测试
带你走近 AngularJS – 基本功能介绍
Angularjs 开发指南
Angularjs 学习
不要带着 jQuery 的思维去学习 AngularJS
angularjs 学习笔记
angularjs 开发指南
angularjs 英文材料
angular bootstrap
angular jq mobile
angular ui
整合 jQuery Mobile+AngularJS 经验谈
有 jQuery 背景，该如何用 AngularJS 编程思维
AngularJS 在线教程
angular 学习笔记

react.js 中文论坛
react.js 官网网址
react.js 官网文档
react.jsmaterialUI
react.jsTouchstoneJSUI
react.jsamazeuiUI
React 入门实例教程 - 阮一峰
ReactNative 中文版
Webpack 和 React 小书 - 前端乱炖
Webpack 和 React 小书 -gitbook
webpack
Webpack，101 入门体验
webpack 入门教程
基于 webpack 搭建前端工程解决方案摸索

Vue2.0
Vue
Vue Router
Vuex
Vue-Cli
Vue 论坛
Vue 聊天室
Vue 入门指南
Vue 的一些资源索引
awesome-vue
vue-syntax-highlight

Node.js 包教不包会
一个 nodejs 博客
【NodeJS 学习笔记 04】新闻公布零碎
过年 7 天乐，学 nodejs 也高兴
七天学会 NodeJS
Nodejs 学习笔记（二）— 事件模块
nodejs 入门
angularjs nodejs
从零开始 nodejs 系列文章
了解 nodejs
nodejs 事件轮询
node 入门
nodejs cms
Node 初学者入门，一本全面的 NodeJS 教程
NodeJS 的代码调试和性能调优

template-chooser
artTemplate
tomdjs
淘宝模板 juicer 模板
Fxtpl v1.0 繁星前端模板引擎
laytpl
mozilla – nunjucks
Juicer
dustjs
etpl

fastclick
no-click-delay
【麻利开发】Android 团队开发标准
Android 开发标准与利用
ionic

99 挪动端常识汇合
挪动端前端开发知识库
挪动前端的一些坑和解决办法（外观体现）
【原】挪动 web 资源整顿
zepto 1.0 中文手册
zepto 1.0 中文手册
zepto 1.1.2
zepto 中文正文
jqmobile 手册
挪动浏览器开发汇合
挪动开发大杂烩

javascripting
各种风行库搜寻
runoob.com- 蕴含各种 API 汇合
开源中国在线 API 文档合集
devdocs(英文综合 API 网站)

HTTP API 设计指南
javascript 风行库汇总
验证 api
underscore 中文手册
underscore 源码剖析
underscore 源码剖析 - 亚里士朱德的博客
underscrejs en api
lodash – underscore 的代替品
ext4api
qwrap 手册
缓动函数
svg 中文参考
svg mdn 参考
svg 导出 canvas
svg 导出 png
ai-to-svg
localStorage 库

Nodejs
Node 入门
7 天学会 NodeJS
MongoDB
NodeJS 与 MongoDB 交互

StuQ 技能图谱
Frontend Knowledge Structure

大前端导航
Frontend Stuff
Frontend directory
Frontend Interview Questions

Front-end Developer HandBook
Front-end Database
Frontend Notebook

根底
深入浅出 HTML 与 CSS、XHTML
HTML & CSS 设计与构建网站
Pro Git 中文版
鸟哥的 linux 私房菜
中级
Head First HTML5 Programming
JavaScript 权威指南
JavaScript 语言精粹
JavaScript & jQuery 交互式 Web 前端开发
深入浅出 Ajax
高级
JavaScript 高级程序设计
HTML5 高级程序设计
CSS 权威指南
深入浅出 Node.js

设计软件

前端工程师最首要的工作就是把设计师的设计图切好并翻译成代码，所以咱们要学习一些设计软件的根底操作和切图办法。

Photoshop 使用最宽泛的设计软件，大部分人都在用它，很有必要学习一下
前端工程师必备的 PS 技能——切图篇
Sketch 轻量且功能强大，切图迅速高效，为 UI 设计而生的 Mac App
Sketch 切图教程

编辑器

工欲善其事，必先利其器。能够用的编辑器和 IDE 有很多，在这里我只举荐最棒的两个。

Sublime text 最性感的编辑器，搭配插件各种好用
配置和应用办法
Webstorm 功能强大，学生能够收费用的前端开发 IDE

代码治理

不光要学会写代码，也要学会治理你的代码。在工作中你可能会遇到须要本人部署代码的状况；不停地批改迭代重构，当然也须要你把握版本控制软件。

Linux 你须要学会在命令行关上挪动复制文件等最根本的操作
Linux 最罕用的 20 条命令
鸟哥的 linux 私房菜——根底篇
Git 写代码肯定会用到的版本控制软件，入门很快就能学会
猴子都能懂的 Git 入门

测试工具

预览和调试必不可少，编写前端代码的大部分工夫都是在编辑器和浏览器之间切来切去。

Chrome Dev Tools 谷歌浏览器开发工具，想要预览调试你的前端页面必须在这里啦

说个题外话，我在一线互联网企业工作十余年里，领导过不少同行后辈。帮忙很多人失去了学习和成长。

我意识到有很多教训和常识值得分享给大家，也能够通过咱们的能力和教训解答大家在 IT 学习中的很多困惑，所以在工作忙碌的状况下还是保持各种整顿和分享。

我能够将最近整顿的前端面试题收费分享进去，其中蕴含 HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等，还在继续整顿更新中，心愿大家都能找到心仪的工作。

关于javascript:前端大牛学习路径和资源集合小白入门必看超级长建议收藏

上面是学习路线和学习资源，有须要的请自取。

入门类

HTML 5 局部

CSS 3 局部

JQuery

Angular JS

React

Vue

Node JS

JS Template

挪动端

挪动端 API

综合 API

其余 API

服务器端

技能图谱

在线资源

在线书籍

举荐书目

开发工具

最初

有须要的敌人点击这里收费支付题目 + 解析 PDF。

点击这里收费支付题目 + 解析 PDF。