我參加了 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