零基础的同学看过来,如何系统学习前端，保证让你不亏

骑猪看日落 2023-02-23 12:05 24阅读 0赞

软件开发工程师在行业外大众的眼里， 或许是一个出众的职业，收入不低， 技术含量还挺高，就连我自己刚入行时也是这么认为的，但事实上并不确切。任何行业中，只要是在金字塔顶端的那部分，都是令人羡慕的，然而，那是需要心血、实力的。 但如果仅仅只是想入行，就没那么苛刻了， 尤其是软件开发行业，更容易。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]  
做一件事情轻松还是坚难， 使用什么样的方法不可忽视，我以一个过来人的身份分析能如何正确快速的踏入软件开发这个行业。

许多人认为开发软件是一件只有聪明人才能做的事情， 这只是一个刻板印象，跟IT行业发展的速度太快有关系 。二十年前， 在中国绝大部份人可能连电脑是长什么样的都还不知道，仅仅几年后，电脑飞速普及，每家必备。 然而， 要使用这部机器， 必须经过专业的培训，连开关机时先按显示器开关还是先按主机开关都有很深的学问，这不仅难度高，而且还很神秘。更别说里面装的软件了， 不经过长期专业的指导，根本玩不来。 从正常的逻辑上的看「使用软件都这么难了， 那制造软件门槛不是要高到天上去了」

事实上， 开发软件和使用软件之间并没有什么必然的关联，更不是老子和儿子的关系 。 有时候使用某个软件会很困难，而开发某类软件却很容易，还有的时候却是相反的，因为开发软件的工具和编程语言， 也只是一种软件而已。至于倒底是先有软件和还先有编程语言，那就是先有鸡还是先有蛋的问题了， 这里不作详细讨论 。

首先解释几个常见的疑问

编程是不是需要具备较强数学能力？

完全不用， 只需要你掌握普通的加减乘除、算绝对值、指数等最最基础的知识， 编程的数学要求也就满足了。 这毫不夸张， 我写了五六年的代码 ， 唯一一次用到上学时学到的数学公式是三角函数相关的知识，那时候需要让一个点在网页上转圈，而且这并不是工作上的需要， 只是我自己没事耍着玩而已。

英语不好能编程吗？

理论上最低的要求是认识26个英文字母即可， 也就是说你只要上过初中英文课程就行了。 这并不是说编程并不需要会英语， 而是因为现在翻译软件满天飞， 看不懂用软件翻译就能解决问题了。

找软件工程师的工作有学历要求吗？

学历自然是越高越好， 然而， 只要技能掌握扎实，就绝对会有公司要你。 现在这种职位行业需求大， 很多公司根本招不到人， 学历不是他们首要考虑的入职要求。

编程职业是不是到年纪大了就不能做了？

没有人会原地踏步， 只要你不断努力就总会有你发挥价值的空间， 反之， 干任何工作都会丢饭碗

编程这种工作是不是需要经常加班？

在任何行业中， 总有加班现像特别严重的公司， 政府机关和国企也不能例外， 不想加班只要不去那样的单位就可以了， IT行业也有工作很轻松的企业。 反正我做了这么多年， 加班次数数都数的过来。

至于最重要的收入方面，这个需要看地区， 如果在一二线城市， 那绝对高于普通传统行业。

讲了一大堆废话，接下来进入正题，聊聊如何快速成为一名前端开发工程师， 这里的前端开发指的是网站的前端。

网页前端开发技术是所有软件开发技术中入门最简单的， 没有之一。前端开发其实并不是纯粹的编程，它的的工作分为两块， 一块是制作网页， 一块是制作网页上的动态效果， 制作网页是不需要编程的，制作动态效果是需要编程的。 因此， 制作网页是非常简单的一件事， 而稍微有点难度的是写网页动态效果 ，但和其它编程技术比起来还算是很简单。

上面说过， 想在零基础的前提下入行做一名前端开发工程师（软件工程师），是不需要拥有很高的学历的，也不需要很强的数学能力， 更不需要玩的很溜的英语水平。 然而， 却需要具备

