2018黑马36期web前端全套视频教程

2018年那会儿，黑马B站上搜“web前端”，期w前端全套黑马程序员36期的视频视频几乎霸屏。我硬盘里至今还存着这套资源，教程文件夹名字就叫“hm36”，黑马一共40多个G。期w前端全套打开一看，视频从HTML标签讲到Vue项目实战，教程连flex布局的黑马兼容写法都单独录了一集。

这套教程最大的期w前端全套特点，是视频它不装。很多机构录视频喜欢把环境搞得花里胡哨，教程一上来就Webpack、黑马ESLint全配齐。期w前端全套黑马36期不是视频。第一天的内容就是记事本写HTML，浏览器直接打开。讲师原话：“你先知道标签长什么样，再谈工程化。”这话放到今天看，反而比很多“21天精通”的课实在。

我印象最深的是讲CSS盒模型那几节。讲师拿一个快递纸箱举例，padding是泡沫，border是纸箱壁，margin是箱子之间的空隙。然后他在黑板上画了个图，把content、padding、border、margin标得清清楚楚。接着打开Chrome DevTools，现场改数值，页面实时变。这种“先讲概念再动手验证”的节奏，比纯念PPT强太多。

JavaScript部分占了大头，大概有120多集。从变量声明讲到原型链，再到ES6的箭头函数和Promise。有个细节：讲this指向时，讲师写了段代码，在浏览器控制台里一步步打印结果，然后说“你看，普通函数的this是调用时决定的，箭头函数是定义时决定的。别背，自己敲一遍就懂了。”这种教法不玄乎，但管用。

项目实战有两个：一个PC端电商网站，一个移动端外卖App。电商项目用的是jQuery，外卖项目用的是Vue 2。有意思的是，讲师在Vue项目里专门花了两集讲“为什么不用jQuery了”。他对比了两种写法：jQuery操作DOM要选元素、绑事件、改内容，三步；Vue直接改数据，视图自己更新。然后他说：“不是jQuery不好，是场景变了。”这种不踩一捧一的讲法，听着舒服。

这套教程的缺点也很明显。录制时间在2018年初，Vue 3还没发布，React只提了一嘴。Webpack版本是3.x，现在跑起来一堆警告。还有，讲移动端适配时用的还是rem加flexible.js，现在更推荐vw。但话说回来，基础部分——HTML语义化、CSS选择器优先级、JS闭包和异步——这些东西没怎么变。拿它入门，比看那些“三天学会React”的速成视频靠谱得多。

我后来带过几个新人，有两个就是看这套教程入门的。其中一个跟我说，他最喜欢讲师在每章结尾说的那句“别急着往下看，先把这章的代码敲三遍”。这话听着像废话，但真照做的人，基础都扎实。另一个新人跳着看，直接跳到Vue实战，结果连事件冒泡都搞不清，调bug调了一下午。

现在这套教程在B站还能搜到，播放量早就过了百万。评论区有人问“2024年了还值得看吗”，底下回复挺一致：基础部分值得，框架部分换新的。我觉得这评价挺准。教程本身不会过时，过时的是工具版本。你要是刚入行，花两周把HTML、CSS、JS那部分过一遍，比刷短视频强。至于Vue和React，学完基础再找新文档，别指望一套2018年的视频能管一辈子。

最后说个实在的：这套视频每集平均20分钟，讲师语速偏慢，可以1.25倍速看。但敲代码的时候别倍速，该停就停。我见过太多人视频刷完了，关掉播放器，一个字写不出来。那不是教程的问题，是手的问题。