有練有推 ! 六角切版直播班[心得]

Photo by Annie Spratt on Unsplash

前天結束了「六角學院-網頁切版直播班」第八週的課程，很榮幸能成為第一屆的學生。回首這兩個月，發現這或許是我轉職學習之路當中，最充實的兩個月，因此決定好好記錄一下這趟旅程。

當初為什麼報名這堂課？

先說說我的程度及背景吧 :

• 非本科系畢業
• 2019年9月決定踏上前端轉職之路，開始全職轉職的學習生活
• 2020年3月報名時的程度為，已上過六角的「使用 HTML、CSS 開發一個網站」、「一變應萬變的響應式網頁設計」、「精通 Bootstrap 4-開發超強不解釋」、「使用 jQuery 打造互動性網頁動畫效果」等前端基礎課程，並開始投入 JavaScript 入門與核心的學習。

雖然在網頁前端領域已有一些基礎，但仍對切版感到非常陌生，實戰經驗也不足，想想這是一個複習、精進的好機會，於是果斷按下報名👆。

天時、地利、人和 !?

也就是因為在這個時間點報名了切版直播班，讓我腦中原本一塊一塊的網頁切版大宇宙碎片，慢慢拼湊成一個更完整的地圖了 !

也有許多同學是第一次接觸前端、切版，參加了這個課程才開始學習寫程式的，相信他們一定也收穫滿滿，但學習、吸收的過程，以及會遇到的困難點可能需要參考他們的心得了。(很想知道經過這8週，他們都還好嗎?😂如果是我應該會很崩潰)

這裡我想針對我的狀況，也就是有一點前端基礎，再上了網頁切版直播班這個狀況來做分享，我只能說，這堂課對我來說真是天時、地利、人和啊~💫推薦給和我程度相當的同學，不要猶豫了，真心推 !👍 (但學習上需投入的時間很長是真的~😵)

直播課程 vs 一般線上課程

此直播課程對我來說，優勢在於以下3 點 :

1. 互動性高
   在每周五的直播課程進行當下，有問題可直接在即時對話中提出，通常老師都會瀏覽對話區，即時回答同學的問題。老師也常利用選擇題的互動方式，了解同學們的學習狀況、進行調查，而不只是單向的教學。
2. 直播時間固定，形成一個 Routine
   線上課程雖沒有時間限制，但需要自己規劃課程學習進度。雖然自由，偶爾總會想小小偷懶一下😆，通常後果都不堪設想，學習進度便會開始追趕得很辛苦。
   雖然直播課程一樣有錄影，但除非不得已，否則不會去放棄能夠與老師、同學們線上互動、交流的大好機會 ! 因此便會依照每周設計好的主題做學習。(依個人喜歡的學習方式有所不同，有些同學可能依然偏好看錄影教學，影片速度還可以調快節省時間呢~)
3. 與老師、同學交流，增加學習動力
   每周五的課程直播時間，除了吸收新知識，更是我補充學習動力的來源，這也是為什麼我會堅持這8週的直播課程都準時報到了。除了在課堂上的交流，因為此課程是有分組別的，線上課程加上群組、組員之間的互動與交流，對我來說大大增加了學習動力!

課程最大特色及上點 (?)

產品要有賣點，電影要有看點，課程也要有上點才吸引人? (國文很差🤣)

以下整理我覺得此課程很棒的地方 ，並依序做詳細介紹 。

1. 依學員背景分組
2. 一週一個版型作業 (針對每周主題)
3. 作業批改快速，並給予改善建議
4. slack 群組交流熱絡
5. 讓 200 位學員當你的老師

1. 依學員背景分組

「一個人走得快，一群人走得遠」是老師將同學分組的初衷。

一開始報名時，會依照學員的背景分為以下職業 :

• 全職鬥士組 (全職轉職苦主如我)
• 轉職忍者組 (在職想轉職的忍者們)
• 設計魔劍組 (設計師想進階成為前端設計師)
• 斜槓練金組 (94斜槓槓起來!)
• 軟工盾坦組 (以前做過程式工作，或工程師想精進切版技術)
• 學生劍士組 (上進的在學學子們)

看了這些職業名稱，不難想像，我們需要不斷解任務，完成這趟網頁切版大冒險，並幹掉一隻長得有點可愛、三不五時會出來放話嗆我們的BOSS (🥊 ?)。

也因為這樣的分組形式，加上每週除了個人版型作業外，還會有小組討論任務，讓學員們得以和背景相當的組員們交流，而不是一人孤軍奮戰，埋頭學習，這點對我來說，在學習上相當有幫助 !

老師也會定期公布職業排名，增加 " 組別間對立 " 及 " 戰職業 "的機會，才不是呢~以上情形都沒有發生，大家都和平共處，一起成長啦😄😆。

2. 一週一個版型作業 (針對每周主題)

