小红帽学前端教程（0）开头瞎BB

大家好，我是小红帽，一个前端小辣鸡。为了能够更好学习整理自己所学的前端知识，所以我打算不要脸的写一个初级前端学习的系列文章，同时也算作为一个分享和交流吧。至于为啥是初级前端学习咧，我想说

我也想写个中高级前端的进阶教程啊，奈何我只是一个小辣鸡，写不了哇。

1 What

学习一个东西前，我们先解决一个「what」的问题，啥是前端咧？前端开发是干啥的？

简单粗暴来讲，前端就是所有呈现在用户面前与用户进行交互的东西，一个电脑网页，一个手机 APP 界面，一个游戏的界面等等等。差不多的意思就是你所看到的东西就是互联网的前端。

要是原始一点讲，就是一个写网页的切图仔就对了。当然现在时代不一样了，前端不在是之前那个写网页的切图仔了，这点你到后面就会发现了。不过我们基础还是和之前一样，是 HTML（结构），CSS（表现），JavaScript（行为）这三样技术。

那么这三个东西是啥啊？我们拿人作为例子。

1.1 HTML

首先是 HTML（超文本标记语言），HTML 是一个页面的基本结构，定下了整个页面的页面骨架。
就类似我们人的骨架吧，如下图

1.2 CSS

其次是 CSS（层叠样式表），如其名，样式表。加样式的变好看的。

我们前面只有这么一个骨架太吓人了，我们要我们的人（页面）好看一点，咋办，当然是用我们的 CSS 啦，它的话就是用来给 HTML 添加一层样式，进行美化的。我们用 CSS 给他一身好看的皮囊啦，当然根据不同产品的审美需求，我们可以有各种「好看的」皮囊。

有这样的

当然还有这样的

1.3 JavaScript

最后就是我们的 JavaScript 了，JS 是行为层，最简单的说法就是给予网页动态交互的行为。

就像我们人一样，长的再好，穿的再好看，结果是个植物人，那其他人咋想会跟你打交道咧，所以就要加点动作啦。这样更富有层次感。你看下面帅如发哥，动态图看起来是不是比静态的，更帅更富有层次咧。

这三个就是前端三剑客的，也就是我们前端开发要学的东西。后面我们学啥框架，啥新技术啊，搞来搞去都是这三个家伙。

2 Why

为啥要学前端咧，这个问题很重要，因为这是一条不归路，没有一个可以说服自己的理由，要想坚持下去还是有点难度的。在此给大家准备了几个理（jie）由（kou）

我喜欢开发，并且前端开发是一种看得着摸得到的开发，你写啥电脑就给你搞出个啥效果，很有趣。
前端开发也是软件开发，以后工作时候的工资还是很诱人的。
前端开发简单易上手。内心OS：算是个理由吧，前端入门的确很简单，但是学到后面你肯定会对我说「我信你个鬼！你个糟老头子坏得很！」
没有理由，劳资就是要学，爱咋咋地。

3 How

3.1 概述

这个就是我们本次系列文章的中心了，我们要这么去学前端呢。我们前面看到前端开发主要就是用 HTML + CSS + JS。所以我们的前端学习也是围绕这三个东西进行的。这边的话，我自己瞎分了三个部分：基础知识，入门知识，初级知识。其中基础知识必须是要先学好的，入门知识和初级知识也建议耐着性子逐步来，当然你交叉来学问题也不大。

然后前端开发嘛，也是编程，学编程，就一点，多敲代码！甭管啥知识，代码敲多了，很多前面不懂的后面敲敲就懂了。切忌只看不敲啊。咱这毕竟是偏应用的学科。大佬请忽视这一段

3.2 基础知识

这一块也可以叫做基础常识吧，因为我们要学的就是最最基本的 HTML + CSS 的基础知识，知道这两个家伙怎么用，怎么去写出一个网页来，怎么去布局一个网页，写出一个带样式的网页来。最后还要知道 JavaScript 这门语言最最基本的语法操作，和用 JavaScript 进行简单的 DOM 操作。

这一块知识的话，学到后面，知道这些东西这么用，能写几个简单的页面就算了。（例如一个简单的登陆框页面）也不要求你看到一个网页你就能自己把他实现出来，虽然这个是可以的，但是过程会比较痛苦。就不要磨灭你的信心啦。但是还是要好好学习这一段的知识，不然你后面你还得回来学！想想就知道啦。你站都站不稳，还想学跑步？

3.3 入门前端知识

这一块的话，就要学一下新的 HTML5、CSS3 的知识,了解他们的新特性，最好的话找本专门介绍 JavaScript 的书或者教程系统的学一下 JS。再学一下 JQuery 的用法，经历过前面刀耕火种的开发，你会发现 JQ 的出现是多么神圣的一件事情（当然后面你就不会这么觉得了）。除却这些基本的知识，你也可以开始偷懒去了解一下如 bootstrap 的 UI 框架和其他的一些 JQ 插件来协助你开发了。

经历了这一阶段的学习，如果学的好的话，那么恭喜你已经入门前端了，现在的你应该可以达到别人丢给你一个页面，你可以自己手撸或者利用其他工具偷懒去实现那个网页出来的水平啦。

3.4 初级前端知识

这一块的话，咱们首先学一下 ES6 的新特性，建议买本阮一峰老师的《ES6标准入门》来看。然后就可以学习前端三大框架了，这边的话我学的是 Vue，因为简单易上手，文档齐全，国内生态完善。当然你要学其他也是可以，不过个人感觉 react 和 Vue 后面是主流技能，Angular 在国内感觉比较小众，并且听说学习成本比较大，所以暂时不推荐大家作为第一学习的前端开发框架。

除却学框架，我们还要了解一点后台的知识，这样我们也好跟后台的同事打交道。这边就会让大家简单了解一下 Node 的一点基础知识，不需要了解太多，知道个意思就差不多了，了解一个完整的项目是怎么运作的。并且其实你前面 JS 学好了，其实 Node 还是挺容易上手的。在这个学习的过程顺带了解一点计算机网络的知识和浏览器的一些知识咯。现在粗略学习，后面提升的时候就要认真学学咯。

此外，以后的开发我们不是自己一个人玩玩就可以的了，所以我们必须要学会一点 Git 操作，使用 Git 进行版本迭代和团队协作开发。顺便了解一下全球最大的同性交友网站 GitHub

这部分的知识个人感觉就是由个人的学习转向真正的项目开发的过程，学完这些，至少你自己能手把手搭建一个完整的前端项目（能和后台交互的那种哦），然后对于前端开发的工程化，你自己应该也要有自己的一份心得。简单来说就是你现在已经是个初级的前端开发工程师了，你知道一个完整的项目开发是怎么一回事，也知道自己在一个项目开发中该干啥，该怎么干了。

看起来好像这部分知识很复杂，其实上手也贼快的，基本你自己手撸一个项目，这块知识你基本就有一个感觉在了。感觉有了，学起来就快了。也不会那么迷茫了。

下面的话，我自个简单粗暴的搞了一张思维导图，比较简单，因为太复杂的我也懒得画，并且还容易摧残我们小辣鸡的自信心。就随便搞搞咯.我前面也写了，这是一个初级前端的教程，这里面的知识体系虽然不是一个完整的前端知识体系，但建立起这样的知识体系的时候你就差不多是个初级前端工程师了，后面的知识点就自个再去完善和补充了。如果自己想在这边的基础上修改成自己的知识体系的话，可以到百度脑图这边修改然后保存到你本地那边。