如何从零开始自学前端

向作者提问
喜欢研究实践新型技术,分享开发技术经验,gopher推广者,专注于go微服务和机器学习开发应用。
查看本场Chat

前言

回顾一路走来,从对编程的一无所知,到现在渐渐的得心应手,感觉编程其实是一种人和机器的对话只是这个交流和对话不是像我们想象的那样你说一句我说一句,很聪明的是,电脑是用机器语言交流的,通过我写的代码运行时候的指令做出相应的动作。这是人和计算机的互动。介绍了人和计算机如何对话之后接着开始切入我们今天主题,如何从零开始自学前端呢,这个问题对于在几年前我未进入编程领域时候,我也是一无所知。那么是什么改变了我让我进入了编程领域呢?

那是什么呢,是工作。

对于一个当时快要毕业的我来说,如何拿到一份很好的工作offer,成为我当时人生的最重要的目标。当时打开招聘网站几乎很多大的招聘网站像智联招聘,拉勾网,猎聘网找的最多的就是编程技术人员,而且工资薪水什么都还不错,这是让我下定决心进入的第一个原因。

看着很多的招聘我发现我几乎什么都不会也不懂,内心很痛苦,感觉人生好像第一次走到低谷了。也许人生只有你走到低谷的时候才可以看清楚你自己吧,我那时就是每天都上网查询找工作的岗位,然后就看到招聘web开发的工作岗位,这个要求少,然后会的我在网上查了下,好像没有什么java,c++还有c#一类的岗位要求的项目多,而且给的薪水还蛮好,福利也高,这是让我最终下定决心开始从这里开始的主要原因。

对于一个没有接触过前端的人来说,想要知道前端开发工作者是干嘛呢?就需要从零开始完整的认识这个工作和这个工作需要掌握的知识和技能,这是你发现问题和解决问题培养自己思维的开始,在大学我们其实学的就是发现问题并解决问题的能力。

那么对于一个不会任何语言开发的新人又该如何去学习前端的知识呢,这个问题同样也困扰着我,虽然我上网查过了网上给前端开发的定义是网页制作演变而来的,名称上有很多明显的时代的特征。(当时我可是上的谷歌查的,别问我为啥当时会翻墙上谷歌,爱看美剧的朋友都知道)。然后看到介绍互联网历史反正说了一大堆,当时记得就看到我们现在处于Web2.0时代,网页不在像Web1.0时代那样只是静态界面了,现在的网页利用交互形式可以为用户提供更好的使用体验,这些都是基于前端技术实现的。下面又列出了Web前端开发需要掌握的知识,需要掌握基础的CSS还有Javascript,需要了解基本的linux,还有web服务器的配置,等等一系列的标准。反正看着就是我一个都不认识,但是这些让我对前端的工作开发有了个基本的认识,也明白了到底前端开发是做什么工作的了! 这点很重要,这是发现问题,认识问题的开始,那么接下来我就要解决这些问题了?

我当时就上网查了,看到很多有的是教程,但是都是感觉一大堆东西,因为你对前端开发工作没有个完整的概念时候千万不能盲目的去买书和看资料。古代兵家打仗都要做到知己知彼才能百战不殆。所以自己更不能盲目去做事情了。

这个时候我看到了网上很多的论坛,几乎每个论坛都有前端开发这个模块点进去有的是分享资料有的是提问,作为想要快速提升自己前端开发能力的人,我对这些是没有任何兴趣的,我的目的是想看看有没有啥好的资料可以让快速学习的。这个时间就是我在不断寻求解决我目前困境的方式。当时我在一个论坛看到了有人发的几套免费学习前端视频,仿佛给了黑暗中前行的我光明的力量。其实现在你翻看各个网站其实都是有免费前端视频的,在深入的可能就要付费,也有很多前端培训机构,这个我不啰嗦了。

当时我拿到这些视频不是立马去看去学的,我是对比了这些视频讲的内容几乎所有的都是从DIV,Html,Css开始讲解的和我在谷歌上看到的是一样的。那么我的编程之路也是从这里开始。

