• 几种食物 让你悄悄吃出“瓜子脸” 2019-07-07
  • 反四风,树新风——推动作风建设向纵深发展 2019-07-03
  • 股票买卖中不可忽略的大宗交易数据(上) 2019-07-02
  • 实现历史跨越 攻克深度贫困——党的十八大以来脱贫攻坚取得显著成效 2019-06-25
  • 【理上网来·辉煌十九大】俄罗斯科学家:受到习主席接见印象深刻 2019-06-25
  • 北京高能时代环境技术股份有限公司获第十二届人民企业社会责任奖年度环保奖 2019-06-23
  • 北京天安门广场更换花卉 2019-06-23
  • 【両会】第13期全人代専門委員会のメンバー 憲法に宣誓 2019-06-21
  • 王栩冬、苏静任天津市静海区人民政府副区长 2019-06-21
  • 太原摇滚20年演唱会 齿轮橡皮等老牌乐队重出江湖 2019-06-15
  • 这篇文章写得非常好,现在的人大多都是根据一些简单的事实来判断事情的对错,“一个很漂亮的开奥迪的女人”为了十八块钱与保安对峙 2019-06-15
  • 安农大选配50名资深教授担任产业联盟“盟主” 2019-06-12
  • 口音让他露马脚 背负3条人命公安部B级逃犯被武汉细心民警揪出 2019-06-12
  • 新时代 新篇章 聚焦2018湖北两会 2019-06-11
  • 正义感爆棚:流浪狗“路见不平” 赶跑打劫男子 2019-06-11
  • 长沙尚学堂|十年树人|成就高薪
    致力推动IT教育,我们正在行动    咨询热线:0731-83072091

    最近十期的中奖号码:前端项目练手——先定一个小目标,做他一个天猫官网

    时间:2017-05-19 15:47:31   来源:长沙尚学堂   阅读:
    带了挺多届的学生,发现了一个现象,同学们在学习HTML,CSS,Javascript这些前端基础技术的时候,不会有太大的问题,大概也能分开掌握里面的标签,元素,选择器,函数,对象等等知识点。 但是要综合运用这些知识做一个好看的网站的时候,就犯晕了,不知道该如何布局,如何运用合适的样式,一些稍复杂的效果也不知道怎么下手了。 
       
    这样我认识到,单纯学习这些分开的样式等知识点,是无法有效的运用他们的。 那么就需要一个前端项目来进行整体的练手。 
       
    每个培训学校呢,都会有一个WEB项目来练手,通常都会做一个电商的购物网站,虽然听上去老套,但是确实很典型,各种知识点都会涉及到。 
       
    既然如此,就做一个购物网站来让他们跟着做来练手吧,那么做一个什么样的好呢? 放眼望去,难道还有比天猫官网更有说服力的吗? 
       
    能够从头到尾做一个天猫官网前端,是非常有价值的。 假如,能够独立的做出来,那么这就意味着,各种典型的场景,布局的思路,相关技术的运用都达到相当熟悉的程度,这个对于找工作,拿offer,更重要的是,技能的提升,是很有用的。 
       
    说干就干,我就照着天猫官网,做了一个模仿天猫官网: 包括里面的取色,布局,javascript交互,尺寸,都统统尽我所能做到跟天猫官网近似。 
       


       

       
    好吧,同学们,就参考这个模仿天猫官网来练手,做一个一模一样的吧! 
       
    然而,当我准备把这个项目一股脑打包给同学们的时候,我就懵逼了~ 
       


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


       
    Html页面也相当复杂,还有各种javascript的交互。 如果就这么一股脑打包给同学们,那么让他们直接去天猫官网看又有什么分别呢? 对于前端新手,一下子太多太大的信息量,不仅不能被有效地消化掉,还有可能产生副作用--面对大量代码无从学起,强行阅读复杂代码,难以理解与消化,逐渐增加受挫感,最后失去兴趣 
       
    为了能够让这些知识变得易于消化和吸收(也不枉我花了2个多月的时间,一点点取色,量取尺寸,翻来覆去规划布局,反复尝试精心制作一样的javascript交互效果,最后做出来的这么20多种模仿天猫官网页面),我把页面分为如下几类页面: 
       


       
    有的页面比较复杂,就再拆分的小的页面,比如首页又分为导航和轮播,分类和推荐产品,产品列表以及javascript的交互部分。
       


       
    光是拆分的小的页面也不够啊,在每个页面知识点的讲解里面,首先展示运行之后的效果 
       


       
    接着讲解为了达到这个效果要进行如何的布局 
       


       
    结合布局,无CSS效果的HTML结构就好理解多了 
       


       
    然后就是样式的讲解,在这里我就犯难了, 样式起作用是和不同的选择器以及元素关联起来的。 怎么样才可以有效的让同学们理解那么多的样式以及他们效果呢? 
       
    为了更好的把样式的作用阐述出来,做了一个大大提高学习效率 的 样式详解 功能。 
       


       
    这个功能。。。怎么用呢~ 
       
    左边是列出了所有的样式 
       


       
    右边一开始是无样式的HTML的效果 
       


       
    通过点击左边的"点击套用",就可以挨个使用每种样式,并且可以在右边立马看到使用这一种样式之后的效果。 
       


       
    这样就可以达到立竿见影呈现这个样式的效果了 
       
    当然还提供了套用全部样式,取消全部样式这些功能。 
       


       
    值得一提的,还有这个动态套用样式这个功能,hoho,点击之后,每隔一秒钟逐个自动套用左侧的所有样式,通过观察从无样式的HTML演变为有样式的效果这么一个动态过程,可以更好的建立整体样式效果观念和理解,这是非常吼的~ 
       


       
    好,通过这么一个流程,同学们就可以对整个样式的理解达到比较好的程度。 
       
    但是! 光看是没有用的啊,最后还是要自己写出来才行啊, 
       
    所以我又提供了一个练习模式。 
       
    在练习模式中,左侧是已经准备好了选择器的样式,右侧是实时显示效果。 根据前面对各种样式的理解和消化,自己动手做一遍。 做的时候,就会犯各种错误,跳各种坑。 而恰恰就是这些各种错误和各种坑,才是最有价值的经验碎片和能力源泉。 
       


       
    最后,还提供了一个空白页供以练习,在这个空白页里准备好了jquery和bootstrap的导入(因为要用到bootstrap的图标),还准备了<style></style><script></script>标签标签,以及一个空白的<div></div>. 
       


       
    倘若! 倘若! 能够基于空白页,独立地把前面演示的天猫效果做出来,那么我可以说,这个页面所运用到的前端的知识点,你就拿到手了! 
       
    倘若! 倘若! 能够把所有的天猫前端页面都学习并且掌握,而且能够独立的做出来。 那么阁下所掌握的前端技能,不敢说就达到王者,但起码也是白银! 
       


       
    试问,如果你正在找前端工作,又有多少公司对前端页面的要求会超过天猫呢? 
       
    因为这套学习天猫官网前端的学习系统有一定的复杂性,为了保证学习的高效率性,录制了如何使用这套系统的视频。 
       

    a
    分享:0
    开班计划
    热门文章
    视频下载
    猜你喜欢
  • 几种食物 让你悄悄吃出“瓜子脸” 2019-07-07
  • 反四风,树新风——推动作风建设向纵深发展 2019-07-03
  • 股票买卖中不可忽略的大宗交易数据(上) 2019-07-02
  • 实现历史跨越 攻克深度贫困——党的十八大以来脱贫攻坚取得显著成效 2019-06-25
  • 【理上网来·辉煌十九大】俄罗斯科学家:受到习主席接见印象深刻 2019-06-25
  • 北京高能时代环境技术股份有限公司获第十二届人民企业社会责任奖年度环保奖 2019-06-23
  • 北京天安门广场更换花卉 2019-06-23
  • 【両会】第13期全人代専門委員会のメンバー 憲法に宣誓 2019-06-21
  • 王栩冬、苏静任天津市静海区人民政府副区长 2019-06-21
  • 太原摇滚20年演唱会 齿轮橡皮等老牌乐队重出江湖 2019-06-15
  • 这篇文章写得非常好,现在的人大多都是根据一些简单的事实来判断事情的对错,“一个很漂亮的开奥迪的女人”为了十八块钱与保安对峙 2019-06-15
  • 安农大选配50名资深教授担任产业联盟“盟主” 2019-06-12
  • 口音让他露马脚 背负3条人命公安部B级逃犯被武汉细心民警揪出 2019-06-12
  • 新时代 新篇章 聚焦2018湖北两会 2019-06-11
  • 正义感爆棚:流浪狗“路见不平” 赶跑打劫男子 2019-06-11
  • 手机版绝地求生开挂软件免费下载 北京赛开奖下载 伯恩茅斯天气 黑手党登陆 加拿大卑斯开奖快乐8 vr赛车游戏 塔什干火车头战绩 皮耶罗悉尼fc 辽宁11选5开奖结果手机版 梭哈英文