第一次接触前端是在2014年的7月。我的理解是第一次真正敲击了HTML,CSS代码。我的第一个页面是一个个人博客页面。那个时候的代码东拼西凑,由于对HTML标签都不太熟悉,每写一句话都可谓是“胆战心惊”。那个时候的CSS也只会最简单的一些color,width,height等等,最多再来些margin。而且也只会内联样式。这个时候对于布局也只是一知半解。后来的将近10个月的时间对前端就没再有过多的接触。
直到今年5月下旬的时候,由于个人原因,决定了以后要做的东西是前端。所以重新拾起了前端的东西。万事开头难。虽然前端的学习曲线对于初学者来说前期是个甜蜜期,但是对于我来说将近10个月没再进行前端学习的人,前期也是有它的难度的。
从CSS3开始–前端入门的开始
不过很庆幸当时最初写前端的时候接触到了SublimeText这个写代码的好东西。当时对于市面上各种前端的开发工具并没有了解,而仅仅是觉得SublimeText给我的感觉是干净简洁而舒服的就一直用到了现在。事实证明这也确实是图形化界面下进行前端开发的最好的工具(或许没有之一?哈哈。)
了解基本的HTML标签后,就可以开始进行前端开发了。基本结构一旦能够能懂是什么意思,接下去就是排版+效果了。而我认为的我的最早的前端开发,是对自己博客的导航栏的优化。当时看了别人博客的导航栏,有些效果觉得确实很棒,就想学过来。但我当时毕竟还不会JavaScript,所以就没有办法进行JS的效果开发。有些效果需要借助JS的,我就无能为力。不过好在有CSS3这个好东西。最早做的一个菜单导航栏下拉3D悬停的效果就是通过CSS3做的。当时毕竟还是能够看得懂一些CSS,所以当时进行模仿的时候还没有太多的难度。遇到不懂的属性自然就百度了。而当时难度比较大的就是对于CSS选择器语句的基础不牢,并不能很好的区分后代,同级,伪类等的区别。当时也并不知道这个东西要怎么描述,只能对着一知半解的代码一点一点地努力去理解它的意思。
CSS3多了的东西其实相较于CSS2/1并不算特别多,新加的标准里面多的的东西实际上主要跟动画,变化有关系。而也正因为这样,以前需要用JS才可以做到的效果现在用CSS3就能实现,而且相对来说更简单就能实现。CSS3相比JS更加友好的语句我觉得是前端入门的最好的东西。毕竟做的效果能够第一时间呈现在浏览器里。而很多时候,前端的学习,尤其是CSS的学习,是从模仿,从摘抄别人做的效果开始,从他们的效果开始学习CSS。
尝试接触JavaScript–以及第一次用上框架
我们经常能听见的编程语言界名词里,Java和JavaScipt(下简称JS)必然是耳熟能详。只不过这两个东西真的基本上是没有关系的。JS诞生的初衷是为了前端。也的确JS能够为前端的效果带来质的改变。而此前JS也仅仅只局限在前端的开发。而最近几年诞生了一个JS的黑科技,叫做NodeJS,这个东西能够在后台运行。从此JS成为了前段后台通杀的语言,也大大扩展了这个语言的魅力。
JS能做的东西很多,从华丽的前端特效,到实用的网页脚本。不过JS的入门并不能算是简单的。虽然跟其他编程语言一样有自己的变量,函数,逻辑语句。不过鉴于原生JS的复杂的表达式很多人一开始是望而却步。我也一样。自从开始进行前端的学习与开发后,我一直在挖掘CSS3的能力。曾经企图让所有的效果都只通过CSS3来实现。后来发现这是异想天开。CSS3固然是炫酷的,但是它也有自己的局限。CSS3简单的说只对自己的元素能够产生变化,并不能关联到其他元素。也就是这是个“自私的”东西。JS就不一样了,它能做到操控所有的元素,它能让元素捆绑,能够做到很多CSS3做不到的东西。
JS的入门,还是要从W3CSchool入手。在看完大部分的JS教程之后,我只能做到对JS有个大概的理解,对于它的语句结构有所了解。但是叫我现在就用JS去做我想做的效果,做我想做的功能,恐怕是不行的。这个时候就出现了一个著名的JS的库叫做JQuery(以下简称JQ),这个东西大大降低了JS的开发难度,算是一个JS的框架。JQ由于自己封装了能多功能,所以很多功能在引入了JQ以后就能够直接调用。直观并且方便。第一次用上JQ这个框架是做学校的IPTV前端开发的时候,由于有的效果我知道只能用JS来做的时候,当时花了1天的时间对JS和JQ进行了半系统的学习,在能够看懂代码之后开始进行模仿的。最后成功地运用了JQ解决了问题。固然是一件好事,不过我的JS代码写的并不聪明。在我看来有过多冗余的代码。这是我对JQ的选择器的使用不够熟练的原因。其实很多时候一个功能其实看起来很简单,但是真正要实现出来的时候,总会出现各种各样的问题。不过这也是前端的一个有意思而其他人看来累烦杂的工程。而自从用上了JS来写东西之后,我就发现前端开发已经离不开JS了。
尝试接触前端框架–从Bootstrap开始
Bootstrap这个著名的前端框架想必这几年开始是每个前端开发人员的必经之路了。其实去年7月的时候就知道了这个框架,但是由于一直看不懂怎么使用(对,就是真的一开始看不懂这东西要怎么用)所以我是一直是想用都用不了。IPTV的PC版的页面我并没有用框架而是纯粹的用自己的HTML+CSS3+JQ的代码构建起来的。由于只要管PC的页面布局,所以只需解决低版本浏览器兼容的问题就可以了。但是移动端的(手机、平板、MAC)开发却要做到能够适应各个屏幕的大小来显示适合各个屏幕大小的网页。这个东西我只能求助于Bootstrap了,它是响应式的,是能够符合我的需求的。而我不得不再次看起Bootstrap的那个先前对于我来说看不懂的教程了。不过由于学长跟我说过Bootstrap简单而好用,对于我IPTV的PC端是纯手写的方式他表示很惊讶,说是不用框架他都不知道怎么实现的。这下感觉Bootstrap应该是很简单的吧。
入门Bootstrap的时候确实会被教程带的乱七八糟,不知道什么是LESS,什么是SASS,什么是编译什么是非编译,不知道什么是压缩什么是非压缩的时候确实很难受,因为开头你就不知道应该下哪个源码来引用Bootstrap。不过好在看不懂官方教程的时候第三方教程能够在第一时间先让你搞懂怎么用。在了解了怎么引用,基本结构后,再回头来看官方教程,觉得写得真特么好= =。。响应式的开发在引用了Bootstrap之后瞬间就很舒服。不需要考虑太多的排布的东西,因为在引用的时候已经都做到了。而我们需要做的就是运用Bootstrap在排布的同时做到视觉上也能过关。良好的Bootstrap衍生的CSS类库就是很不错的选择。原生的Bootstrap有些CSS不算满意的时候可以自己修改也可以引用其他的衍生类库,对于开发来说只有为用户体验做到最好才是最好。
前端正式入门–以及未来很长的路
做完两个完整独立的页面后,我的前端之路也算是正式入门了。从真正决定开始做前端开发到现在不过2个多月,而前端的甜蜜期已经算是度过了。接下去就是前端的瓶颈期了。还有很多东西并没有真正开始接触。CSS的预编译(LESS/SASS),NodeJS开发,HTML5,JQ的MobileUI,JSON处理以及后端的Python,PHP等等。前端的学习犹如溪流入河,河水入海。前期的东西少而甜蜜,后期的东西多而苦涩。不过真正熬过这段瓶颈,相信自己的前端独立开发的水平也能达到预期要求。
我一直觉得我做的东西跟自己的兴趣关系特别大。之前自学视频、PS等制作纯粹就是自己觉得好玩、喜欢,现在放到前端来也是如此。而且我发现了两种不同领域之间有所共同的东西,那就是对画面的要求,对美感的要求是共同的。之所以喜欢前端也是因为前端是展现给大家看的东西。这个跟视频和图片是一样的。都是展示出来的东西,自然要做到让自己满意的同时也要让大家(大部分人)满意。而大家满意的同时会让你觉得自己做的东西很有成就感。这种成就感也是一直促使我不断学习的动力和压力。
前不久看到的一句话觉得实在是太符合自己当下的心境以及未来的路,我也希望自己的坚持不会让自己失望,也许会留下遗憾,不过至少我没有违背自己的初衷。
:做你所爱的事,爱你所做的事。