[有 0.01 点点基础的人]自学前端的正确路线是？

[SilencerL]

早上起来刷了下 B 站直播，看到一位QA 裸辞自学前端的朋友在直播学习前端，学习的路线是找了个五六七八年前的 XX 机构前端教学视频，从最基础的 HTML/CSS 开始学习，还没有涉及到 JS 区块。

看了一会儿感觉他这么学真的好累（或者说好慢），在现在框架横行的情况下，以就业为目的的前端自学路线还应该是这样吗？我问了一下我自己：如果让我辅导一位曾经从事测试工作并且对一些程序逻辑等有一点概念的人自学前端，我会怎么为他指定指导方案？

想了一下，我大概会让他直接快进到从 React 或者 Vue 入手，也许会用一天甚至更短的时间稍微讲解一下 HTML 的标签和其原生 attribute 的写法和含义；然后再用一两天讲一下 js 的基本操作；最后直接给他一个框架的脚手架，用框架开始一个项目的实训（如果假定以 React 为开始的话，大概在 JSX 的使用中就能理解和复习大部分的 HTML 标签，同时在实训的过程中一步步巩固 js 的知识以及学习基础的 CSS 知识）。

我不知道我这种想法是不是正确的，只是感觉如果和 jQuery 时代一样开始干学 HTML/CSS/JS 的话实在是追不上时代的步伐（……），如果是以爱好为目的的学习也许没什么不妥，但是如果是已就业为目的，那的确应该用一种『赶鸭子上架』甚至说是『拔苗助长』的操作路线更好，吧？

各位怎么看 :doge

[codefever]

基础：HTML+CSS 网站页面搭建，CS 核心和 PC 端页面开发，HTML5 移动端页面开发
核心：web 前端核心技术 JavaScript ，ecmasript ，dom ，ajax ，json ，正则，作用域，运动框架，核心算法，高级函数，插件封装，jQuery 等
高级：html5+高级 JavaScript 开发，大数据可视化，webapp 交互接口，lbs 定位，微信 sdk ，es6 标准，高级算法，数据结构，插件封装。
框架：vue 、react 、angular 企业开发应用。
企业要求：bootstrap ，swiper ，iscroll ，sass ，ps 切图，网站上线等。

[chinc]

我认为你的想法是对的，前端不是学习数学、物理那种需要大量的前置知识，前面不掌握后面完全无法学习，而是如你所说，很快过一遍 HTML/CSS/JavaScript 三件套，在现在的脚手架的基础上，就可以做出一些东西。

但是自学者很难知道自己的水平，在这个水平上做什么项目。我认为这时候最能体现老师的作用，按照学习者的水平，布置合理的项目，再对项目完成情况进行检查，与学习者交流、反馈，帮助其提高。

瞎谈，以上。

[FranzKafka95]

我最近就在自学前端，按照 OP 的说法，基础的 HTML/ CSS/JS 是不需要学习的吗，一上来就看 Vue 或者 react 也是可行的?

[libook]

前端知识虽然比较分散，但也是有依赖关系的，比如框架依赖于语言基础、Web 基本原理、浏览器机制和 API ，语言基础和 Web 基本原理又依赖于计算机基础。当然直接从框架开始学照猫画虎也不是不行，上手可能也比较快，但后期深入学习和解决问题的时候可能会走很多弯路。

新手建议优先看官方文档、权威文档（如 MDN ），如果真想长期从事的话，建议不要把博文、视频、公众号上的信息看得太重要，可以在自己掌握权威信息基础上，用来扩展思路和实践经验。

[AmberMmoe]

我当时是从 couresa 上面找了一个教程边上课边写作业，感觉上手还是挺快的。不过就是个入门级。

[Finnn]

@FranzKafka95 基础当然需要, 完全没基础的你看任何框架不都是天书, HTML CSS 这种没有逻辑性的东西知道查字典就行了, js 还是要有编程思想或者基本的概念的, 如果不是精学过, 以后学习要速通至少 2 、3 遍吧
面向需求学习的好处是很容易抓住工作中的重点高频点, 仅 web 前端其实也是很大的范围, 图形化, 游戏开发, 单纯的普通网页用到的技术其实差异也蛮大的, 算是个看似容易的编程方向, 深入发展之后跟其他编程语言没什么不同

[retrocode]

你感觉是对的, 当前不管前后端实际上相当一部分的概念是日常开发用不到的, 特别是所谓的'底层',对于真正的小白来说这些应该后置作为后续提升的时候了解的, 一开始最重要的目标应该是快速上手
以前端为例, 我应该会跟你差不多,
html 花一天给他普及概念, 最后告诉他 记住 div 一把梭就可以了
css 讲一下基础长宽高 flex 颜色几个常用属性
然后直接教他安装 node,并上手 vue
有了基本骨架,后续自行折腾,遇问题随手百度就可以了

