零基础前端攻城狮养成计划

本喵至今已经作了一年半的前端了，还不能自封前端大牛，可是也算是入门了~这段时间里，从一个测试实习生到写文案，到成为一枚前端实习并入职正式工做一年。对于前端知识来说能够说是从0开始了~获得过大牛们指点，踩过不少坑，本身也在不断的摸索着，学习着，成长着。

 

先说说本身目前的技术能力，给想要入门前端的小白们一颗定心丸~

 

如今本身差很少3个小时能够切出一个兼容PC端和移动端的活动页面；一个和后端有交互并有表单验证的功能基本上1天就能够完成；一个没有见过的插件，看看文档就能够愉快的使用了；本身亲手写过两个插件；兼容过ie6；处理过xss漏洞；懂一些seo和性能优化；和小伙伴一块儿用html5作过手机软件~

 

一年半成长到这里，是否是有点慢啊~~但是我么有参加过培训班呀~~4个月包教包会包分配的培训班，没有时间参加的说~

也可能我挺笨的吧~~因此，乃们必定比我学的快~~~必定要有信心哦~~

 

说了那么多，讲讲我是怎么一步步变成了我曾经黑他们到吐血的大（gong）猴（cheng）子（shi）的吧~~~

 

1.看w3cshool的html，css，js相关知识。

 

本喵花了一周的时间看并记住了这里面的知识，是的一周时间，认真记住了相应标签的含义，各个css表明的样式，js的一些字符串处理函数、dom操做。但是记住有什么用呢，不用会忘啊~~

但是，用的时候，我怎么知道这样写是符合正常前端大猴子们的思惟和规范的呢？这个时候，咱们要作一件事，就是——抄~找一个简单的页面，本身仿照着它的样式，先写一遍，你会发现，并无你想像的那么简单。单单是css的盒模型，元素的文档流问题就把本身搞疯了~~  

一个左边是图片，右边是两行文字的logo，以下图，怎么切才最优雅？

由于是抄的，因此能够随时去看别人是怎么实现的，为何要这么实现？

 

2.多练，多练，多练！重要的事情说三遍~

刚开始，喵君切一个带交互的页面要一成天~要随时去查某个css样式怎么用，某个奇怪的样式怎么写~后来作的多了，掌握了基本的原理，了解了各个标签的语义，css样式合适的场景，天然写的就快了~

因此在初学一段时间以后，必定要勤加练习，不能只看~ 徒手去作，才能知道问题在哪里，而后去寻找答案~

 

ps：切页面的意思是把设计师给你的psd文件，经过css，html和图片变成一毛同样的html文件，能够在浏览器中看~

 

3.深刻理解css。

通过上述两个步骤，相信通常的网页已经难不到你了，这个时候，要深刻理解一下css了，好比vertical-align和line-height之间的基情，不懂的去百度张鑫旭老师~~对，这个时候须要多看一些博客，看看大牛们在编码过程当中遇到的坑，以及他们的解决方法~喵君看的比较多的就是张鑫旭、阮一峰的博客了~固然还有我司大牛们的~这个时候还能够看看视频课，好比幕课网，极客学院等等~~增加一下见闻。

 

喜欢新技术的孩子们，也能够看看html5，css3动画了~徒手作一作，发挥一下想象力~

 

4.关于javaScript和jQuery。

喵君看过js的一些基础后，就开始根据文档使用jQuery了。由于jQuery不用考虑文档的兼容性，而且我手中的项目就是jQuery啊~为了更快的接手，必须尽快掌握它的使用方法~

 

索性jQuery好用多了~大家用过就知道~~这里主要要说的是：

1.jQuery有不少插件，能够很是快速的帮助你完成特别的效果。

2.记住常用的字符串处理函数，可以很大的提升效率。

3.别太依赖它~

 

主要说第三点，喵君其实特别不爱用插件，缘由就是没有任何一款插件可以适应全部的场景，若是有一些无法实现的效果，那么这个时候要么附加一些强制实现的代码，要么看源码改插件~都是很不优雅的事情，并且对于初学者，不要那么懒~~能本身搞定的，就练练手呗~~

 

喵君使用过轮播图的插件，可是前提是在以前，喵君已经亲手写过一个自动轮播的。讲真，使用插件快多了，不用本身计算滚动时间和绑定相应标签的事件，但是对于本身的收获，后者但是大多了~~

 

别太依赖，由于不是全部的场景均可以使用jQuery，好比移动端，引入一个jQuery仍是太耗流量了~并且万变不离其宗，javaScript才是始祖~

 

5.了解性能和安全问题

在通过一段时间的锻炼，相信此刻的你对切页面和各类刁钻的效果已是手到擒来了。这个时候，奇怪的问题也会涌来，好比网站的安全问题，你引入的插件可能会含有漏洞，要随时更新~你写的代码里，可能会有xss攻击的隐患~~这个时候，有必要去了解一下简单的网站安全知识，至少要知道怎么改~

 

有时候，作的网页打开可能会特别慢，这个时候就须要咱们去了解一下浏览器在输入网址以后都作了什么，哪里能够改进，优化，加速首屏的展现效果 。

 

还有，怎样布局整个页面才能减小浏览器的重绘；怎样才能使动画更加流畅。

 

6.提升编程效率。

此刻，咱们对前端的知识已经有了更为深入的了解，咱们要去作伟大的事情了，怎么还能在一点点写css，重复调试修改依赖的css类上，花费太多时间呢？

 

这个时候咱们能够看看less、sass的css预编译系统，加快咱们对页面美化和制做效率。

 

若是你本身想建个网站，或者有人想请你帮忙写个页面，而那我的又彻底不懂，没有设计师而你又特别忙的时候，bootstrap能够优雅的帮助你工做、人情两不误~~

 

7.了解node.js和mvc模式。

node.js是一种能够在服务端运行的语言，能够链接数据库，因此看到这里，你应该知道我想说什么了，喵君不会讲高大上的名词，什么服务端语言之类的，就是想说一句，只要能链接数据库，还要后端干什么~~

 

为了咱们的终极理想，咱们须要学的东西就太多了，mvvm模式，mvc模式 等等~喵君还没到那一步~~唱不出大家想听的曲子~~~

 

咱们一块儿学习吧~~~

 

ps：在后几篇中，喵君会把上面提到的知识，总结一下发出来~

        请高手指教，小白学习~~