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

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


課程目的

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

開發工具整理

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


第一週 Week 1

wireframe從線框稿(Wireframe)開始,規劃 HTMLCSS ,最後能依照題目(設計師)的指示,進行切版並完成作品。規劃完 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
[筆記] Body-Parser 無法解析的 FormData 解決方案 – multer
運用 express 的框架來架設後端的 Node.js 伺服器時,當遇上前端傳來的表單資料為 mult
★全文分享★  [筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求
[筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求
這篇是解決不時在測試 Vue 專案上時,常會在瀏覽器的 console 內看見的無效 GET 請求
★全文分享★  [筆記] Vue.js & Node.js 專案初始化筆記
[筆記] Vue.js & Node.js 專案初始化筆記
這篇主要是筆記下如何快速的在本機端生成一個 Vue.js 的專案,並結合 Bootstrap 和 Nod
★全文分享★  [筆記] Alpha Camp 第四學期 期末回顧之三 – 專案發表後
[筆記] Alpha Camp 第四學期 期末回顧之三 –  專案發表後
畢業專案簡報時,評審的手也沒有閒著,從各個角度來測試專案是否能正常運作,
★全文分享★  [筆記] Alpha Camp 第四學期 期末回顧之二 – 畢業專案
[筆記] Alpha Camp 第四學期 期末回顧之二 – 畢業專案
這回的畢業專案,AlphaCamp指定了三個方向(電商、旅遊規劃和CRM系統),其餘的就交給
★全文分享★  [筆記] Alpha Camp 第四學期 期末回顧之一 – 個人成長
[筆記] Alpha Camp 第四學期 期末回顧之一 – 個人成長
AlphaCamp 的第四學期內容算是非常扎實。隨著接觸的內容變多的情況下,在心態上也
★全文分享★  [筆記] Node.js 在 Windows 上的開發環境建置
[筆記] Node.js 在 Windows 上的開發環境建置
這篇文章記載下於 Windows 上建置開發 NodeJS 相關應用的環境過程和步驟。操作步驟//1
★全文分享★  [筆記] Sequelize NodeJS 專案初始化筆記
[筆記] Sequelize NodeJS 專案初始化筆記
本篇記錄下 AlphaCamp 第四學期的重頭戲之一,與他人一同打造類 Twitter 專案的過程。
★全文分享★  [筆記] Heroku Sequelize 佈署細節
[筆記] Heroku Sequelize 佈署細節
本篇記錄下如何將 SQL 關聯式資料庫佈署到 Heroku 上的步驟與心得。操作步驟// 1. Hero
★全文分享★  [筆記] 運用 Heroku 佈署的初始化步驟
[筆記] 運用 Heroku 佈署的初始化步驟
這篇文章記錄下如何將本機端的專案推撥到 Heroku 上的步驟。整體操作難度不高,但
★全文分享★  運用 Node.js 建網站的初始化步驟
運用 Node.js 建網站的初始化步驟
AlphaCamp 的課程進入到第三學期後期,趁機整理一下如何運用 Node.js 來建立一個簡單
★全文分享★  [指南] AlphaCamp 第二學期與第三學期的差異
[指南] AlphaCamp 第二學期與第三學期的差異
AlphaCamp 課程的第二學期和第三學期,其課程難易度與設計上有著顯著不同。趁著這
★全文分享★  [筆記] Alpha Camp 第三學期 期末回顧 關於自學
[筆記] Alpha Camp 第三學期 期末回顧 關於自學
學寫程式的過程旅途上,「自學」在不知不覺中就成為身體中記憶的一部分。畢竟
★全文分享★  [筆記] Handlebars Register Helper 自定義 Helper 用法
[筆記] Handlebars Register Helper 自定義 Helper 用法
Handlebars 的模版,其判斷式功能的延展性不佳,類似 {{#if 3>2}} 這類的用法都預設
★全文分享★  [筆記] Google Place API 串接 (Google Map 系列服務)
[筆記] Google Place API 串接 (Google Map 系列服務)
Alpha Camp 的第二學期課程,讓大家試試水溫串接 API。在心血來潮下,想說串接個 Goog
★全文分享★  [筆記] Alpha Camp 第三學期
[筆記] Alpha Camp 第三學期
Alpha Camp 是個新興的線上線下整合的課程平台。第三階段是為期8週的課程,主要將
★全文分享★  [筆記] Pagination 分頁功能 實作 JavaScript
[筆記] Pagination 分頁功能 實作 JavaScript
網頁設計中常見的分頁功能(Pagination)的實作筆記過程。邏輯上,可以拆解成以下兩
★全文分享★  [訪談記錄] 自身興趣和實作 在工作上找到歸屬感與成就
[訪談記錄] 自身興趣和實作 在工作上找到歸屬感與成就
AlphaCamp 第二學期的第三份訪談,幸運的請到一位自高中時期認識的神人朋友,來聊
★全文分享★  [筆記] Git 忽略 .DS_Store 等排除檔案
[筆記] Git 忽略 .DS_Store 等排除檔案
初學 Git 常會遇上的一個問題就是,Git 會自動追蹤一些系統記錄檔案(如MAC上的 .DS_St
★全文分享★  [筆記] Git 更新分支、解除衝突方法一覽
[筆記] Git 更新分支、解除衝突方法一覽
從本機端同步到 GitHub 上頭的專案,於每次上傳 commit 時都會比對兩邊的資料。若有
★全文分享★  [筆記] API 串接, Axios 和綁定DOM事件
[筆記] API 串接, Axios 和綁定DOM事件
在 Alpha Camp 的第二學期課程中,有提到寫個網頁來向遠端伺服器請求資料,故整理
★全文分享★  [筆記] textContent, event.target 和 innerHTML
[筆記] textContent, event.target 和 innerHTML
筆記一下在學習撰寫 JavaScript DOM時,常會遇上的三大功能 innerHTML, textContent 與 event.t
★全文分享★  [筆記] Alpha Camp 第二學期 期末回顧
[筆記] Alpha Camp 第二學期 期末回顧
Alpha Camp 的第二學期課程,一晃眼間就兩個月過去了。從現在回首來看,發現自己也
★全文分享★  [訪談記錄] 觀察、效能和成就感
[訪談記錄] 觀察、效能和成就感
第二場訪談請到大學時期認識的 Mr Miao,現職於電子五哥之一的廣達的旗下轉投資公
★全文分享★  [筆記] BootStrap Card + Grid System + Modal 彈出視窗
[筆記] BootStrap Card + Grid System + Modal 彈出視窗
運用 BootStrap 4.0 版本起有的 Card 樣式,再加上 Grid System 排版。最困難的大概是「如
★全文分享★  [訪談記錄] 反思 試著對未來的職涯跨出一步
[訪談記錄] 反思 試著對未來的職涯跨出一步
訪談後的反思,是個讓理想化為現實的具體步驟之一。在一邊進修自己的技能之餘
★全文分享★  [訪談記錄] 堅持加上興趣 在程式的世界中遨遊
[訪談記錄] 堅持加上興趣 在程式的世界中遨遊
YH 目前任職於某日商台灣分社旗下擔任軟體工程師,是我於高中時期於社團所結識
★全文分享★  [筆記] Alpha Camp 第一學期 暖身
[筆記] Alpha Camp 第一學期 暖身
Alpha Camp 是個新興的線上線下整合的課程平台。和其他的網路平台課程如 Udemy, Hahow 
按讚加入粉絲團

延伸閱讀