世界上本来没有路，走的人多了也就有了路了。但当你沿着一条乡间小路，走着走着，分叉越来越多，选择也越来越多，迷路成为了必然。

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

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

​

第一步：入门

有人说：只要有恒心，铁杵磨成针。这不对，学习重在兴趣，而不在恒心。当你通宵达旦的玩游戏，捧着自己喜爱的名著谈天说地时，不是因为有恒心，而是因为兴趣。只有不感兴趣的东西，才需要恒心的妥协。所以请抛弃恒心，拥抱兴趣。但在如今互联网大时代的潮流到来，越来越多的人加入互联网这个行业，学习前端的人也有很大一部分，主要因为web前端近年来越来越火，薪酬也越来越高，很大一部分不是因为兴趣而是因为高薪选择学习前端加入行业，这些人中有一部分人成功了，不仅成为前端程序员还得到了高薪的工作。但还是有一部分人半途而废，这部分人绝大多数是因为没有明确的学习路线，恒心不够所以就半途而废。

一个好的启蒙老师，不需要教会你任何本领，却能培养你对一件事的兴趣和良好的学习习惯。对于广大的前端学员来说，了解这个领域和培养学习兴趣尤为重要，这意味着你能在前端这条路走多远。

怎么培养兴趣？

1：成就感；

2：即学即用；

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

​

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

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

1：任务型教学，先发布一个任务，再教你如何完成它；2：插画多，图文结合，虽然有700多的页数，但一小时翻50页完全不是问题，你可以像看小说一样，看它；3：没有难懂的专业名词，一旦出现，就会花一整页，甚至多页来解释它；4：它能传递给你学习的方法，避免以后走弯路；5：这本书是入门的绝佳读物，但不是必须，你也可以跳过它，但小编认为还是读读它。

这里小编再分享除了书籍之外小编花了一个月整理的零基础web前端系统学习路线图和教程资料。包含从入门到进阶高级整套学习路线。对于想要学习前端和刚刚学习前端的小伙伴们最合适，

​

获取方式——添加领取资料企/鹅裙:它的前面是 956，中间是766，最后就是 604。

第二步：HTML&CSS

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

什么是HTML和CSS？

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

​

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

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

html地址：

https://www.w3cschool.cn/html/

css地址：

https://www.w3cschool.cn/css/

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

html地址：

https://www.w3cschool.cn/html5/

css地址：

https://www.w3cschool.cn/css3/

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

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

https://www.w3cschool.cn/codecamp/list?pename=html5_and_css_camp

第三步：JavaScript

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

什么是JavaScript？

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

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

​

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

​

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

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

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

https://www.w3cschool.cn/javascript/

或者结合W3Cschool微课学习：

https://www.w3cschool.cn/minicourse/play/jscourse

（使用文档和微课的学习方式，最大的好处就是入门“快”）

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

​

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

​

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

https://www.w3cschool.cn/javascript_txy/

当你将HTML、CSS、JavaScript（前端三驾马车）学完后，那么恭喜你，你已经完成了前端学习的课程。理论上，你已经能胜任前端的工作了！

第四步：前端框架

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

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

什么是前端框架？

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

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

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

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

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

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

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

​

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

推荐课程：

https://www.w3cschool.cn/minicourse/play/bootstrap_txy

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

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

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

​

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

https://www.w3cschool.cn/minicourse/play/varthree

第五步：Git-管理工具

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

什么是Git？

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

因此，你最好学会它。

推荐课程：https://www.w3cschool.cn/git/

https://www.w3cschool.cn/minicourse/play/git_mblx

自此，你已经具备了一个前端工程师的基本素质。前端的学习过程，是一个由“难”逐渐“简单”，再由“简单”变“难”的过程。前半段是入门的过程，后半段是成为大牛的过程，总之学前端只有八个字：明确方向，兴趣主导！