原文于2016-07-13首發(fā)
港科大全棧開(kāi)發(fā)課程的第一周大作業(yè)做好了变姨，算是學(xué)習(xí)之路的第一步族扰。一個(gè)很樸素的交友網(wǎng)站信息輸入頁(yè)面，我知道這個(gè)很難看，但立此存照一下渔呵，給未來(lái)的自己怒竿。
HTML和CSS學(xué)習(xí)的簡(jiǎn)短回顧
HTML是網(wǎng)頁(yè)內(nèi)容載體，分為和兩塊扩氢。里面的meta info耕驰，如CSS定義了里主體部分的內(nèi)容（contemt），比如尺寸录豺，字號(hào)耍属，顏色，位置等等巩检。高效率操作CSS的基礎(chǔ)之一就是對(duì)元素好好利用class分類(lèi)厚骗。
不太恰當(dāng)?shù)念?lèi)比：HTML像名詞，CSS像形容詞兢哭，JS有點(diǎn)副詞甚至動(dòng)詞的意思领舰。
·對(duì)Coursera上兩個(gè)HTML課程的第一周課堂簡(jiǎn)單總結(jié)
港科大老師教學(xué)比較嚴(yán)謹(jǐn)，重在對(duì)課堂內(nèi)容的梳理迟螺，中規(guī)中矩冲秽。習(xí)題少，但都針對(duì)課堂重點(diǎn)來(lái)練習(xí)矩父。
港科大的大作業(yè)锉桑，HTML部分的重點(diǎn)在常用input的幾種應(yīng)用，CSS部分的考察重點(diǎn)在字體窍株，顏色民轴，尤其是圖像邊框和位置，比較實(shí)在球订。
Johns Hopkins University（JHU）的老師教學(xué)比較有活力后裸，能用幻燈片更好地解釋基本概念，并穿插HTML的發(fā)展歷史冒滩。習(xí)題較多微驶，集中在基本概念的梳理。推薦新手觀看开睡，免費(fèi)的因苹。（JHU課程的大作業(yè)在第二周才有，還沒(méi)做篇恒，不評(píng)論扶檐。）
·在線(xiàn)教學(xué)的幾個(gè)網(wǎng)站的小結(jié)
FreeCodeCamp是比較中規(guī)中矩的“教學(xué)＋練習(xí)”，對(duì)知識(shí)點(diǎn)的考察比較平均婚度。
dash.generalassemb.ly的projects側(cè)重應(yīng)用層面蘸秘。很生動(dòng)，知識(shí)點(diǎn)相對(duì)少蝗茁，但很切合實(shí)際需要（比如對(duì)手機(jī)端的頁(yè)面尺寸支持）醋虏。
＊上述兩個(gè)網(wǎng)站都是在一個(gè)頁(yè)面里同時(shí)進(jìn)行教學(xué)和習(xí)題訓(xùn)練
W3Schools的練習(xí)題都是對(duì)比較重要的知識(shí)點(diǎn)的復(fù)習(xí)，習(xí)題界面是新窗口進(jìn)行的哮翘，感覺(jué)不如上面兩個(gè)友好颈嚼。但好處是保留了原始頁(yè)面豐富詳盡的知識(shí)點(diǎn)。W3Schools是目前遇到的網(wǎng)頁(yè)開(kāi)發(fā)基礎(chǔ)知識(shí)方面最好的工具書(shū)類(lèi)網(wǎng)站饭寺。
花費(fèi)時(shí)間回顧
·花在HTML和CSS的有效學(xué)習(xí)時(shí)間阻课，自7.5開(kāi)始到7.12大概用了大約30多個(gè)小時(shí)。
·港科大HTML教程week1學(xué)習(xí)－－大約6小時(shí)
接近視頻實(shí)際時(shí)間的三倍艰匙。是第一份視頻教程限煞，也是第一份HTML的學(xué)習(xí)材料，時(shí)間多消耗在暫停記錄筆記员凝，去w3schools和google查知識(shí)點(diǎn)署驻。
·W3Schools學(xué)習(xí)和練習(xí)題——大約8－10小時(shí)。
是第一份文檔式教程健霹，用了較多時(shí)間逐一瀏覽旺上，記錄筆記，以及后來(lái)的練習(xí)題糖埋。
·JHU的HTML教程week1學(xué)習(xí)——大約3小時(shí)
比實(shí)際視頻時(shí)間多了40％-50%宣吱，主要用來(lái)記錄筆記。因?yàn)槭堑诙M視頻瞳别，有了基礎(chǔ)征候，所以比較快。
·FreeCodeCamp的HTML和CSS練習(xí)題——大約4小時(shí)
有了學(xué)習(xí)的基礎(chǔ)后祟敛，F(xiàn)CC的交互式學(xué)習(xí)對(duì)我來(lái)說(shuō)更多是練習(xí)題倍奢，知識(shí)點(diǎn)部分快速瀏覽就過(guò)。除了注冊(cè)網(wǎng)站和簡(jiǎn)單瀏覽垒棋，實(shí)際做題用了3.5小時(shí)卒煞，只有官方參考時(shí)間的70%
·dash.generalassemb.ly——大約4小時(shí)完成了兩個(gè)projects
這個(gè)是目前我最喜歡的網(wǎng)頁(yè)制作練習(xí)網(wǎng)站了，比FCC更友好和生動(dòng)叼架。舉個(gè)例子畔裕，有時(shí)它會(huì)讓你去按照某某格式輸入代碼但不解釋?zhuān)饶爿斎胪炅艘院螅湍芸吹叫Ч远@時(shí)系統(tǒng)再來(lái)給你解釋一下這行代碼的各個(gè)部分是什么扮饶，這么寫(xiě)會(huì)起到什么作用，教學(xué)效果非常好乍构。但系統(tǒng)在個(gè)別環(huán)節(jié)容錯(cuò)不高甜无，就算逐字逐句按照題目要求寫(xiě)了，還是可能提交失敗，好在有facebook的學(xué)員反饋討論頁(yè)面把這些部分都進(jìn)行了解釋岂丘。
·港科大的大作業(yè)——大約5小時(shí)
如果沒(méi)有g(shù)oogle的話(huà)陵究，可能要8-10小時(shí)。畢竟有不少知識(shí)點(diǎn)不熟悉奥帘，代碼寫(xiě)的也不多铜邮。“自以為知道怎么寫(xiě)”和實(shí)際編寫(xiě)完全兩回事。各種自己犯傻自找的坑（需求不看仔細(xì)寨蹋，元素拼寫(xiě)錯(cuò)誤松蒜，語(yǔ)法標(biāo)記不規(guī)范，尺寸計(jì)算不合規(guī)等等）已旧。
·另外秸苗，7.4號(hào)和7.5號(hào)跟進(jìn)李笑來(lái)的《人人都是工程師》用了大概6小時(shí)
這些時(shí)間主要用在了開(kāi)發(fā)環(huán)境的架設(shè)和博客的建立。其中nvm的安裝遇到了問(wèn)題运褪，比較折騰难述。在github建立repo時(shí)沒(méi)嚴(yán)格按照教程做，自作主張取了一個(gè)和github用戶(hù)名相似但不完全一樣的名字吐句，卡殼了近兩個(gè)小時(shí)p(′⌒｀?q)
《人人》里很多推薦的教程胁后，資料，工具還沒(méi)好好看和使用嗦枢。要知道這套教程極為濃縮攀芯，短小精悍。很多地方雖然只是一句話(huà)文虏，后面帶出的知識(shí)點(diǎn)卻是一整套教程或軟件侣诺。。氧秘。
借用JHU課程里老師用來(lái)解釋HTML文檔結(jié)構(gòu)的幻燈片來(lái)說(shuō)明的話(huà)年鸳，《人人》所包含的知識(shí)點(diǎn)就是這個(gè)樣子的。丸相。搔确。(?д?╬)
·還有，花在學(xué)習(xí)材料尋找的時(shí)間方面灭忠，不下10小時(shí)膳算。。弛作。
開(kāi)始時(shí)僅在coursera逛其它課程涕蜂，后來(lái)又去其它MOOC網(wǎng)站逛（udacity，Edx）映琳，再去Quora找他人學(xué)習(xí)經(jīng)驗(yàn)和心得机隙。還發(fā)現(xiàn)了一個(gè)比較奇葩的蜘拉，把各種免費(fèi)教學(xué)資源連接在一起形成系統(tǒng)課程的bento.io。后來(lái)有鹿，找到一個(gè)codecademy看上去不錯(cuò)旭旭，雖然收費(fèi)，但只是一個(gè)月19.99美元印颤，比那些一門(mén)課要上千美元的網(wǎng)站良心多了您机。雖然codecademy也有免費(fèi)課程穿肄，但高質(zhì)量的練習(xí)題和projects都只給收費(fèi)會(huì)員年局。想起尹航同學(xué)說(shuō)的，投資學(xué)習(xí)的錢(qián)不能省咸产，嗯矢否，買(mǎi)買(mǎi)買(mǎi)。
本周驚喜
驚喜還是來(lái)自交叉學(xué)習(xí)不同教程脑溢，比如港科大的本周作業(yè)僵朗，我是用JHU老師推薦的CodePen來(lái)完成的。CodePen是一個(gè)在線(xiàn)網(wǎng)頁(yè)編寫(xiě)練習(xí)網(wǎng)站屑彻。界面非常友好验庙，把HTML，CSS和JavaScript分成三欄社牲，底下則是網(wǎng)頁(yè)的即時(shí)呈現(xiàn)粪薛，這種界面對(duì)代碼檢驗(yàn)十分友好。
另一個(gè)驚喜就是在線(xiàn)教育GenerAlassemb旗下的一個(gè)學(xué)習(xí)網(wǎng)頁(yè)開(kāi)發(fā)的課件Dash搏恤，里面有幾套精心編寫(xiě)的互動(dòng)projects违寿，上文有提到，界面比FCC還友好很多熟空，強(qiáng)烈推薦新手拿來(lái)做練習(xí)藤巢。
另外，Codecademy也是新發(fā)現(xiàn)的不錯(cuò)的網(wǎng)站息罗。下面是來(lái)自這個(gè)網(wǎng)站的關(guān)于Full Stack的概念圖掂咒。這個(gè)網(wǎng)站有很齊全的網(wǎng)絡(luò)開(kāi)發(fā)的課程，期待它給我?guī)?lái)更多驚喜迈喉。
胡思亂想
對(duì)于新手來(lái)說(shuō)俏扩，出入陌生領(lǐng)域總會(huì)有很大的不適應(yīng)，很多圈內(nèi)人覺(jué)得極為平常的概念對(duì)菜鳥(niǎo)來(lái)說(shuō)卻是難以理解的弊添。借助不同的教程录淡，會(huì)比較容易找到一個(gè)適合自己理解的觀察角度。對(duì)于初步掌握的知識(shí)點(diǎn)油坝，通過(guò)不同教程來(lái)進(jìn)行第二輪嫉戚，第三輪復(fù)習(xí)刨裆，也能很高的鞏固。當(dāng)然彬檀，真正的鞏固肯定是要實(shí)踐去自己寫(xiě)代碼的帆啃。看過(guò)視頻和文檔教程后，感覺(jué)要用幾倍的時(shí)間去寫(xiě)程序才能比較好的掌握編程技能窍帝，至少不容易忘記努潘。通過(guò)刻意練習(xí)去發(fā)現(xiàn)自己理解錯(cuò)誤的知識(shí)點(diǎn)，去尋找高效且合理的書(shū)寫(xiě)規(guī)范坤学。
這個(gè)時(shí)候又有個(gè)問(wèn)題浮現(xiàn)了疯坤，我發(fā)現(xiàn)合適的訓(xùn)練材料（練習(xí)題）好像不夠多。神槍手是靠子彈喂出來(lái)的深浮，我需要多的子彈压怠。而且要找適合自己成長(zhǎng)各個(gè)階段的，不同型號(hào)的子彈飞苇【保“翠花，上子彈布卡！”(~￣▽?zhuān)?~▄︻┻┳═一
目前除了兩門(mén)MOOC課程里有限的題目雨让，就是W3School，F(xiàn)reeCodeCamp等網(wǎng)站里的知識(shí)點(diǎn)與練習(xí)題結(jié)合的教程忿等，但W3school和Dash里的內(nèi)容主要都是網(wǎng)頁(yè)開(kāi)發(fā)方面的栖忠，其它后端等方面內(nèi)容不多。FCC和codecademy比較全面这弧，希望在各個(gè)領(lǐng)域都?jí)蛭揖毶弦魂嚒?/p>
最后娃闲，不同教程之間也會(huì)有一些“有出入”的地方，但這正好是學(xué)習(xí)的好機(jī)會(huì)匾浪。比如關(guān)于HTML5文檔的開(kāi)頭部分皇帮，Dash的教程里如果輸入了的話(huà)系統(tǒng)會(huì)警告你要大寫(xiě)成。但是Coursera的港科大和JPU兩門(mén)HTML基礎(chǔ)課里都說(shuō)了大小寫(xiě)隨意蛋辈，JPU里有道多選題属拾，有個(gè)正確選項(xiàng)就是。這時(shí)再去W3Schools和維基百科查證一下冷溶，發(fā)現(xiàn)Dash的要求是高于官方規(guī)范的渐白，但它可以幫助我們養(yǎng)成一個(gè)規(guī)范寫(xiě)代碼的習(xí)慣，能有利于與其它工程師交流和協(xié)作逞频。
全棧開(kāi)發(fā)學(xué)習(xí)的原則和實(shí)施措施（07.13.16版纯衍，試運(yùn)行）
1.盡可能的看高質(zhì)量教程，練習(xí)高質(zhì)量的材料苗胀。
具體實(shí)施措施：
1）盡量只在英文世界里學(xué)習(xí)襟诸。在目前公認(rèn)的一些高質(zhì)量網(wǎng)站學(xué)習(xí)（這個(gè)“公認(rèn)”標(biāo)準(zhǔn)目前是參考Google瓦堵，Quora，Github歌亲，不知道是否靠譜）菇用，比如coursera，Github陷揪，W3Schools, FCC痘系，Codecademy等叉存。
2）中文方面目前僅保留李笑來(lái)的《人人都是工程師》和Xdite的博客践盼，以后也許會(huì)去一些中文社區(qū)如Ruby China找伙伴甚至mentor（Xdite有提到過(guò)線(xiàn)下meetup的重要性）遭垛。
2.盡量安排好學(xué)習(xí)時(shí)間妓局，在一個(gè)中長(zhǎng)期的時(shí)間段內(nèi)實(shí)現(xiàn)學(xué)習(xí)效果最大化循集。
具體實(shí)施措施：
1）陌生領(lǐng)域可以先看視頻/書(shū)面教程蔗怠，但至少留出2倍的時(shí)間做練習(xí)題厢拭。具體練習(xí)題時(shí)間有待摸索拴鸵。
2）新領(lǐng)域可以花一些時(shí)間去探索玷坠，但要控制好時(shí)間，盡量把優(yōu)質(zhì)精力的時(shí)間留給練習(xí)題劲藐，其次是首輪教程八堡，再次是復(fù)習(xí)輪教程。
3）提高時(shí)間利用質(zhì)量聘芜。比如用番茄計(jì)時(shí)軟件兄渺，實(shí)體沙漏幫助自己集中注意力。
3.調(diào)整作息汰现，提高精力挂谍。
具體實(shí)施措施：
1）調(diào)整減肥飲食，不再?lài)?yán)格戒糖瞎饲。適當(dāng)補(bǔ)充能量（紅棗口叙，干果，巧克力等每日控制在500大卡以?xún)?nèi)）嗅战。
2）晚上睡眠盡量在7小時(shí)以上妄田，不能少于6.5小時(shí)。中午進(jìn)行適度午睡驮捍。碎片時(shí)間抽空拉伸疟呐。每天繼續(xù)有氧鍛煉（甩繩為主），每周3－4次力量鍛煉东且。
今日推薦
這幾天启具，新生大學(xué)里不僅有同學(xué)交流編程，也有同學(xué)談起學(xué)英語(yǔ)珊泳。我推薦了一套“上輩子”幫助過(guò)我和身邊朋友的書(shū)鲁冯，張滿(mǎn)勝編寫(xiě)的語(yǔ)法書(shū)——《英語(yǔ)語(yǔ)法新思維》囤踩。這套書(shū)和大多數(shù)工具類(lèi)語(yǔ)法書(shū)有些不同，是從語(yǔ)法背后的思維角度來(lái)闡述語(yǔ)法的晓褪。雖然從每本書(shū)所引用的材料深淺不同堵漱，適合從中學(xué)到大學(xué)不同階段的人。但我遇到的很多考GRE涣仿，GMAT的人勤庐，也發(fā)現(xiàn)即使是第一冊(cè)（初級(jí)）也給他們展示了一個(gè)全新的語(yǔ)法學(xué)習(xí)角度，一個(gè)強(qiáng)調(diào)活學(xué)活用的角度好港。
這兩天很開(kāi)心地發(fā)現(xiàn)愉镰，這套書(shū)有三本續(xù)篇問(wèn)世了，馬上買(mǎi)了kindle版钧汹。果然還是保持了老版一致的風(fēng)格丈探，但更加細(xì)致了。有興趣的朋友隨便買(mǎi)新版還是老版拔莱，都會(huì)有收獲碗降，因?yàn)榫帉?xiě)思路一直是一致的。
說(shuō)到編寫(xiě)思路塘秦，這里摘錄一段新版序言的話(huà)給大家
在我看來(lái)讼渊，死記硬背的句子畢竟是有限的、易忘的尊剔，且不能靈活運(yùn)用爪幻。而按照英文的思維邏輯來(lái)構(gòu)造句子則是無(wú)限的、自由的须误。我是一個(gè)渴望自由的人挨稿，所以我愿意研究英語(yǔ)思維來(lái)自由地創(chuàng)造句子。我不想成為英語(yǔ)句子的奴隸京痢，去死記硬背它奶甘；我想駕馭英語(yǔ)，讓英語(yǔ)為我自由表達(dá)思想服務(wù)历造。
——張滿(mǎn)勝《英語(yǔ)語(yǔ)法新思維》（2015版）序言