对编写代码有强烈的兴趣，非常想自己去制作一张网页、编写一段特效，或者说用代码实现一个自己想要的功能  
较强的自学能力， 能不通过别人的帮助，自己寻找方法学会某一类知识、玩转某一种技术。  
养成看书的习惯， 因为看书是最好的系统的学习知识的方法。 一名前端开发工程师， 最低标准也需要看完两本600页的专业知识书籍。  
能持之以恒，不轻言放弃，因为从零基础到可以通过掌握的前端技能谋生， 最起码需要经过3-6个月不间段的学习和训练， 这也许是一个枯燥寂寞痛苦的过程  
前端技术分为两块， html、css和JavaScript，html和css用来制作网页页面， JavaScript用来编写网页特效

html和css相对简单， 其中内容深度较浅，易于理解，而且这两种技术的学习过程中并不会牵扯出其它相关联的知识，换句话说，你学好了html和css就等于学好了页面制作的全部。 此外， 学习html和css并没有多少需要深刻理解的知识，仅仅是花时间记忆和练习就足够了。 大致上使用html和css编写网页是以如下方式工作的

在页面的左上角放置一个方块，将长度设置为100像素，将宽度设置为100像素，将背景设为淡蓝色，将边框设为深蓝色  
在页面顶部放置一行文字 ， 将字体设置为微软雅黑，将字体大小设置为14像素，将字体颜色设置成淡黑色  
在页面中间放置一张图片， 图片地址设为xxx，图片宽为100像素，高度自适应，鼠标移至图片时变为手形  
在页面底部放置一个链接，链接地址为xxx，点击链接跳转至百度首页，并且需要另起一个新窗口  
试想一下， 一张网页不就是以这种形式构成的吗

html其实并不需要通过看书来学习，因为它非常的简单， 内容也不多， 在网上看一些专门讲解html知识的网站的内容就可以了，这里推荐一个公认的适用于初学者学习的网站， 地址是http://www.w3school.com.cn/html/。

css的学习就要复杂多了，必须要通过专门的书籍来学习，因为css的知识量相对较大，各大浏览器对css的支持又不尽相同， 如果不通过系统的阅读书籍来循序渐进的学习，很难窥其全貌，在真正工作实践使用时，也很难灵活高效正确的应用。有的同学可以会想通过看视频来进行学习，我不是很推荐这种方法， 原因如下

css的内容很多，一般网络上的视频很难覆盖所有知识， 试想一下， 上学时老师给学生上一门课也需一个学期， 可见对某一类知识进行系统的学习， 信息量有多大了  
视频中讲解者的水平很难保证， 导致时间精力花下去了，效果却看不到  
看书这种习惯必须要养成，学css或许可以看视频 ， 那学JavaScript呢？ 学习知识如果依赖视频，那在这个行业中走不远  
学习css推荐使用《css权威指南》这本书， 我当初看的就是这个， 内容很全讲，而且讲的通俗易懂，现在已经出到第三版了，内容质量应该胜过我之前看的地个版本![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]  
看书的过程中还需要做笔记， 不要太信任自己记忆力， 一些不常用但又很重要的知识， 如果不记下来， 随时温习 ， 随着时间的推移，肯定会渐渐的忘记。 最好要把书中讲解的每一个要点， 都作记录。 在学校里， 如果不关心考试成绩， 那么完全可以左耳进右耳出， 因为学校里学的知识 ， 上了社会已后， 不一定用的上。 然而， 在学习技术过程中忘掉学过的内容就太吃亏了， 因为这些知识完全可以在工作中用的上， 说的优雅一点就是对自己的职业生涯有帮助 ， 说的现实一点就是可以升职加薪赚钱。

然而， 学习过程中， 看书只能占百分之四十， 另外百分之六十是动手实践。首先， 你可以参考别人网站上的网页， 找一张觉得自己有能力可以实现的页面， 然后照着样子自己写一张， 不管使用什么方法， 查书、网上资料，或者参照目标网页已实现的版本的做法， 总之动手去做， 把网页做出来就可以了，然后不断的重复这个过程，直到可以不借助任何外部手段， 徒手能把一张网页画出来， 这样就有找工作通过面试的资格了。 不要小看这一张做出来的网页， 因为从不会到会的这一个过程中， 在寻找解决问题的方法时， 学到的不仅仅是解决方法本身， 还有因为解决这个问题而被牵扯出来的其它知识也被一并学会。 因此， 看似只是做了一张简单的网页， 然而做网页的来龙去脉已经烂熟于心了。

