2021 六角學院活動資源及收穫
去年因為家裡一些事情，忙到今年年後才重新回來學程式。幸運的是，正好遇上六角學院一系列的免費公開活動。活動結束之後，整理了這些活動的資源以及收穫作為回顧。
活動依序為：
- 5/25~6/30： 程式體驗營
- 7/14~8/04： Vue 3 夏令營
- 7/26~9/10： 六角筆記王
- 7/26~9/10： JavaScript 特訓
先奉上這些公開活動的課程文件：
知道 Bootstrap 5 活動的時候已經接近活動尾聲，所以留存了資源但沒參與，放上來讓想學習的人也能一起參考。而程式體驗營則是因為課程資源都放在六角的教學平台上，所以只能截個圖給大家看一下：
由於這些活動都是過去式了，就不提怎麼參加這些活動。以下將按活動時間先後，依序說明這些活動的：
- 活動緣由 (為什麼六角舉辦這個活動)
- 適合對象 (什麼條件或情況的人適合參與)
- 提供資源 (有哪些資源你可以使用)
- 活動過程 (活動期間我們做了些什麼)
- 我的收穫 (我學到什麼、獲得什麼、有什麼心得)
▎程式體驗營
活動緣由
這個 30 天的程式體驗營，由來是這樣的：(活動說明)
2021/5/18 ，台灣發佈單日 180 例本土疫情時，我一直在思考是否能為大家盡點心力，左思右想後，還是專注在教育上，決定將自己的企業資源，全數提供給需要的人。 ─ 六角學院的共同創辦人，洧杰校長
因為疫情而感到焦慮、想做點什麼，因此舉辦了這麼佛心的免費活動。
適合對象
- 因疫情影響丟了工作，想尋求更好機會。
- 工作好幾年，但程式能力一直不上不下。
- 自學網頁前端一陣子，不確定是否達到就業水平，想讓人幫忙檢視程式碼。
提供資源
- 課程：50 小時總計超過 350 部的前端影音課程
- 助教：30 位線上程式助教，一行行批改您的程式碼作業，確保達到就業水準
- 社群：30 天線上討論群組問答服務，講師與助教也同時會加入，幫助學習不卡關
- 作品：5 份作業，提供多頁 UI 設計稿，並授權做為面試作品
- 直播：5 場直播教學，6 月的每週三晚上，由六角校長洧杰老師親自授課
活動過程
加入成功後，就能進入專屬 Slack 群組看公告、提問與討論，也獲得進入教學平台觀看影音課程的權限。
影音課程共約 50 小時，HTML 和 CSS 佔一半，JavaScript 佔另一半。伴隨著課程影音，會安排小節作業以及切版任務讓我們實作。
小節作業原本是校長一個人改，後來發現大家太踴躍、太熱情，所以招募了不少志工學長姐協助批改，盡可能讓每一位交作業的同學都能得到回饋。
相較於小節作業，切版任務所需要的知識量跟技巧就比較多、批改起來也會更加辛苦 (很多同學是 0 基礎的)，因此安排六角的助教團而非志工學長姐們來進行批改。
每週校長也會開一場直播，直接寫 code 切版給大家看，或者分享撰寫切版任務的一些眉角。
雖然影音所佔的比例各半，但細看會發現這次的活動著重在切版部分 (HTML 、CSS)，包括作業跟直播的內容都是以切版為主。
我的收穫
當初會參加這場活動，一方面是好奇六角的課程是怎樣的，另一方面則是想要鞏固基礎、補足知識，也希望能藉由檢視程式碼來改進自己不足的地方。
這場活動雖然是免費的，但六角釋出的資源豐富，志工和助教們也都很用心批閱程式碼，給予同學們許多回饋跟指導。除了看助教給我的回饋之外，我也會去看看其他同學的寫法、助教提供給他們的建議，從中學到不少技巧與細節。
以上是我提交的體驗營心得。除此之外，我在 Sass 的使用上也學到了：
- 拓展變數的使用思維，例如也可用於斷點、容器寬度、字體大小、字重。
- 像是間距、字體大小，可以先建立一個基本值，然後使用基本值乘以倍數得到所需的值。
- 自行研究了 Sass 的資料結構
list跟map。知道如何將以上的變數使用map寫法管理，再搭配@each迭代，快速產生一系列 class。 - 使用 Sass 7+1 結構管理程式碼。
另外，為了挑戰自我，也研究了 Pug 的文件嵌入等語法，結合 Sass 跟 OOCSS 體現在切版任務中的「香水電商」。
雖然課程資源都放在教學平台，不過我整理了體驗營筆記，大家可以加減看看：
- 「進度確認」包含了所有與此活動相關的筆記連結。
- 「資源總覽」則彙整活動相關教學資源。
- 「技巧檢核」整理了我在活動中學到，或覺得重要的一些技巧。
這些筆記原本只是寫給自己看的，有些筆記寫得比較隨意，也還沒有整理好，因此未來我可能會再調整。
▎Vue 3 新手夏令營
活動緣由
隨著 Vue 3 的改版，六角也規劃了相關課程，但覺得遠水救不了近火，所以舉辦了這場 Vue 3 夏令營： (活動說明)
現在前端所需技能越來越深，而三大框架雖然資源豐富，但對於新手來說卻也不知道如何入門，因此我們舉辦「Vue 3 新手夏令營」，讓更多的前端同好可以認識這門框架～
適合對象
- 對於 JavaScript 有基礎掌握度
- 對於 Vue 2 或其它框架有基本認識，想學習 Vue 3 的開發者
- 想從基礎學習 Vue 3 的開發者
提供資源
課前建議學習知識，以及每週一場 Vue 直播課程：
- 第一堂：7/14 Vue 起手式
- 第二堂：7/21 Vue 與指令
- 第三堂：7/28 Options API
- 第四堂：8/04 Composition API
這些直播都有錄影上傳到 YouTube 播放清單 以供觀看。
活動過程
這次開始，社群的使用從 Slack 轉移到 Discord，避免 Slack 洗訊息而難以回溯資訊。
直播開始之前，官方提供的 課程文件 就釋出 課前建議學習知識 幫我們強化本次活動所需的知識點。
課前也先偷跑「每日任務」，帶大家每天學習及運用相關知識或技巧。
每週直播會講述一個 Vue 的重要觀念。從怎麼設定環境、建立 Vue 實體，有哪些指令、要怎麼使用，到介紹 Vue 的 methods 、 computed 等 Options API，以及 Vue 3 的 Composition API 是什麼、怎麼從 Options API 轉換為 Composition API。
直播前老師會先釋出主線筆記給大家預習，讓大家可以了解這次的直播要講述什麼、幫大家提早進入狀況。直播後也會發布作業，希望大家能在看完後實際運用所學，試著完成作業。
考慮到同學們程度不一，作業分為三個等級：
- LV1：透過課程版型完成範例
- LV2：使用 AJAX 取得遠端資料，或將資料儲存於 LocalStorage
- LV3：在 LV2 的基礎之上自創版型完成挑戰
Vue 3 夏令營 繳交的作業 並沒有助教批改服務，但老師跟助教還是會挑每份作業前幾位繳交的同學給予回饋，讓其他同學能參考。這也是六角的活動中很棒的一點，可以看到很多同學面臨同樣的題目會如何撰寫、你想不出來的地方別人會怎麼解決。
不管是前面的程式體驗營，還是這次的 Vue 3 夏令營，都不會去強制要求同學做什麼，包含觀看課程、參與每日任務、繳交作業，全都是自發性參與。
為了鼓勵大家積極參與，六角在這兩個活動釋出不少誘因。像是體驗營的積分總和在結算時間截止之前破萬，影音課程加碼延長一個月的觀看時間，直播中也抽出有交作業的同學送 Kuro 大神的書。
而夏令營為了鼓勵參與直播，參與三次直播並完成報到者可抽獎；為了鼓勵繳交作業，作業三跟四的繳交數量合計達 200 份，加碼直播 Firebase + Vue 開發即時聊天室，真的是十分用心，連提供的獎勵都在試圖讓你成長。
我的收穫
參與這個活動的目的也是為了溫故知新：
- 複習 Vue 2 的指令跟 Options API。
- 知道 Vue 2 和 Vue 3 建立實體的寫法差異。
- 知道 Vue 3 的 Composition API 有什麼特點、如何使用。
- 怎麼從 Options API 轉為 Composition API。
我同樣也寫了 Vue 3 夏令營筆記。不過因為這個活動不像體驗營有那麼多的教學影片，所以我就沒做進度確認頁面了，從側邊欄就能看到所有活動相關筆記。本次筆記主要紀錄直播內容，以及我完成計算機、待辦清單等作業的過程與想法。
▎六角筆記王
活動緣由
校長說他時常被問筆記怎麼寫、用什麼平台比較好，所以索性辦了個活動，以後有人問就把這個活動丟出來 XD：(活動說明)
提供對前端開發有興趣的朋友一個發光發熱的舞台，鼓勵大家運用刻意寫作技巧，記錄學習開發日常，用文字寫出你的前端硬實力。
適合對象
「任何」想要用寫作加速工程師職涯的朋友：
- 沒有寫筆記習慣，想要趁機養成習慣
- 原本就有在寫筆記，想要加速累積作品
- 想要藉由此次活動，開啟程式學習
提供資源
助教在活動期間，每天（平日）會分享一個寫作的小技巧，並附上練習題，透過每天5到10分鐘的時間，讓你淺移默化變成撰寫技術文章的高手！
每日任務主題會囊括：
- 寫作架構教學
- 寫作素材搜集
- 如何養成寫作習慣
- 寫作的目標設定
- 利用技術寫作打造個人品牌
- 如何靠寫作累積職涯作品集
活動過程
這個活動分兩個部分：「筆記王比賽」以及「每日任務」的寫作技巧分享。
- 「筆記王比賽」
規定一律使用 HackMD 的書本模式繳交，並且要在活動截止之前累積五篇以上筆記。由於比賽已經結束了，所以參賽細節就不贅述。
主要看點在於可以觀摩、收藏其他同學的筆記。同樣是寫前端相關筆記，但大家接觸到的資源、學到的知識、理解的方式，還有筆記的思維等都不盡相同。這次活動也相當於提供一個平台，讓大家可以放上自己的筆記，互相參觀、互相學習。
2. 「每日任務」
每日任務的寫作技巧分享則是這個活動的亮點，不但循序漸進教大家怎麼寫出優質的技術文章，還教大家怎麼打造個人品牌，讓更多人看見自己。
一開始，先問問大家為什麼要技術寫作、引導大家思考寫作關鍵字、透過關鍵字發散思考，以及除了技術還能寫什麼。當然，也少不了教導如何建立 HackMD 書本模式。
再來是蒐集筆記的靈感、訂定並規畫目標，以及拆解寫作流程等。然後試著建立自己的寫作小習慣，思考不願意寫作、半途而廢的原因，自己可以怎麼努力、解決這些阻礙。
接著就是比較硬的部分了，包含寫作大綱、閱讀情境、範例解說，以及資料出處等。還有文章的優化，例如：列點說明、標題分段、文字樣式等應用。這些寫作技巧都是為了淬煉我們掌握技術寫作的核心 ─ 「解決讀者問題」。
而個人品牌部分，則帶我們思考自己要建立什麼樣的品牌人設，讓自己專注在特定領域，避免寫作主題過於分散。試著站在讀者的角度思考自己不喜歡看到什麼樣的文章、希望文章帶給自己什麼，能接受什麼樣的文字風格等。
此外，也再次告誡大家要互相尊重，註明資料出處、注意資料引用比例。並分享大家容易陷入的個人品牌迷思、怎麼邀請讀者互動等。
與其說是每日任務，不如說是每日教學，內容十分豐富扎實。認真吸收學習的話，將近兩個月的時間下來，必然能改變、提升自己對於技術寫作以及個人品牌的認知。
我的收穫
- 學習寫作技巧
Vivian 助教的每日任務教學，真的讓我受益良多。除了學到像 CTA 、注意力寫作這類之前沒接觸過的觀念，也讓我去反思自己的文章、筆記可以怎麼更好。
依照教學主題，我將每日任務的內容分別整理成兩篇筆記：
這兩篇筆記算是重點摘要。可以的話，建議搭配助教每日任務中所寫的文章，裡面的情境跟分析能引導你更加深入理解這些概念。底下同學們的回報也很有參考價值，這些討論與分享錯過可惜。
2. 觀摩別人的筆記
除了每日任務之外，活動進行沒多久，校長也加碼開了一場直播，主題是 「HackMD 撰寫技術筆記教學」，分享 HackMD 一些使用技巧，並從發表筆記的同學中挑幾個出來分析、表揚其優點。
當初因為體驗營的課程太多，還有數個作業跟任務，為了追蹤自己完成哪些部分而整理的進度表，在這次直播中被提出來表揚，覺得榮幸！很多同學的筆記也很棒，有些讓人一眼驚艷，有些則是一點一點持續進步、持續成長，都花費了不少心思在這上面。除了樣式排版之外，筆記的內容也值得一看。
3. 參加 「JS 百題斬」
我參加這場活動，除了想看看別人的筆記、學習寫作技巧之外，還有一個原因 ─ 參加獎 「JS 百題斬」。
深知自己抽獎運不好，且前兩次活動的抽獎都槓龜的我，看了看獎項之後決定志在「參加」，期待拿到門票和大家一起線上寫 100 題 JavaScript 。(當然有得獎更好，不過佛系看待)。
沒想到在筆記王的活動最後，因為持之以恆參加每日任務、提供不同面向的想法，錄取「勤學不懈獎」，又在 JS 百題斬直播中抽到贈書。幸福來得太突然，但我還是穩穩接著了 XD
筆記王算是六角學院目前舉辦的活動當中，看起來跟前端較無直接關係的吧。但細想會發現，這裡學到的東西更能深遠影響你，不管是養成良好的筆記習慣，還是建立值得信賴的個人品牌，都是身處任何領域皆實用的技巧。
▎JavaScript 特訓 (JS 特訓)
活動緣由
公開活動，可以藉此觀看自己的 JS 知識量是否足夠：(活動說明)
配合新課 「JavaScript 必修篇 — 前端修練全攻略」，舉行 JS 每日任務修煉活動，展開為期二個月的 JS 特訓。
適合對象
- 參加六角學院新課 「JavaScript 必修篇 — 前端修練全攻略」的學員。
- 沒買課，但想練習 JavaScript、檢視自己 JavaScript 知識量的同學。
提供資源
每天早上九點，會在 Discord 「JS 影音-公開頻道」分享每日任務題目。
活動過程
助教在每日任務的說明中，會將當日任務使用到的 JavaScript 觀念跟用法以淺顯的方式說明給大家複習，並附上範例供大家理解。解題過程也有逐步提示，幫助剛入門的同學建構解題思路跟邏輯。
JS 特訓就是單純自行練習每日任務而已，沒有額外的直播、教學資源什麼的。依照慣例也不會進行批改，但能看看其他同學的寫法也是一種學習。如果有購買六角課程，不妨搭配課程進度進行觀看。
我的收穫
透過每日任務複習 JavaScript 的觀念、維持手感跟語感。
最後兩週的每日任務各有相關的主題，且都是具有參考價值的資料、畫面處理方式，因此我將這兩週的內容分別整理成專題：
版面都是使用六角學院提供的範例，JavaScript 程式碼的部分，大方向是跟著助教給的提示撰寫，但我會融入自己的一些習慣跟寫法。例如 addEventListener 中的 callback function ，我會另外獨立出來。
▎總結
怎麼使用這些資源
如果你正好在尋找一些前端學習資源，或者想知道六角學院的活動到底都在做些什麼，可以看看這些文件：
- 網頁切版：不嫌棄的話，我的 體驗營筆記 或許能提供一點幫助。
- Bootstrap 5：2021 Bootstrap 5 新手實戰營
- JavaScript：2021 JavaScript 特訓
- Vue 3 ：2021 Vue 3 新手夏令營
- 筆記方式：2021 六角筆記王
我得先聲明一點，因為我之前就有一些基礎，再加上原本筆記只是打算自己看而已，所以體驗營筆記我並沒有寫得很詳細。有概念的部分我基本上就是條列重點搭配一些範例。像是網路請求、計算機概論等我比較不熟的才會寫得比較詳細。所以如果是程式 0 基礎的新手，請另外找更詳細的教學吧，不要讓我禍害你~
如果已經有些底子的人，看完程式體驗營的筆記，後面的 Bootstrap 5 和 JavaScript 的每日任務就可以試著去寫了。
因為體驗營中 Bootstrap 的影片就是來自於 Bootstrap 5 新手實戰營，而一些基礎觀念也會在體驗營前面的 HTML 和 CSS 帶到，等於是一石二鳥。但建議最好還是照著 Bootstrap 5 的每日任務跑一遍，不要覺得看完課程影音或筆記就夠了。因為每日任務裡面除了一步步幫你打底，裡面也藏了不少實用的觀念跟技巧喔。
至於 JavaScript 特訓，每日任務所用到的知識，也幾乎都囊括在體驗營的 JavaScript 影音課程中了，所以如果已經學會這些 JavaScript 知識技巧，再去吸收助教用心寫的觀念解說，大部分的每日任務就能寫得出來。剩下的那些不懂、卡關的地方，就去看看助教提供的範例解答、其他同學的寫法，來幫助自己通關。
Vue 的話，我個人覺得有些 JavaScript 基礎再來，寫 Vue 的時候會比較知道自己在幹嘛，當然如果想提前感受 Vue 也是沒問題的。如果可以同一個專案或功能，用 Vue 以及 JavaScript 兩種方式撰寫，更能感受到兩者的差異，就像 Vue 的作業 4 改寫作業 3 那樣，能分辨出 Composition API 和 Options API 的不同並懂得如何運用。
筆記跟個人品牌就看個人需求了，但學成自己的一套不會虧就是了。我一直都有在寫筆記，透過長時間的摸索才慢慢調整出自己在 HackMD 上的筆記方式，但這個活動直接就把你想得到的、想不到的都列出來了，讓我覺得相見恨晚，但同時也慶幸自己沒有錯過，因為成長總是讓人愉悅的。
▎後記
前幾天還有 「Figma 設計體驗營」：
由六角的吳俊儀設計師主持，介紹像是 Auto Layout 等核心功能，讓大家能夠初步了解 Figma 能做到的事情，並且能做出自介小卡和同學們互相交流。
最近六角學院也在為下一波活動鋪路了 ─「The F2E 3rd」：
這次的活動使用 運輸資料流通服務平台 (TDX) 的交通 API 來開發應用，三週主題為：觀光、自行車、公車。這兩週六角學院也都在 YouTube 上開直播，目前已經介紹了 API 是什麼，以及 TDX API 如何使用等。
期待這次的活動能看到很多好看又實用的設計稿，也期待自己能將這些設計稿做成好用的網頁。最後再次感謝六角學院，舉辦這麼多有意義的活動。
2021/10/26 更新
FB 滑著滑著看到眼熟的段落？？？ 截圖留念一下，感謝六角跟校長推薦分享。看到最後一句話想偷懶都不行了 😂
嗨~ 感謝您讀到這裡！ 不知道您看完後有什麼收穫？
若是對內容有疑慮或內容有誤，歡迎在底下留言告知，我會盡速處理。
也歡迎分享您的心得或收穫，或者其他相關資訊給我，大家互相交流。
聯絡我：develop60160@gmail.com如果想看更多文章，點擊以下連結可以看到我的文章清單：
* 所有文章清單
如果您喜歡這篇文章，或覺得這篇文章有幫到您，想給我一些支持，可以這麼做：
1. 拍拍手(1~50下) 給我一些鼓勵。
2. 透過 街口支付 (帳號：901119539) 請我喝杯咖啡！更新記錄
2021/10/26 新增： 六角轉分享文章截圖
2021/10/04 新增： 「Figma 設計體驗營」、「The F2E 3rd」 宣傳圖