[shakukansp]

大体思路可以，但是实际用这几天教基本不可能

0.01 基础，讲一两天 js 基本很难开始写东西

不知道你有没有实际教过

脚手架，你得给他解释很多遍 import export

刚开始写点东西就会遇到引用类型和值类型的问题

vue 的话全局注册组件，局部注册组件要解释半天，怎么父子组件、跨组件传值解释好半天

react 用 class 组件很快要遇到 this 和 bind call apply, 用 hooks 很快遇到闭包应用和异步 state 问题

总之就是一旦页面最终展现结果和他 0.01 基础的结果预期表现不一致那么你就要花很大功夫去给他解释

就算你当时讲的很清楚，过半小时又不会了

所以你这个时间估计的还是太理想了

[uCharles]

以我来看，个性使然，我喜欢前期铺垫大量基础知识或者看个相关的东西看一周左右再去上手，但是我同事喜欢直接上手，不会的直接百度。

[mouxinzi]

我们的应届一般是这样的...
学习 html+css 然后 js,就开始自己一边学 vue,一边在项目上从简单的开始跟做做
做到一定程度 再加强 flex,es6,http 相关的基础,开始尝试模块开发以及尝试自己自己配置最基础的 路由 导航 权限
这个时候基本能做项目了

[dcsuibian]

个人是偏反对方面的。因为我在刚接触 web 时就差不多是这样揠苗助长的，不过还不是框架的时代。（准确地说，是给了做 web 的目标，然后放任生长。）那段路就是我技术路上最痛苦最怀疑人生的时候。

最大的问题就是：不知道代码为什么跑的通，为什么跑不通。
那时候干过的蠢事包括但不限于：手动拼接 JSON 字符串（根本不懂 JSON ）、在不了解 js 类型转换机制的情况下瞎调方法、js 设置 cookie 参数（这个其实没问题，但现在我会后端用 Set-Cookie 字段）、总是想用同步的思路写代码、代码调试用 alert 、试图解读 undefined 的概念、以及网上 copy 一段上传下载代码调试半天。。。一个基础功能也得弄个大半天，在写完后一遍又一遍地打开网页看效果。真的是极其痛苦。
这段促成我转了后端。直到前两年下定决心搞懂这个东西才开始精耕细作地学。看了 HTML 、阮一峰的 ES5 和 ES6 、《精通 CSS 》，然后看了现代化一点的 vue 、node 、webpack 等等一直到现在。

在我老师的描述里，JavaScript 似乎是种特别简单省略的语言，能轻松上手。但实际根本不是这样，是需要花很多时间去学的。在认真学了之前，我根本不知道为什么要用回调的形式写代码、不知道 JSON 的具体要求、不知道如何使用 debugger 和 Chrome 调试工具、不知道对象的所有键都是字符串、不知道 js 所有的数字都是 64 位浮点、不了解 dom 操作的 api 、不知道事件处理和冒泡的原理、不理解闭包机制、不了解错误处理机制等等。更不要说 CSS 这种现在都有点难理解的东西了。


我以前一直觉得说前端简单的人脑子有坑，后来才想明白了：浏览器宽松的错误处理机制使网页不至于整体崩掉。而不少人是那种网上随便复制代码，跑起来就用，跑不起来就扔的，能用了也不分析不删减的。（后端也一样，也有人是那种各种复制 xml 、去 idea 上乱点一通然后不说为什么的，不过编译型语言总归能让你发现错误更早一点）如果一个人能速成，那他大概率就是这种人。

对于这些速成的人吧，我是真心觉得又菜又牛逼。菜就不说了，牛逼的是他们每天看着一堆不知所云的代码，一个小功能调半天还能忍下来，换我是绝对忍不了的。

[superfatboy]

@codefever “bootstrap ，swiper ，iscroll ” 这三个貌似不是要求吧？？ 没遇到面试需要会这三个框架的？？

[onehalf21]

@codefever 对的

[tianyou666shen]

淘宝买培训班课 /b 站白嫖
黑马的就不错

[elboble]

我也是 0.0.1 那种，我觉得前端的学习曲线对于我来说比 python 要高很多。HTML ，CSS ，JS 看着没啥章法，东一榔头，西一棒子，不知道怎么系统学习，更不要说上框架以后，而且本身语言还在发展，框架还在升级。

[Dingjiangnan]