最好的學習方法便是理論搭配實作了，課程每周皆會釋出一個版型作業，讓學員們可以透過實作加深學習印象，並找到還不了解的問題點，進一步深入學習每周主題。

本屆前兩周的作業都還能如期完成。第三週開始的版型，我就不多說了，直接讓大家體會什麼叫我標題所說的「有練有推 !」🤣。

老師的想法是，與其在就業後被困難版型折磨，不如在課程中就讓你直接遇到+練到，在進入職場後才會比較順利啦 !

( 望向第八週版型，老師對作業的 UI 版型設計師說:「難死他們!」這句話仍在耳邊迴盪... )

3. 作業批改快速，並給予改善建議

老師承諾，學員的作業最慢會在 7 天內批改完成，並回覆學員批改後建議。而我的經驗是，每次繳交作業後，不超過 3天， 甚至有時當天就能得到回覆(依據學員繳交狀況)，相當快速。

而我的習慣是，在做作業途中也會做筆記，包括記下自己開發時遇到的困難點，並在作業繳交時一併詢問老師或助教，是否有更好的解決方案。神奇的是，有些問題在我發問的過程，便能找到答案! 因為歸納出問題點同時，也是再一次嘗試釐清相同觀念。

而我這個問題寶寶也在第五週作業繳交後，被老師蓋章認可 — 問題真的多🤣🤣

4. slack 群組交流熱絡

在網頁切版直播班 Slack 群組上發問，不只老師、助教會回應，還有所有學員會幫忙回覆，因此一個問題提出，通常不到一天時間就能獲得幫助。

自己的問題也可能是其他學員的問題，因此老師非常鼓勵發問，也因為這樣，時常瀏覽同學的問與答，讓我藉此補充了許多觀念 !

5. 讓 200 位學員當你的老師

最好的補充教材除了 Slack 群組上的問與答，還有同學們的作業程式碼 ! 即便不是每位同學都順利繳交每週作業，一個版型仍然至少會有好幾十份，依據每個人的程度、開發習慣不同，總能找到與自己程度差異不會太大的程式碼，較好理解的情況下，也有較多的機會去學習他人開發上的優點。(寫得好的作業，老師、助教會在後面用⭐標記)

回顧這八周的成長及收穫

第 一週

• 熟悉 emmet 及 vsCode 快捷鍵，開發速度明顯提升 !
• 複習一直很陌生的 偽元素 觀念，並且能夠在作業上實際運用 。
• 第一週作業版型，以「1px也不差」為目標，訓練對排版間距的敏銳度。
• 學會使用 GitHub Desktop 上傳每周作業至 GitHub 網頁，產生GitHub Pages。

第二週

• 徜徉於 Flexbox 小宇宙，並學習更深入的 flex-grow、flex-basis、flex-shrink 觀念。
• 學習避免直接針對 html 標籤給予樣式，改為給予一個 class 名稱，再對其設定樣式。
• 盡量減少<div>使用，可使用<ul>、<li>，或具語意的標籤代替。

第三週

• 了解程式碼權重的觀念
• 響應式斷點使用
• container 的觀念
• 第一次學習 :last-child 的使用

第四週

• 聽懂了一直學不會的 SCSS 和 gulp 基本運用，並使用在作業開發上 !

第五週

• Bootstrap 大宇宙 !
• 了解後台版型

第六週

• 理解格線系統觀念
• 使用 SCSS + Bootstrap 開發
• SCSS 檔案拆分越來越有概念
• 學習修改 Bootstrap 變數，以達到客製化主題效果，並用在第五周作業上。(回想起去年甜點電商學不會、做不出來，直接自暴自棄的自己🤣)

第七週

• CSS3 Animation 基礎
• animate.css 套件用法
• AOS 套件用法

第八週

• 統整前七週觀念
• 找到更好的 SCSS 檔案拆分方式，以及命名方式。
• 學習拋棄語意化 class 命名，朝向以「元件式開發」為目標 !

「不怕沒資源，只怕你不學 !」

只要同學提出問題，老師都會盡量補充，學得你不要不要的~

也因為這樣，這堂課的主要課程內容，加上補充資源，真的多到爆炸，真的足夠再打磨個一、兩年啊~「誰也別想從我手中搶走 HackMD 課程協作手冊!(抓緊緊)」

「什麼都不要管，只要專注在變強就行了 !」

當有人用 200% 的力氣想讓你變強，真的要不想學都難~

感謝六角切版直播班給我的養分，也感謝老師這兩個月來的用心，以及辛苦的助教們、後勤組同學、我的強者組員們🙏。感覺上是參加了一個很棒的「線上營隊」呢😄~但這趟旅程還沒結束，想到達更遠的地方還是得靠自己。

不說了，我要繼續去切第6週版型了😵⚔️(苦苦追趕)

祝福下一屆的同學們，學習順利，練功愉快 !👾