前端学习之总结

在正式学习前端之前,看了一些关于此方面的文章,受益匪浅

这些都是宏观讲解

从宏观上,讲解了前端的知识。如作用、误区、学习方向、经验等等。www.jianshu.com/p/59decd1877c7

JavaScript 的导论与历史 www.jianshu.com/p/1397c469576d

基于NodeJS的前后端分离  http://www.jianshu.com/p/ea2a3efc680f 

前端的基础、广度与深度 www.jianshu.com/p/3a263aac9f9b

淘宝前端工程师:国内WEB前端开发十日谈    www.jianshu.com/p/8cf2df3fdbf2


再说一下具体的讲解

系统学习前端之CSS网页布局方式--浮动流、定位流  www.jianshu.com/p/cd4fe64d3c6e

系统学习CSS之基础    http://www.jianshu.com/p/7d201bc01f24



自我总结

1.前端开发的大致顺序是 :

1.确定用户需求~~

2..列一份详细设计清单、前期原型设计(Axure RP设计),给客户看,看看有无修改

3.前后端协商好数据接口,列一份详细清单(一般是后端完成)

4.设计好大致的主题风格(背景、布局等等)

5.分模块设计好具体的界面(从大到小,先布局、再具体细节)

6.用mock进行模拟测试,以及兼容性测试

7..前后端协同进行调试,有问题,则返回步骤3,再次按步骤来完成。


2.前端学习的知识

          基础知识包括 HTML、CSS、JavaScript

          深入学习 jQuery、bootstrap

          更加深入则可以学习node.js    react.js 等等

          还需要了解一些后端知识如  PHP、SQL、Python  等等


3.  前端技术需要的工具

原型开发工具    Axure RP

图片工具          Photoshop

网站开发工具  Dreamweaver

网站调试工具    谷歌浏览器    就可以了

代码托管工具    GitHub


学习过程

1.首先,去图书馆借了几本前端方面的书籍,讲的比较具体,不过有很多错误点,和许多不需要的知识

2.看了Head First  HTML+CSS  这本书,这本书讲的风趣幽默,实例性强,不过过于讲解重点而忽略了大量的知识点

3.不过以上的1和2可以相互补充,就这样将HTML和CSS大致学习完毕了。在此期间边学边做,渐渐的对这些语言熟悉了

4.又去图书馆借了5本 HTML5、CSS3  方面的书籍,学习了一些最新的技术,受益匪浅

5.去图书馆借了JavaScript、jQuery等方面的书籍,这个时候,也大致完成了我自己的前端设计,不过就是缺少交互性设计

6.借了一本书籍《web前端开发》,此书在前端方面讲解的非常全面,但是全而不细、不精

6.去w3cschool 下载了客户端,又学习了一下jQuery和bootstrap 方面的知识

                至此,大致学习完毕了前端的知识。但是对于JavaScript方面的知识几乎只知道一点皮毛,ajax、json技术几乎不会用,更加基本的知识就只是一知半解。

            而前端技术的核心就是交互性设计,也就是JavaScript、jQuery等等,看来以后要在此方面多下苦工了。


项目实践总结

刚刚开始项目的时候,总是东弄西弄,没有规划,没有设计,没有分块。搞得一头雾水,茫然无序,最后终于是摸索出来了一些经验。

1.一定要弄清楚项目需求,确定确定再确定,不然后面又要大改小改

2.一定要和后端先商量好数据接口,弄个详细清单,还要时不时的和后端进行沟通,沟通、沟通、沟通,不然后面改死你

3.确定好主题背景颜色、大致布局框架再具体写代码.  由大入小、由表及里、由浅入深

4.布局时,先用w3cschool的在线系统布局工具,先将大致的框架搭起来(使用bootstrap)。

        之前布局一直使用标准布局和浮动流布局(可参考前面的  系统学习前端之CSS网页布局方式--浮动流、定位流www.jianshu.com/p/cd4fe64d3c6e),发现这样布局很麻烦,你要他2行,他偏偏1行,你要他1行,他偏偏2行,还有margin、padding真是要人命,要不断的进行调试,让人快要崩溃了;后来学习了CSS3里面的弹性盒布局,觉得好多了,但是弹性盒布局还是比较麻烦;最后学习了bootstrap框架后,才开始变得容易多了。将布局问题解决之后,一些细节也就不是那么麻烦了。

5.一定要学习好JavaScript,表单就是最好的实践方法,比如登录、注册界面,这样可以锻炼前后端数据传输,以及表单验证功能,需要写大量的JavaScript代码,不过有了jQuery、jQuery-UI、bootstrap就好多了,代码可以变得很简洁。

还有专门表单验证的工具插件、交互性插件等等。可以满足各种需求。具体插件可以看w3cschool的离线教程

6.完成网站的设计后,还要进行调试,兼容性测试是最让人烦的。特别是IE6,真是让人崩溃,我现在还是没有解决这个问题。


具体知识

HTML

他是网页的结构,具体的内容可以分为文字、图片、视频、链接、HTML5又新增了画布、更改了视频的标准等等方面

主要的标签有