学会制作网页后， 就已经是一名合格前端工程师了， 但在实际工作时却还没有办法独当一面， 只会制作页面， 肯定只能是协助人家工作， 打打下手。 只有学会使用JavaScript， 才能算的上是一位真正的前端开发工程师。

这里说的JavaScript也叫原生JavaScript

写JavaScript可就是正儿八经的编程了，如果想做一个优秀的前端工程师， 百分之七十的精力都需要花在这个上面。 花3-6个月成为JavaScript高手显然不现实， 3-6年或许差不多。 然而，如果仅仅是入门和应付工作，那就足够了。 要知道很多网页的动态效果都是别人写好的，我们只需要拿过来使用就可以了。常见的JavaScript应用场景如下

验证表单输入的内容是否符合规则  
网页中的滚图片滚动效果  
网页中的标签切换效果  
关键字搜索时的向导提示  
无刷新页面内容更新  
这些是最常见和简单的应用。复杂的应用包括

JavaScript网页游戏  
炫酷到能上天图片预览效果  
网页版Office软件  
也就是电脑有的软件，用JavaScript在浏览器都能做出同样的效果。幸好，这些你根本不需要会，只会上面说的基础内容， 就足以让你找到一份前端开发工程师的工作.

JavaScript基础入门的学习一般都是先拿别人做好的东西来用， 然后照着样子自己修改或实现一人，最后再以自己的思路，实现一个更合适或者更优秀的。现在互联网行业内， 前端开发工程师招聘对于JavaScript的最低标准是会使用网上现成的特效完成工作，而并不要求你会自己写。

学习JavaScript推荐的书籍是《JavaScript权威指南》，也就是鼎鼎大名的「犀牛书」![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]  
我当初看这本书时还是第四版 ，现在已经出到了第六版 。 这本书写的非常精深， 想要一遍就看懂是不现实的。 它适合初学都也适合高手，在不同层次阅读这本书都会有不同的领悟， 我就看过三遍，而且每一遍看后感觉都不一样。 在初学阅读这本书时， 可以只看很少的几章， 其中只包括核心JavaScript中讲解的一些基本语法和浏览器文档对象模型这两部分内容就可以了。 当能在前面提到的几个简单场景中运用这几章中的内容完成任务时，就说明闭关修练可以结束了， 有了出关去江湖上闯荡的资格了。

还需要说到的一个东西叫jQuery， 这个东西的介绍在这里就不展开了。 举个简单的例子， 如果把JavaScript技术当成是「九阴真经」的话， 那前面讲到原生JavaScript相关的东西就是「九阴真经」的前半卷，而jQuery就是后半卷， 如果没学前半卷就去练后半卷的话， 那就会和梅超风一个下场 。 切记， 一定要学了原生JavaScript后再去学习jQuery， 这关系整个前端职业生涯的发展和成就。

我目前是在职前端开发，如果你现在也想学习前端开发技术，
    在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，
    你都可以申请加入我的前端学习交流裙：前面：603 中间：985 最后：993。
    里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，
    前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

最后，不能不知道，学习前端的三把利器

看书  
使用搜索引擎  
不懂上技术论坛提问  
用好这三把武器，行走江湖将能如虎添翼。

我不建议去培训班学习，如果想做一个优秀的前端开发工程师，自学能力是必须要掌握的，既然如此，那不妨在入门的时候就可以开始自学了，何必多此一举去上培训班。而且，上培训班不仅可能削弱自学能力，还浪费钱。此外，现在培训班的教学质量真的很难保证，很可能的结果是吞了你的钱还教不会你技术。

透露点敏感而现实的东西， 如果把上面介绍的内容学到位， 那么在杭州地区， 月薪资应该能拿到6-8K， 一到两年后会破万， 再之后就看自己修行道行的深浅了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200707110921694.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200707111018697.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200707111037369.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70