之所以我上面会啰嗦一大堆不切入正题都是为了阐述下,作为一个刚刚学习前端或者说是一个零基础的人去学习和认识前端的过程以及心路历程,这些我想大多数自己去学习前端的新人都会迷茫的,有的可能会报培训去学习,这里我们就不讨论了!

enter image description here

前端Html +Css+Javascript的快速学习之道

首先我是自己在看视频后给了自己定了一个计划,我是让自己结合着视频还有w3c的文档2个星期学会了HTML以及Css的学习,接受一个新的事物的时候我们人脑都是有个反应适应期,用心做的人14天可以完完全全的改变一个人行为和习惯,那么我是这样做的。每天学习差不多有10个小时左右,靠着在以前在考试之前理解以后去记忆的习惯,我当时把Html拆分成头部,底部还有内容区域,然后又跟着视频学习的时候继续细分哪些是块级元素,哪些是行内元素,哪些是属性,哪些是布局,哪些是颜色等等这些你细分之后在凭着上学时候记忆的本事,很容易在一个星期掌握。接着就是Css,这个就是用来修饰Html的,这个可能就是在逐步的提高你自己的认知和做网页怎么可以更加美化的问题上了,在Css的学习上也是我细分的过程,然后发现哪些样式啊,框和模型边距啊,定位啊还有选择器啊等等这个是细分和定型的过程。

学过这些你就可以做出一个不错的网页了,那我觉得我应该提升下我自己我就做了一个工作,那就是做了一个支付宝的静态页面当时就是模仿做的支付宝静态页面,依稀记得上面的一个图片写的”改变,因我而来”。多么深刻的一句话啊,可是但是就是觉得做的支付宝界面模仿挺好的,简洁大方,我只是把背景图片换成了一个美女图片,这个既看着养眼,也有心里的满足感!记住这是我要传递的第二个信息,就是一定要有阶段性的提升,就是每次学习新的知识的时候,一定要学会去把所学化作在一部作品或者一个简单的小项目中。

做完这个就是你阶段性进入编程的门槛了,然后真正的大的boss在后面呢,需要一个一个区战胜(其实除此之外我别无选择)。有点像我们小时候玩的游戏机,一个关底都会出现一个boss的。这个时候我对前端已经有了初步的认识和认知了,现在所写的都是静态的页面,如何让网页上的元素动起来就是接下来的重头戏出场了,没错那就是Javascript。

Js绝对是你学习的一个重中之重,为什么这样说呢因为网页的构成就是html是骨架,css是外衣,js就是它的运动轨迹。

  • 第一,其实对于javascript我是深有体会的,以我个人的学习来说也是从零开始的,那么怎么可以以最快的时间学好的。我是看了javascirpt的零基础视频学习,从最基础的学习面向对象以及语法,数据类型,原型和作用域,继承等等。看了这个对于初学的人肯定是一脸懵懂的,这是一个需要不断的练习和学习的科目。

  • 第二,就是练习大量的练习,建议这个时候不要买什么犀牛书,因为这个虽好,但是对于刚刚入门的人不太适合,犀牛书适合工作一段时间js进阶看的一部宝典。在这个时候我做的事情是买了一本javascript网页特效300例,然后结合这个我一个一个案例进行练习,对我自己提高对js的认知和技术,起了很大的帮助,也是我后来js用的很熟练的技术。

  • 第三步,练习完那个javascript网页特效300例,并不等于你就真正的融会了js了,此时你需要在回顾js的基础,完整的回顾下js的内容,相信此刻的你的感悟已经很深了!然后在结合做个综合的项目来锻炼下自己,当时我做了博客系统然后拿着去面试了,这是我当时的面试时候的带过去面试项目。这个是我传递的第三个信息,就是面试一定要有自己完成的作品。

如果这些都井然有序的努力去做了,相信你此刻对前端的一定有了个清晰的认识了。接着开启我们的进阶之路吧。

前端框架的学习boostrap + jquery +angular

招聘的前端人员基本都是需要会boostrap和angular的,而jquery是必须会的,jquery其实在javascirpt的一个框架可以让你很快的上手,门槛很低方便学习。这个我个人觉得你在学会了javascript以后,可以花个一到两天时间学习下jquery。至于boostrap是前端的web的ui框架,可以让你做的网站或者页面实现响应式的布局。这个的学习我觉得可以直接看官网的那个介绍文章,我当时是在边看的时候,边做了几个网上的例子,其实用一下发现真的很入门很快的,有了前面的基础,这个入门大概就需要2天就可以搞定了。

真正的难点在angular,当时学习angular是有点困难,觉得怎么还可以这样玩啊,什么数据双向绑定,MVC等等这个是怎么回事搞不懂。也是困扰新人最多的地方。那么怎么才能学好呢。我当时在网上搜了很多也没发现好的资料,后来在一个论坛上下载了一套angualar的学习视频,从最基本的开始讲起的我也是从最基础开始做的,从开始引入angular的js到写控制器,然后做一个小的购物车项目,后来才明白原来是慕课上的一个angular的学习视频,不过当时很是开心和感激的,只要自己努力想去学习,办法总是比困难多的。

Angular的学习后来我的总结就是先要看它的官网介绍和指令,然后在接着去看视频,不然开始就去看视频是不知道它讲的是什么呢,我相信从零开始的对这个肯定是有很深的记忆基础。这个我觉得学习最快的方式就是在熟悉语法后找一个网站去做一下,我当时就是用angular去做了一个仿照汽车之家的简单的登录注册以及车型展示,当时虽然做的不是很好,但是为我面试积累了项目经验。只有量变积累才能有质变的提高,这个也是我对angular的使用体会,只有在不断的项目中使用,才能不断领悟他的精髓。

学习到这里基本你已经可以去投递简历去面试了,有人说刚刚毕业的新人怎么去写好自己的简历让面试官给你offer呢?

这个我就以我自己为例,当时我选的是拉钩和智联招聘还有就是猎聘网,我观察过,这三家是招人招的多,HR查看简历回复快的三家。后来我就自己在网上观看了很多人的简历和制作以及面试过后发出的简历模版,我发现别人之所以面试上写的不是自己大学的参加比赛,而是自己写做的项目经验和实习经历,这些是一家招聘公司最看重的,他们想要招聘的员工是想有工作经历或者是项目经验,可以协调配合项目组开发,然后是有认知,态度好,又负责的员工。当时我结合这些把自己做过的项目整合一起写了自己做的项目经验,因为这些也是我自己的经历,虽然没有实习但是这样的经历也是面试官想看到的,我就当时把这些整理好,投递了几份简历,然后第二天就有三家让我面试,结果面试三家都要我,我就选择了一家外企,也就是我现在今天这家公司。这个详细的面试,可以留给我们chat的时候可以细聊中间的事项。

enter image description here

现代企业招聘前端人才

对于这个问题我相信很多人都是有很多问题和疑问的,我在工作之后也参与过很多次招聘员工,然后面试员工,渐渐的我就明白了现代企业需要的前端人才是什么样的呢?肯定很多人想的是技术,然后人品,还有能力。恩恩没错但是我觉得公司需要的不仅仅是这样的人,能力,技术,人品除了这些还看一个人的态度以及面对压力处理问题的思路,以及有评估一个项目的截止时间,更重要的一点是认知。这个是我们在企业一直强调的,技术不行可以提高,但是如果一个人认知不行,那就是真的没有办法了。所以我们一直在不断的努力学习,其实就是提高我们自己认知的,同时也在提高我们自己的能力问题。最好的提高自己认知的方法就是去不断的学习,最好可以去看看国外一些大牛的博客,tutorialspoint :https://www.tutorialspoint.com/codingground.html ,还有就是这个stackoverflow http://stackoverflow.com/,还有就是大家经常逛的www.github.com ,上面很多的开源的代码和开源的技术资料,等等。这些都是伴随我自己不断的一路走来的心路历程。

