关于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 定位

HTML 5 局部

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

CSS 3 局部

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

JQuery

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

Angular JS

• 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

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

Vue

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

Node JS

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

JS Template

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

挪动端

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

挪动端 API

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

综合 API

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

其余 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、浏览器等等，还在继续整顿更新中，心愿大家都能找到心仪的工作。

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

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