[分享] 饅頭計畫免費教學教材釋出-前端幼幼班

[BignoZe (BignoZe)]

圖文好讀版：https://medium.com/@LukaTW/c1db906a3110

Hi, 大家好 這是我半年來製作的教材，全數放在 Youtube 上面

## 教材說明

## 這是一份難度低，易上手，但是會帶給你一些世界觀的教材

因為來報名「饅頭計畫  -  從零開始茁壯吧」共有一百人。大約有 50% 以上
是沒有完全沒有學習過程式，或是程式能力非常初階。因此我將教材設計的非
常非常的入門。

我認為「新手最大的敵人」是「好不容易鼓起勇氣問了，卻被老江湖狠狠嘴了
一翻，本來覺得有興趣也會有不好的回憶。」因此我盡量避免這個情況發生，
新手友善的教材和環境是必要的。

## 這份教材記錄著我過去的學習路徑

第一件事情，這份教材記錄著我過去的學習路徑，也就是說「我真的是用這樣
子的方式在學習」，並且用著教材中所述說的方式在思考問題。

在學習中我會不時帶到以前初學時學習技術的過程和使用了什麼方式來學習。舉
個例子來說，當我學習 CSS 的時候，我接觸到了 CSS Dinner 這個開源專案，
非常生動有趣。

CSS Diner https://flukeout.github.io/

此時我會讓你看看，我以前真的有用 CSS Dinner 練 CSS 並寫成技術筆記！
然後跟你說一說，CSS 學習有哪些需要注意的地方。

我幾年前的技術筆記 https://codingluka.com/front-end/css-dinner/

換句話說，我以前怎麼入門 Web 前、後端，我認為學習的正確觀念，都濃縮到
了這份教材之中。

## 寫這份教材的目的「不是」要讓你成為工程師

你可能覺得很疑惑，不是讓你成為工程師那還做這份教材幹嘛阿？

製作這份教材的目的，為的是「讓你嘗試看看，寫程式是什麼感覺」，如果你覺
得不排斥，覺得有趣，那就繼續學下去吧！

我相信大家會覺得有趣的，因為「學程式就是在學習解決問題的方法」，能夠幫
助別人解決問題，會得到回饋，會得到成就感，這個過程是大部分人會喜歡的。

當然也有可能會不喜歡，或是覺得不適合，在饅頭計畫第一代 100 人教學中，大
概有 5 位左右的同學學一學發現自己不太合適，因此退出。我完全可以理解。不
是每個人喜歡的東西都一樣。

還不確定自己是不適合的時候，先踏出第一步，嘗試看看，如果覺得不喜歡，儘
早作出選擇。這樣比一直猶豫不決，原地踏步好的太多。

很多教學「預設你就是要來學程式的人」，而我喜歡的作法是，你試試看寫程式
對你來說有沒有意思，寫程式對你來說有沒有幫助，世界之所以有意思就是因為
每個人想做的事情不一樣。

## 教學大綱與影片

詳細大綱請點進去原文內觀看，這邊列出影片連結

