[筆記] 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 相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 老化全方位應對手冊 – 14
• [筆記] Nuxt Utils 搭配 Auto-Import 如何自定義分類
• [筆記] 老化全方位應對手冊 – 13
• [筆記] TailwindCSS 4 修改 placeholder 顏色於 Chrome 瀏覽器失效的解決方案
• [筆記] 原生 HTML Select 選項下拉符號 CSS