前言

在这一两年的校招期间，很多人都会谈论入门前端是通过观看视频网站来进行的。我当年入门时，是通过观看淘宝、腾讯的页面而逐渐成长起来的。本文是由@大漠哥哥授权进行分享的。（文末有惊喜）

正文从这开始~

我思考了很久才开始写这篇文章。接着就出现了一个问题，那就是为什么要写这篇文章呢？实际上是有一些原因的：在万能的知乎上，经常有同学邀请我去回答一些问题。

...

录制前端视频上线后，有同学问我类似问题。有的同学问是否应该购买视频，有的同学问是否应该参加线下前端培训班，还有的同学问是自己自学还是怎样。

什么是前端

前端是什么？大部分所指的是 Web 前端开发。这个词是由网页制作演变而来的，在名称上有着极为明显的时代特征。在互联网的演化进程中，网页制作是 Web1.0 时代的产物。那时，网站的主要内容为静态内容，用户使用网站的行为主要是以浏览为主。在这个阶段，网站的内容主要是以文字内容和图片为主，制作方法也主要是通过使用表格进行拼装。印象中，那时主要是这样的：先画一个表格，然后将真实的图片和文字填到这个表格里，这样就叫做网页了。

2005 年之后，互联网步入了 Web2.0 时代。各类类似于桌面软件的 Web 应用纷纷涌现出来。网站的前端发生了极大的变化。网页不再仅仅承载单一的文字和图片。各种富媒体使网页的内容变得更加生动。网页上软件化的交互形式为用户提供了更好的使用体验。这些变化都依赖于前端技术得以实现。

在这个时代，给前端赋予的名称增多了，有“做网站的”“美工”“网站设计师”“切页面的”“前端工程师”等。同时，技术变得更为复杂，难度也更大了，并且技术含量提高了。随着这些变化，从事前端工作的人员有了一个专业的名号——“前端工程师”，他们的收入也随之增加了。

技术发展极为迅速，如今行业内的人员开始提出 Web3.0 这一概念。常见的解释有以下几点：网站内的信息能够与其他网站的相关信息直接交互，可借助第三方信息平台对多家网站的信息进行整合使用；用户在互联网上拥有自身的数据，且能在不同网站上运用这些数据；完全依托于 Web，仅需通过浏览器就能实现只有复杂系统程序才能达成的系统功能；在对用户数据进行审计之后，会将其同步到网络数据中。那么，问题随之产生了？在 Web3.0 的这个时代，前端究竟是什么呢？所谓的“前端工程师”能够进行哪些操作呢？又能够给 Web 带来何种改变呢？这些都值得我们一同去思考。

2016年前端开发万象

前段时间，@Jose 写了一篇很厉害的文章《How it to in 2016》，这篇文章点燃了国内外各种社交平台（开发者的世界）。

今天的前端开发情况是这样的，然而对于刚接触或准备接触这个行业的同学来说，却造成了极大的困惑和阻碍。仅仅是听这些专业术语，就已经让人想要放弃继续学习了，更别说深入了解了。或许你不太愿意相信，但这就是事实。

老师，我想请教您。我是零基础开始学习前端的，到现在已经有了不到一年的工作经验。如今前端技术不断涌现，我感觉有些迷茫了，希望您能给我指引一条明路。

大哥好。我的情况是：工作了一年半，一直从事公司的前端制作工作。主要工作是页面重构方面的。对于脚本等方面，一般只是使用。所使用的技术相对而言不是紧跟潮流的。一直想要有所进步，然而却没有找到突破点。在进步方面，除了切图越来越熟练之外，感觉前端的学习方向有些迷茫。

大漠老师，我想向您请教一些问题。我是一名大四学生，目前正在公司实习。公司使用单页面应用，并且配合使用 Gulp。我来公司才一周多时间，感觉自己什么都不会，就像无头苍蝇一样，不知道购买您的课程是否会对我有帮助，也不知道前端之路该如何走。

类似这样的现象还有不少。在此，我也来聊聊自己对此看法。

在当今时代，前端更新速度较快，需要学习的东西很多。仔细静下心来思考，这一切都与原有的基础知识紧密相关，如 HTML、CSS 等。同时，前端经过这些年的发展与进化，除了掌握基础外，还需面对工作流和工程化。只有掌握这些，才能对得起工程师这个头衔。

对于初学者或刚入门的同学来说，始终要不断提醒自己静下心来，要时刻提醒自己静下心来，要一直提醒自己静下心来。

每次能准确回答这些问题，你就不会在这样的浪潮里迷失自己，不会迷失方向。

