饅頭計畫前端幼幼班教材釋出｜一份送給程式初學者的禮物
HTML、CSS、JS、jQuery、Git 、CMD Line 教學一次滿足
前言
這是饅頭計畫一代回顧的第三篇，第一篇是「過了六個月後，饅頭計畫怎麼樣了呢」，這篇分享饅頭計畫第一代是怎麼進行的，我用了怎麼樣的教學方式，遇到了什麼樣的困難，我又怎麼改進呢？
第二篇是為什麼我覺得當饅頭會讓我進步的更快，我用怎麼樣的想法來實踐？我的核心思想是什麼？
前情提要
在「饅頭計畫第一代 — 從零開始茁壯吧」中，我決定要將教材免費釋出到 Youtube 上，現在我來實現諾言啦。(ps: 因為目前還沒有全部教完，所以教多少，釋出多少。之後教學還會持續釋出。)
▍半年前的前端幼幼班課綱
「饅頭計畫第一代 — 從零開始茁壯吧」中的「前端幼幼班課程大綱」是長這個樣子，大約完成 70 %，有些是沒錄到，有些還在製作中。
- 網頁概念介紹 — 網頁到底是什麼？HTML / CSS / Javascript 是什麼？
- 開發工具介紹 — VS Code 加好用套件介紹，好摺凳不用嘛？
- HTML / CSS 基礎教學 — 製作你的第一個網頁。
- Git 基礎教學 — 上傳你的第一個網頁讓全世界都看的到。
- Command Line 基礎教學
- Bootstrap 基礎教學 — 自己刻太累了？使用現成元件來製作網頁看看。
- javascript 基礎教學 — 如果你是初心者的話，JS 是你的第一個程式語言。
- jQuery 基礎教學 — 用 jQuery 易用的特性來探索 JS 能做到哪些事情吧！
- Ajax 教學與實作 — 哪些功能需要用 ajax 才能實作出來 ？
- 基礎 Web 知識教學 — Cookie、Session 是什麼？
- 反覆琢磨、打造屬於你的前端作品集
教材說明
▍這是一份難度低，易上手，但是會帶給你一些世界觀的教材
因為來報名「饅頭計畫 — 從零開始茁壯吧」共有一百人。大約有 50% 以上是沒有完全沒有學習過程式，或是程式能力非常初階。因此我將教材設計的非常非常的入門。
我認為「新手最大的敵人」是「好不容易鼓起勇氣問了，卻被老江湖狠狠嘴了一翻，本來覺得有興趣也會有不好的回憶。」因此我盡量避免這個情況發生，新手友善的教材和環境是必要的。
▍這份教材記錄著我過去的學習路徑
第一件事情，這份教材記錄著我過去的學習路徑，也就是說「我真的是用這樣子的方式在學習」，並且用著教材中所述說的方式在思考問題。
在學習中我會不時帶到以前初學時學習技術的過程和使用了什麼方式來學習。舉個例子來說，當我學習 CSS 的時候，我接觸到了 CSS Dinner 這個開源專案，非常生動有趣。
此時我會讓你看看，我以前真的有用 CSS Dinner 練 CSS 並寫成技術筆記！然後跟你說一說，CSS 學習有哪些需要注意的地方。
換句話說，我以前怎麼入門 Web 前、後端，我認為學習的正確觀念，都濃縮到了這份教材之中。
▍寫這份教材的目的「不是」要讓你成為工程師
你可能覺得很疑惑，不是讓你成為工程師那還做這份教材幹嘛阿？
製作這份教材的目的，為的是「讓你嘗試看看，寫程式是什麼感覺」，如果你覺得不排斥，覺得有趣，那就繼續學下去吧！
我相信大家會覺得有趣的，因為「學程式就是在學習解決問題的方法」，能夠幫助別人解決問題，會得到回饋，會得到成就感，這個過程是大部分人會喜歡的。
當然也有可能會不喜歡，或是覺得不適合，在饅頭計畫第一代 100 人教學中，大概有 2~5 位左右的同學學一學發現自己不太合適，因此退出。我完全可以理解。不是每個人喜歡的東西都一樣。
還不確定自己是不適合的時候，先踏出第一步，嘗試看看，如果覺得不喜歡，儘早作出選擇。
這樣比一直猶豫不決，原地踏步好的太多。
很多教學「預設你就是要來學程式的人」，而我喜歡的作法是，你試試看寫程式對你來說有沒有意思，寫程式對你來說有沒有幫助，世界之所以有意思就是因為每個人想做的事情不一樣。
沒錯，我追求的是一個有意思的世界，所以我一邊複習我的前端基礎，一邊製作這份教材。希望這份教材可以幫助到你。
吉祥物 — 阿柴
正式開始介紹教材之前來介紹一下吉祥物— 阿柴。
因為教學如果直接教感覺太生硬了，HTML、CSS … 等等，有點太生硬。有一天靈機一動突然想出一個好方法~吉祥物！於是阿柴就誕生了。讓阿柴陪著大家一起學習吧！
正式開始介紹教材
0. 課程說明
0.1 課程介紹 課程目標與培養的能力(1)
0.2 課程介紹 課程目標與培養的能力(2)
1. 開發環境準備
1.1 開發環境的準備 一 介紹文字編輯器的演變過程 → 影片連結
1.2 開發環境的準備 介紹 VScode 與 Emmet → 影片連結
1.3 Chrome 開發者工具簡介 → 影片連結
1.4 筆記工具 Hackmd 介紹 → 影片連結
2. 認識網頁 — 什麼是 HTML？什麼是 CSS？
3. Command Line 新新手入門
3.1 為什麼要學習 Command Line + Mac 版操作
3.2 Command Line 新新手教學 Windows 環境架設
3.3 Command Line 常用指令介紹 (Command Line 101)
4. 用 10 個挑戰認識 Git
4.0 前言
4.1 Git 是什麼？ Git 如何幫助開發？
4.2 Git 挑戰 #1#2#3
4.3 git 挑戰 #4#5#6
4.4 #7 分支 Branch 基本操作，多個分支如何 Merge 與處理衝突Conflict
4.5 使用 Github Pages 上傳你的靜態網頁作品集
4.7 帶你認識很棒的 Git 資源，讓你遇到Git 狀況迎刃而解！
5. HTML — 網頁的骨幹
5.1 什麼是 HTML
5.2 建立你的第一個網頁
5.3 HTML 文件的架構
5.4 認識 HTML 元素
5.5 HTML 元素的結構
5.6 HTML 的絕對路徑與相對路徑
5.7 CSS 如何跟 HTML 搭配使用
5.8 在 HTML 中使用 javascript
5.9 Semantic 語意化
5.10 作業 Free Code Camp
6. CSS — 排版與美化網頁
從這邊開始因為我的教學方式改成直播上課，因此分段沒有那麼詳細，
學 CSS 配饅頭 Part 1
學 CSS 配饅頭 Part 2
7. Javascript — 賦予網頁生命力
學 JS 配饅頭 Part 1
學 JS 配饅頭 Part 2 — Event
學 JS 配饅頭 Part 3、Part 4 因為錄製失誤（沒錄到聲音），所以之後再重新錄製釋出，請追蹤 阿柴粉絲團 以獲得最新的資訊。
8. jQuery 即使它是個老古董，還是有過半的公司在使用
jQuery 的教學(1) 學 jQuery 配饅頭
jQuery 教學(2) 學 jQuery UI 配饅頭
寫到這篇發現文章太長了。自學教材的介紹就留到這個系列文的下一篇囉。
小結
以上就是我這半年來製作的教學。希望能夠幫助到你。接下來我繼續拍教學影片，並試著回答大家的問題，如果你有問題想問，可以透過 阿柴粉絲團 跟我聯絡，告訴我你想聽的主題，或是你想看的教學。
[2019/12/15 更新]
這篇將「饅頭計畫 1.0」做一個收尾，接著準備開始「饅頭計畫 2.0」的教學。饅頭計畫 2.0 由兩部分組成：
- 開放式教材 — 程式柴 FB 粉絲團
- 小班制教學 — 需要報名，短時間高強度。不同的是經過一年後我準備的充分的多。
當一些教學製作完成後，我會上傳到 程式柴的 Youtube 頻道。如果你喜歡看影片的學習方式，請訂閱 Youtube 頻道。
如果你喜歡我寫的文章，請按下追蹤，我會努力產出更多好文
如果你覺得這篇文章對你有幫助，請用拍手讓我知道，我會繼續努力 。
支持 = 10下
不錯 = 20下
可以 = 30下
很棒 = 40下
激推 = 50下小秘技：按著拍手可以連拍呦！！
感謝大家觀看到最後，附上 >>>饅頭計畫 MentoCamp <<< 的介紹頁面，如果你有興趣，歡迎報名或是加入等待清單。
