【ALPHA Camp 學期 2-1 學習心得】

劉祐華 YouHuaLiu
9 min readJan 5, 2021
學期二的課表,目前我剛完成第一階段。

新的開始總是讓人充滿期待

不知不覺已經在 ALPHA Camp 學習兩個月了,好像還能記得當初下定決心的自己,除了抱著純粹的好奇心與求知欲,也抱著對職涯不同可能的想像,整體而言,目前的學習體驗是很愉快的,很難想像自己在兩個月內學習了如此多的東西,雖然距離實際做出網路產品還有一段距離,但好像目標和終點已經漸漸不再那麼模糊了,今天的心得想要分享我在第二學期階段一各週課程的學習與反思,我會用時間軸切成四個禮拜,並且同時分享技巧的學習與心態的轉變。

第一週 — 認真去認識 JS 這個語言的故事

這週的課程把之前學期一介紹過的 JS 再重新介紹一次,同時開始學習函式、陣列、物件與基本的字串處理技巧,並且在第一週結束時會產出一個「週年慶摸彩活動」的系統,能夠分配給所有參加者他們的抽獎號碼,並且隨機抽出獲獎的參加者,然後印出經過隱私處理的得獎名單。

學習過程中,我覺得重新瞭解 JS 是很有幫助的,萬萬沒有想到 JS 當初被設計出來時,僅僅只花費了十天的時間,也因為一連串的意外讓這個語言逐漸成為主流的語言之一,瞭解這些歷史,感覺就好像是在認識新朋友的時候,會去進一步了解他的過去與個性,雖然這段學習體驗比較偏向聽聽故事,但也能進一步先在心裡打一些預防針,瞭解這個語言有哪些操作上的地雷需要注意,瞭解以後開發或看網路上的文件時,可能需要先觀察這份文件的時代背景,才能進一步觀察他們使用的語法是不是已經過時。

物件與函式由於過去在其他語言學習過基本的概念,對我來說是相對好吸收的,所以我花費更多時間在觀摩其他同學繳交的程式碼還有 AC 自己提供的 Model Answer,一開始的幾個作業,雖然能夠成功跑出成果,但是在觀摩後發現自己的程式碼離 Model Answer 與其他同學的程式碼相比,還有很大的改進空間,包含自己還不習慣能夠在一個函式中直接呼叫另一個函式,讓主程式碼可以更簡潔,讓程式碼的功能能夠彼此串接在一起,覺得這個是自己需要持續注意並改進的地方。

第二週 — 神奇的 Bootstrap, RWD 還有 Grid 排版系統

第二週對我而言是最困難的一週,這週的作業也有一兩個是壓線繳交的,先來說說 Bootstrap,Bootstrap 可以幫助開發者加速網頁的製作,有許多已經寫好的 HTML 與 CSS 樣式,而 AC 則是利用大量的小作業,讓我們熟悉查找 Bootstrap 文件語法並快速運用的能力,但是對我來說是比較困難的,在這週的作業中,有時會發生我將物件直接引入,但是沒有注意它語法上的細節,忘記更改成適合的 class 名稱與 id 名稱,導致資料輸入時無法呈現到畫面中。

我覺得這禮拜更體會到的是翻閱文件的耐心,我因為沒有耐心了解 bootstrap 物件中對於各個屬性的描述,因此在直接引入物件時發現到困難,但只要花更久時間了解引入的東西到底是什麼原理,而不是只是盲目的使用,就可以避免這次問題的發生。

RWD 則是現代很重要的網頁設計概念,過去查詢說明時對這個概念往往一知半解,但我在這週成功的透過程式碼與瀏覽器執行、互動的方式,瞭解在寫程式碼的時候需要注意哪些順序與細節,才能真正達到「行動優先」的原則,同時這個階段由於會練習同份 HTML 在不同尺寸的螢幕中需要套用不同份的 CSS 樣式,以及學習「相對單位」讓整個畫面能夠適應不同大小的螢幕,這些學習起來雖然繁瑣,但知道原則後也能透過一次次的小練習漸漸養成習慣。

Grid 則是與 Flex 同時屬於現代網頁排版非常重要的工具,課程中也有這個排版系統發展的歷史與基本的語法訓練,化繁為簡的學習路徑可以很快讓你上手這個工具,只是還有許多細節的語法,可能需要透過以後更大的專案,才能真正稱得上精熟這個排版系統。

這一週是很大的挑戰,七天內要把上面提到的這幾個概念都融會貫通,同時完成數十份小作業,這週的內容在學習完有非常大的成就感。

第三週 — 網頁終於能動起來的 DOM 與事件驅動設計

這週算是一個很大的里程碑,還記得當初在跟工程師同事提到自己目前正在學習前端語言時,他就提到說進入 DOM 就是真正考驗邏輯的開始,也因此當我一知道這週會開始接觸相關概念時,就非常期待、同時也報著忐忑的心情。

這週的實作是電影清單的新增、修改與籃球比賽動態數據表的設計,而在這週我印象最深的概念有兩個,第一個是透過 JS 來動態產生資料,第一次發現可以把 HTML 的語法用 template literals 直接寫在 JS 的部分,讓程式可以動態產生 HTML,過去以為 HTML 內容全部都要先編寫好,現在才發現密密麻麻且重複的部分,其實可以用 JS 動態產生即可,這讓 HTML 的簡潔與可讀性大幅提升。第二個是事件委託 event delegation 的概念,以前學習其他程式時沒有接觸過這個概念,所以一直以來的想像,都是事件的監聽器一定要綁在自己身上,但事件委託只要統一綁在父元素,然後透過 class 屬性等再去篩選即可,對我來說是過去沒有想像過的東西。

而這禮拜學習到的重點,是讓邏輯操控的部分與介面美化的部分終於對接,也開始習慣在 JS 寫程式時,要隨時注意有沒有抓到對的 HTML 元素,開始讓整體能夠有互動的功能。

對我來說是一個很大的助力,感覺自己對這個領域的理解又進入了新的階段,也開始能初步去製造一些能夠互動的網站 !

第四週 — 跨年後成就滿滿的期末作業

第四週新的內容並沒有太多,主要是設計需要綜合許多技巧與概念才能完成的作業,而我在 2020 跨年前成功把前面幾題解出來,後續就愉快地去過我的跨年假期惹。

而在休息約 3~4 天後,我回來繼續挑戰學期 2–1 的期末作業,相比過去的小作業,這次的主題是經典的 RGB 轉 HEX 的色碼轉換器,不過這個作業從一開始自己設計 HTML 架構,從一開始基本的外部資源導入、引入外部 google fonts 與 font awesome,到靈活運用 Flex 排版系統,到最後 JS 的是建設置等都要自己完成,沒有任何已經寫好的程式碼。這樣的挑戰也讓我在過程中回頭去複習學期一到目前各個章節的內容,並且嘗試先把功能拼出來。(跨年後休息的 3~4 天還是覺得差很多,對於一個剛上路的程式菜雞,果然還是應該每天都要把自己泡在程式環境裡至少幾個小時才對QQ)

過程中我學習到 AC 一直強調的「outcomeFirst」精神,學習程式的路上,很容易因為繁雜的知識線,或是想要一步到位而帶給自己太多學習上的壓力,而我在助教的建議下,允許自己在第一次時邊看過去的筆記與教案去完成作業,而後在自己實作完一遍後,去觀摩別人的作法,並且再次複習自己比較不熟的觀念,而後把全部第一次寫的內容打掉,然後運用自己腦中的知識重新寫一遍,這樣的方式也讓我能夠兼顧學習成效與學習速度。

以下是我成功在跨年後重新回歸學習的第一天,努力完成的期末作業,完成的時候也迫不及待的拿給室友與朋友看看,雖然目前還只是簡單的一個小成品,但我仍然覺得是一個很好的挑戰,期望幾個月後完成學期二,甚至是學期三時,會有更多厲害的心得能與大家分享~

學期 2-1 期末作業【RGB 轉 HEX 色碼轉換器】,背景顏色會跟著色碼調整。

繼續踏上衝刺之路前的短暫自我反思

目前是大四企管系學生的我,在學期間的許多專案與實習,學習很多行銷、產品管理的課程,但對於科技與技術的領域始終一知半解,雖然有透過通識課程學習過基礎的 Java ,也清楚自己對於程式語言並不排斥、甚至是有一點熱情的,但好像被所學科系給框架了對自己未來的想像,這是我在大四這一年遇到對自己比較多的反思。

我在實習期間觀察到許多的新創團隊、參與許多課堂上的專案,而後感覺到想做出一個好的產品,能夠符合使用者體驗、科技需求、商業模式永續的設計,需要多重領域的知識,不單單是靠著商業領域的知識就能夠達到的,也因此我希望在自己已經努力累積經驗三年後的大四,能夠給自己一個機會去挑戰程式,這個過去知道自己能全心投入,但始終沒有持續學習的事物。也希望目前把自己未來目標定位在軟體業產品經理、但實際上也還有許多選擇路徑、甚至是轉職成偏技術導向的工程師的我,能夠在 2021 年度有一個好的結果,在還不能做出決定的現在,我還是規劃了一系列的學習目標,期望在多方嘗試、全力學習、全力感受的 2021 年,能夠對想要成為的自己有更清晰的想像,能夠堅持自己想學習與想成為的價值~

對於 2021 年的新希望,好像早已經在 2020 年末就決定完了,相信明天會比今天更值得期待~

關於自我定位還有職涯規劃,會是寒假自己花時間好好研究、重新感受自己的課題,到時候如果有有趣的東西再跟大家分享 !

關於學習的反思,時間與金錢的權衡,剛好日前有看到一篇不錯的 Podcast,是「大人的 Small Talk 」所錄製的,有興趣的非常推薦去聽一聽。

以下是 Podcast 連結 :

https://podcasts.google.com/feed/aHR0cHM6Ly9hbmNob3IuZm0vcy85MjkwNDM4L3BvZGNhc3QvcnNz/episode/MWY4YmY3OTItNjk0ZS00OGNhLWI2NmItOTQ0MWQ5ODZkMzM4?sa=X&ved=0CAUQkfYCahcKEwio2pyzmYTuAhUAAAAAHQAAAAAQAg

以下是 ALPHA Camp 官網連結 :

https://tw.alphacamp.co/?gclid=Cj0KCQiAlsv_BRDtARIsAHMGVSZAczEXS-fbsG2Gs12tsQP5G8EOMW8F1grMF5hNCRMFDv3fHUZlx5EaAgr7EALw_wcB

--

--

劉祐華 YouHuaLiu

政大企管學生 NCCUBA | 25sprout 專案管理實習生 | 5th XChange PM Mentee