# 🏅第八週主線任務 - 分享體驗營上課心得

[TOC]

# 前言

在這個多災多難的 2020 年，外面的世界危機重重，這個漫長的暑假我還是乖乖待在家參加六角的體驗營吧！
(大誤)

# 自我介紹

先大概說一下我的經歷：
目前就讀學店的資訊傳播學系科技組，大二準備升大三。
系上分為科技組與設計組，大概就是資工+藝設，大方向是做遊戲、網頁、影視……等。
在大一大二時，有修過系上的網頁程式設計，包含 HTML、CSS、JS、PHP，所以參加體驗營時其實就已經有一些基礎了。

# 當初為什麼報名體驗營？

在決定要報名六角的體驗營之前，其實一直有看到體驗營的宣傳資訊，但沒有特別想要報名。直到朋友跑來問我要不要一起參加，我才決定參加六角的體驗營。
我報名的時間點是第二波，那時候剛好正開始期末地獄，有很多份期末專題要做，其中也有一份網頁專題，而六角的二階審核作業也是要按照設計稿寫網頁，當時每天醒來就是開始 coding，真的有點痛苦。XD
然後體驗營完全不用費用，真的很佛心！
不過另一方面其實也很擔心會不會跟系上教的內容重疊性太高，結論是一半一半吧。這課程內容的部分後面再詳細描述。

## 關於二階審核作業

六角有提供教學影片，並希望學生看完影片吸收足夠的知識量再開始做審核作業。但當時我碰上期末地獄，所以我先自首，影片其實看不到一半我就開始寫了。

出乎意料的是我其實大概一個晚上就解決了，之後我就專心地繼續期末地獄，等到期末地獄結束後才把影片補完。

不得不說，影片中有蠻多實用的小技巧跟知識，如果當時我看完才寫，花的時間應該會少更多。XD

# 第一週~第八週的學習過程

## 學習方式

六角的學習系統其實還蠻特別的，是基於 RPG 任務的概念去衍生的。
基本上以週為單位，每週會有以下內容：

* **每日簽到**：在週一到週五的早上九點到晚上九點，要用每日任務上的報到碼報到
* **每日任務**：練習每週上課內容的練習或是一些小技巧
* **每週主線任務**：根據六角提供的設計稿，綜合應用上課內容實作網頁
* **每週小組任務**：六角會幫忙分配組別，主要是讓組員們討論上課內容或是交流寫主線的技巧
* **每週一下午會有洧杰老師的直播課程**：直播課程也不用怕錯過，都會錄影之後放上影音課程的平台
* **影音課程**：根據進度，老師會提供錄影課程給學生們看

每個任務都有一定的積分，累積積分到 2400 分，就達到實習資格的門檻。這也讓我在報名時很心動，有得學又有得實習。

簽到的部分，平日的一到五都要簽到，簽到方式是輸入報到碼，而且這也會算積分。如果錯過早上九點到晚上九點的報名時間，就不能簽到了，也不能補簽。

印象中，我記得我應該漏簽了一天，真的很扼腕啊！QQ

上課時其實我也有跟朋友一起用 Notion 共筆筆記，主要是記錄一些重點觀念與小技巧。不做筆記其實也 ok ，也可以回去翻影片找。個人比較喜歡從筆記上找，翻影片太花時間了。

## 第一週

~~第一週基本上就是利用自己的老本加上老師上課的知識解決。~~

除了一些環境設定跟補充說明整個體驗營的流程，再來就是新的課程內容了！

本週課程主要是在講解推擠這件事，如何精確地按照設計稿給的大小去設定樣式。不過我自己在實際撰寫主線作業的時候，設計稿有些尺寸還是怪怪的，有時候 `padding` 的數字真的很醜，不確定算不算我的問題。XD

每日任務都不會太難，我在後面幾週的前幾天都預先做好一週份的每日任務，也可以先繳交以免忘記。

## 第二週

