前端入门小书-第一阶段

我相信每个学习前端的人，都多多少少踩过一些坑，不停从一个个搜索引擎中搜索“前端如何入门？如何学习前端？”

幸运的人可能一下子就找到了好的资源好的方式，一下子就步入了学习的正轨，但是大部分人还是在这条路上走了不少弯路。

于是我就想：我是否可以结合我自己的经验自己踩过的坑和其他人的经历去帮助大家找到一条足够笔直的道路，帮助初学者能够较快的入门步入正轨，而不是将时间花费在各种搜索引擎上，最后得到的只是碎片化的知识点和迷茫的感觉。

所以我动手写下了这篇文章，帮助初学者能够刚快地步入正轨。

书无尽其详，愿后来者全

内容可能有许多没有写到位的，希望大家能够在评论区指正

如果觉得写的不错，请给我一个赞！这是对我最大的认可也是我的动力

首先在学习前我希望大家能对前端学习有一个了解，前端工程师是干什么的，你喜欢吗？

这里我们从一个 知乎回答 来了解

学习的第一阶段： html + css + javascript 初探

前言

我知道很多人前端入门都是w3school或者是买一本JavaScript高级程序设计，我个人是不推荐的。上面的知识点太多，太过于繁杂，初学者一开始接触只会是一头雾水，睡前必备。

并且效率太低了。你只会是一个知识点接一个知识点此时你脑袋里面对此类事物没有一个主要的认识，你只是机械式去记忆一个个个的英文单词，记忆的过程也就是突触的建立，此时一个良好引导，能够告诉你对事物的基本概念，引导你去学习，打开你的兴趣，让你不再茫然。

如果把你对前端的知识的掌握比作一颗树，初期你需要做的只是你需要从一个根出发描绘出你的树枝，树枝上的树对于这个时期的你不需要过度纠结，你需要考虑的是这棵树能否长的足够高足够大，所以不要纠结于细枝末节的知识点，提高你对知识体系的认识，快速学习才是你需要做的。

说了这么多首先推荐一个给0基础同学学习的视频资源（Tips: 右键打开连接）

html + css 渡一课堂

javascript 渡一课堂

如果你看不惯视频，或者说一个的视频的信息还不够全面，那这里还有个文字教程 JavaScript 教程-网道

注意事项：

1. 多记笔记但是不是什么都记，不要把所有话都记录，只是为了让你知道今天学了什么，方便明天翻看，每个点都不要超过一句话 ，尽量从简。

2. 多去思考，调动自己的思维，带着问题去学习！在学习后问问自己。（详细分点问题在下面）

   比如：当你学习html时，我希望你带着几个问题：html是什么？它有什么结构？它是干什么的？此时再去记忆其中的细节就会更加简单。

3. 入门学习者最爱犯的错误就是纠结，总纠结自己今天学习的某个标签、某个css语法没有记住。我只想说这不是高中考试，还要默写。大概了解就可以，等以后项目做多了，复制黏贴的次数多了，也就记住了

4. 在学习过程你能掌握多少，取决于你对它的应用，你要真真正正地去实现，你才能学会。

   千万不要看着视频写代码自己不动手！看完你要多动手自己去写！首先看完自己去思考实现的一个逻辑过程，然后把视频关掉，自己去实现一个例子一个小作业，给自己的代码加上注释，这才能算作真正的掌握。

5. 自学最重要的其实是驱动力

   自学一件事情，如果没有持续的驱动力，兴趣都会慢慢减弱的。刚好前端这个体系又很庞大，就很容易出现这种局面：

   学习html，哎呦，挺简单的呀，每天看一点，我进步贼快估计一下子就看完了，前端入门？就这？（兴趣很高，散漫学习一段时间过去）

   看css，好像难了点，怎么这么多属性啊？不过我好像抗的住（兴趣减弱了，又一段时间过去了

   看js，运算符？这不是其他语言课已经学过了吗跳过！闭包？这是什么（兴趣已经不 足以让我学习了，摊手

   再到最后觉得好累啊，前端好繁杂啊，我以后一定不会当前端，一点兴趣都没有，这有啥好研究的？（彻底放弃治疗）

   一个良好的计划和对自我的督促很重要，任何有价值的技术都需要你耐着住性子的去学习，枯燥是必然的，但是希望你们能学会苦中作乐，学会学以致用，结合第4点，用现阶段的小知识学以致用，看着自己写出的一行行智慧的代码，是不是感觉心情的澎湃了许多，感觉前端之光就差一步（哈哈打趣一下），怀揣希望，敢于坚持。大家一起加油

前人提醒

• HTML 与 CSS
  1. html 比较简单，主要尝试理解语义化这个概念，脑海里要有html以及和 css 的一些联动，这两个者密不可分，一个形成结构一个形成样式，要对html与css有自己的概念
  2. 学 css 的时候，最好先从整体去理解css的结构和模式，了解不同盒子的布局规则，不要直接埋头去看那一个个属性，不要直接埋头去看那一个个属性，不然以后调样式会很痛苦，根本不知道哪里出的问题，只会一个劲的去把一些属性套上去，到最后连哪个生效哪个都不知道。
  3. html 和 css 一定要动手实践，找个稍微简单点的门户网站去模仿就可以，或者自己发挥都行，总之要落实到代码。（视频里面有一个淘宝页面模拟，可以跟着做一个)
• JavaScript
  1. JS包含了三个部分：ECMAScirpt、DOM、BOM，学习的同时也要认识其区别
  2. JS的难点有：函数作用域，原型链。希望大家在遇到难点的时候不要应付自己，要彻底理解其概念和原理
  3. 多动手！多操作！付出的时间与回报是成正比的，操作一定要自己去动手去实现
  4. 千万不要图快，js这门语言说简单也简单，但是它的细节也很多，而细节恰恰决定这门语言掌握的高度，要一步步把握细节，深入去掌握，不然到最后会捡了芝麻，丢了西瓜后期要花大量的时间回头补。

小作业：

每个稍微有难度的知识点都对应着一些小作业，一个动手操作的小实现，比如：实现一个小闭包，实现一个new的过程，对象克隆，欢迎大家学习的时候，能够补充进来发到群里交流！

视频可以快进观看，每天抽取2个小时以上的时间，渡过第一阶段需要2-3个月左右，这个环节有少许枯燥但是希望大家能够多花点时间，不要心急把基础打牢，这步是必不可缺的，不然以后你急着进入下一步，只会走一步发现一个点不会，百度上花的时间比你写代码的时间还要长

非常感谢 神三元 与 不愿意透露姓名的大佬朱的帮助