以 RGB — HEX Converter 做學習里程碑

吳振銜

Alpha Camp 全端網路課程學期二結束了,期末考其中一題是做一個 RGB-HEX Converter。對我來說,這是個很棒的題目,可以結合很多學期二學到的概念及技巧。

如下圖:

連下面網址,先來試玩一下:

https://s19003045.github.io/Final-exam-A27-Q2-RGB-to-Hex-Converter/

這個程式主要功能:

  • 於〈RGB input〉〈HEX input〉可輸入色碼值,或 於〈RGB slider〉scroll bar,最後於 HEX 區塊呈現混合後的顏色。
  • 輸入 RGB 色碼,可取得 HEX 色碼,相反亦可。

如果不懂色碼,可以參考下面這個文章:

https://5xruby.tw/posts/understand-hex-color-codes/


作品背後的技術及收穫

試玩後,我們來看一下,要完成這個作品做到了哪些事情,及需要什麼觀念或技術 :

  1. 呈現網頁元素的內容,也給了它們樣式(美化): HTML + CSS
  2. 將網頁元素依需求排版,手機與電腦會呈現不一樣的排版,是一個對手機使用者友善的介面:CSS 佈局、RWD ( Responsive web design)、bootstrap( 開源前端框架)
  3. 網頁可以與使用者互動,使用者可以輸入、click button、scroll,然後網頁依使用者動作而回應:JavaScript、DOM ( Document Object Model )的操作與事件
  4. 使用者可以藉由這個網頁取得想要的色碼:色碼基本概念、JavaScript、DOM 的操作與事件
  5. 〈RGB input〉〈RGB slider〉〈HEX input〉三者皆可使用,並連動變化;〈RGB input〉〈RGB slider〉〈HEX input〉與 各自色塊連動變化:色碼基本概念、JavaScript、DOM 的操作與事件
  6. 將專案佈署到網路,所以可以讓使用者連結:git 指令、GitHub、GitHub Pages
  7. 若想進一步將部署到網路的 專案 說明清楚:README.md 的撰寫

學期二學到的觀念和技術,除了串接 API、 JavaScript 物件導向於上述專案沒有使用或深入,其他幾乎都派上用場了。


做出讓自己充滿成就感的作品

若說Alpha Camp全端網路開發「學期一」是初試網路開發,那麼「學期二」則是網路開發大躍進。這個學期完成了超多作品,包括打造個人網站、個人網站 RWD、客製化名片、Todo List、實作Movie List、User List、Alpha POS。其實每個作品都不容易,但是透過教學資源一步一步帶領,學習者就是按步就班,直到產出作品。

我自己蠻喜歡的另一個作品是「客製化名片」,可連結下面網址:

https://s19003045.github.io/createNameCard/#basicInfo

在這個作品中,把剛學成的 CSS 佈局、Bootstrap 前端框架、簡單的 JavaScript 技巧,結合 DOM 的操作,打造一個名片生成器,完成時,心中感動了很多天。

還有這個 => Todo List :

https://s19003045.github.io/Todo-list/

Todo List 這個作品同樣需要用到 CSS 佈局、Bootstrap 前端框架、JavaScript、DOM 操作。裡面有個很實用的功能〈點擊一個元素,讓它跑到另一個地方〉,這樣的概念實作也為後來課程 Movie List 做預備 ─ 新增項目至 my favorite list或從 my favorite list 移除某個項目。


回顧及前瞻

回顧學期初訂下的目標,並檢視完成度:

目標一:每週一訂定當週學習規劃,週五前完成當週作業

有鑑於學期一的經驗,我特別調整了學期二的時間規劃。

學期一因為還在摸索學習方式,每週一課程出爐後,因為深怕上不完,每天就儘可能把時間填滿,也因此給自己過多的壓力。

於是,這學期,每週一課程出爐後,我先規劃瀏灠當週的課程及作業,然後平均分配至週一 ~ 五。如果當天完成進度後,還有多餘的時間,我可以選擇補充相關的知識或做更多的練習,又或者,我可以開始隔天的進度。如果當天來不及完成,我也不給自己太大的壓力,因為還會有六日的時間做緩衝。

這學期的時間規劃,實作起來相當成功,我有充足的學習體驗,但又不會給自己過多的壓力,可以保持心情愉悅地學習。

除了「客製化名片」因為在週日晚太專注作品實作而忘記截止時間,所以這作業遲交沒被批改到,其餘作業都在時間內完成,順利得到助教批閱。

提到「客製化名片」因為遲交沒被批閱,雖然心中有點 OOXX,但是看到自己用心的作品生成,那種喜悅已經勝過心裡的 OOXX。

目標二:每週瀏覽同學的提問、comment、作業,並給予回饋,也藉此向同學學習。

因為知道,瀏灠同學的作業並給予回饋,是未來工作中 code review 的準備,也是提升自己戰力的方式,所以訂下了這個目標。

學期二上半段有足夠的時間來做這件事,也從當中得到不錯的學習經驗。但到了學期二下半段,新的 topic 需要更多的時間,時間開始不是那麼夠用,也因此瀏覽同學的作業、提問、comment,頻率下降。

後來,期末考其中一個題目便是 review code,透過觀摩同學的作品並給予回饋來提昇自己的學習能力。

我相信這件事真的很重要!這學期做的不夠好,沒關係,學期三繼續設立這個目標。而學期二至學期三中間的空檔,也還可以透過觀摩其他網路上的作品來學這件事。

目標三:每二週於medium發文一篇,記錄學習。

我喜歡透過寫作的方式整理思緒,把心沉澱,甚至透過寫作來深化思考。這真的很有用!

這學期共完成了四篇:

打敗學程式過程中心中的巨人歌利亞 (108/6/17)

【聽課分享】找到你的WHY(108/6/27)

揣摩軟體工程師表達能力的重要性(108/7/3)

職涯訪談系列之一:談軟體工程師的養成(108/7/26)

對一個很久沒有提筆寫作的人來說,這件事的養成真的不容易,但是它真的值得我繼續做下去。

想想自己也因為許多其他人寫的技術文章而受益,也期待自己把自身經驗分享出來,讓一些人也可因此得到幫助。


Photo by Matt Hoffman on Unsplash

我還是要感謝 Alpha Camp 提供了一個很棒的學習計畫,讓想學程式的我不用大海撈針。這裡有人指引道路,有學習社群提供支援及資源,還可以連結更大的技術社群,真的很值得!

要不要繼續報名學期三?當然,學了前端還不夠,繼續朝後端邁進!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade