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

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

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

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

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

各位怎么看 :doge

codefever

2022-05-09 11:42:06 +08:00

基础：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

2022-05-09 11:47:32 +08:00

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

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

瞎谈，以上。

FranzKafka95

2022-05-09 12:11:54 +08:00

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

libook

2022-05-09 12:23:12 +08:00

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

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

AmberMmoe

2022-05-09 12:41:20 +08:00

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

Finnn

2022-05-09 12:42:53 +08:00

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

retrocode

2022-05-09 12:48:26 +08:00

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

shakukansp

2022-05-09 13:08:43 +08:00

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

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

不知道你有没有实际教过

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

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

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

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

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

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

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

uCharles

2022-05-09 13:13:53 +08:00

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

mouxinzi

2022-05-09 13:47:39 +08:00

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

dcsuibian

2022-05-09 13:51:39 +08:00

个人是偏反对方面的。因为我在刚接触 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 上乱点一通然后不说为什么的，不过编译型语言总归能让你发现错误更早一点）如果一个人能速成，那他大概率就是这种人。

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