23 週の轉職之旅 − ALPHA Camp 結業！

4 min readJan 1, 2022

本文為 ALPHA Camp 23 週 Javascript 全端網頁開發課程的習業心得，其中會帶到 23 週的課程行事曆 (進度)、完成之指標作業及專案內容、以及學習時的心路歷程

2021 年是個奇幻之年，在 COVID19 肆虐全球一年多後，台灣迎來首次的三級警戒，而我的工作也開始 Work From Home🏠 省去上下班通勤時間 (以及週末無法出門遊玩)，生活突然多了些能自我省思及成長的時間，在科技業擔任行銷公關幾年的我，其實對於程式一直抱有小小的興趣，但礙於工作忙碌遲遲沒有開始 (嘗試) 學習，因此，在這段 WFH 的期間，終於能好好的正視轉職的想法，也開始上網搜尋各路資訊

緣份說來就來，在 ALPHA Camp 5月班報名截止前 2 小時，因為被天羅地網的廣告們打到，在火速瀏覽課程相關資訊後，想著「反正才 3000 元，不如試試」，於是就正式入籍學期 1 (5 月班)

沒錯，ALPHA Camp 學期制 (階段性付學費) 的制度真彈性！

// 學期 1 (5月班) /// 2021.05.24 — 2021.06.13

轉職之旅第 1 關 🍄 基礎認識網頁開發三巨頭 JavaScript、HTML、CSS，練習根據 User Story 繪製 Wireframe 及 User Flow

[JavaScript] 基礎語法上手
認識 JavaScript 變數、運算子、if/else 條件式、for/while 迴圈、console.log 技巧等，期間透過 Repl.it 環境練習寫程式，現在再打開第一次交卷的作業練習題，看來著實青澀，也驚覺，原來在學習這條路上，已經走過這麼遠啦

[HTML] 元素 & 頁面結構
認識 HTML 元素文字<p>、標題<h1>、圖片<img>、超連結<a>等，並練習從設計稿定義 HTML 的頁面架構

[CSS] 排版 & 樣式
運用 CodePen 環境製作介面，認識 CSS 選擇器(Selector) 寫法、字型(Font) & 顏色(Color) 等樣式語法，及 Box Model、 FlexBox 排版系統等

學期 1 三週的課程順利地結束，初試身手後，覺得自己是滿喜歡線上學習的模式，因此不假思索的便接著報名學期 2–1 課程！

// 學期 2–1 (6月班) /// 2021.06.28–2021.07.25

轉職之旅第 2 關 🍄 認識 JavaScript 核心觀念、DOM 操作 & 事件處理，及 CSS Bootstrap & RWD 練習

[JavaScript] 核心觀念
在學期 1 初步認識 JavaScript 後，這學期進一步認識字串(String)、陣列(Array)、物件(Object)、函式(Function) 應用，並在一週的課程間完成簡單的週年慶摸彩活動程式

[CSS] Bootstrap 框架 & RWD 響應式網頁
本學期帶入 Bootstrap 框架運用，透過 Flexbox & Grid 佈局系統排版，並練習 RWD 響應式網頁的設計撰寫

[DOM] 操作 & 事件處理
在基礎 JavaScript 概念都練習過後，我們開始認識 DOM！認識 DOM Tree & Node 概念、練習選出 & 修改特定 DOM 節點、練習如何遍歷 (Traversing) DOM 週邊節點，接著，學習事件 (Event) 處理，包含設置事件 (addEventListener)、移除事件 (removeEventListener) 等

【指標作業】
學期 2–1 期末作業是製作出「RGB 與 HEX 色碼的轉換器」，驗收 CSS 排版技巧及 DOM 事件操作能力，還記得那是第一次做出「可互動」的網頁頁面，在成功完成作業後，開心的和朋友分享了一番！

// 學期 2–2 (8月班) /// 2021.08.02–2021.08.29

轉職之旅第 3 關 🍄 運用 AJAX 串接第三方 API 資料、熟悉「軟體開發」實務流程、及實作 MVC 架構，並首次認識 Git & GitHub 版本控制

[API & AJAX] 串接第三方資料
學習運用 AJAX 的技術來發送 HTTP 請求，搜集其他網站的 API 資訊 (如 Random User Generator)，搭配 DOM 技術的應用，在網頁介面裡加入外部提供的資料

[MVC] MVC 架構管理程式碼
初步練習運用 MVC 架構管理程式碼，運用「翻牌記憶遊戲」的作業來練習 MVC 架構撰寫，由 Controller 統一發派遊戲動作、Model 集中管理資料、及 View 存放畫面相關資料

[Git & GitHub] 版本控制
認識 git init、git add、git commit、git status、git log 等操作，及 git remote、git push、git clone 等指令，建立首個 GitHub repository，將先前指標性專案上傳到遠端儲存庫

// 學期 2–3 (9月班) /// 2021.09.06–2021.10.10

轉職之旅第 4 關 🍄 認識後端 Node.js、Express.js 框架，建立資料庫 MongoDB(NoSQL)、實作 CRUD 資料處理功能、打造 RESTful API，並將專案部署到 HEROKU

[Express.js 框架]
此階段正式開始用 VS Code 在電腦本機撰寫程式碼，建立 Node.js 伺服器後，運用 Express.js 後端框架打造「餐廳專案」及「電影清單專案」

[MongoDB & CRUD]
建立 MongoDB 資料庫，連結資料庫後，對資料進行 新增(Create)、讀取(Read)、更新(Update)、刪除(Delete) 操作，打造「Todo List」及「短網址產生器」小型專案

Connected to MongoDB

[RESTful API]
認識 RESTful API 用意，並重構 Todo List 專案程式碼，以符合 RESTful API

【指標作業】
學期 2–3 的指標作業莫過於「餐廳清單動態網站」，以 Node.js 的 web 框架 Express.js 打造而成，連接 MongoDB 資料庫、可對餐廳資料進行 CRUD 操作，亦備有搜尋(Search)、排序(Sort) 及篩選(Filter) 等功能，且路由設計符合 RESTful API 風格，可謂集結整個學期 2 所學於此專案！