先定一个小目标,做他一个天猫官网
发布在前端学习2017年6月22日view:691
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

先定一个小目标,做他一个天猫官网

带了挺多届的学生,发现了一个现象,同学们在学习HTML,CSS,Javascript这些前端基础技术的时候,不会有太大的问题,大概也能分开掌握里面的标签,元素,选择器,函数,对象等等知识点。 但是要综合运用这些知识做一个好看的网站的时候,就犯晕了,不知道该如何布局,如何运用合适的样式,一些稍复杂的效果也不知道怎么下手了。

这样我认识到,单纯学习这些分开的样式等知识点,是无法有效的运用他们的。 那么就需要一个前端项目来进行整体的练手。

每个培训学校呢,都会有一个WEB项目来练手,通常都会做一个电商的购物网站,虽然听上去老套,但是确实很典型,各种知识点都会涉及到。

既然如此,就做一个购物网站来让他们跟着做来练手吧,那么做一个什么样的好呢? 放眼望去,难道还有比天猫官网更有说服力的吗?

能够从头到尾做一个天猫官网前端,是非常有价值的。 假如,能够独立的做出来,那么这就意味着,各种典型的场景,布局的思路,相关技术的运用都达到相当熟悉的程度,这个对于找工作,拿offer,更重要的是,技能的提升,是很有用的。

说干就干,我就照着天猫官网,做了一个模仿天猫官网: http://how2j.cn/tmall 包括里面的取色,布局,javascript交互,尺寸,都统统尽我所能做到跟天猫官网近似。

enter image description here

enter image description here

好吧,同学们,就参考这个模仿天猫官网来练手,做一个一模一样的吧!

然而,当我准备把这个项目一股脑打包给同学们的时候,我就懵逼了~

为什么呢? 因为内容实在是太多了! 为了实现前端效果,其中光是style.css文件就2200多行。

Html页面也相当复杂,还有各种javascript的交互。 如果就这么一股脑打包给同学们,那么让他们直接去天猫官网看又有什么分别呢? 对于前端新手,一下子太多太大的信息量,不仅不能被有效地消化掉,还有可能产生副作用——面对大量代码无从学起,强行阅读复杂代码,难以理解与消化,逐渐增加受挫感,最后失去兴趣

为了能够让这些知识变得易于消化和吸收(也不枉我花了2个多月的时间,一点点取色,量取尺寸,翻来覆去规划布局,反复尝试精心制作一样的javascript交互效果,最后做出来的这么20多种模仿天猫官网页面),专门制作了 模仿天猫前端交互式教程

评论
发表评论
暂无评论
WRITTEN BY
meepo
8年软件开发经验,6年教学经验
TA的新浪微博
PUBLISHED IN
前端学习

分享前端学习经验和技巧

我的收藏