说到这里，或许会有许多人要指责我。实际上，指责我是有道理的，因为这只是我个人的观点，不能代表所有情况。然而话说回来，倘若你无法准确无误地回答这些问题，你能确定你现在所做的就是你所需要的吗？倘若不是，那又会怎样呢？

如果你刚刚接触前端行业或者准备进入前端行业，我建议你先静下心来进行思考，然后认真仔细地回答。

如果你不能很好地、清晰地回答这些问题，我建议你不要轻易转行去做前端。

如何学习前端？

每一个人对于学习都有自己独特的方式，我也不例外。我不能说我的学习方法就是好的，我只是想利用这个机会讲讲自己学习前端技术的过程。

在开始学习前端相关知识之前，你可以先去简单知晓一名 Web 前端开发工程师需要具备哪些技能。先来看看这张图：

上图来自于@，如果上图看不清楚，建议你点击这里阅读。

看到上图后，你对前端工程师需要具备的知识有了一定认知。若你从业一两年，就已拥有上图中多方面的技能，且有了自己的一套学习方法。接下来针对初学者聊聊学习方法。

前端开发者首先要掌握的是 HTML+CSS。拥有这两项最基础的知识，就能把设计师的 Web 页面切出来，也就是将 PSD 设计图转换成 Web 静态页面。但仅做到这些是不够的，还需要熟练处理各浏览器的兼容。为了更好地要求自己，要尽量让自己的 Web 页面符合 W3C 标准和语义化规范。这方面并非有硬性的规定要求，然而将这两者做好是很有必要的，并且也存在较大的难度。

其实在这个阶段，初学者做这件事并不容易。因为在这个过程中，初学者容易迷失方向，也容易失去信心。虽然通过看书或者视频，初学者对 HTML 和 CSS 的每个知识点有了一定的了解，但依然缺少动手实践的能力。简单来说，就是不知道怎样将设计稿转换成 Web 页面。在这个时刻，你更期望有个人来告诉你，怎样把设计稿转化为 Web 页面，怎样开始着手。当你完成了第一个页面后，就能够从其中获取到信心和方向，并且这对后面的学习也有着极大的帮助。

充分掌握 HTML 和 CSS 的知识后，接下来要拿下这部分。这是前端工程师必备技能之一，并且算是较难的一部分。只懂 HTML、CSS 以及其中一个或两个是不够的，必须对这三门语言都很熟悉。也不是说必须对这三门语言都极为精通，但至少要能够运用它们完成大多数任务，而不用频繁地寻求他人帮助。

如果你成功拿下之后，就能够在之前的基础上进行一些更有趣的事情。例如，可以在静态页面上添加交互效果，还能更好地处理业务逻辑，让工作更加得心应手。此外，你也可以继续深入学习各种框架，像现在前端很火的 Vue 等。因为这些能够更好地帮助你工作，使工作变得更轻松，让项目更易维护。

到了此时，你会发觉，你能够逐渐脱离编写原始的 HTML 结构。你也会发觉，你能够更好地进行积累，在其他项目中复用自己所积累的代码。你还会发觉，原来这些框架的学习并非当初所想象的那般复杂。你还会发觉……

优秀的前端工程师当然应该具备快速学习能力。推动 Web 发展的技术并非静止不动，这是没错的。我甚至可以说这些技术几乎每天都在发生变化。如果没有快速学习能力，就跟不上 Web 发展的步伐。你必须不断提升自己，持续学习新技术、新模式。仅仅依靠今天的知识是无法适应未来的。Web 的明天和今天会有很大的不同，你的工作就是弄清楚怎样通过自己的 Web 应用程序来展现这种巨大的变化。

回到另一个问题

接下来咱们继续聊另一个问题，也是很多初学者常问的一个问题：

学习前端，应该自学还是看视频，或者说参加线下前端培训班？

我个人而言，每个人的情况各不相同。以下只是我个人的看法与建议，仅供参考：

如果你自学能力很强，并且拥有较好的学习方法，那么建议你自学。自学的方式就是持续地看书以及写代码。

如果你的自学能力不是很强，并且不知道怎样学习。那么建议你观看一些视频，因为这些视频有助于你更好地理解，还能让你更形象地看到相关知识点所产生的效果。当然，并非仅仅看视频就能解决所有问题，你仍需将书本知识与写代码相结合。接着从中找到适合自己的学习方法，为后续学习奠定较好的基础。

如果你通过上述两种方法都无法获取到所需的知识点，那么可以考虑花费一些资金，去参加一些优质的线下培训班。不过，很多人认为线下培训班无法培养出优秀的前端人才，但我个人觉得并非完全如此，至少它能让你更顺利地入门。毕竟万事开头难，只要开了头，后续的事情就会变得好办起来。另外，如果运气不错，有一位老师能够指导你，这是你的幸运。因为这样你可以少走许多弯路，能够更优、更精准地获得相关知识点。然而话说回来，师父领进门后，修行必须依靠自己。