“然后再用一两天讲一下 js 的基本操作”，反对。

https://zh.javascript.info ，建议把这篇教程阅读并跟着敲 3 遍以上

[Zchary]

https://roadmap.sh/react

[sinnosong1]

https://chinese.freecodecamp.org/learn/，跟着这个线路走走呗

[westoy]

因为那些都是机构养的帐号群啊

0 基础 + 老教材 + 加微信群 + 卖课一条龙服务

就是通过这种低效学习方式筛选付费率更高的小白的啊

[soryer]

@chinc 感谢详细的分析和解答

[l4ever]

html->css->js->http->jQuery?->ts?->webpack->框架(react or vue)->

[wonderfulcxm]

不敢苟同，基础很重要，尤其是 js ，坑巨多，框架没那么重要。

[vision1900]

真就 Fake it to make it ？纯 JS 至少学一个月(不包括高级特性比如迭代器｜原型链｜ Proxy ｜ ES2017+)吧

[irisdev]

一两天能把 JS 的数据类型和函数看完就不错了

[aleen42]

路漫漫其修遠兮

[GeruzoniAnsasu]

@dcsuibian

#11 hhh 有点惨， 这么一说发现确实有相当多的基础知识其实刚接触还挺抽象难懂的。

我想很多人说前端简单的原因是——大部分人学编程都不是从 js 开始的，他们会先接触各种数据类型、数据结构、对象模型、库 API 、IDE 和调试器，等注意力转到 js 上时，他们会发现 js 的范式和设计模式都是熟悉的，复杂度也不会很高，运行环境也相对标准化（只说 js runtime 不谈适配 IE 这种「 hacking technique 」），程序的主要目标也仅仅只是「拼一拼字符串」，所以看起来确实比较简单。毕竟对于 native developer 来说，画一个图背后已经需要整整一坨图形 API 相关的基础知识储备了，与前端根本不能比。

附个图：




速成是有条件的，但很多东西也真的都是相通的，同一个概念在不同语言和环境下的不同实践而已，一定程度后「学习」内容其实只有新环境（指新语言、生态等）的约定、规范、特有实现而已，实际上绝大部分已经学过了。

比如我写过 mfc winform wpf qt(c++)甚至 qml ，来摸前端我只会问你们前端框架实现数据绑定是浏览器做的还是什么事件触发的，vue 和 react 的区别在我看来只是「把 markup language 编译成 script 」 vs 「用 script 动态生成 markup language tag 」选择方向不同而已，而这两种方向以前都早干过各式各样类似的事了。



------

学习前端我的看法是，他必须已经明白「用 html 控制元素，用 CSS 控制样式」的意义。

if not, 那么从 html+css+js(jquery)开始
if so, 那么可以直接快进到响应式框架，中途带过 DOM

如果他已经明白响应式是怎么回事，能想象模板代码是怎么编译的、ViewModel 层是用什么机制实现的，那他只需要文档参考，「学习」仅相当于熟悉语法、浏览器 API 、框架组成而已，说是「学习知识」不如说是「获得实践经验」

[DiamondYuan]

自学前端的路过，分享一下我的经验。 （成功：拿到了头条 offer

分享一下我的看法

1. 不需要系统性的学 css 、90% 的工作都可以用狂欢解决。
2. 建议直接上手 vue 和 react 。按照以下流程

[DiamondYuan]

不下心回复了，接上文。

学习流程（有编程基础的，如果没有编程基础，建议先学会 js ）
2.1. 先通过 vue-cli 直接开发，在脚手架的基础上写自己的项目。
2.2. 项目开发中不断解决遇到的问题，学习 状态管理、前端路由、前端组建、接口请求等概念呢
2.3. 碰到脚手架无法解决的问题，学习 webpack 、vite ，定制自己的脚手架。 学习 js 的打包机制。
2.4. 写项目过程中找一本 javascript 的书籍，完整的读一遍。 了解 js 语言的各种细节。

[Q65f257Thf3o2cyZ]

自学三个月，就找到工作了。目前全职远程 React

1. https://www.freecodecamp.org 的前端课程刷完 (老旧的不看，比如 JQuery ，重点是你能完成项目)
2. 写简历，快速准备面试，你学它是为了找工作，不是为了成为专家。
3. 完善领英和 Github ，把你的项目都放上去
4. 学好英语，准备面向全球市场求职

[foam]

几乎没有基础的同学，如果为了速成入职，我一般建议他去报班。
如果不报班，我建议找最近 2 年的前端培训班(例如黑马)视频去看，去摸索。
培训班的学习路线，不是面向学习最佳的路线，但大概率最好的面向就业的路线。