原文于2016-07-13首發(fā)
港科大全棧開發(fā)課程的第一周大作業(yè)做好了，算是學(xué)習(xí)之路的第一步。一個很樸素的交友網(wǎng)站信息輸入頁面，我知道這個很難看，但立此存照一下，給未來的自己。
HTML和CSS學(xué)習(xí)的簡短回顧
HTML是網(wǎng)頁內(nèi)容載體，分為和兩塊。里面的meta info，如CSS定義了里主體部分的內(nèi)容（contemt），比如尺寸，字號，顏色，位置等等。高效率操作CSS的基礎(chǔ)之一就是對元素好好利用class分類。
不太恰當(dāng)?shù)念惐龋篐TML像名詞，CSS像形容詞，JS有點(diǎn)副詞甚至動詞的意思。
·對Coursera上兩個HTML課程的第一周課堂簡單總結(jié)
港科大老師教學(xué)比較嚴(yán)謹(jǐn)，重在對課堂內(nèi)容的梳理，中規(guī)中矩。習(xí)題少，但都針對課堂重點(diǎn)來練習(xí)。
港科大的大作業(yè)，HTML部分的重點(diǎn)在常用input的幾種應(yīng)用，CSS部分的考察重點(diǎn)在字體，顏色，尤其是圖像邊框和位置，比較實(shí)在。
Johns Hopkins University（JHU）的老師教學(xué)比較有活力，能用幻燈片更好地解釋基本概念，并穿插HTML的發(fā)展歷史。習(xí)題較多，集中在基本概念的梳理。推薦新手觀看，免費(fèi)的。（JHU課程的大作業(yè)在第二周才有，還沒做，不評論。）
·在線教學(xué)的幾個網(wǎng)站的小結(jié)
FreeCodeCamp是比較中規(guī)中矩的“教學(xué)＋練習(xí)”，對知識點(diǎn)的考察比較平均。
dash.generalassemb.ly的projects側(cè)重應(yīng)用層面。很生動，知識點(diǎn)相對少，但很切合實(shí)際需要（比如對手機(jī)端的頁面尺寸支持）。
＊上述兩個網(wǎng)站都是在一個頁面里同時進(jìn)行教學(xué)和習(xí)題訓(xùn)練
W3Schools的練習(xí)題都是對比較重要的知識點(diǎn)的復(fù)習(xí)，習(xí)題界面是新窗口進(jìn)行的，感覺不如上面兩個友好。但好處是保留了原始頁面豐富詳盡的知識點(diǎn)。W3Schools是目前遇到的網(wǎng)頁開發(fā)基礎(chǔ)知識方面最好的工具書類網(wǎng)站。
花費(fèi)時間回顧
·花在HTML和CSS的有效學(xué)習(xí)時間，自7.5開始到7.12大概用了大約30多個小時。
·港科大HTML教程week1學(xué)習(xí)－－大約6小時
接近視頻實(shí)際時間的三倍。是第一份視頻教程，也是第一份HTML的學(xué)習(xí)材料，時間多消耗在暫停記錄筆記，去w3schools和google查知識點(diǎn)。
·W3Schools學(xué)習(xí)和練習(xí)題——大約8－10小時。
是第一份文檔式教程，用了較多時間逐一瀏覽，記錄筆記，以及后來的練習(xí)題。
·JHU的HTML教程week1學(xué)習(xí)——大約3小時
比實(shí)際視頻時間多了40％-50%，主要用來記錄筆記。因?yàn)槭堑诙M視頻，有了基礎(chǔ)，所以比較快。
·FreeCodeCamp的HTML和CSS練習(xí)題——大約4小時
有了學(xué)習(xí)的基礎(chǔ)后，F(xiàn)CC的交互式學(xué)習(xí)對我來說更多是練習(xí)題，知識點(diǎn)部分快速瀏覽就過。除了注冊網(wǎng)站和簡單瀏覽，實(shí)際做題用了3.5小時，只有官方參考時間的70%
·dash.generalassemb.ly——大約4小時完成了兩個projects
這個是目前我最喜歡的網(wǎng)頁制作練習(xí)網(wǎng)站了，比FCC更友好和生動。舉個例子，有時它會讓你去按照某某格式輸入代碼但不解釋，等你輸入完了以后，就能看到效果，這時系統(tǒng)再來給你解釋一下這行代碼的各個部分是什么，這么寫會起到什么作用，教學(xué)效果非常好。但系統(tǒng)在個別環(huán)節(jié)容錯不高，就算逐字逐句按照題目要求寫了，還是可能提交失敗，好在有facebook的學(xué)員反饋討論頁面把這些部分都進(jìn)行了解釋。
·港科大的大作業(yè)——大約5小時
如果沒有g(shù)oogle的話，可能要8-10小時。畢竟有不少知識點(diǎn)不熟悉，代碼寫的也不多。“自以為知道怎么寫”和實(shí)際編寫完全兩回事。各種自己犯傻自找的坑（需求不看仔細(xì)，元素拼寫錯誤，語法標(biāo)記不規(guī)范，尺寸計算不合規(guī)等等）。
·另外，7.4號和7.5號跟進(jìn)李笑來的《人人都是工程師》用了大概6小時
這些時間主要用在了開發(fā)環(huán)境的架設(shè)和博客的建立。其中nvm的安裝遇到了問題，比較折騰。在github建立repo時沒嚴(yán)格按照教程做，自作主張取了一個和github用戶名相似但不完全一樣的名字，卡殼了近兩個小時p(′⌒｀?q)
《人人》里很多推薦的教程，資料，工具還沒好好看和使用。要知道這套教程極為濃縮，短小精悍。很多地方雖然只是一句話，后面帶出的知識點(diǎn)卻是一整套教程或軟件。。。
借用JHU課程里老師用來解釋HTML文檔結(jié)構(gòu)的幻燈片來說明的話，《人人》所包含的知識點(diǎn)就是這個樣子的。。。(?д?╬)
·還有，花在學(xué)習(xí)材料尋找的時間方面，不下10小時。。。
開始時僅在coursera逛其它課程，后來又去其它MOOC網(wǎng)站逛（udacity，Edx），再去Quora找他人學(xué)習(xí)經(jīng)驗(yàn)和心得。還發(fā)現(xiàn)了一個比較奇葩的，把各種免費(fèi)教學(xué)資源連接在一起形成系統(tǒng)課程的bento.io。后來，找到一個codecademy看上去不錯，雖然收費(fèi)，但只是一個月19.99美元，比那些一門課要上千美元的網(wǎng)站良心多了。雖然codecademy也有免費(fèi)課程，但高質(zhì)量的練習(xí)題和projects都只給收費(fèi)會員。想起尹航同學(xué)說的，投資學(xué)習(xí)的錢不能省，嗯，買買買。
本周驚喜
驚喜還是來自交叉學(xué)習(xí)不同教程，比如港科大的本周作業(yè)，我是用JHU老師推薦的CodePen來完成的。CodePen是一個在線網(wǎng)頁編寫練習(xí)網(wǎng)站。界面非常友好，把HTML，CSS和JavaScript分成三欄，底下則是網(wǎng)頁的即時呈現(xiàn)，這種界面對代碼檢驗(yàn)十分友好。
另一個驚喜就是在線教育GenerAlassemb旗下的一個學(xué)習(xí)網(wǎng)頁開發(fā)的課件Dash，里面有幾套精心編寫的互動projects，上文有提到，界面比FCC還友好很多，強(qiáng)烈推薦新手拿來做練習(xí)。
另外，Codecademy也是新發(fā)現(xiàn)的不錯的網(wǎng)站。下面是來自這個網(wǎng)站的關(guān)于Full Stack的概念圖。這個網(wǎng)站有很齊全的網(wǎng)絡(luò)開發(fā)的課程，期待它給我?guī)砀囿@喜。
胡思亂想
對于新手來說，出入陌生領(lǐng)域總會有很大的不適應(yīng)，很多圈內(nèi)人覺得極為平常的概念對菜鳥來說卻是難以理解的。借助不同的教程，會比較容易找到一個適合自己理解的觀察角度。對于初步掌握的知識點(diǎn)，通過不同教程來進(jìn)行第二輪，第三輪復(fù)習(xí)，也能很高的鞏固。當(dāng)然，真正的鞏固肯定是要實(shí)踐去自己寫代碼的。看過視頻和文檔教程后，感覺要用幾倍的時間去寫程序才能比較好的掌握編程技能，至少不容易忘記。通過刻意練習(xí)去發(fā)現(xiàn)自己理解錯誤的知識點(diǎn)，去尋找高效且合理的書寫規(guī)范。
這個時候又有個問題浮現(xiàn)了，我發(fā)現(xiàn)合適的訓(xùn)練材料（練習(xí)題）好像不夠多。神槍手是靠子彈喂出來的，我需要多的子彈。而且要找適合自己成長各個階段的，不同型號的子彈。“翠花，上子彈！”(~￣▽￣)~▄︻┻┳═一
目前除了兩門MOOC課程里有限的題目，就是W3School，F(xiàn)reeCodeCamp等網(wǎng)站里的知識點(diǎn)與練習(xí)題結(jié)合的教程，但W3school和Dash里的內(nèi)容主要都是網(wǎng)頁開發(fā)方面的，其它后端等方面內(nèi)容不多。FCC和codecademy比較全面，希望在各個領(lǐng)域都夠我練上一陣。
最后，不同教程之間也會有一些“有出入”的地方，但這正好是學(xué)習(xí)的好機(jī)會。比如關(guān)于HTML5文檔的開頭部分，Dash的教程里如果輸入了的話系統(tǒng)會警告你要大寫成。但是Coursera的港科大和JPU兩門HTML基礎(chǔ)課里都說了大小寫隨意，JPU里有道多選題，有個正確選項(xiàng)就是。這時再去W3Schools和維基百科查證一下，發(fā)現(xiàn)Dash的要求是高于官方規(guī)范的，但它可以幫助我們養(yǎng)成一個規(guī)范寫代碼的習(xí)慣，能有利于與其它工程師交流和協(xié)作。
全棧開發(fā)學(xué)習(xí)的原則和實(shí)施措施（07.13.16版，試運(yùn)行）
1.盡可能的看高質(zhì)量教程，練習(xí)高質(zhì)量的材料。
具體實(shí)施措施：
1）盡量只在英文世界里學(xué)習(xí)。在目前公認(rèn)的一些高質(zhì)量網(wǎng)站學(xué)習(xí)（這個“公認(rèn)”標(biāo)準(zhǔn)目前是參考Google，Quora，Github，不知道是否靠譜），比如coursera，Github，W3Schools, FCC，Codecademy等。
2）中文方面目前僅保留李笑來的《人人都是工程師》和Xdite的博客，以后也許會去一些中文社區(qū)如Ruby China找伙伴甚至mentor（Xdite有提到過線下meetup的重要性）。
2.盡量安排好學(xué)習(xí)時間，在一個中長期的時間段內(nèi)實(shí)現(xiàn)學(xué)習(xí)效果最大化。
具體實(shí)施措施：
1）陌生領(lǐng)域可以先看視頻/書面教程，但至少留出2倍的時間做練習(xí)題。具體練習(xí)題時間有待摸索。
2）新領(lǐng)域可以花一些時間去探索，但要控制好時間，盡量把優(yōu)質(zhì)精力的時間留給練習(xí)題，其次是首輪教程，再次是復(fù)習(xí)輪教程。
3）提高時間利用質(zhì)量。比如用番茄計時軟件，實(shí)體沙漏幫助自己集中注意力。
3.調(diào)整作息，提高精力。
具體實(shí)施措施：
1）調(diào)整減肥飲食，不再嚴(yán)格戒糖。適當(dāng)補(bǔ)充能量（紅棗，干果，巧克力等每日控制在500大卡以內(nèi)）。
2）晚上睡眠盡量在7小時以上，不能少于6.5小時。中午進(jìn)行適度午睡。碎片時間抽空拉伸。每天繼續(xù)有氧鍛煉（甩繩為主），每周3－4次力量鍛煉。
今日推薦
這幾天，新生大學(xué)里不僅有同學(xué)交流編程，也有同學(xué)談起學(xué)英語。我推薦了一套“上輩子”幫助過我和身邊朋友的書，張滿勝編寫的語法書——《英語語法新思維》。這套書和大多數(shù)工具類語法書有些不同，是從語法背后的思維角度來闡述語法的。雖然從每本書所引用的材料深淺不同，適合從中學(xué)到大學(xué)不同階段的人。但我遇到的很多考GRE，GMAT的人，也發(fā)現(xiàn)即使是第一冊（初級）也給他們展示了一個全新的語法學(xué)習(xí)角度，一個強(qiáng)調(diào)活學(xué)活用的角度。
這兩天很開心地發(fā)現(xiàn)，這套書有三本續(xù)篇問世了，馬上買了kindle版。果然還是保持了老版一致的風(fēng)格，但更加細(xì)致了。有興趣的朋友隨便買新版還是老版，都會有收獲，因?yàn)榫帉懰悸芬恢笔且恢碌摹?/p>
說到編寫思路，這里摘錄一段新版序言的話給大家
在我看來，死記硬背的句子畢竟是有限的、易忘的，且不能靈活運(yùn)用。而按照英文的思維邏輯來構(gòu)造句子則是無限的、自由的。我是一個渴望自由的人，所以我愿意研究英語思維來自由地創(chuàng)造句子。我不想成為英語句子的奴隸，去死記硬背它；我想駕馭英語，讓英語為我自由表達(dá)思想服務(wù)。
——張滿勝《英語語法新思維》（2015版）序言
