第一、 前端入门

个人建议是先熟悉前端的基础操作。

前端的基础：JavaScript，HTML，CSS。

基础入门可以按照网上的2021年前端视频学习，看教程的同时，要多多练习。

走向大神的路无他，唯手熟尔。

如果想做网页，那就学习HTML。

想做层叠样式表，学习CSS，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

然后JS，也就是Javescript的语法、时间、对象、Dom等基础知识也最好掌握一下。

第二、做项目

我一开始接触的项目是视频弹幕。

一来零基础要学得太多，二来离开大学后很久不学习了，从头学起会消磨耐心，而我想直接上手看到结果。

于是直接报了一个网课，学视频弹幕、Video.js、腾讯云Cloudbase和其他必备的知识点。

说得有些笼统了，怕小白看不懂，简单说一下。

通过Video.js就可以实现比较方便的视频直播功能，之后利用Serverless平台腾讯Cloudbase来储存数据。

由于Cloudbase提供了云函数、云储存和云数据库等，我们只需要自己进行前端的功能实现，后端可以直接交给Cloudbase。

所以能免除很大一部分学习的时间，学习效率非常高。

我当时上的网课给了一个很详尽的资料包，基本上跟着看完学完也就懂得差不多了。

资料包里包括：

了弹幕实现的底层原理。

常用的DOM操作、创建DOM元素、获取DOM元素。

常用的浏览器事件。（click、change事件等）

JQuery的常用操作。

Vedio.js的常用配置，方法和事件以及自定义组件和样式。

腾讯云Cloudbase的基础用法，显现数据的存储和获取。

动画的实现原理和方法。

课上也会讲前端的行业分析、发展，包括就业指导、1v1学习指导等。

学完基本上就能模拟实现B站的视频播放器，比如倍速播放、发送弹幕、高级弹幕功能等。

也可以用Serverless平台腾讯云Cloudbase来保存弹幕数据。

做完弹幕视频这个项目之后，我算是入行了前端，也逐渐意识到了前端看起来最简单，其实学起来是一个螺旋上升的结构。

HTML、CSS、JS都很重要，尤其是JS，对工作简直是入行的敲门砖。

学完可以考虑vue、react框架和node，用处非常大。

到这个程度，赚钱就不是问题了。

如果你想加工资，那继续往下看。

近几年前端发展迅速，ES6的普及速度更是惊人，所以一定要学习ES6/7（ECMAScript 6入门）。

其次是Node.js，Node.js是服务器端的一个平台，其给前端开发提供了很多实用的工具，是如今前端开发的重要组成部分。

工具推荐：Babel，Webpack，Postcss。

框架推荐：React，Vue.js。

最后，具体说一下前端要学什么吧。

1. HTML + CSS

前端的入门门槛极低，体现在 HTML 和 CSS 上。运行环境就是浏览器，推荐 Chrome。你需要的只是一个编辑器，直接用 VSCode 吧。

HTML 和 CSS 不是编程语言，前者只是结构标签，后者则是样式配置，入门是非常简单的。网上资料也有很多，可以参考 MDN。

我当时是看了一本书 《Head First HTML and CSS》，比较无脑，虽然浅显易懂但价格比较感人，粗略翻一遍就可以了，不用买。

迅速刷一遍 MDN 上介绍 HTML 和 CSS 的部分，对两者有个大致印象就好，不用死记硬背，短时间记不住的。刷慕课网勉强还行，但以后查资料还是要看 MDN 的，建议一步到位，最好看英文原版的。

接下来就是学习 CSS 了，CSS 要学深入非常难，入门的话会切图就行了。推荐：

《CSS 权威指南（第四版）》。第四版包含了 CSS3 的内容，不需要再看别的了。这书非常枯燥，花几天硬啃下来就好了。属性细节不必记忆，以后用到肯定要再查的。着重点放在大局上，抓住重点快速过一遍，比如盒模型、定位、弹性盒布局等。

以上内容用时 5 天左右，主要是啃《CSS 权威指南（第四版）》。

下面是实践。

学了几天 HTML 和 CSS 了，应该也有点成果了。打开 IFE2015 task1，写个静态页面吧。

写不出来是正常的。可以去看下别人的代码吧，看一小部分就开窍了。忘掉的属性就查书或者查 MDN，多尝试，不断踩坑才有进步。

2.JS：

JS我选择跟网课去学习，会更详尽、更容易上手。

如果纯自学，建议阅读《javascript高级程序设计》第三版电子版。

敲出来的代码，思路不清晰时，可以在firebug,chrome里边打个断点跟一下，理理思路，理解代码的逻辑，这样影响才会深刻。

初学者没办法都是这样，也只能这样。但是初期可能稍微慢一点，但一直不会这么慢，也不会想象的那么长，因为随着基本概念的掌握，编码技巧的熟悉，开发工具的熟练，消化视频的速度会越来越快。

现在我已经成功地找到了工作，网课的这份教程也就没用了，现在分享给大家，只需要关注我，私信我“前端”即可获取全套WEB前端学习教程。