[筆記] Alpha Camp 第二學期 啟程

章節連結

• 課程目的
• 開發工具整理
• 第一週 Week 1
• 第二週 Week 2
• 第三週 Week 3
• 第四週 Week 4
• 第五週 Week 5
• 第六週與第七週 Week 6 ~ Week 7
• 第八週 Week 8
• Alpha Camp 相關文章

Alpha Camp 是個新興的線上線下整合的課程平台。第二階段是為期8週的課程，主要帶大家實作網頁開發前後端的所需技術：HTML、CSS 和 JavaScript。
若對第一階段有興趣的，可以點這裡。

課程目的

打穩前後端開發的語言基礎，並運用程式語言做出完整的網路元件。(摘錄自其課程平台 Lighthouse)
1. 基礎 JavaScript：了解 JavaScript 在網頁上的延伸應用，如 DOM 操作、AJAX
2.實戰運用 HTML、CSS 和 JavaScript ，將三者組合做出使用者對應的功能
3.實務技術上手：如響應式網頁、版本控制、自動化測試等等。

開發工具整理

1. Visual Studio – 當前熱門且開源的程式碼編輯器，可藉由安裝套件來擴充功能，推薦套件可點此。
2. Bootstrap – 免費且開源的前端開發框架，由 HTML、CSS 和 JavaScript 所寫成。設計的目標是達成響應式網頁和行動優先，所以開發者可以直接在其基礎上進行開發，而不必重頭開始繁瑣的設定。
3. Font Awesome – 可以取得對應的圖示按鈕，不必從頭設計起。
4. 色碼表 – 可以快速得知六位數(#??????)的16進位顏色代碼
5. Google Chrome & Google – 除錯工具和搜尋關鍵字
6. 中英文假字生成器整理 – 快速產生所需的填充文字

第一週 Week 1

從線框稿(Wireframe)開始，規劃 HTML 及 CSS ，最後能依照題目(設計師)的指示，進行切版並完成作品。規劃完 Wireframe 後，先將對應的 HTML 內容寫入，再規劃 CSS 來調整位置、字型、邊界…等等。

水平排版：float, clearfix, display:inline-block
垂直排版：display:table & display:table-cell
文字水平置中：text-align:center
文字垂直置中：常用的三種方法
圖片垂直置中：vertical-align:middle
偽元素及滑鼠互動動作

第二週 Week 2

帶你熟悉 JavaScript 的基本運用，也就是 Function, 資料型態, 邏輯運算, 各種迭代器(iterator) 等的運用，算是替之後幾週的課程做暖身。

第三週 Week 3

DOM 元素的運用，並帶你一步步的了解網頁的 JavaScript 互動。同時設置各種的事件(event)，親手打造出一個動態網頁。

第四週 Week 4

跟上潮流，因應手機世代來臨，製作當前主流設計 RWD。從小螢幕寬度開始，逐步放大的大螢幕電腦，一體適用的網站。同時，初體驗 Flexbox 和 Grid 排版方式，擺脫有時會惱火的 float。

第五週 Week 5

認識 JavaScript 的一些神奇地方，還有物件與函式。

第六週與第七週 Week 6 ~ Week 7

實際串接 API，刻出一個 Movie List 出來，可以看這裡。

第八週 Week 8

運用 Git & Github 來上傳、管理、追蹤你的作品。

Alpha Camp 相關文章

★全文分享★  [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer

運用 express 的框架來架設後端的 Node.js 伺服器時，當遇上前端傳來的表單資料為 multipart/form-data 格式時，那麼 body-parser 套件是不支援的。這時可以運用 multer 套件來解決這個問題。使用範例1.首先先

★全文分享★  [筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求

這篇是解決不時在測試 Vue 專案上時，常會在瀏覽器的 console 內看見的無效 GET 請求如：http://localhost:8080/sockjs-node/info?t=<一串亂數>，要如何處理。步驟1.若是處在開發階段看到的話，會因為你所

★全文分享★  [筆記] Vue.js & Node.js 專案初始化筆記

這篇主要是筆記下如何快速的在本機端生成一個 Vue.js 的專案，並結合 Bootstrap 和 Node.js 二者來產生一個前後端兼備但卻彼此分離的網路應用程式。步驟Vue.js 框架下，其網址多半會帶有 # 字樣。這是

★全文分享★  [筆記] Alpha Camp 第四學期 期末回顧之三 – 專案發表後

畢業專案簡報時，評審的手也沒有閒著，從各個角度來測試專案是否能正常運作，進一步的防止有心人士偷改資料造成系統當機。Max、維元、楚玄、Sam…..等評審給予的回饋，在往後的成長道路上，

★全文分享★  [筆記] Alpha Camp 第四學期 期末回顧之二 – 畢業專案

這回的畢業專案，AlphaCamp指定了三個方向(電商、旅遊規劃和CRM系統)，其餘的就交給各個團隊自己打磨。在這一個月的時間內完成ERD、決定使用者故事的開發的優先順序、實際寫 Code 和最後佈署後的

★全文分享★  [筆記] Alpha Camp 第四學期 期末回顧之一 – 個人成長

AlphaCamp 的第四學期內容算是非常扎實。隨著接觸的內容變多的情況下，在心態上也得有所轉變，不再能一味的希望課程能教導或提供完整的範例給你。課程的內容應被當成是一個個的楔子，跟每個

★全文分享★  [筆記] Node.js 在 Windows 上的開發環境建置

這篇文章記載下於 Windows 上建置開發 NodeJS 相關應用的環境過程和步驟。操作步驟//1. 安裝 cmder，下載位置在右邊：https://cmder.net///2. 安裝 nvm，到右邊的 Github 網站下載：https://github.com/coreybutler/nvm-win

★全文分享★  [筆記] Sequelize NodeJS 專案初始化筆記

本篇記錄下 AlphaCamp 第四學期的重頭戲之一，與他人一同打造類 Twitter 專案的過程。同時，這也是記錄如何從無到有打造一個專案的過程。一、專案規劃提出規格(Spec)清單，內容包含以下：1.使用角

★全文分享★  [筆記] Heroku Sequelize 佈署細節

本篇記錄下如何將 SQL 關聯式資料庫佈署到 Heroku 上的步驟與心得。操作步驟// 1. Heroku 指定的資料庫是用 PostgreSQL，故先用 npm 安裝相關套件npm i pg// 2. 調整 config/config.json 的設定 “production”: { “use_env

★全文分享★  [筆記] 運用 Heroku 佈署的初始化步驟

這篇文章記錄下如何將本機端的專案推撥到 Heroku 上的步驟。整體操作難度不高，但是要盡量讓 git 和 heroku 的檔案放在同一層。否則上傳時，heroku 會抓不到 package.json 的檔案。步驟1. 首先，先上 Hero

★全文分享★  運用 Node.js 建網站的初始化步驟

AlphaCamp 的課程進入到第三學期後期，趁機整理一下如何運用 Node.js 來建立一個簡單網站的步驟(包含前端畫面、後端資料庫、登入頁面、串接API以及除錯)。第一部分1.Wireframe畫面的設計草稿，每個頁

★全文分享★  [指南] AlphaCamp 第二學期與第三學期的差異

AlphaCamp 課程的第二學期和第三學期，其課程難易度與設計上有著顯著不同。趁著這篇寫下第一手的體驗心得。課程設計差別學期二瀏覽器的前後隱含了 HTML, CSS 和 JavaScript 的互動。不過，你並不會

★全文分享★  [筆記] Alpha Camp 第三學期 期末回顧 關於自學

學寫程式的過程旅途上，「自學」在不知不覺中就成為身體中記憶的一部分。畢竟寫程式卡關的問題有百百種，有時只是單純打錯字、也有可能是一開始的邏輯設計就出了毛病。這時，運用搜尋「

★全文分享★  [筆記] Handlebars Register Helper 自定義 Helper 用法

Handlebars 的模版，其判斷式功能的延展性不佳，類似 {{#if 3>2}} 這類的用法都預設無法使用。RegisterHelper 就是用來解決這個問題。使用方法初始化//initialize handlebars (not express-handlebars)const Handlebars = r

★全文分享★  [筆記] Google Place API 串接 (Google Map 系列服務)

Alpha Camp 的第二學期課程，讓大家試試水溫串接 API。在心血來潮下，想說串接個 Google Map 的 API 來玩玩看。不過要做的準備工作還真不少，以下是試驗不少次後所得到的心得。串接前的準備工作1. Goo

★全文分享★  [筆記] Alpha Camp 第三學期

Alpha Camp 是個新興的線上線下整合的課程平台。第三階段是為期8週的課程，主要將學習 Web 開發實務框架，使用 JavaScript + Node.js 打造一個兼具前、後端與資料庫的網路應用程式。若對第一階段有興

★全文分享★  [筆記] Pagination 分頁功能 實作 JavaScript

網頁設計中常見的分頁功能(Pagination)的實作筆記過程。邏輯上，可以拆解成以下兩項：1.計算總共頁數2.依照使用者點擊的頁數來決定顯示多少項目實作步驟1.HTML部分<!–採用 Bootstrap 4.0 –><nav a

★全文分享★  [訪談記錄] 自身興趣和實作 在工作上找到歸屬感與成就

AlphaCamp 第二學期的第三份訪談，幸運的請到一位自高中時期認識的神人朋友，來聊一下他的程式學習歷程。相關訪談1.什麼契機下開始接觸程式？小學的時候有去資策會上過 RPG 製作大師的課程，使

★全文分享★  [筆記] Git 忽略 .DS_Store 等排除檔案

初學 Git 常會遇上的一個問題就是，Git 會自動追蹤一些系統記錄檔案(如MAC上的 .DS_Store)，所以一份排除清單就是必要的一份工作。排除方法1.在 git 專案下，新增 .gitignore 檔案請利用終端機(Terminal)新

★全文分享★  [筆記] Git 更新分支、解除衝突方法一覽

從本機端同步到 GitHub 上頭的專案，於每次上傳 commit 時都會比對兩邊的資料。若有出現不一致的情形，就會挑出錯誤訊息。錯誤情境1.遠端資料較新由於 Github 網站本身有提供修改的地方(可以線上

★全文分享★  [筆記] API 串接, Axios 和綁定DOM事件

在 Alpha Camp 的第二學期課程中，有提到寫個網頁來向遠端伺服器請求資料，故整理一下自己腦海中所學到的技巧與觀念。重點提示運用 “Axios” 工具以 “GET” 方式請求資料<script src=”https://unpkg.com/axios/

★全文分享★  [筆記] textContent, event.target 和 innerHTML

筆記一下在學習撰寫 JavaScript DOM時，常會遇上的三大功能 innerHTML, textContent 與 event.target 的用法。重點整理innerHTML常搭配 HTML 的 Element Object 來執行，將一段 HTML Code 寫入特定區塊。// 以下例子取自 w3

★全文分享★  [筆記] Alpha Camp 第二學期 期末回顧

Alpha Camp 的第二學期課程，一晃眼間就兩個月過去了。從現在回首來看，發現自己也默默的熟悉了一些網頁互動的技巧，寫程式也開始不讓人那樣心生恐懼。將情境轉換成電腦可以理解的小步驟，並

★全文分享★  [訪談記錄] 觀察、效能和成就感

第二場訪談請到大學時期認識的 Mr Miao，現職於電子五哥之一的廣達的旗下轉投資公司擔任後端工程師。藉著這次的對話，讓我得以一窺與記憶體、儲存空間和效能奮戰的工作日常。相關訪談1.工作

★全文分享★  [筆記] BootStrap Card + Grid System + Modal 彈出視窗

運用 BootStrap 4.0 版本起有的 Card 樣式，再加上 Grid System 排版。最困難的大概是「如何命名變數」和「從茫茫的API技術文件」中找到需要的資料。重點摘要Cards + Grid System 排版混用官方文件：1. https://

★全文分享★  [訪談記錄] 反思 試著對未來的職涯跨出一步

訪談後的反思，是個讓理想化為現實的具體步驟之一。在一邊進修自己的技能之餘，試著描繪未來工作的樣貌可以讓自己更加清楚是為何堅持在現在的航道上。相關訪談短期職涯目標截至目前，個

★全文分享★  [訪談記錄] 堅持加上興趣 在程式的世界中遨遊

YH 目前任職於某日商台灣分社旗下擔任軟體工程師，是我於高中時期於社團所結識的學長。幸虧有了 AlphaCamp 的職涯社群提出的大哉問，鼓勵大家去訪問目前已在相關產業工作耕耘的人們，而讓我們

★全文分享★  [筆記] Alpha Camp 第一學期 暖身

Alpha Camp 是個新興的線上線下整合的課程平台。和其他的網路平台課程如 Udemy, Hahow 相比，在這個 Camp 學習程式設計的最大差別在於：真人助教的一對一客製化回應，學生也可以觀看其他同學的作品

延伸閱讀

• [指南] Element UI 搭配 i18N form 表單錯誤訊息不會自動切換語言的解決方法
• [筆記] Ultimate AWS Certified Developer Associate (53)
• [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (68)
• [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (67)
• [指南] Buefy 搭配 Autocomplete 的思考邏輯