不管以何种方式学习，经过一段时期之后，都需要开始让自己沉淀下来，同时也要开始进行思考：

有了这三份清单，你会获得新的目标。你可以针对清单进行总结，把似懂非懂和不懂的内容弄明白。这样的过程应贯穿你的整个学习或职业生涯。只有如此，你才不会迷失方向，才能让自己更强大。

如何解决学习过程中碰到的问题

在学习过程中会遇到各种问题，学会解决学习中碰到的问题对我们每一位都很重要。那么，如何解决学习过程中碰到的问题呢？

大部分同学可能会采取问人的方式，例如在各种前端的 群和微信群中撒网，碰碰运气，看是否有大神帮忙回答。实际上，这种方式是最为笨拙的，也可以说是最无奈的。采用这种方式的同学，大多是不知道该如何去解决问题，并且也找不到人帮忙解决。

其实解决这个问题并非难事。只要存在互联网，就不存在解决不了的问题。我们能够借助搜索引擎来协助我们。可以说，搜索引擎是解决问题的极佳方式。当然，这有一个前提条件，那就是你懂得如何使用搜索引擎，然而往往有很多人并不知晓该怎样利用搜索引擎。

在我碰到的同学里，身边有很多同学都喜欢用百度搜索。或许你会发现，搜索出来的并非你想要的答案。其实，我想说，这是因为你的方法不对。我们不该再使用百度搜索，而应该使用搜索引擎（需知道怎么翻墙使用）。经验表明，这样能更好地定位到你需要的答案。在搜索相关问题时，建议你采用英文搜索。若你不知道如何用英文描述问题，利用翻译工具帮忙翻译后再进行搜索，这样会让你更轻松。

除此之外，若你身边有较多同学，可考虑先询问身边的同学。然而，许多同学较为害羞，不好意思询问。还有不少同学会担心询问身边的同学，害怕被BS，实际上并非如此，这只是你自己的想法罢了，你应该厚着脸皮持续去询问。事实上，我们前端圈的氛围很好，很多同学都乐意为你解答，或者告知你解决问题的方法。

为什么要录制视频

首先，来说一下自己录制视频的原因。其实在很久以前，就萌生了录制一些前端视频的想法，目的是为了给有需要的同学提供帮助。然而，由于各种原因，一直没有去实施这样的一件事情。我是一个热爱分享与总结的人，这次终于下定决心录制了一个前端基础系列，希望这个系列能够让大家更好地理解前端，并且能够更快地入门。

在录制这个系列之前，我思考了很久，想要以更优的方式呈现给大家。我担心自己录制的视频会误导他人，也担心无法帮助初学者解决他们最想解决的问题。值得庆幸的是，经过这段时间的上线测试，还是获得了一些同学的认可。

大漠老师讲的加载动画，以及 3D 文字翻转效果和点赞的烟花效果，让我们认识了很多新的 CSS3 属性。平常常用的 box-，在大漠老师手中能做出如此炫酷的效果。我们不仅学到了动画效果多、3D 加速的小技巧，而且大漠老师讲解得很细致、很耐心。对于刚学 HTML+CSS 的同学来说，能听得很明白；对于有一些经验的同学来说，也能听到里面的小技巧，认识新的属性，以及平常疏忽的一些属性。

我晚上看了 CSS 方面的课程，感觉老师在课程编排上动了心思，他对伪类讲解得很全面。我在其他网页上也买过其他课程学习过，但那些课程都不是特别全面，大多只是让我学习了基础知识，知道如何编写出来。

个人认为老师大神们的这个视频教学课程是我所看过的所有课程中最好的。它看起来虽然很基础，但确实非常实用。

非常感谢大家的支持。因为有你们一路的支持，所以我才能一路坚持下来。我会继续努力，给大家呈现更好的教程和视频等。

总结

说了这么多，都是些无关紧要的内容，希望你能从中得到你想要的。最后再啰嗦一句：

从各个方面来看，我认为前端工程师在计算机科学职业领域里属于最复杂的工种。绝大多数传统编程思想已不再适用，为能在多种平台上使用，多种技术都汲取了大量软科学的知识与理念。成为优秀前端工程师所需具备的专业技术，涵盖了广阔且复杂的领域，而这些领域又会因最终必须服务的各方的参与而变得更为复杂。专业技术或许能引领你踏入成为前端工程师的大门。然而，唯有运用该技术所创造的应用程序，以及你与他人并肩协作的能力，才会真正使你变得优秀。