這是我記錄自學程式,Alpha Camp 學期一的W3。
回顧:
上週的課程提到基礎HTML/CSS以及DevTools,為理解寫網頁前端打下基礎。而這週的課程重點有兩個:
- 以「履歷切版」專案實際走過一遍切版流程
- 課程結束後,有個學期一的期末考,作為學習驗收
履歷切版
在開始說明履歷切版前,不得不說Alpha Camp的課程設計真的很新手友善。
在HTML/CSS開始的課程前,準備了一個讓學員們心態轉換的章節。避免學員掉入「求甚解」的追究坑裡,一不小心就花太多時間。
因為接下來的課程HTML/CSS較偏重先實作出東西,先了解有某個語法,可以後面透過多練習再深入理解,避免當下陷進去。與先前JavaScript的較偏重邏輯思考有著較大的差異。
以世界觀解釋JavaScript與HTML/CSS的差異
我很喜歡課程中用世界觀的比喻來解釋:
- JavaScript:
在課程中,造物主把難度分為簡單/中等/困難,我們一開始都只會碰到簡單的關卡,碰到及所需的資訊量都不會太多,可以完整解完關卡。並隨著等級提高所需資訊量才會逐步提高。 - HTML/CSS:
一開始就是個完整的開放世界,新手可以隨意亂跑、自由探索,一不小心就會跑去高等區,所以新手時期先在能力範圍裡打怪就好。有些語法即使不知其所以然,但不管先拿來用,等升級之後,能力提升了(隨著更多的練習),自然就會看懂了。
學習切版
學習切版的章節設計,按部就班的說明了:
- 本次專案「履歷頁面」所需觀念
- HTML/CSS,結構及語法詳細說明
- 如何引用外部資源
- 綜合練習
- 更深入的CSS觀念
本次專案「履歷頁面」所需觀念
對本次專案裡HTML/CSS的從結構、語法、功能及需要引用的外部資源,條理的以影片+圖文的方式,學員可以自己自由選擇學習的方式:只看影片、只看圖文或者兩者互相搭配。課程細節就不破梗,有興趣的朋友,可以參考Alpha Camp學期一。
另外特別想提,儘管前面有轉換心態的章節提醒:「先了解有這個語法,可以後面透過多練習再深入理解。」
但個性使然,我一開始還是在單一章節花太多時間想搞清楚每個步驟。於是我調整的由一部影片先從頭看完後再回想如何實作,改成:「將影片拆成幾個段落,每完成一個段落,趁記憶還在時跟著做,最後再透過教材文字複習」,否則學習時間拉太長,挫折感增加,陷入太多語法想搞清楚的陷阱裡。
綜合練習
前面老師講完課,綜合練習就是給學員的實作驗收。
並且還在實作的章節,偷偷塞了一個遇到問題時候的小錦囊:
- 先確認問題,聚焦還是發散
- 聚焦問題: 已遇到實際問題,有想法要達成什麼目標(想讓文字置中),Google 關鍵字尋找解法
- 發散問題: 暫時沒有新的想法,需要尋求靈感,Website Template 觀摩他人作品
- 共同解法:使用DevTools,查看或測試程式碼是不是自己要的功能。
課程的練習作品:履歷頁面
更深入的CSS觀念
針對課程中約略提到的排版概念:inline、block以及flex再次深入講解。
覺得這樣的設計也很棒,若在課程中提太多,主題(做出履歷)容易失焦。因此放到綜合練習做出成品後,再用來補充說明。
flex也是在近年(2015)開始讓網頁前端爆炸性成長的一項功能。
我的簡易筆記如下:
因為flex的排版方式多了:flex-direction、flex-wrap、justify-content、align-items……,讓計算前端的尺寸時不再是一道數學題。否則以往排版都只能inline、block或inline-block,非常花時間。
學期一期末考:技術重點複習
期末考上面的預計課程時間是四小時,本來是想預想可以利用昨天一天的下午時間完成作答,期末考總共分成三題:
- 切版,切出一個導覽列
- 邏輯題:驗證三角形
- 進階邏輯題:驗證等腰三角形
前兩題,切版用了半個小時完成、驗證三角形則花了我一個小時。心想就算是進階,還有兩個半小時,應該也夠我解吧?沒想到…事情完全不如預期。
題目是這樣的:「列出3邊之和20以內的所有等腰三角形(不包含正三角形)」,並已有提示需要使用雙重迴圈來解題。
於是我開始拆解解題的方式,並列出、排除了可能的方法,但最後一直卡在不曉得如何下雙重迴圈的條件,就是這個卡…我從下午一路卡,卡到晚上吃完晚餐還在卡。卡到懷疑自己的智商…,我的心理歷程是這樣的:
- 先不要Google好了,又是期末考跟邏輯題,想先靠自己解出
- 不行了,真的沒辦法,我需要求救,來Google看看要怎麼辦…
- Google不到答案,找不到類似的問題…(這時又更加對人生感到懷疑…)
- 答案往往發生在想不到的地方,將一開始被我排除的方式拿去Youtube上搜尋,終於找到相近的說明,最後再花了約半個小時才終於把解法寫出…
從這個經歷再次了解:解決問題時,下對關鍵字的重要性…
雖然過程前半段很痛苦,但最後開始寫出解法的部分,擊敗大魔王的感覺,真的很痛快!