web前端工程师学习路线指南

沿着一条乡间小路，走着走着，分叉越来越多，选择也越来越多，迷路成为了必然。

对于编程初学者来说，甚至“这条路”在哪都找不到。

今天，W3Cschool新手村村长将扮演指路人的角色，讲解如何零基础入门前端，学习前端，不再迷茫。

1.入门

有人说：只要有恒心，铁杵磨成针。这不对，学习重在兴趣，而不在恒心。当你通宵达旦的玩游戏，捧着自己喜爱的名著谈天说地时，不是因为有恒心，而是因为兴趣。只有不感兴趣的东西，才需要恒心的妥协。

所以请抛弃恒心，拥抱兴趣。

一个好的启蒙老师，不需要教会你任何本领，却能培养你对一件事的兴趣和良好的学习习惯。

对于广大的前端学员来说，了解这个领域和培养学习兴趣尤为重要，这意味着你能在前端这条路走多远。

怎么培养兴趣？

1. 成就感；
2. 即学即用；

那么，《Head First HTML与CSS》就成了最适合零基础的前端学习书籍。

从书的封面就可以看出，这是一本“重视大脑的学习指南”，看完本书，你对什么是HTML、CSS就有了大概的一个了解，并且可以编写一些简单的页面了。

这本书有如下的几个特点：

• 任务型教学，先发布一个任务，再教你如何完成它；
• 插画多，图文结合，虽然有700多的页数，但一小时翻50页完全不是问题，你可以像看小说一样，看它。
• 没有难懂的专业名词，一旦出现，就会花一整页，甚至多页来解释它；
• 它能传递给你学习的方法，避免以后走弯路；

这本书是入门的绝佳读物，但不是必须，你也可以跳过它，但村长认为还是读读它。

2.HTML&CSS

如果你看完了《Head First HTML与CSS》，其实你已经学会了这两个前端的基础知识。你只需要丰富一下“词汇量”，让自己能做出任何的网页就可以了。

什么是HTML和CSS？

一个画家要画一只乌龟，得先画出轮廓，再完善细节，最后涂上颜色，HTML和CSS干的也是这么一件事。

因为HTML和CSS非常简单，村长并不是很建议初学者看视频，如果你觉得学习有困难，可直接看《Head Frist HTML与CSS》即可。简单的事，不要花太长的时间。

丰富自己的词汇量，最简单快捷的方式，是直接阅读W3Cschool的html和css文档。

当然，你还需要了解一下他们的最新版本，html5和css3.

学完html和css，你就可以独立制作任何的网页了，没错！在本地写个淘宝出来，完全不是问题。

如果你想巩固下学习成果，可以拿个实战项目，练习一下.

3.JavaScript

与html和css不同，JavaScript是门真正的编程语言，所以学起来难度就大。

什么是JavaScript？

还是刚才画家画乌龟的那个例子，这个画家人们都叫他“神笔马良”，他画了只乌龟，并且给它涂上了颜色。

这时候，马良将这只乌龟“拉”了出来，成为了一只真正的乌龟，它能走路，也能吃东西。

再举个简单的例子，有时候登录网站时，它会提示：

这个就是使用JavaScript写的，html和css是不能动的，只有JavaScript可以。

JavaScript作为一门编程语言，非常强大，它有很多事可以做，除了运用到前端领域，它还可以做游戏、应用等等，用途很广泛。

由于JavaScript有些难度，如果你习惯了学习html和css的方式，可以直

如果你喜欢看书，那么推荐看《JavaScript高级程序设计》，这是一本对初学者很友好的书。

有些程序员会推荐《JavaScript权威指南》，俗称犀牛书，村长并不推荐。因为它属于中级读物，对初学者不友好，但作为经典的JavaScript书籍，还是值得考虑的。

如果以上学习方式，你都不喜欢，或者太难理解JavaScript了，也可以观看视频学习。

当你将HTML、CSS、JavaScript（前端三驾马车）学完后，那么恭喜你，你已经完成了前端学习的课程。

理论上，你已经能胜任前端的工作了！

4.前端框架

实际上，如果你只掌握了三驾马车，那么没有公司会愿意要你，因为实际上你的工作效率会极低。当然，仅仅是效率上的问题，而不是做不出来。

接下来，学习前端框架迫在眉睫。

什么是前端框架？

如果只会html、css和javascript，写一个网站时，你需要一行代码，一行代码的写，假如写几个简单的页面，自然不在话下。

可是如果让你写个像淘宝的网站呢？也许这个量是几十万行以上的代码。

这时为了提高效率，你将别人已经写好的淘宝，拿了过来，放在了自己的网站上，然后稍微修改下代码，让它看起来和老板的预期一样。

于是另外一个淘宝诞生了，你只花了一点点时间就完成了它。

框架，大概就是这么个意思。

框架可以说是一种工具，学起来很简单，就像学习word、excel一样简单，框架是必学项。

框架有很多，我们推荐你学习Bootstrap。

这个框架好用，重要的是简单，适合刚学完基础课程的你。

当学习完Bootstrap后，恭喜你，你可以高效的完成工作，更加符合企业的用人需求了。

前端是一个随时间变化很大的职业，新框架的运用，也成了很多企业用人的硬性要求。

最具代表性的就是三剑客：React.js、Vue.js和Angular。

你不必完全掌握这三个，你可以先学会其中一个，后续根据工作需要，再掌握其余两个，甚至是不学习它们。

5.Git-管理工具

Git对前端写程序没有多大影响，但它同样十分重要。

什么是Git？

这个一个版本控制工具，可以很好的管理代码，并且共享给其他同事。

Git更像是技术界的excel、word，它只是一个工具，方便管理你的代码。一些稍成型的公司，都可能会使用它作为管理工具，

因此，你最好学会它。

5.后记

自此，你已经具备了一个前端工程师的基本素质。前端的学习过程，是一个由“难”逐渐“简单”，再由“简单”变“难”的过程。

前半段是入门的过程

后半段是成为大牛的过程

总之学前端只有八个字：明确方向，兴趣主导！

仅此而已。