想说的感觉还有很多但是限于文章的形式,有很多话语又不能说完,但是这些是我一路走过来经历的和不断提高的过程走到一个阶段就会去思考下一个阶段的问题和目标。前端是一个不断有新的技术衍生的领域,框架,工具等都是在不断的发展中变革,所以只有保持不断的学习才可以让自己不断的进步,详细的内容我们可以在chat交流的时候,好好交流下。


本文首发于GitChat,未经授权不得转载,转载需与GitChat联系。

吉米
写得太棒了👏 一个有故事的大神
山西_卫星
这是真的吗,我没有接触过编程可是我特别喜欢编程不知该怎么学
千山慕雪
厉害了,学习的过程就是这样,不断坚持,不断突破,加油
萝卜波
都是很深的感悟呀!赞
Forlove
确实很厉害,值得我们借鉴和学习
nick
品味好棒 棒棒棒~
MUSTANG
学习中!赞一个!
远方
写得有点白话,通过这篇文章阐述下我一路学习程序开发走过的路,解惑一些程序开发新人的迷惑。
℡小小小
感觉从零开始学,好难,根本找不到切入点,
吉米: 刚开始都会这样子 我之前学习也很吃力 你学习方法不对
流鼻涕的大师儿。
现在前端学习已经差不多三个月了,学完html.css.js.jq,做完一个自己的小项目,在看第二遍高程3。看完打算实习,但是发现还有很多框架自己没去接触。现在快六月份了,得加快时间去找实习了,不知道学习和实习如何权衡。还有就是学习的下一步应该学什么。学三大主流框架,还是学习node.js,php之类一些后端的东西。
清欢
目前主流的前端框架Angular,React和Vue,他们各自的优势是什么?怎样判断一个项目最适合的前端框架?
清欢
如您所说,学习需要大量的demo练习巩固,目前发现有百度前端技术学院,freecodecamp这类的小项目或demo练习,但缺乏接近真实企业开发的练习项目,除了去找实习,还有什么途径能够获取这类练习项目的途径?
清欢
数据结构和算法对于前端初学者,是否是必须要掌握的?它们对一个前端工程师的发展起到了怎样的作用?
清欢
对于今天各类IT培训机构热炒前端工程师,勾勒理想蓝图,在您看来,经历这样一个短期培训,培训者能否达到一个初级前端工程师应该具备的技能?
清欢
对某个项目的开发是怎么进行分配的?如何做到分工合理且不会出错?
远方: 嘿嘿,谢谢你的问题,可以总结下,待会在chat过程中我会一一解答。
清欢
对于一个应届毕业生,生活在象牙塔中,缺乏实习经验和项目经验,应聘前端岗位,在简历上应该体现出什么?对于未来的前端职业规划,有哪些专攻领域的发展方向?初级,中级和高级前端工程师,三个级别之间的差距除了工作经验,还有什么?
远方: 嘿嘿问题已经解答,明天就会发出今天的分享,如果还有问题可以给我发消息咨询。
花森煜米
大三在校生,学了一个月前端,只学习了基本的HTML、CSS、JavaScript,对于JavaScript只掌握了基础知识,如何快速学习,想在暑假找到一份实习,不知是否可行?感谢!
远方: 可以的,在找工作之前可以先学一个前端框架,这样更好找到工作,如vue简单,企业也用的到。如果还有问题可以来找我咨询,我可以继续解答。
我是一只牛
零基础自学h5、css、js,对jquery、vue、react也基本掌握,工作七八年了,想转行前端,可行吗?
远方: 可以的,我开始学习的时候也是零基础,关键是要找到方法,最好找到学习伙伴有问题也可以交流,对于刚刚学习的新人来说。
王文华
感谢分享!
微信扫描登录