写在前面的话，不想看的可以直接拉到原答案～

本篇文章持续更新～～你们的赞数越多我更新越快

最近思考了很久，也看了下前端方面的资料，发现市面上免费的前端教程质量真的很参差不齐，所以准备尽最大的努力的把这篇文章写成极度干货，实操性极强，而且适应目前前端大环境的前端入门教程，并不是干货的罗列，而是会细致到实操流程，确保能帮助到大家

==========2020.06.07更新=========

失踪人口回归？？？没啥毛病，今天更新了初学者需要掌握的调试技巧，至于每个阶段，学哪一块的调试技巧，文中都有附带了详细信息，总结起来就是这篇https://zhuanlan.zhihu.com/p/145466139​zhuanlan.zhihu.com

也就是说这篇文章我已经嵌在这篇回答里了！！翻下去顺畅的学习吧！！！

千万别再说，我看了很久没看出哪有错误这种话了！！！学会调试！！！

==========2019.10.27更新==========

有人对聊天机器人那段有疑惑，而且提到了跨域问题，所以增加了一小段示例代码

==========2019.10.20更新==========

之前留言或者私聊想加群的朋友们，现在准备建群啦～

qq群：948805468

微信群：加我微信吧，我拉你进群：a1127502049

群作用：前端朋友之间互助答疑～一起学习～，还有就是对文章，学习路径的建议反馈，建议反馈记得@我哈，可以随便皮，但是不要口吐芬芳=。=，也不要负能量之类的

目前正在写【前端学习路线--基础篇】，作为对入门篇的补充，本文说过前端完全入门的三个阶段，初步入门，基础打牢，能力进阶，基础篇就是针对的第二个阶段

后续可能会找些朋友免费带入门，验证下入门篇和基础篇的有效性，所以记得加群和活跃哈哈哈https://zhuanlan.zhihu.com/p/87230567​zhuanlan.zhihu.com

禁止发任何广告！！维护群氛围，发广告的人会直接T！！

==========2019.09.08更新==========

失踪人口回归了朋友们，今天更新了

3.5 fetch的教程，以及简单聊天机器人的做法

4.5 vue实战项目推荐

目前为止这个学完这个教程你已经可以做出这些东西了简单的静态网站(劝退率：10%)

2048游戏(劝退率:25%)

聊天机器人(劝退率：15%)

简易待办清单--todoList(项目劝退率：20%,vue加成劝退率：40%,总劝退率：60%)

全民答题webapp(项目劝退率：30%,vue加成劝退率：40%,总劝退率：70%)

以及获得持续更新的vue实战项目的收集以及推荐(更新在4.5部分)

==========2019.07.21更新==========

更新了vue入门前的坑相关的文章，说了vue入门前卡住&螺旋蒙逼的主要原因，这边文章什么时候看我也插在这个回答里了，跟着流程走的可以暂时先不用看https://zhuanlan.zhihu.com/p/74546693​zhuanlan.zhihu.com

下次更新会补充一些vue自学的项目的推荐，然后根据最近帮助入门的朋友们的一些疑惑修改下这个回答

==========2019.07.07更新==========

这篇文章仅仅讲怎么入门，入门不代表你会前端，只是让你知道前端这个体系是怎么样的，你还需要加固这个体系才能说自己“会前端”，也就是文中提到的基础打牢和能力进阶，这块知识我以后也会逐渐补充学习路径

这次我在文章里加了，vuex和vue-router怎么入门，稍微完善了点框架学习的路径

然后补充了git和github的学习方法和学习路径，以及什么时候开始学这俩玩意

下次更新会说下入门vue前的一个大坑，大多数0基础会在这里卡死一阵子=。=，但是有人指点的话会理解的很快，大概会在7.14日更新

===========2019.07.04更新=========

收藏数是点赞数的三倍了，朋友们，点赞并且关注我吧，这样我才有持续更新的动力呀

============以下是原答案=========

看了看高赞答案，总觉得高赞答案太干货了一些，如果确确实实做下去的话，确实可以入门，emmmm，但是总觉得只有很少一部分人能够坚持下去。

我认为入门的话一般是靠自学，而自学最重要的其实是驱动力

