IT培训网
当前位置 : IT培训网 > Web前端 > 交流分享 > web前端培训学校总结的前端学习方法

web前端培训学校总结的前端学习方法

时间:2016-08-31 13:40  来源:web前端培训网  作者:IT培训网  已有:名学员访问该课程
标签(Tag):   前端学习方法(1)
前端始于切图,这应该是不容辩驳的。有些同学不爱写html和css,特别是从后端转过来的同学,我觉得这样是不行的,因为前端这个职位本来就是这么发展而来的。

最近很多来学习前端的同学,不知道前端的学习内容和学习内容有哪些,IT培训网今天整理了一些基本知识供大家参考。

前端始于切图,这应该是不容辩驳的。有些同学不爱写html和css,特别是从后端转过来的同学,我觉得这样是不行的,因为前端这个职位本来就是这么发展而来的。

和切图相关的当然就是HTML和CSS了。HTML就很浅了,你只需知道HTML4和HTML5的文档规范有哪些区别就行了。CSS的话,首先你得知道都有哪些属性,他们都用于哪些场景,能熟练地还原PC端的页面,并兼容各浏览器,就算是切图入门了。这时候你写出来的页面应该是充满了div,CSS中充满了px单位以及冗余属性。

有些人觉得能把图切出来就可以了,其实不然,路还远着呢。接下来是切图中级之旅。你需要对HTML各个标签都了如指掌,知道他们的语义和使用场景。关于CSS,你应该大致读一遍W3C规范,了解不同的盒模型(行内、块级)的布局规范,了解文档流、IFC、BFC等概念,简言之就是要 知其所以然, 通过原理来做事,而不是像以前那样靠猜和试来解决问题。

CSS的使用也是一个积累的过程,在此过程中你需要积累各种技巧,比如左右两栏自适应布局、传说中的双飞翼布局、margin负值布局、各种情况下的居中技巧等等。

到了中级的时候,你还应该掌握HTML5和CSS3中的新特性。你也要开始能做移动端的页面了。新的标签和CSS属性都要门儿清。圆角、阴影自然不在话下,你还得掌握渐变(transition)以及变形(transform),以及动画(animation)。你做的页面不再是只用px来定死宽高,而要学着进行响应式布局,学习flexbox的布局模式。

当你做了几百张页面,能熟练写出移动端的页面,掌握各种场景下的最优布局,并且能从原理上解释一些现象。那么恭喜你,中级切图仔可以出师了。你应该感受到此时已经是一次质变了。

是的,切图之旅还没结束,来看高级的吧。高级有两个关键字:架构、性能。

先说架构。在中级出师之后你已经是切图师中的战斗机了,这时候你就应该考虑如何来架构一个整站的CSS了。为什么要架构呢?因为你在此前肯定会经历不断升级维护CSS代码的痛苦,那就是代码只增不减,旧的样式从来不敢删,每次升级都是用更高的优先级来覆盖掉旧样式。代码在修改的时候及其不灵活,有时牵一发而动全身,有时需要把相同代码复制粘贴到n个地方。

你可能会尝试把CSS代码按照模块为单位来划分,或者是自己定义的其他规则和编码规范,作为约定所有人遵守。现在的话,最佳实践就是CSS预编译(sass/less/stylus),你应该掌握如何使用,以及如何用这些工具来架构出灵活的CSS。

关于性能,也是高级切图师要关注的。你需要了解浏览器渲染DOM树的过程,知道重绘(repaint)、回流(reflow)这两个概念,以及怎样的布局能够尽量减少回流。你应该知道硬件加速是个什么鬼,知道translate3D能开启硬件加速的原因是什么。你要学着用chrome的timeline来分析整个页面的渲染过程,哪里耗时长,该用怎样的方案来解决。

更多的前端切图技巧在IT培训网css频道可以找到更多哦。

顶一下
(0)
0%
踩一下
(0)
0%

IT培训0元试听 每期开班座位有限.0元试听抢座开始! IT培训0元试听

  • 姓名 : *
  • 电话 : *
  • QQ : *
  • 留言 :
  • 验证码 : 看不清?点击更换请输入正确的验证码

在线咨询在线咨询

温馨提示 : 请保持手机畅通,咨询老师为您
提供专属一对一报名服务。

------分隔线----------------------------
------分隔线----------------------------

推荐内容

相关热点