【ALPHA Camp程式設計入門完成心得】之以為複製貼上很容易,實際上有夠麻煩?|30歲up學程式行不行 3

Jerry Liu
Be-A-Learner
Published in
Sep 16, 2023
Photo by Patrick Hendry on Unsplash

從 9/7 購買課程到 9/16,共約 10 天左右的時間,完成了「ALPHA Camp程式設計入門課程」。一開始因為想要試試自己到底對程式語言有無興趣,或者能否至少把一堂入門課程好好上完,加上 ALPHA Camp官網有個 10/8 期限的「新手村萬元挑戰」(不確定報名截止後網址還會不會有效),還有個「 JavaScript 全端開發課程」進度制 10/2 梯次報名。

由於剛好有這樣的時間限制,我覺得很好判斷有無想要學習程式,對於是否投入一個項目,我通常都會透過短期間內投入大量時間來觀察。畢竟投入一定程度才會有相對的成果或成長幅度可看。

ALPHA Camp 新手村萬元挑戰
Image credit: ALPHA Camp
ALPHA Camp JavaScript全端開發課程圖
Image credit: ALPHA Camp

我算是一個閒不下來的人,一直在尋找桌球以外,能否有坐著就可以持續變強的項目,這種項目是指可以讓我想要無時無刻都投入在裡面,跟打桌球一樣每天樂此不疲的那種。

看書是一個很好的方式,但如果要最有效率,那就需要帶著目的性去閱讀,這就失去了閱讀的樂趣,也限制了方向。程式語言一直是我心中想要學會的一個夢想清單,即便我對此一竅不通,也不知要拿它來幹嘛,卻總會覺得在電腦前面能打出一堆程式碼是一件很酷的事情。

或許他有機會成為我追求的

坐著就可以持續變強

Dev-C1-Week 4

來到第四週,進入 Flex 與 Position 的切板世界。在短短兩三個章節後,就開始最後一個指標作業「校長盃 UI 設計首獎作品:實作元件切版」。這個作業的目標是用 position 去把所有元素擺放在跟示意圖相同的位置,如下圖:

校長盃 UI 設計首獎作品:實作元件切版 示意圖
Image credit: ALPHA Camp。將所有元素與上圖擺放相同

讓我沒想到卡最久的是下面文字嘗試跟成品完全重疊,目前做到算很接近,只是真的很花時間,後續也透過助教回饋知道「因為字型顯示不同的關係,很難做到完全重疊」。完成後,整個程式設計入門課的指標作業就全部結束。

透過 diffsite 確認切板是否相同。左:傑瑞製;右:成品圖
透過 diffsite 確認切板是否相同。左:傑瑞製;右:成品圖

Bootstrap — 複製貼上很容易 ? 實際上有夠麻煩🤣

本以為後面也會延續之前手刻實作,沒想到直接進入 Bootstrap 與 RWD 觀念的介紹。而且節奏變快非常多,之前是手把手教學,我覺得這邊比較可惜的是影片教學少以及跳得非常快,Bootstrap 裡面有相當多的語法,裡面有很多細節,像助教的示範裡就有一些小細節,或在示範成品內也會看到一些沒學過但是要放入才能達到那樣的效果。但在每個小練習作業時,課程會強調只要「複製貼上」就好,這裡就比較難適應。

實際執行其實也沒那麼單純,你需要先去辨別結構的上下關係,以及 Bootstrap 裡面寫的方式,每個字詞代表的意思,哪些可替換、哪些需要替換,甚至有些還要加一些參數,才能達到效果。

你要會用、會貼,還要懂得加加減減

這應該是我用過最難的複製貼上😂

組裝我的社群主頁

最後一個實際操作的作業,是要透過 Bootstrap 去完成以下規格。我的做法是依循之前分析架構的原則:由大到小、由左到右,先去把各個框框建立起來。

ALPHA Camp 社群主頁示意圖
Image credit: ALPHA Camp。社群主頁示意圖

這邊倒是比較沒什麼問題,查找 Bootstrap 、確認樣式花比較多時間。以及複製貼上後會一下增加很多內容,像是要增加八張卡片,所以若一次貼八個,又要整理就會顯得很雜亂。中途甚至有將所有代碼都刪掉,整個重來一遍的情況。

先做出大概框架,再去調整樣式,塞入內容
先做出大概框架,再去調整樣式,塞入內容

而讓我卡最久的是,原本以為填入內容應該不會太難,提示雖有說每個按鈕要跑出不同的內容是容易錯的誤區,但也想說應該只要參數改成不同的,顯示應該就會不同。

結果我就先從 id 去下手,改了之後發現,沒反應??後來又試著改了不同的參數也沒反應,後續就開始去閱讀 Modal 的文件,查可能的問題出在哪,結果試了半天還是不行。

每個按鈕都要呈現不同人的介紹結果
每個按鈕都要呈現不同人的介紹結果

最後就從頭開始閱讀各行程式碼,後來發現是要把所有相關的詞,都改成相同標籤,才能達到該效果(雖然有可能不完全正確,但至少有達到要的結果🎉)。

紅框中每個標籤需要一致
紅框中每個標籤需要一致

從先前各項動手 Coding,到透過複製程式代碼,沒想到後者反而讓我覺得比較難,自己寫程式時,有一定脈絡,也可以讓版面乾淨。但在貼上的過程中,有時只能貼上某個程式碼,有時是貼整個,一下就會讓版面紊亂起來。

加上很多代碼的意義都不是那麼的熟悉,也大大增加了難度。不過課程也有提醒現在只是讓我們熟悉一下 Bootstrap 元件而已。透過短短幾個單元,的確讓我快速對 Bootstrap 及 RWD 有了初步的認識,只是節奏完全不一樣,還真有些不習慣哈。到這裡課程也就差不多結束了。

What’s Next ?

短短十天時間,完成了基礎入門課程,的確讓我對程式語言有了全新的認識與認知。如同前兩篇心得所說,看到程式代碼不再那麼害怕,也漸漸開始看得懂甚至寫得出一些內容,這真的滿讓人開心的!

至於接下來要怎麼走,寫這篇的當下還在思考中🧐畢竟也才剛結束課程,核過「新手村萬元挑戰」好像也需要 5 天的時間。

在課程週期間,學了 Javascript、 HTML / CSS、切板、Bootstrap、RWD等相關入門知識。如果你是很害怕英文相關內容,從中文平台開始學習應該會降低不少難度。

在此肯定的是,到目前為止學程式及寫程式還滿開心的,尤其是在吸收知識及想辦法解決問題時,時間更是咻一下就過去了,過得非常充實!這幾天應該會趕快研究一下接下來要怎麼走,打鐵要趁熱🔥

我終於開始學習寫程式了!
現在還在蜜月期,所以還算是滿快樂的,但在 ALPHA Camp的一篇文章「學習教練團隊,如何透過數據優化學生學習成果 ?」有提到,學習語言很快就會碰到混亂跟絕望期。

當我遇到時,希望我能堅強持續地走下去,之後會如何我們拭目以待!

Image credit: why learning coding is so damn hard

如有任何想法或遇到什麼問題也歡迎在下面留言,若有時間也歡迎幫我拍滿50下或多多分享~

Be-A-Learner 分享所見、所學

成就更好自己,同時帶動他人一同成長

謝謝你讀完這篇文章,希望你可以給我拍手鼓勵(claps)😁,最多可以50下喔!

延伸閱讀

--

--

Jerry Liu
Be-A-Learner

分享所見、所學,不斷學習,只為成就更好的自己