0.1 課程介紹 課程目標與培養的能力
http://bit.ly/2mugJk0
0.2 課程介紹 課程目標與培養的能力
http://bit.ly/2CEwCcN
1.1 開發環境的準備 一 介紹文字編輯器，與發展的歷史
http://bit.ly/2Omd1mg
1.2 開發環境的準備 介紹 Vscode 與 Emmet
http://bit.ly/2Ttt8Q
1.3 Chrome 開發者工具簡介
http://bit.ly/2V0beFS
1.4 筆記工具 Hackmd 介紹
http://bit.ly/2umQo8e
2. 認識網頁  -  什麼是 HTML？什麼是  CSS？
http://bit.ly/2Fwf4BC
3.1 Command Line 新新手入門 為什麼要學習 Command Line + Mac 版操作
https://youtu.be/VIeim7f8rUE
3.2 Command Line 新新手教學 Windows 環境架設
https://www.youtube.com/watch?v=VHxTh5zX1Z4
3.3 Command Line 常用指令介紹 (Command Line 101)
https://www.youtube.com/watch?v=I6wvQhuxjEY
4.0 前言  .mp4
https://youtu.be/fkXUi7HmX1Y
4.1 Git 是什麼？ Git 如何幫助開發？
https://youtu.be/4p1YxdVJTV4
4.2 Git 挑戰 #1#2#3
https://youtu.be/yxmfoBdwUHY
4.3 git 挑戰 #4#5#6
https://youtu.be/7ulpVsxiQ_0
4.4 #7 分支 Branch 基本操作，多個分支如何 Merge 與處理衝突Conflict
https://youtu.be/2_PUPkMneg0
4.5 使用 Github Pages 上傳你的靜態網頁作品集
https://youtu.be/Rg4_ajE-KPA
4.7 帶你認識很棒的 Git 資源，讓你遇到Git 狀況迎刃而解！
https://youtu.be/ZANOvogIhUM
5.1 什麼是 HTML
https://youtu.be/PMmKoVaZDko
5.2 建立你的第一個網頁
https://youtu.be/90pMvFTkywE
5.3 HTML 文件的架構
https://youtu.be/fptJ7Q2Gqck
5.4 認識 HTML 元素
https://youtu.be/CAve4ABiSqE
5.5 HTML 元素的結構
https://youtu.be/5TGDlMLqnpg
5.6 HTML 的絕對路徑與相對路徑
https://youtu.be/Lqi0NkXW64Q
5.7 CSS 如何跟 HTML 搭配使用
https://youtu.be/BSW_nT_0wQU
5.8 在 HTML 中使用 javascript
https://youtu.be/UB-vmO-YerA
5.9 Semantic 語意化
https://youtu.be/Fo2r_GUFKLw
5.10 作業 Free Code Camp
https://youtu.be/mPpSkctLCCQ
6.1 學 CSS 配饅頭 part 1
http://bit.ly/2ku1IOx
6.2 學 CSS 配饅頭 Part 2
http://bit.ly/2m3Pexp
7.1 學 JS 配饅頭 Part 1
http://bit.ly/2krSXV2
7.2 學 JS 配饅頭 Part 2 - Event
http://bit.ly/2mt9zfR
8.1 jQuery 的教學(1) 學 jQuery 配饅頭
http://bit.ly/2kZDNqr
8.2 jQuery 的教學(2) 學 jQuery UI 配饅頭
http://bit.ly/2muaFbf

這次就簡單的分享製作的教材，希望對大家有幫助^^

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.228.21.211 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1569154600.A.D3B.html
推 zoeliao: 謝謝分享：）
推 sky094315: 感謝分享
推 jt912129: 推
推 richuncle97: 推
推 LMGG: 這篇文值得m
推 fj520: 推
→ max80713: 先學git和command line對新手不會太枯燥嗎
有複雜度的我會選擇先教，先學 HTML CSS JS 之後要進入 Command Line
和 Git 會覺得頭很暈，要適應很久，這是我的學習習慣，較複雜的會先處理
推 kyrie77: 推
推 a25ptt: 推一個，謝謝分享
推 eric96068: 推
推 kingofage111: 推
推 ekin1983: 推 謝謝分享
推 aaa12478: 推
推 Fred2949: 推
推 albert1998: 推
推 CGSBN: 非常感恩
推 ourear: 推
推 lairrol: 有分享有推~幫助新人跨過第一道門檻真的要很有耐心
推 iamyiz: 推 謝分享
推 phxww: 推！
推 revolt125: 推！
推 kotorichan: 推
推 a9261020: 推個
推 magus: 推
推 alansyue: 推
推 GoodFriday: 推
推 liuderchi: 推分享
推 love00077: 推一個
推 lattcwas: 感謝大推
推 okaybeok: 推
推 capricorn18: 謝謝分享
推 saivantist: 推用心
推 neo5277: 推推
推 sungino: 推
推 a2768387: 推
推 nick03008: 大推，真的很棒
推 AibaAsagi: 是不是少放4.6
補上 4.6 Git 教學 什麼是 PR？ 來發送你的第一個 PR 吧
https://www.youtube.com/watch?v=O8QtTSQbVvc
另外補上 git 系列詳細操作小抄，目前只有這個系列有操作小抄
https://github.com/codingluka/Git-Tutorial
因為製作成本太高，後來就走隨性路線 XD
推 Swartz: 推熱血創作
推 tina7996: 推，謝謝分享
推 matakurumi: 推，感謝分享！
推 kokdog1204: 推
推 Han1014: 推，謝謝分享！
推 vmjoxjp: 謝謝分享！
推 tengentoppa: 推
推 billy8407: 佛
推 poem5566: 推
推 Samuellu: 推一個
推 eiugene: 推～
※ 編輯: BignoZe (118.165.14.46 臺灣), 10/03/2019 02:30:51
推 Pulipuly: 推
推 PttZF: 感謝分享
推 onegoman: 推
推 asdkmm5050: 謝謝分享
推 chris13210: 推，謝謝分享
推 frank0771: 推 謝謝分享
推 windker: 推，謝謝分享
推 xbboxleon: 推推 真的是好心人