本週課程主要是在教如何利用 Flex 去做排版，老師提供了一些[助教寫的小工具](https://codepen.io/peiqun/pen/WYzzYX)，我覺得還蠻實用的。

六角自己也有做 [Flexbox 的說明文件](https://w3c.hexschool.com/flexbox/2186a786)，在第二週前我就有去翻來看看，不會很難懂。

另外就是六角的助教有做一個輔助學習用的 [Flex 小關卡](https://hexschool.github.io/flexbox-pirate/index.html#/)，這些小工具在學習上真的提供了不少幫助。

## 第三週

本週主題是響應式網頁 (aka RWD)，簡單來說就是在觀看網頁時，網頁會隨著螢幕大小，更動網頁的內容以及排版，提升網頁的使用者體驗。

另外也針對樣式設定的權重問題做了詳細的說明，例如使用 id 設定的樣式會覆蓋 class 所設定的樣式。

## 第四週

本週主題是 CSS 動畫，除了講解 `transform` 如何使用以及利用現成套件增加動畫之外，也教了如何利用 Jquery 去修改樣式。

Jquery 的部分，我有在學校課程學過了，對我來說並不困難，任務部分也不會用到太多。主要是教如何使用 `toggleClass` 更換樣式，以及展開手機版的下拉選單。而動畫因為我還沒學過，所以一知道有教這個還蠻開心的。XD

## 第五週

本週主題是介紹 layout 概念以及 SCSS。

Layout 算是一個很實用的概念，有點類似於模板的概念。先將多頁網頁相同的地方做好後，再去針對各個頁面做不同的地方。可以加速開發的流程，我覺得還蠻重要的。

SCSS 最主要就是要減少 CSS 的重工，以及增加他的可讀性。學會之後就覺得之前做專題瘋狂手刻 CSS 真的好累。

## 第六週

本週主要是在教如何使用 BS4 、了解格線系統，以及客製化 BS4。

之前在學校上課時，老師有帶過一些 BS4 components 的用法，並沒有教得很深入，再加上六角翻譯的 [BS4 文件](https://bootstrap.hexschool.com/)，~~順帶一提，老師上課也有提到六角翻譯的文件經由這週課程~~。

學習上並沒有遇到太大的困難，有的只是樣式不曉得要用哪個變數去覆蓋，或是覆蓋的權重不對蓋不過去的狀況。遇到這樣的問題，我查一查文件跟用開發者工具去看實際上套用了什麼設定，再去修改就解決了。

## 第七週

本週的主題一樣是 BS4，主要是挑了幾個元件與通用類別說明，另外就是放在 head 裡面的 meta data 跟不同 CSS Reset 的差異……等等的一些細節補充。

套一句老師說的來簡單了解 head 的重要性：
> 一個完整不會被吐槽的網頁，光看 head 就知道你夠不夠水準。
> [color=pink]

~~同時拿來嗆[朋友之前寫的網頁](https://typicaltalk.fm/)都沒寫(已經補了，順便工商)~~

## 第八週

本週主要是回顧第一週到第七週所教的課程內容，以及之後建議的精進方向。

# 最大的收獲是？

最大的收穫當然是學了這麼多東西，更加精進自己的技能啦！

~~尤其是學了 SCSS 讓我寫網頁的回憶不再痛苦。~~

也很開心好好的利用了這個暑假，~~又是一段每天張開眼睛就開始 coding 的精神時光屋~~，再來就是跟老師、助教的交流。雖然交流算不上很多，因為我比較習慣先自己找答案，真的解決不了才向老師、助教求助，當然也是因為很怕自己問蠢問題啦。QQ

真的很感謝老師跟助教願意回覆我的問題。

# 最喜歡體驗營的哪些活動？

個人還蠻喜歡回報任務的系統的，看著完課率逐漸上升也很有成就感。
另外，助教分享的內容我也覺得很實用，學到了不少小技巧。

# 如果時光能倒流，會希望自己再次注意哪些細節？

簽到！簽到！簽到！
~~因為很重要所以講三次~~
除了簽到之外，其他部分好像就還好。

# 覺得六角還可以改善的細節

在寫第七週主線時，翻了一些之前助教審核之後給的建議發現，偶爾在回報完任務或是審核通過的時候，任務對話欄的內容不會顯示之前回報的內容以及助教回覆的內容。應該不是網路部份的問題，我有問一起參加的朋友，他也有遇到這樣的狀況。

但除了回報內容看不到之外，下面這些細節其實影響並不大，可以看看就好(？)

個人覺得影音平台跟回報任務的平台可以做整合，然後放在 HackMD 上的任務資訊也可以放到回報任務系統上的任務資訊中，雖然不確定這樣做是不是有特別的原因就是了(？)

另外就是作業編號的部分，印象中是拿來看繳交順序跟 Slack 暱稱的。回報任務時，感覺後端可以多一個資料欄位自動紀錄繳交順序跟個人資料紀錄 Slack 暱稱。有時候都會忘記要先去試算表複製編號。XD

再來就是 Zoom 的部分，基於前陣子的新聞，不得不說當我看到要用 Zoom 上課有點小擔心。不過就我所知，目前除了 Zoom 之外，比較適合上課與錄影，應該是微軟的 teams ，但我不確定功能會不會受到付費限制，他也有內建錄影就是了。

# 身為第一屆的學長姐，分享些想入坑的新同學一些勉勵的話

請不要忘記去簽到，用 google calendar 每天提醒自己都好。QQ

就算沒有程式設計基礎也不用害怕，體驗營會從最基礎的部分開始教，雖然可能會比較辛苦，但老師跟助教都很樂意被問問題。而且老師、助教整個暑假也隨時都在，不用擔心老師、助教很忙(可能改作業會比較忙？)，可以放心問沒關係。

如果真的不會寫或是完全沒有想法，也可以參考其他學生的作業。老師還蠻鼓勵在自己不會寫的時候去參考其他人的做作業，但是請不要複製貼上，而是自己看懂之後再寫出來。如果被發現複製貼上，老師跟助教也會請你重寫任務。