我參加了 2023 六角學院的網頁設計體驗營，想要體驗自己對前端編程的興趣，並且探索轉職的可能性。在其他自學網路文章看到，公開筆記和記錄心得也是一種學習方式，但公開筆記真的很有壓力，所以我決定記錄下體驗營觀察到的個人體悟與學習歷程，同時作為分享，也是給自己的筆記。
來源：六角學院 2023 軟體工程師體驗營
https://www.hexschool.com/2023/02/16/2023-02-16-2023-software-engineer-camp/
▌我的狀態
- 看過幾堂 AMOS 的 金魚都能懂網頁設計入門，只有輸入沒有輸出。即使有做筆記，但沒有練習的狀態下，學習過的知識很快就忘了。
- 一直都有保持學習和閱讀文章的習慣，看資料和整理對我來說並不困難。
- 身為自由工作者，比較好安排個人時間是學習優勢。
▌報名原因
- 當初是上過全套前端課的朋友推薦給我的（網址連結），對方也說可以的話最好還是報名直播課。所以我打算給自己一個月的時間，體驗自己對寫 code 是否排斥。心底也是在尋找轉職可能性，但即使到最後發現自己很痛苦，也還是獲得了修改 個人作品集網站 程式碼的技能，作品集網站修改就當作我此次的短期目標吧！
- AI 話題正熱門，課程內容有整合 OpenAI，做自己的工具。
▌學習過程 & 心得
- 開課前一周：
真的有點小緊張，因為我發現之前學 AMOS 課程的記憶很模糊，如果我跟不上體驗營進度怎麼辦？幸好六角有提前開放影音課程觀看權限，在開學典禮中也有提到開課前，須要先具備的學習進度。我照著校長的指示學習完畢，還超前了幾個章節。
這一周的自學感覺很好，一方面先前 AMOS 課程的記憶殘留讓我能快速進入狀況，另一方面也是因為以下幾個六角對課程設計的優點：
．將課程切成好幾個章節小段落，在選單列就能看到每段影片的時間秒數，我能確認這段時間不會被外界打擾，為自己設下專注時間。
．小節作業真是太棒了，寫作業讓我確定自己有學會課程中的知識，助教的批改也很細心，給我很多額外建議。
■ 對自己的觀察：
雖然上述提到課程規劃很好，但在長達約 2 小時的開學典禮直播時，我也發現自己是個上直播課會不斷分心的人。
．我會不斷想看旁邊留言欄裡的發言，不想錯過同學提出我想不到的延伸問題。
．直播有超時可能，但我無法預測總時間，，我平常就是不太看直播的人，無法確認時間容易使我感到疲憊。
．承上，直播已經超時，校長的閒聊小故事會讓我焦躁。
- 第一堂直播課：打造最強前端開發環境、OpenAI 服務介紹
．如果有按照校長在開學典禮中說的先上課到一定進度，在第一堂直播課應該是能駕輕就熟。
．因為有些內容在影音課中就已經知道，所以看側邊留言欄吸收新知，對我來說相對沒有開學典禮這麼干擾。
．第一堂課還是超時了，幸好有保留錄影，所以我到時間就關掉啦~~隔天再回來補剩下進度，找到讓自己舒服的方式很重要。
．很開心得知每天都有任務可以做，如果只有上課真的不知道自己對內容有什麼認知錯誤和疏漏。
- 第一堂課之後：
■ 每日任務：我每天都很期待每日任務，而且在六角社群 Discord 發問和替別人解答也都是很好的學習與樂趣。我覺得校長與助教的耐心，維持了六角很良好的互助氣氛，不用怕問了笨問題。
■ 六角對學員的照顧，我收到了一封 email 及時雨：
第一堂課後約 3 天，我剛好學完了基礎 html 和 css，連續做了好幾天每日任務，內容好像都差不多，好像有點停滯，再加上新學習 jQuery 讓我不免疲憊。就是這麼剛好，我收到來自六角的 email：「體驗營-開營三天，分享學習路線攻略給你」，內容是給不同學習進度學員的建議事項。這真的是強心針，我也開始在心裡默默佩服六角在課堂設計的經驗與用心。我也將信件封存下來，這其實對於品牌行銷、企劃、客戶服務都會是很好的筆記素材。
■ 生活習慣改變：
．為了更有效運用時間，我調整了日常作息。比平常更早一小時起床，限定每次休息時間，嚴格自律無意義滑社群（這真的很有效）
．我開始運動了，同時我也很慶幸自己前陣子買了工學椅。
．以我正在打這篇心得的時間，目前新生活已經維持了快一周，雖然好像有點勞碌命傾向，但我覺得充實的很剛好，希望繼續保持。
▌我的筆記方式
多半是使用 Notion，支援嵌入 網頁、codepen 等程式學習上常用的資源，即使不支持嵌入也可以以網址連結代替。
■ 大總表：
因為前端程式有很多種程式語法，所以我的第一層是總表，總表中替每個語言工具再做一個總表。
■ 程式表
．每種語言工具各自的總表以表格呈現，大概分為：名稱、分類、說明、延伸資料。
．分類目前是以我自己懂就好的方式，將來應該是會再根據我的學習進度，做更精準更改的。
．延伸則是可以置入我已經製作成 notion page 的連結按鈕。
．文字可以右鍵 mark as code，做灰底紅字標示。
■ 嵌入 codepen 可以直接在 notion 裡執行，很方便
▌其他學習資源：
- iThome 鐵人賽，謝謝大大們
- MDN Web Docs
- AMOS blog
- 卡斯伯 blog
▌試著問問 chatGPT
有時候等不及社群上的人解答，所以我會問 chatGPT 程式碼。但我沒有付費，所以只能用 GPT 3.5 詢問，有時候會得到很掉漆的回答，但有時它卻是基礎知識的好老師。免費 GPT 的最大壞處大概就是健忘，大約 2~3 個對話後就會忘記我原本的提問了，所以我必須學會拆解問題，逐步提問。
我嘗試過兩種問法，可能我還太菜，或是因為使用中文提問，無法明顯感受兩者差別：
「你現在是一個 Clean Code 專家，我有以下的程式碼，請用更乾淨簡潔的方式改寫，讓我的同事們可以更容易維護程式碼。另外，也解釋為什麼你要這樣重構，讓我能把重構的方式的說明加到 Pull Request 當中。以下是我的程式碼」──來自 ChatGPT 指令大全 https://www.explainthis.io/zh-hant/chatgpt
「請你扮演一個資深軟體工程師，我是一個剛學會 html 和 css 的學生。請你以提升使用者體驗為最重要前提，幫我優化我的程式碼。請你先從 html 第 1~24 行，和 css 第 1~43 行的內容，分別給我 html 和 css 的優化。這個案例中沒有 h1，也沒有 head 與 nav，所以不需要給我這些修改建議。以下是我的程式碼」
有時還是能得到好答案，有標註就是貼心。
但一段段複製程式碼真的很痛苦，所以我先問能否讀取 codepen 中的程式碼，chatGPT 回答可以，我改用 codepen 逐行提問，但始終得到顯而易見的錯誤答案。來回修改了 3 次提問 prompt，我直接問它：「請直接告訴我，我在第 5 行寫了什麼程式碼？」它再次答錯，我才知道自己被騙了。
▌第一周總結
第一周對我來說是修練學習習慣、體驗對上課方式適應性，以及建立入門自信心的一周。第二周大概能寫些小組討論的心得了。
本文章將同時於 Matters、方格子 刊載。
Ann Chou 喜愛電影和威士忌，既是藝術家，也是行政愛好者。以自己架設的品牌營運系統，紀錄每次發行作品的企劃案與過程，掌握經驗與隨時提取的感覺很好。
藝術合作委託可電郵聯絡 bunnyteeth.annchou@gmail.com
