[筆記] 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
偽元素及滑鼠互動動作

See the Pen <a href="https://codepen.io/andy922200/pen/QPWWyo/">Alpha Camp S2 W1 A3</a> by Andy Lien

第二週 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