Learning-Path-To-Front-End

前端学习路径，活到老学到老！

前端开发学习路径，不要以为学习上的事情有捷径可言，只有持之以恒的学习与实战，才是真理！

什么是前端开发？

简单点概括为前端工程师就是运用HTML/CSS/JavaScript等Web技术，在工作中配合设计师实现用户界面，和后端工程师进行数据对接，完成Web应用开发的职位。

• 阅读更多有关前端工程师
• 前端技能路线详解

开发工具

设计软件

前端工程师最首要的任务就是把设计师的设计图切好并翻译成代码，所以我们要学习一些设计软件的基础操作和切图方法。

• Photoshop 运用最广泛的设计软件，大部分人都在用它，很有必要学习一下

  • 前端工程师必备的PS技能——切图篇

• Sketch 轻量且功能强大，切图迅速高效，为UI设计而生的Mac App

  • Sketch切图教程

编辑器

工欲善其事，必先利其器。可以用的编辑器和IDE有很多，在这里我只推荐最棒的三个(大力推荐vscode)。

• 👍VSCode 速度较快，对超大文件读写速度飞快(打开10M代码不到1s，Sublime原生会卡近6s)，插件数量相对少，有一些增强功能比如调试器，终端，原生支持语言语法高亮较少(C# JS TypeScript是第一位)，内置JS/TS调试器…可以基于不同项目(文件夹)设置偏好，写C#和JS/TS专用

• Sublime text 没有接触vscode之前一直在用的编辑器，搭配插件各种好用

  • 配置和使用方法

• Webstorm 功能强大，学生可以免费用的前端开发IDE(收费的。。。)

代码管理

不光要学会写代码，也要学会管理你的代码。在工作中你可能会遇到需要自己部署代码的情况；不停地修改迭代重构，当然也需要你掌握版本控制软件。

• Linux 你需要学会在命令行打开移动复制文件等最基本的操作
  • Linux最常用的20条命令
  • 鸟哥的linux私房菜——基础篇
• Git 写代码一定会用到的版本控制软件，入门很快就能学会
  • 猴子都能懂的Git入门
• 目前公司内考虑翻墙等团队协作原因采用的是码云
  • GitOsc码云

调试代码

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

• Chrome Dev Tools 学会用chrome浏览器去调试js代码，谷歌浏览器开发工具，想要预览调试你的前端页面必须在这里

基础知识

• HTML
  • MDN的HTML入门
  • HTML30分钟快速入门
• CSS
  • MDN的CSS入门教程
  • 学习CSS布局
• JavaScript
  • JavaScript菜鸟教程
  • 慕课网JavaScript入门篇
• Web
  • 当你在浏览器中输入google.com并按下回车后发生了什么
  • 互联网协议入门

中级知识

• HTML5
  • MDN的HTML5入门教程
  • 网易云课堂HTML5入门
• CSS3
  • CSS3菜鸟教程
  • Gitbook的CSS3教程
• Style Guide
  • 腾讯alloteam前端代码规范
  • 百度ecomfe前端代码规范
  • Google HTML/CSS Style Guide
  • Google JavaScript Style Guide
• Responsive Design
  • 响应式设计指南
  • 自适应网页设计——阮一峰
  • 如何开始响应式web设计？
• Web Animation
  • CSS动画
  • Canvas动画教程
  • Learn to Create Animations in JavaScript
• Bootstrap
  • Bootstrap菜鸟教程
  • 慕课网玩转Bootstrap
• jQuery
  • jQuery菜鸟教程
  • 慕课网jQuery基础
• Ajax
  • jQuery Ajax快速入门
  • jQuery Ajax全解析

高级知识

• w3c标准

  • Web Platform Docs

• ECMA6

  • 阮一峰ECMAScript6入门

• 测试

  • FEX前端自动化测试探索
  • Macaca自动化测试之PC端测试
  • 测试框架Mocha实例教程
  • Karma和Jasmine自动化单元测试

• 自动化构建

  • 流式自动化构建工具Gulp
  • 使用grunt打包前端代码
  • 前端工程构建工具fis
  • Web项目脚手架生成工具Yeoman
    • 用Yeoman和AngularJS做Web应用

• 模块/包管理

  • npm
    • npm使用介绍
    • 快速搭建 Node.js 开发环境以及加速 npm
  • Sea.js
    • 5分钟上手Sea.js
  • RequireJS
  • ES6模块

• 预处理器

  • Haml
    • Tutorial
    • HTML代码简写法：Emmet和Haml
  • Sass
    • Sass入门
  • Less
  • TypeScript
    • TypeScript Handbook（中文版）

• 框架

  • Angular学习教程
  • Vue
    • vue.js教程
  • React
    • 入门实例教程
    • React+Redux系列教程

• JavaScript 工具库

  • 函数式编程

• 服务器端

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

• 数据库

  • redis
  • DocumentDB

• 部署

  • docker

• 日志

  • Sentry--错误日志收集框架

• 技能图谱

• 前端开发技能图谱

• Frontend Knowledge Structure

• 在线资源

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

• 在线教程

  • 菜鸟教程
  • 极客学院Wiki
  • Mozilla开发者网络
  • front-end-web-development on Treehouse
  • Learn to Code Advanced HTML/CSS

• 在线书籍

  • 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
    • Javascript设计模式详解
  • 大神篇
    • 浅谈前端集成解决方案
    • 前端工程与性能优化
    • 前端开发体系建设日记
    • 前端开发体与模块化框架
    • 大公司里怎样开发和部署前端代码？
    • 如何进行前端自动化测试？
    • md5戳计算过程

  未完待续。。。

😱 ok！以上大概的前端工程师的学习路径，不要奢望学完，数理化都学不完，一门知识是学不完的，加油啊！程序猿们！学无止境！🔥💻💾