自学一件事情，如果没有持续的驱动力，兴趣都会慢慢减弱的。刚好前端这个体系又很庞大，就很容易出现这种局面：看html，哎呦，挺简单呀，每天看一点，我很有进步啊(兴趣很高，一段时间过去了

看css，好像难了一点，不过我好像抗的住(兴趣减弱了，又一段时间过去了

看js，emmmmm(兴趣已经不足以让我学习了，摊手

看框架，mmp，好累啊，凉透了(放弃治疗

再见，我不适合编程……

所以学以致用是关键，只学现阶段可以用到的一小部分知识，不至于兴趣磨灭的太严重，然后用项目驱动自己消化知识，用做完项目的成就感来加强自己的兴趣

入门之后再巩固基础，这样大概就能迈进前端的门槛了(说错别打我，毕竟上面都是我自学前端的真实感悟233333)

我在17年用大半年时间自学了前端，做了几个项目，然后进入了准一线互联网厂子。

在拿到offer之后，因为室友考研没去(对，是没去，不是失败……)，又决定教一下他前端，帮他找找工作，结果他在两个月内入门了……找到了一份还不错的工作

他对前端可是0基础……而且是拿空闲时间学习……(要问我为什么的话，那可能是因为他聪明吧233333

所以我来分享下这个套路，能不能帮到大家，下面开始上干货啦

============干货分割线==========

如果你还不太了解编程，或者想知道自己有没有编程的兴趣，请先看这篇文章，如果是奔着前端来的，跳过这个回答自学简单编程可行吗？​www.zhihu.com

正文开始

先说下需要的工具

版本控制：github和git(先不用学这个，后面我会讲到在哪个时期学)

编辑器：vscode(推荐，因为我是vscode党)，webstorm，sublime……

调试工具：chrome devtool

包管理：npm(这个在学习框架的时候再开始用吧，一开始看对新手还是有点劝退的)

=================

如果以找工作为目的的话，学习前端我把它分为三个阶段兴趣启蒙+初步入门

基础打牢(巩固基础知识，对写过的代码有深一点的理解

能力进阶(说白了就是刷刷面试题吧23333，了解一下新一点，高级一点的技术

然后这三个阶段的核心都是靠项目驱动，没有项目巩固的知识点，做了也记不住~~(一开始可能是通过自己的项目驱动，到之后也可以靠实习的项目来驱动

这个回答我会详细说说怎么入门，也就是第一个阶段，这个阶段的核心就是，学会一个前端生态的最小单元。

这句话是什么意思呢，就是只学习目前用的上的一小部分html，css，js和框架，完成一个基础项目

这时候就已经入门了，可以反过头来巩固基础知识了。

下面是学习这个最小单元的4个部分

1.学习html(1-2天，不要超过2天)教程：w3cschool，不推荐视频教程(因为视频教程讲的太多了，很多东西对于入门做东西用不上)

推荐读物：不推荐

只看我这张图上提到的部分(图上的大纲都是按照w3cschool的教程写的)，要看到什么程度呢？大致有印象，知道这个标签是干啥的就行了学习html大纲带着这几个问题去看教程，保证看完之后这几个问题都有自己的理解html是什么

html的基本结构长什么样子

标签是什么

属性是什么看完之后用这个html自测表测一下自己，看看能记起多少标签，10个左右就可以进入下一阶段了html自测表

2.学习css(2-5天，不超过5天)

还是那句话，学以致用，只学满足自己做小项目所需的最少知识教程：推荐w3cschool，不推荐视频教程

推荐读物：css权威指南(全部都学完了回过头来再看吧)

只学我这张思维导图提到的部分，学到什么程度呢？有个大致印象，能对下面那些问题做出自己的理解就好了学习css大纲带着这几个问题去看w3cshcool的教程css是什么

css的语法是怎么样的结构

怎么对一个标签增加简单的样式，自己尝试一下？

css盒模型是什么

display的值有哪几种，这几种值区别是什么

css怎么实现垂直水平居中？你能使用几种方式实现？

页面的常见布局有那几种，分别可以怎么实现？

等等，在这里先学会调试的html+css部分，免得遇到各种样式问题无法解决https://zhuanlan.zhihu.com/p/145466139​zhuanlan.zhihu.com实现前端生涯里第一个小项目，做一个google首页

你可能会遇到几个问题怎么垂直水平居中？？ 上面那几个问题你解决了的话就不会遇到这个问题了，这个属于页面的常见布局

打不开google怎么办？？ emmmm，打不开google就做百度呀，长的没啥差别，我主要是觉得google好看

用不用做的太精细？？ 不用，凭着感觉走，又没人催你交作业对吧，像那个小话筒icon懒得做就不做呗

没思路怎么办？？这……私信我吧，我给你拆解下结构你再想……google首页

好了，到这你已经变成一个小白切图仔了，可以做一做简单的静态页面啥的了，现在你可能会在下面两种状态的其中一种我的代码写的太丑了啊啊啊啊啊啊，怎么办啊？

感觉过的去啊，并没有什么不适感233333

如果你处在第一种状态，找一份看的过去的代码规范修一修(代码规范，借用了高赞大佬里面的那个链接，我懒得找了=0=)

如果你处在第二种状态，咱就甭废话了，继续吧

3.学习js(1周-3周)

这大概是开始劝退的一个阶段了，因为开始复杂起来了呀~~很多人都在这溜了

好吧，这个还是看你又没有编程基础，如果你学过vb，c++这种东西，哪怕挂科了，只要脑子里有个概念，这里就比较好学

如果完全0基础，慢慢啃吧=0=，完全0基础还是看视频来的快教程：w3cshcool的教程(适合有微弱编程基础的人，就是至少知道变量是啥，能看懂简单for循环的人)& 完全0基础的人，可以看视频了(我没看到啥合适的视频，慕课上的js入门视频可以看一看，主要还是按照下面的大纲来，和大纲无关的视频就可以跳过了)

推荐读物：高级程序设计(全部学完了回过头来再看吧)

只学这张思维导图提到的部分js大纲带着这几个问题去学习js有哪些基本类型，每种基本类型是干啥的

对象是什么，函数是什么，数组是什么

数组，函数，对象的常用方法有哪些

DOM是什么，我能用它做什么

jquery是什么？

在这里要学会js调试了，不然学起来真的会各种崩盘=。=来来来，学习调试的js阶段https://zhuanlan.zhihu.com/p/145466139​zhuanlan.zhihu.com实现前端生涯中第一个有趣的项目，做一个2048小游戏

说到这你就有那么一定概率蒙逼了，我感觉啥都不会，就做游戏了？？扯淡呢吧？其实并不是呀23333，当然不是让你直接写，这个是有非常详细的视频教程的

写完你就会发现，好像也挺简单的呀，原来我学的这么点东西可以做小游戏了呢，到时候就很很有成就感~~(问我为啥？emmmm，我当时也是这样学前端的呀

游戏视频教程：2048教程地址(慕课上非常有年代感的一个教程了，但是我觉得对入门来说还蛮好，而且这个课程免费又详细！！如果当时不是这个教程我就被劝退了)你可能会遇到一些问题现在jquery用这么少，为什么我要搞这出，学了也用不上啊？ 这个教程是为了让熟悉js的，jquery只是顺带，而且让到这个阶段的你用框架实现 你也没辙对吧，所以还是jquery实现靠谱点

代码课程里都有了，我看懂课程复制粘贴不就得了 ？千万不要这样做！！！千万不要！！你要知道自己写和看代码是完全不同的两件事，你可以看完每节课程，然后把课程关掉，按照自己的理解写出这节课相关的代码，但是一个字母都不要复制粘贴！！

好多语法不懂怎么办？？ 不懂就查，查了就记，这才叫项目驱动，学以致用嘛现在你做完2048了，开瓶香槟庆祝一下吧，然后……做个复盘吧2333333

画出2048的游戏流程图

想想自己重新写的话，每一步逻辑是不是还很清晰，脑子里模拟下重写~~

学到这里，你可能觉得自己老厉害了，已经可以写小游戏了，那么我就告诉你一个好消息和一个坏消息吧好消息：你已经开始入门前端了，已经可以看懂前端的初级知识了，已经可以通过代码解决问题了

坏消息：同时还有一个坏消息，你现在大概是6年前的小白前端的水准(打个比方，别深究~~

好的，现在你可能有下述三个状态其中之一妈的好难啊！！脑细胞都快死完了，再写一遍不知道写不写的出来，好多语法不懂balabala……

还好啊，就是有些语法不太懂，想巩固一下

兴奋ing，继续干吧

状态1的话：整理笔记，好好消化。然后再开始学习。状态2的话：买一般高级程序设计翻一翻看一看吧，觉得无聊了开始下一步。状态3的话：go on

稍微等等，你现在需要学习一个工具的使用

那就是上面提到的git和github了~这个过程需要2天教程：Git教程​www.liaoxuefeng.com只看这张图中红框标注的部分git大纲你可能会遇到一些问题蓝框标注的是什么？蓝框标注的内容也是git极端重要的一部分，尤其是在多人开发中，但是你现在可以暂时不用，这块可以在会使用git之后重新回来补学，标签管理也可以看看，但是重要性不如分支管理

为什么老是提示命令不存在的情况？廖大大的教程是在mac上的，里面的命令是针对mac和linux系统的，所以你在window上用不了，遇到这种情况可以查：xx命令在window上对应的命令是什么

说是学习两个工具，为什么这里只给了git的教程？因为github是个远程的代码仓库，你目前要学关于它的部分只是怎么创建仓库和怎么把代码放上去，这些东西一查就查到了然后解决这几个问题github是什么？怎么在github上创建一个仓库？

怎么把github上自己创建的仓库克隆到本地？最后做一个练习：把你上面做好的2048用git提交到github

你需要执行这些操作：(我没有把命令写出来是为了让你思考下=。=，所以你也不要直接按照网上的命令照搬，想清楚每条命令是干什么的，为什么要这样做)克隆远端一个空仓库到本地

把2048复制到这个本地仓库里

用add命令把新增的文件添加到git

提交commit

把更改同步到远程仓库

欧克欧克，下一阶段~

3.5.学习fetch

emmmmmm,为啥子蹦出来一个3.5呢？？好的吧，我承认我之前把这玩意漏掉了

作为前端，和后端通信是必然的，因为需要从后端获取数据呀。

那么什么是通信呢？？通信简单来说就是从后端拿到前端需要的数据，这么来说吧，上面那个2048的游戏，数据就是那个二维矩阵，这种数据一般放在前端就可以了

但是有些数据，例如用户信息这种隐私型的数据，是需要放在后端的，放在服务器那集中储存和处理，要拿到这些数据，就要使用到一种约定好的通信方式，比如ajax和fetch，(ajax虽然也还在用，但是比起fetch已经是过去式了，所以这里只说fetch)promise教程(能查到大把入门教程)promise教程

fetch教程(随便查就可以，很简单，推荐)fetch教程

老规矩，带着这几个问题去学习promise是什么，它为了解决什么问题？

fetch是什么，为了解决什么问题？

fetch和promise有什么关系？

fetch和ajax有什么关系？

其实上面那些问题很简单，不要查的太深入了，现在可以做项目了，可以做什么呢？？不要惊讶，你可以做一个聊天机器人了，没错，就是聊天机器人

hhhh，其实想简单做的话几行代码就搞定了，复杂做的话也有很多种玩法

说说是怎么做吧，之前在上面说了，前端是要从后端拿数据的，那么如果前端能传给后端自己想说的话，然后后端再答复回答是不是就好了，那么这个过程是怎样做的呢？上面那个链接是可以点的，点了之后浏览器会自动请求这个借口，并把数据展示出来，把“关键词”替换成你想说的话就可以聊天了~~

你要做的事就是把这个过程移植到代码里~最简单的就是一个输入框输入你想说的话，然后请求，然后把回复展示出来，一个聊天机器人就做成了~

示例js代码

fetch('http://www.xhxly.cn:8080/api.php?key=free&appid=0&msg=%E4%BD%A0%E5%A5%BD')

.then(response=>response.json())

.then(data=>console.log(data))

用上面的代码就可以获取到接口数据，至于链接为什么和上面不太一样，因为上面那个链接跨域了，我用自己的服务器做了下转发，没理解这段我说的是啥的话就跳过吧，用下面示例代码就成了～～

其实还有很多种玩法，比如天气查询，美食查询等等等，比如做一个微信机器人或者公众号，把机器人移植进去？然后就变成了贴心暖男？？？(相关请搜索，图灵机器人，青云客智能聊天机器人API)(其实我也做了个简单的=。=，想要试试的话私我我给你机器人的微信，如果想要详细教程的人多的话我也会推荐或者写出来~~)

下一阶段把哈哈哈哈

4.学习框架(2周-1月)

框架对入门越来越不友好了，功能越来越多了，各种东西层出不穷，如果你要学框架的话，咱就从vue开始吧，为什么用vue？中文社区完善呀，而且学习曲线不是很陡峭，而且公司里常用呀

学习vue之前，你得了解下前端的一个大杀器：node.js

先安装好node.js然后搞懂这几个事情node和npm是什么，他们可以用来做什么

npm init命令有什么作用

node_modules和package.json有什么作用？

好了，在学习vue前，你需要避开一个大坑，这个不然你会决定项目突然变得很复杂，不知所措，这个大坑我也梳理成文章了(可以先把这篇文章过一遍，之后可以解决你不少疑惑)https://zhuanlan.zhihu.com/p/74546693​zhuanlan.zhihu.com

好了，开始学vue吧教程：安装 — Vue.js​cn.vuejs.org

这里可以看视频了，但是我没发现特别适合入门的视频，慕课上那个免费的vue2入门的课程可以看下(走用npm安装vue，新建vue项目的流程，这个很重要)推荐读物：不推荐读书=0=，多看文档，前端框架变化太快了

这里就没有大纲了，把官方文档的基础部分看完就好了，其他的不用看，vuex和vue-router相关看到就跳过吧，暂时对你来说不需要

带着这几个问题去学习使用vue-cli生成的项目，目录结构是怎么样的？其中的每个文件夹和每个文件的作用是什么？(vue-cli是有官方教程的，按照官方教程来生成项目！！！)

什么是双向绑定？

mvvm框架是什么意思？

实现一个todolist，网上demo很多，找一个一步步来就好了，关键是要理解mvvm框架的意义，为什么要使用mvvm框架

关于框架这一块我写的不太详细，有空再补充吧，我感觉这里一开始主要卡着的点应该就是关于项目的复杂结构(对新手而言)，不清楚那么多文件是干什么的

vuex和vue-router做好了todolist之后，你需要了解两个东西，也是工程化非常重要的两个东西

vuex&&vue-router

教程：开始 | Vuex​vuex.vuejs.org介绍 | Vue Router​router.vuejs.org同样，这两个教程只看基础部分，然后解答下面这些问题vuex和vue-router分别是什么？

vuex和vue-router分别能做什么？

vuex和vue-router的诞生是为了解决什么问题？

什么情况下需要使用vuex，什么情况下需要使用vue-router？解决了这些问题之后，你需要实战，这里推荐一个github上对vuex，vue-router入门比较友善的项目：https://github.com/bailicangdu/vue2-happyfri

实战要点：先看懂项目中vuex和vue-router的用法(第一步不是看懂项目，而是看vuex和vue-router怎么用)

自己新搭建一个项目，配置好vuex和vue-router到能使用的地步

看懂项目

自己实现，实现的时候就不要看源码了，想不明白的地方可以回来看

好了如果进行到这里，你大概也就入门了吧23333，这个时候你也就能利用前端的知识解决问题了，但是离一个前端还是有很长的路要走的~~比如上面说的基础打牢和能力进阶

4.5.项目推荐

1.vue完成的饿了吗前后台webappbailicangdu/node-elm​github.com

2.一个vue完成的QQ音乐timelessover/vue-QQmusic​github.com

基本上上面项目都能自己做出来之后，前端也就彻底入门了，补充基础知识之后，找找工作实习也没啥大问题(但是很多人卡死在vue门口=。=)，加油吧朋友们

========干货结束分割线======

关键其实还是驱动力，如果项目驱动能给你足够的动力的话，那就不停的找项目做吧，走完上面的流程，再看看书的话，找个学校的工作室帮老师做项目就好了(应该到工作室的门槛了)~

如果驱动力不够的话，那就关注我呗~我之后会发些之前从入门前端到现在遇到的一些事情，希望对你们有些帮助~

如果有不懂的可以来问我~说不定你骨骼清奇，一下子就打通任督二脉，直接入门了呢

码字不易，各位观众姥爷点个赞再走呗=0=，这可是知乎首答呀~