神刀安全网

老白的全栈开发学习之路 6 第二课开始前端框架

原文于2016-8-15首发

Coursera全栈网页开发的第二课,在十来天课程休息后开始了。全称是Front-End Web UI Frameworks and Tools 第一周的课程是bootstrap框架的安装和初步使用。老规矩先放周末大作业图。左侧是窄屏时的缩写显示页面,右侧是宽屏(手机横屏)的显示页面。

老白的全栈开发学习之路 6 第二课开始前端框架
FSD C2 W1 P.png

利用bootstrap框架可以迅速做出移动端需要的效果。这次是我做过的最快的大作业了,只用了半个多小时(后来又用了两个小时自己做各种课程外的调试,熟悉框架特性)。第二周的课程让我体会到了框架的巨大力量,可以带来效率的数倍提升。如果要找类比的话,远大的模块化建筑(视频)大概有点前端框架的意思。
学习回顾
新内容:Bootstrap基础
Coursera 第二课第一周视频 (3小时)
港科大另一位明星教师Jogesh K. Muppala. 他的课程条理非常清楚,具体优点如下:

  1. 主屏显示课件,知识展示清晰;小屏显示真人自拍,课堂不死板;
  2. 讲解新知识时用幻灯片,演示写代码时用视频录像;
  3. 介绍框架时,实例演示,用很少的几个知识点层层推进,“贴近“最少够用”原则,还能以此展示出知识体系;
  4. 严谨地讲解至于偶尔幽默调侃下,气氛把握得当。
    Coursera的三个小练习和一个大作业(3小时)
    其实在有了老师视频演示后,做起来还是还方便的。要不是有些地方自己看题目不仔细,还能更快。另外,更加觉得老师演示的内容简洁明了,没有废话。
    Bootstrap相关文档学习 (3小时)
    主要是把和课程讲解,尤其是每个小练习相关的知识点再看下官方文档里的说明。
    复习内容:JavaScrip, CSS
    J. D. 的JS教程 (9小时)
    继续手打教程,到了132页。因为出现了更多的代码,自己在敲击的时候顺便改改弄弄,做调试,所以只有一小时三页的速度。不过加深了很多知识点的理解。
    J. R. 的Learning Web Design教程 (2小时)
    因为bootstrap和CSS联系比较密切,所以又去查找了该书里CSS的一些部分。
    其他
    双拼输入法安装和调试(7小时)
    再重新学习了一遍《把时间当做朋友》之后,决定学习双拼。搜索了一些资料,找到了号称”神级输入法“的鼠须管输入法(rime)。但安装和调试花了数个小时,尤其是字库。虽然鼠须管占用内存比搜狗少很多,但是字库还是硬伤,哪怕导入了一些字库。最后决定还是用搜狗小鹤双拼
    Course港科大课程推荐的网络材料 (2小时)
    主要是有关全栈开发的讨论,资料相对旧些,但是质量都很高。开启了很多新视角。

小结
Bootstrap框架打开了移动设备开发的大门。李笑来说的高效开发的确可以做到,技术部分的工作量是可以由工程师学习新技术减少的。另外,初学者找到好老师的确很重要。**严格按照老师演示的代码操作,执行完毕后再自己做有针对性的调试,可以大幅降低学习时间。

本周惊喜
本周最大的惊喜还是Jogesh K. Muppala老师。不愧是评分高达4.7的课程主讲。条理清晰又不乏幽默。以下是几张截图,btw,他还能引用儒家经典指导教学。

老白的全栈开发学习之路 6 第二课开始前端框架
Full stack JS web development.png

老白的全栈开发学习之路 6 第二课开始前端框架
coursera C2 W1 bootstrap.png

老白的全栈开发学习之路 6 第二课开始前端框架
FSD on practice.png

本周的另一个惊喜是Muppala老师推荐的Brackets编辑器(需爬墙)。作为近年广受欢迎的编辑器,天生自带的实时预览功能可是前端开发的利器(恩,Atom也可以实时预览,但需要安装插件)。以下是动态截图(为了降低截图大小,只好把实时预览的网页放在底层,把浏览器放在表层。上面菜单部分动图就是编辑器在编辑时产生的即时显示效果):

老白的全栈开发学习之路 6 第二课开始前端框架
brackets demo by Giphy Capture.gif

本周的第三个惊喜就是双拼输入法了。虽然现在还在很缓慢地打字,但发现的确大大降低了键盘敲击次数。未来熟练使用后,打字效率翻倍可期。推荐搜狗,重度用户可以考虑rime

胡思乱想
本周学习讨论李笑来《人人都是工程师》的同学越来越多了。不乏一些和我一样零基础的朋友。不少在搭建开发环境时遇到了问题,包括对很多工具都极为陌生,比如terminal(我这个可以叫叔的老家伙至少小时候还见过类似的DOS)。还有朋友很认真地一步一步做,但是在搭建JS卡发环境这一章里,“创建.js文件”就不会了。写到这里,我谈下个人的看法。

《人人都是工程师》是个很有个性的教程。每个章节文字不多,但经常会用寥寥数语引出很多经典的学习教程。比如快速学习 HTML 和 CSS一文里

把 w3schools 上的这两个教程反复看个两三遍,对不止一遍 —— 当然,光看完不够,要每个要素都要逐一实验过。别觉得自己记不住,记不住的原因只有一个,就是用的次数不够多而已。

另外,该教程总体上强调学员自己的动手能力,归纳总结能力,试错的耐心等等,并不是一本手把手教学的“傻瓜教程”。当然,作者也算是“老程序员”了,有时会把很多已经熟练掌握的东西一下子写出来而忽略新手因为一点背景也没有,无法理解。所以,我建议大家,尤其是零基础的同学,**把《人人都是工程师》当作一本“未习得知识索引”来看。**具体的学习还是要把更多精力放在经典的传统教材上。比如《人人》里提到的w3schools,算上练习时间,一百小时也不够的。

今日推荐
刚才提到了“老程序员”可能会忽视新手无基础知识背景的问题。这里就给大家一个漫画
其实这次推荐的就是霍炬,西乔夫妇两的两个微信公众号。分别是“歪理邪说”和“神秘的程序员们”。
霍炬在《把时间当作朋友》一书中的“补记”里有介绍,是“connector”兼“maven”。西乔在《人人都能用英语》里也有提及,是那个用了很短时间学好英语通过雅思然后移民的人。夫妇两都可以算是工程师。一个还是不错的科幻短篇作者,一个是功力不凡的设计师。搭档出品的作品之一,“神秘的程序员们”已经连载几年,连广告植入都毫无违和感,不得不安利给大家。


这次的文章很简练吧?拜练习双拼所赐,是我最近打字时间最长的一篇了。。。。。。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 老白的全栈开发学习之路 6 第二课开始前端框架

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址