ALPHA Camp 學期一完食
ALPHA Camp 學期一總共三個禮拜，咻一下就結束了。上回我寫了篇心得，主要提及初加入兩個禮拜的學習進度、ALPHA Camp 特別的自家軟體和個人感想。若有興趣可點一下這篇：
最後衝次的第三週，到底做了什麼？
前兩週課程主要在快快樂樂的建立觀念、玩玩基礎 JavaScript、藉 JavaScript 寫迴圈來稍稍刺激腦袋邏輯，讓你懷疑人生懷疑智商…。第三週比過去兩週更加重實作。以完成一個小專案為主，從無到有做出履歷網頁，邊做邊學HTML 和 CSS 之間的搭配和運用。
這週主要目的是從無到有運用 HTML 和 CSS 完成一個網頁。對於一個程式新手，看起來像是高不可攀的任務。讓大家以一個專案為目標，課程內容使用影片加上文字步驟解說。對於一個從未寫過 HTML 和 CSS 的新手，需要在短時間內吸收未知領域，加上還要在有限時間完成專案作業，一邊想著想先開始寫作業，又擔心沒看完課程，作業不會寫，又怕不先瞭解作業輪廓，真的會來不及寫完作業，總之壓力還是不小。課程搭配實際操作影片和每個步驟文字詳細的解說，真正操作一遍，難易度和前兩週運算思維邏輯還要簡單，一步步使用 Codepen 帶領你寫一頁履歷網頁。瞬間多了好多東西要操作和學習，也有種要正式來囉！如此這般的緊張又興奮感。
切版 Layout
開始，切版分析HTML架構。終於瞭解大家常掛在口中的「切版」是什麼，原來就是將先設計好的圖檔，分析它的架構。只要掌握重點：從上到下、從大到小、從左到右。
心理自然而然會想著到底為什麼要做這件事？看起來好像沒什麼，為什麼切版好像是一件很了不得的技能？不時在公司應徵項目或個人履歷中，都會看到要會切版。就帶著滿腹好奇疑問繼續跟下去學。
HTML 標籤、放置 icon 、圖片
依照切版的區塊，開始一行行的寫 HTML 標籤，建立出整個設計圖放到網路頁面上的架構。我也一步步跟著影片照做。其實照做不難，學習最大障礙是 — 小筆電分配兩個作業畫面，分配畫面後課程影片比例更小，既要看到影片程式碼，又要看到我寫的程式碼…這完全是在測視力啊！整個操作過程，就在「停止影片畫面 → 放大到全螢幕 → 倒退一點進度 → 播放到有問題的部份 → 暫停 → 瞪大眼看清那行字是寫什麼 → 暫停 → 縮小畫面 → 回到 Codepen → 快趁忘記前照做…」這樣反反覆覆。我也嘗試過先用全螢幕看過一次影片，看完影片再自己做一次。但大腦記憶退化嚴重，實在記不了幾行，根本完敗。難怪寫程式的人桌上常擺著兩台大螢幕，我也好需要兩台大螢幕啊…（錢包在哭泣）。
碰到課程中提到 HTML 是個 Markup 語法，讓我直接聯想到跟 Markdown 語法差在哪？之前硬背的 Markdown 語法，會對學習 HTML 有幫助嗎？
我額外查找兩者關係，並做一點小整理：
1. Markdown 是屬於 Markup 的一種
2. Markup 為標記，Markdown 為輕量標記
（所謂輕量就是比較簡單好寫吧！)3. Markdown 不能做所有 HTML 能做的事，但兩者都屬於 Markup 的一種
學習 HTML 的過程中，對很多標籤用意都是懵懵懂懂，硬背硬瞭解，像是在學英文，不用煩惱邏輯思維。
做作業時，問題還是一一出現在腦中：
格式問題
因為先學 JavaScript，課程裡還特別強調寫作的方式要按照固定格式，比較好閱讀。
- HTML 有寫法的格式嗎？什麼時候要換行或空格呢？
- 在 h1 與 /h1 間，中間文字不管加入多少空格，預覽網頁還是只有一個空格，這是為什麼？
- CSS class 命名都是用 “-” 去連結兩個英文字，像是 “job-experience”。需要與 JavaScript 用 camel case 寫法 “jobExperience” 或是 underscore case 的寫法 “job_experience” 來統一嗎？
- 為什麼有時候 0 px 會加 px，而有時候不用？
語義問題
HTML 好多新單字要瞭解，直接實作沒有太多時間去分析各個語義的意思，腦袋一直問題只有更多。總之就是一些名詞上的定義、能不能省略、能不能換名之類的問號。
- <div> 和 <section> 差在哪？
- <nav> 是什麼？ 如果沒有 navigation bar 可以省略 <nav> 區塊嗎？
- 同理，<header> 也可以省略嗎？<main> 可以省略或換另一個名字嗎？
- class 的命名可以隨意取嗎？
- <span> 和 <p> 差在哪？
不過課程裡也一再提醒著：
千萬別勉強自己一一熟記這些新來的語法。在 HTML 與 CSS 的學習上，你的重點只要擺在「瞭解它們的使用方式」就好。
CSS 排版與樣式
對應寫好的 HTML 架構，根據各個層級，將想要的字型、排版對齊模式、Hover 與 Link 特效等，使用 CSS 語法一一寫入。原來 CSS 是這樣用，居然是去對照 HTML 各個標籤，一行行一個個去寫出該標籤的規則條件。想到以前在畫設計圖時，想要來點創意，隨意來個特殊色或圖片遮罩或行距，畫得時候容易，只是調整一下軟體介面中的數值。原來寫進網頁卻是另一回事，要想辦法找出 HTML 的標籤，再想辦法用 CSS 寫入一行程式亂碼。開始望向窗外，不敢想像若再加入 JavaScript，這程式碼會有多麼複雜，我還能看懂嗎？
一連串的 CSS 影片一樣的小螢幕學習法學完後，就直接要將專案作業完成。學習過程沒有什麼太大的問題，跟著做都順順利利地做得出來。但寫作業還是花了我五、六個小時…。最難的是排列對齊方向，有個想嘗試的樣式做不出來只好放棄，還有花太多時間玩 CSS 特效…。
第一項作業，題目提供文字內容，可依照先前跟著步驟做出來的履歷格式去替換內容，或客製化改變樣式或結構都可以。
第二項作業是做出與設計圖相同的網頁名片，排版需相同，可增加一些特效。主要是學習如何切版和寫出架構。
以下是我做的成品：
另外還做了一份挑戰：嘗試將一個頁面加入不同 CSS 屬性和特效。
我做了這些嘗試：
1. Social Media 圖示跳波浪舞
2. 滑鼠移到照片 Avatar 時，照片顏色變淡及光圈環繞
3. Iron Man 字加上連續陰影，增加立體感
4. 滑鼠移到 Contact Me 時，有陰影出現；移到 My Gallery 時，背景顏色漸變及文字變色
結尾
學期一就這樣結束了，還做了難度頗高的期末考（做了三個多小時）和閱讀一堆進階的 CSS Flexbox 排版、元素排列 block vs. inline 文章，試著去理解內容又找了其它相關的補充資料。最後也強迫自己面對寫寫學習回顧（很不想回顧這些痛苦回憶？）以及撰寫部落格整理這週所學。
這週學習助教們依舊盡心盡力審閱所有作業及解釋我的疑惑，還特別關心我回顧中點到這週較挫折的地方：「主要在卡在 CSS 進階用法，有種要在似懂非懂情況下直接去寫作業，雖然最後作業和期中考都在時間內完成，就是在過程中處於有時間又不熟的壓力下比較慌張。」在往後的學習路上，說不定又碰到類似問題，應當不定時回來看看助教的回覆。
最開心是有同學特別來我的作業區中留言鼓勵。讓我在原本正痛苦的趕作業博鬥時，獲得正面能量，像是有人正看著你為你加油…可能有點誇張了，但那當下的感受，對我來說真的是像在沙漠中看到綠洲一樣。
「學期制」一結束，雖然實際上也沒有什麼畢業典禮或儀式，課程內容仍反覆再看，結束只表示沒有助教再幫你回覆問題。可我卻依舊像是大考結束般把書往後丟了，即便心中的天使不斷細聲叨念著：「要再多練習啊！免得生疏啦！還有好多補充教材趁現在好好看啊！」嘴巴也說著要練習啊！不然三個禮拜的努力都白廢啦！要改變學習態度啊！而魔鬼卻在一旁說著：「你已經辛苦三個禮拜啦！回到不懂程式的麻瓜生活吧！是不是想回到當時未知的美好啊！」
蛻變了嗎？
還沒到想像中的「蝴蝶展翅」。但我很肯定：
- 我瞭解寫程式要變成電腦思考
- 我會寫 JavaScript 變數、迴圈、函數
- 我更瞭解 HTML、 CSS 之間密不可分的關係
- 我會改變網頁樣式、會增加特效、能看得懂和運用 DevTools 除錯
- 在學習過程要再加強多練習寫程式和寫文章，做好半工半讀中的時間管理，設立停損點，不要太鑽研在目前不重要的事
- 這三週我不斷突破很多舒適圈，不斷衝刺闖關！
學期一算是順利破關了，一個禮拜後緊接著又要面臨新的學期更難的挑戰，就看是天使會贏還是魔鬼會贏吧！
