给羊羔：学习web前端开发的路线（一）

前端所用到的技术主要是 HTML ＋CSS ＋Javascript。

知识只是人的武器，想要真正的了解他，我们需要更深层次的运用。我不推荐你学什么21天之类的教程，我期待的是你慢慢去学习，但是学到的知识点，都运用过。

在我学习的编程的过程中，我并不太喜欢去看视频。视频会告诉你这是什么，这用于什么，然后它展示给你看了。你会觉得你懂了，事实上你的大脑对于这部分思考的很少。我更喜欢去看书籍。在你一边看的时候，一边自己去理解，理解不透彻的东西，你可以下手自己立马操作。当然，现在也存在很多的交互式学习网站。但他节省了你很多时间，直接告诉你，你的练习要做什么，你所学的知识可以运用到哪里。但它又不会告诉你全部，你记住了它能运用到这里，但你如果不继续去思考，这个知识点在你的印象中留下的痕迹会很浅淡。

我的本意不是说不要通过看视频学习，不要去交互网站学习。而是你知道这么学习有它的弊端，你要靠你自己去填补这个弊端。无论你是选择了看书也好，看视频也好，去交互网站学习也好，我都希望你在学习完一节课程之后，能慢下来，做一些教程以外自己想的东西。我希望你在学习前端的每一天，都对所学习的知识有所总结，将它们运用起来做一点小玩意。：） 如果你愿意这么做，那么我也会认真的监督你。

如何入门？

现在有很多学习前端的网站，极客学院，幕课网等等。它们每一个视频都是一个专项。但就像你做数学题一样，你需要一定的语文基础去理解题意，如果是应用题，还需要一些常识经验去避免一些误区。我推荐你同时学习HTML与CSS，以及Web的开发工具。

在我学习 HTML 的时候，是在 w3School 上学习的。它包含的内容很详细，但它却很枯燥。静下心来学习并不是很难，但我不希望你在学习的时候拥有这么糟糕的体验。

可我又提到了希望你同时学习 HTML 与CSS 以及web开发工具。对于新入门的人来说，实在很难把控这个度。HTML 每天要学多少呢？ CSS 每天要学多少呢？ 有哪些的 Web 开发工具，学习顺序又是什么？

也有过大牛进行过这样的思考，所以我推荐 小白变怪兽卡片 这个教程给你。Happypeter 写的教程对小白来说非常的友好。

当你学完这个教程后，你拥有了 jekyll 制作的博客。可是我更喜欢 Hexo 一点，所以在这里对你进行一下安利。使用 Hexo 创建你的博客

深入它！

在学习的过程中，难免遇到重复，不要厌烦这个重复。它会重复出现说明它真的很重要，即使它可能很简单。

现在你已经对前端有所了解，所以你需要摸索自己的学习节奏。我会给你介绍一些讲解比较全面的书籍和视频。

极客学院－WEB大前端工程师
幕客网－Web前端工程师
W3school

接下来我重点推荐 《HTML & XHTML权威指南》、《CSS 权威指南》、《JavaScript 权威指南》 这几本书籍。

这是你学习的重点，但也不仅仅是这些。我不希望你做一个闷着学习的人，你需要时不时去社区看看文章，或者与其他人交流。比如说前端乱炖。你可以订阅他的乱炖周刊。我希望你能够自己主动搜索一些博客或者网站，并对他们的内容进行订阅（或者关注公众号）。

我希望你拥有代码洁癖，有情操，有品味。这是一份Google发布的HTML/CSS代码风格指南，如果你回到国内，需要FQ来阅读它。当你拥有一手好风格代码，你就可以像我一样，去嘲笑那些将代码写的乱糟糟的人了。XD。当然一份容易阅读的代码会更受人喜爱才是最大的目的。

多做练习

创意练习

其实前端很有趣的啊，利用 CSS 可以做一些好玩的东西，比如说纯CSS绘制的蚱蜢。还有这个学习180天前端，做了180个页面的妹砸180天做180个“网站”来学编程，今天是第115天，13年的文章。

临摹其他网站

尝试去临摹自己喜欢的网站，是一件很有趣的事情。局部的学习和制作带来的体验，与做整体网站的体验不会一样。它像是一份考卷，来告诉你，你在学习的过程中有什么不足之处。去思考它每一个功能点要如何实现。网上也会有很多好看网站的PSD文件。你可以利用学过的photoshop技术进行切图。

临摹的过程，就是一个前端设计师在工作时常做的事情。