# 前端新手学习路线

在开始之前，我需要说明一下标题中的「新手」，它具有两层含义，一层是你压根没有接触过编程，另一层是你做过其它方面的软件开发，但想学习前端。对于这两种情况来说，学起来的角度完全不同，速度也完全不同。这篇文章，核心目的是帮阻你梳理作为一名合格的前端开发工程师需要掌握的技能，以及如何开启自己的前端之路。

# 编程通用技术

第 0 步：入门编程准备

编程的共性，适用于前端、移动端、后端等。

数据结构和算法
HTTP 协议，HTTPS
json
git
gtihub 网站使用

# 万事开头难

第 1 步：开发工具与环境准备

掌握 VSCode + Chrome 工具使用，会调试网页

在做编程时需要找一套得力的开发工具，我推荐使用 VSCode，浏览器我建议你选 Chrome，它俩是前端开发必备利器。万事开头难，学前端开发第一关就是能熟练使用 VSCode 和 Chrome，并能够写一个简单的页面在浏览器（Chrome）里预览。做好这一步，也是给自己建立信心的必备条件。

# 网页样式与布局

第 2 步：HTM+CSS

掌握 HTML 与 CSS，它们是迈入前端大门的必经之路。

前端最简单的工作就是做各种效果的静态页面，这里主要学习 HTML + CSS，HTML 负责描绘整个网页的结构及显示的内容（比如图片、文字、视频），犹如一栋楼房中的地板、楼梯、门、灯；而 CSS 则负责网页的样式和布局，犹如一栋楼房的颜色、书桌的摆放位置。

# 网页动起来 JavaScript + DOM

第 3 步：JavaScript + DOM

搞懂编程语言 JavaScript 和 DOM，可动态修改网页样式布局

网页中经常会出现各种奇特的效果，比如一个悬浮的气泡，按钮点击后出现的弹窗。而这些的基本实现离不开 DOM + JavaScript。可以把 DOM 看做是网页在内存中的一棵由节点组成的树，每个节点都会有不同的属性，通过 JavaScript 来动态调整这个树的样式。

# 浏览器环境

第 4 步：浏览器工作环境

搞懂 BOM 对象，cookie，跨域，存储机制

你所写的代码最终会被浏览器执行，不同的浏览器具有差异化，也有特定的工作环境。浏览器提供了很多属性可以使用，比如常用的 window、document、location 等。

# 前端框架

第 5 步：现代前端必备技能，提升研发效率

掌握 Vue 或 React 框架其中一个，经历充沛可都掌握

根据自己的工作需要，深度掌握其中一个框架，以及框架周边的一些技术，比如 Vue 框架它的周边包含了 vue-router、vue-cli、vuex、vue-server-renderer

# 开发环境与线上环境分离

第 6 步：构建工具

掌握 webpack 打包及其打包后代码运行原理

得益于 nodejs，前端工具真的是多，生态也非常繁荣。在学习前端时，需要深入去掌握一种构建工具，然后对其它构建工具的优缺点自己心知肚明就好。

前端在上线时都需要经过打包工具（webpack 为主力）处理，比如代码压缩。

# 知己知彼百战百胜

第 7 步：浏览器工作原理

掌握浏览器工作原理，页面是如何被加载出来的

掌握浏览器工作原理，能更快速地定位问题，对后续开发帮助极大。

# nodejs

第 8 步：nodejs

掌握 nodejs 的基本使用

nodejs 帮助前端完成了一次”革命“性的转变，构建工具得到强有力发展。

# 网页更快速地呈现到用户面前

第 9 步：性能优化

掌握性能优化技巧

合理地进行性能优化能够让你的网页更快速地呈现到用户面前，耗费的资源也比较少。

# 数据可视化

第 10 步：后台系统必备技能

掌握 EChart 和 D3

前端会做各种后台系统，数据可视化成了必备的技能。

# 设计

第 11 步：设计工具

掌握 Shetch 和 PhotoShop

你经常会做一些页面效果，和设计师沟通成本比较大，掌握基本的设计工具可以自己进行切图。

# 提升开发效率

第 12 步：库与框架

掌握最常用的第三方库使用，并能够发布自己库