随着互联网不断的发展，很多小伙伴包括做UI的、Java的，乃至各行各业的，或者是从没接触过IT、完全零基础的都开始注意到前端，想要学习前端。但对于初学者而言，前端繁多的知识点对他们来说实在是太陌生了。的确，要学好吃透前端并不是很容易，但也不需要太过畏惧，因为这都是有路线可循的，依照着下面的前端学习路线，尽管你会碰到难题，但绝不会出现东一榔头西一棒子的情况，大大节省了时间和精力。

学习路线概览：

HTML→CSS→JavaScript→Git和GitHub→Nodejs和Npm→Vue（和React任选一个学）→Webpack→HTTP

HTML

1、学习HTML标签：<span>、<p>、<a>、<h1>、<div>、<form>、<ul>、<ol>等等，尽量把每种标签都写一遍。

2、学习标签分类：块级标签，行级标签，知道他们的特点和区别即可。

CSS

1、引入CSS的方式

2、常见的CSS属性：颜色、背景色、字体大小、宽高等等，这里自己多写写改一改。

3、基本的选择器：通用，类，ID，后代选择器，这里自己多写写。

4、学习盒子模型：2种盒子模型以及margin和padding，这里自己多写写。

5、定位：固定定位，相对定位，绝对定位，粘性定位，这里自己多写写，区别一定要知道。

6、布局：浮动，Flex，两栏布局，三栏布局。

7、实战：仿制静态页面，比如网站首页、好看的网页等等，一切你都可以自己写。

JavaScript

1、JavaScript基础：变量，数据类型，操作符，while语句，if语句，数组，函数，这里一定要多动手写，熟悉常见的API。

2、DOM：学习JavaScript是如何操作DOM、如何获取HTML元素的，这里一定要多动手写，熟悉常见的DOM API。

3、JavaScript进阶：事件冒泡，作用域，原型链，闭包，this，自执行函数，这里有的概念一时间理解不了没关系。

4、Ajax请求：学习如何发Ajax请求，以及获取数据和处理请求错误。

5、ES6基础：let，const，解构，set，map，这里自己要多写，不要死记硬背。

6、实战：纯前端轮播图，简单留言板，实现lodash高频方法。

Git和GitHub

1、Git概念：什么是Git，好处，分支概念，版本管理。

2、常见的Git命令：add、commit、merge、push、fetch、reset。

3、GitHub：注册GitHub账号，新建GitHub远程仓库，实践Git操作。

Nodejs和Npm

1、安装Nodejs和Npm：这里为什么需要装Nodejs，因为无论你是学Vue还是React，本地开发和构建都会依赖Nodejs和Npm，所以我们提前安装它，这里只需要知道它是干什么的就好，安装成功即可不用深究。

2、学习基本的Node和Npm命令：这里不用深究，了解最基础的，对Nodejs不再陌生即可。

Vue（和React任选一个学）

1、Vue文档基础部分：Vue文档写的很好，先把基础部分好好学完，多手写代码练习。

2、写Vue组件：自己实现常见的Vue组件，比如按钮、卡片、下拉框、弹窗、轮播图等等，把这些实现一遍之后，你对Vue的基础使用已经很熟练了，写代码过程中多上官网查文档。

3、学习Vue文档深入部分：有了前面的实战，现在看文档深入部分可以有更深刻的理解。

4、Vue-Router：了解什么叫做前端路由，知道如何配置，练习基本的例子。

5、Vuex：了解什么叫前端状态管理、单向数据流，知道如何写，练习基本的例子。

6、实战：写一个综合性的前端项目，使用到Vue、Vue-Rrouter、Vuex，比如一个博客系统。

React（和Vue任选一个学）

1、React文档基础部分：学习React官网的教程，多手写代码练习。

2、写React组件：自己实现常见的React组件，比如按钮、卡片、下拉框、弹窗、轮播图等等，写代码过程中，多上官网查文档，理解函数式编程思想。

3、React-Router：了解什么叫做前端路由，知道如何配置，练习基本的例子。

4、Redux：了解什么叫前端状态管理、单向数据流，知道如何写，练习基本的例子。

5、实战：写一个综合性的前端项目，使用到React、React-Redux，比如一个博客系统。

Webpack

1、官网学习基础：明白Webpack是干什么的，plugin、loader、entry等等常见的概念。

2、根据项目学习：你在学习Vue或React的时候肯定会遇到Webpack，这个时候可以返回去看看项目中Webpack是怎么配置的，使用到了哪些plugin和loader，这里学不明白也很正常，很多已经工作的配置起来Webpack也很难受。

HTTP

1、HTTP基础：它是干什么的，有哪几部分。

2、HTTP状态码：有哪些常见的状态码，分别是什么意思。

3、HTTP缓存：如何实现缓存，特点。

以上就是这次分享的前端学习路线的全部内容。当然，这只是一个大致的学习路线，不像一本书、一套视频、一份资料这么详尽，它只是用来辅助你的学习，真正吃透前端还是要靠自己多看多听多动手。并且，如果你在一个地方纠结了太长的时间，比如CSS布局都学了一个月，但又确实不想放弃学习前端，选择一家好的培训机构也不失为一个正确的选择。

这并不是让你马上做出决定，毕竟谁的钱也不是大风刮来的，况且自己的学习进度也只有自己最清楚，不过你耗费了许久时间都未能解决的问题，一经老师点拨突然开窍完全有可能，好的培训机构的作用就在于此，那就是做你迷茫路上的一盏指路灯。