<style>
.d-flex{display: flex;}
.flex-column{flex-direction: column;}
.j-c-b{justify-content: space-around;}
.w-49{width: 49%;}
</style>

###### tags: `網頁切版直播班 - 2021 夏季班` `心得牆`

# 網頁切版直播班 2021 夏 - 心得牆
* 記於2021/9/1

## 前言
最近常常想起教授在課堂上分享過的事情，「你們有許多學長姊在大學時期就非常斬釘截鐵地說，我畢業後絕對不會再寫程式，也不會找寫程式相關的工作，但最後還是當上了工程師」，聽完後我在心裡第一個冒出的想法就是「我也絕對不會再寫程式，且不會成為教授口中的學長姊」。

畢業後找工作時，刷著各大人力平台，看著各公司的招人標準，再看看自己的履歷表，發現自己完全沒有硬技能，迎來了重重的打擊，最後找了勉強與專案管理有相關的工作。
過程中也不斷地詢問有經驗的學長姊，以及背景相似從PM轉工程師的朋友的想法及心路歷程，最後才下定決心邊上班邊學習，踏上前端工程師的道路。

## 為什麼選擇六角學院？
在不斷地詢問有轉職經驗的朋友過後，知道了幾家有開程式課程的機構，最後經朋友推薦與看到了六角學院的官網及[文章](https://www.hexschool.com/qa/how-to.html)，發現六角對於前端的學習是有一系列完整的規劃，**對於不知道從何學習起及下一步該往哪走**的人來說有種安心感。

於是依照著六角給的課表購買了影音課程，按表操課學習下來，老師的教學上淺顯易懂，底下的留言問問題機制快速清楚，程式勇者村最終檢視課程學習狀況及評核表，即時了解自己不足的地方，影音課程的最終優點就是，很適合當作直播班的前哨站。

## 為什麼報名網頁切版直播班？
六角除了一般的影音課程外，「直播班」也是六角的特色之一，且直播班也是友人一推再推的課程，友人對於直播班的評價為「很虐很累，但努力跟完一定會有不少的收穫」。

當時覺得既然已經相信了六角的規劃，直播班這個地獄級修練的資源怎麼能錯過，在聽完說明會後更加確信要入坑網頁切版直播班，用八週的時間可以再次檢視影音課程的學習成效，也可以在短時間內看到較多的設計稿及真正上手實作練習，同時有幾百位同學一起學習、練習、提問，最重要的是因為它**專治「拖延症」**，兼職學習總會有不少誘惑，或是上班的時間分配上總是有藉口，所以網頁切版直播班真的可以說是修正壞習慣的良藥啊😂 於是毅然決然的給它報名下去！！

## 八週的學習過程及收穫

**Week 1 & 2**
現在回想起來第一週與第二週真的是小試身手，但在當下我的心情真的是既期待又怕受傷害呀。
幾個月的學習終於有個平台可以再次的練習，專業的課程、精美的設計稿、眾多的資源，種種都讓我非常的興奮，但在開始實作的過程中冗長的程式碼、惱人的bug，都讓人一肚子火…，過程中一直不斷在心裡默念「你不需要一開始就很厲害，但必須開始才有辦法很厲害」，每次想砸電腦時先把這句話在心裡默念三次。

而這兩週養成了：
* 「使用Emmet」，寫程式時的刻意練習。
* 「英打練習」，將英打的速度加快及錯誤率降低。
* 「如何閱讀設計稿」，先將設計稿拆分，事先想HTML元素及Class名稱(可以畫個簡易圖或是紀錄結構階級)，收集此設計稿要用到的工具(全部字體大小、顏色色號、推擠距離)，最後在開始寫程式。

<div class="d-flex flex-column j-c-b">
<div class="w-49">

:::spoiler [W1 作品展示](https://codepen.io/Gill-Chin/full/PomNaax)
:::

</div>
<div class="w-49">

:::spoiler [W2 作品展示](https://gill74123.github.io/week2/)
:::

</div>
</div>

<br>

**Week 3 & 4**
RWD、Gulp、Git、GitHub，1R3G的組合簡直讓人害怕，在上切版直播課前，最後一個完成的影音課程就是RWD的課程，當時也讓我一個頭兩個大呀，不過當老師宣布這個設計稿是要用兩週的，心裡突然有種放心的感覺哈😛
覺得這兩週的作業能完成想要特別感謝穎敏旻助教的直播，還有穎敏、焦糖助教非常有耐心且不嫌煩的回覆我的Slack私訊，讓人覺得被受關愛與溫暖。

Gulp、Git、GitHub也是在直播課程第一次接觸實作，為了把環境安裝起來一邊Google一邊翻書，就是為了能夠稍微的搞懂3G的差異性，而最讓我的震驚的是在安裝卡關的時候，老師直接直播線上一步一步地解決我的問題，將環境安裝到好，這資源讓我是又驚又喜，真的沒有環境裝不好而放棄的藉口啊~~ 在這兩週有種慢慢進入正軌的感覺。

第一次用SCSS來彙整雜亂無章的CSS，每次在寫CSS的時候，都覺的為甚麼同樣的階層要打那麼多次，不僅看了煩打起來也累，**「讓每個SCSS專心做好一件事情」**，使用了SCSS直接解決這個煩惱，也可有效率的管理所有的樣式，在觀看上及除bug時都一目了然，好用又方便。

這兩週的知識量太大，深怕一切知識從腦中一晃就消失，所以也慢慢的開始學習：
* 「寫筆記」，不管是老師上課內容、助教補充直播、安裝流程、各位大神寫code技巧，全部撰寫及貼到筆記上。
* 「大量看code」，在一二週的時候，怎麼高興怎麼寫，但時常都會有code過於冗長的狀況，並且有時會沒有耐心研究其他人的code。從第三第四週開始，慢慢找到幾位大神，仔細研究他們的寫法時，其實真的收穫非常多，每次都會恍然大悟的說「原來還可以這樣寫啊」，感到非常滿足。
* 「跟著自己的學習進度走」，有時看到各位大神的進度回頭檢視自己，會感到慌張失落，就會心中默念這句話，重新振作努力追趕著他們。
* 「一次寫好PC、Pad、Mobile」，將設計稿拆分，一個部分一起將三個斷點寫好，才不會全部寫好PC要寫Pad版時忘記之前的思路。
* 「網頁有 x 軸，會被釘在牆壁上」，寫RWD最要注意的就是不能有X軸啦~~ 直接標五顆星⭐⭐⭐⭐⭐

<div class="w-49">

:::spoiler [W3&4 作品展示](https://gill74123.github.io/week3/)

:::

</div>

<br>

**Week 5 & 6**
第五週後台表單設計，老師說相較於第四週強度較小，但對於第一次觸碰Bootstrap的我來說也是一大挑戰，光是研究BS5在搞什麼，就研究到很心煩，心想為什麼大家都說好用呢，我覺得一點都不！！！😂 不過看了Slack上大家討論的內容慢慢吸收及助教直播的補充與小提醒，思路有清楚了一些，還有BS5的元件可以簡單的做出動畫效果，整個網頁的質感提升，有種小小的成就感。

在第六週小魔王，24頁藝術展覽網頁，這週使用了更多的BS5的設定，像是第一次接觸格線系統，覺得是個RWD的小幫手，但還是搞不太清楚使用的時機與技巧，還有依照專案需求去修改內建的變數，覺得專案更加完善也有更多平常網頁上常見的畫面(例：購物車、結帳…)，但同時難度也提高了許多，而且設計稿只有PC版和手機版，Pad版要通靈啊~~~ 沒有設計天分的我又要苦惱了… 結果老師表示，業界常態，好吧只能硬著頭皮也要給他做下去了 哈。

第一次接觸後台介面及BS5，真的又愛又恨，讓我恍然大悟：
* 「Bootstrap 是從手機寫起」，之前在做RWD作品時都是依照PC→Pad→Mobile從解析度大到小設計，所以在這兩週設計斷點的時候一直鬼打牆，後來才發現，「啊！BS是從手機寫起啦！！！」才慢慢地開始反向思考，並有效的運用375、768、992，讓他們都美美的不會跑版。
* 「更熟悉表單元件的運用」，表單的設計蠻常在網頁介面中出現，小小的表單就有許多的種類及屬性，依照專案需求，能更有效的判斷使用時機。

<div class="d-flex flex-column j-c-b">
<div>

:::spoiler [W5 作品展示](https://gill74123.github.io/week5/)

:::

</div>
<div class="w-49">

:::spoiler [W6&7 作品展示](https://gill74123.github.io/week6/)

:::

</div>
</div>

<br>

**Week 7 & 8**
經歷過第六週的小魔王後，第七週是較簡單好玩的動畫效果-視差滾動，讓你幾乎不用使用到JavaScript就可以有簡單又有質感的小動畫，直接讓客戶在加3000 哈😂

第八週大魔王，30頁大型瑜珈網頁，這週算是將前面七週的課程整合做一個驗收的概念，其中加強了模組化的概念，如何將頁面切得更專業更好管理，告訴自己最後一週了一定不能鬆懈，努力完成才不枉費前七週的努力。

最後衝刺的大魔王，驗收成果的同時也要學習讓網站更好更有質感：
* 「熟悉BS5工具分類」，學習區分layout、page、utilities、component、container、grid，參考BS5官網，練習模組化的概念，朝著沒有layout、pagey資料夾為目標。

<div class="w-49">

:::spoiler [W8 作品展示](https://gill74123.github.io/week8/)

:::

</div>

## 整體的學習狀態檢視
**好棒棒的地方：**
* 每週五的直播課程一堂都沒有缺席
* 每週作業都是在死線前交的且幾乎完成到最高Level
* 每日任務都有完成
* 勇於在群組中提出問題
* 學會如何使用HackMD

**做了這些會更完美：**
* 會聚焦在小問題上，忽略了實質的產出
* 應該開課前先將Bootstrap影音課程完成
* 堅持小組討論
* 將筆記更有系統彙整起來

## 關於此次課程
**大大喜歡：**
* 「每日任務」，藉由每天一個簡單的小任務，達到每天學習的延續性，並且也有與每週的主線任務配合，去解答了許多困難的部分。
* 「助教直播」，每週的助教直播都會再加強當週的觀念以及技巧，會以當週的主線任務去做解析及解答，每次看助教直播都會發現原來有那麼多自己沒有注意到的地方，也是個讓你有信心可以完成任務的精神糧食。
* 「每日助教解答」，多提供了一個可以解惑的地方，也可讓人嚐試練習如何清楚描述問題的地方，也讓較害羞的同學有個可以提問的窗口。
* 「作業批改及多次繳交的設計」，訂正我覺得也是很重要的一環，藉由助教的批改回饋了解自己沒有注意到或是需要加強的細節，然後再次繳交修正的版本，我覺得是讓人成長的養分之一。
* 「莫名其妙多了好多資源」，第九週加碼的課程、Slack平台上的討論與大神的筆記，種種都是一開始沒有預想到的資源，過程中做最多的動作就是一直案Google Chrome右上角的星號加入書籤。
* 「六角宗旨 - 熱於分享的精神，秉持熱心、耐心、同理心為根基」，從認識六角到加入每個社團及平台，都是主打著這個宗旨，所以才會吸引有相同宗旨的人進入，不管是助教還是學生，我都能感受到樂於分享的氛圍，甚至還會有點驚訝，為什麼回答得那麼仔細豪不吝嗇。

**小小建議：**
* 希望助教直播可以錄製到同學詢問的問題或是上文字 & 上影片時間軸

**給想入坑的同學：**
* 「在直播班開課前先有HTML、CSS的基礎(若有先接觸過RWD及Bootstrap的基礎更好)」，雖然沒有基礎也會有10小時以上的影音課程資源，但如果有基礎就可以好好地把這八週的時間用在刀口上，往更上一層樓邁進，瘋狂地問爆平台。
* 「評量自已可以投入的時間」，在短時間可以達到業界的水平不是說說的，但是你要有足夠的時間可以投入配合直播班課程的規劃，並且分配時間寫作業，盡量跟上死線，才會值回票價。

## 結語
### **「沒有不可能，只有願不願意」**

當時是有計畫的要參加網頁切版直播課，但內心卻是還沒有準備好，內心有許多聲音，「我行不行」、「我跟得上嗎？」、「我有沒有時間」等等，多種聲音一直在腦中環繞。

加入後比起失落爆氣，帶給我更多的是滿滿的成就感及人與人的溫度，在打這篇心得文時，我說不出我到底這八週是否有所進步，但細細回想後發現，我知道了好多之前從未聽過的詞語，懂了好多之前不懂的事情。

在班級中都是跟你有相似目標的同學，雖然我們素未謀面，皆是透過電腦來交流，但我能感受到不少新手同學的熱誠與積極、有豐富經驗的同學無私的分享解惑。
這八週的課程讓我感受到在這中間所扮演的角色，並且讓我有動力試圖努力朝向好的人事物前進，感謝自己堅持下來了，也再次感謝所以參與課程的老師、助教及同學。

為了在職場上與你們相見，我會更加努力！！！