├── .babelrc ├── .gitignore ├── .travis.yml ├── README.md ├── codewar.md ├── homeworks ├── week1 │ ├── README.md │ ├── hw1.js │ ├── hw2.js │ ├── hw3.js │ ├── hw4.js │ ├── hw5.js │ └── hw6.md ├── week10 │ ├── README.md │ ├── hw1 │ │ └── index.html │ ├── hw2 │ │ └── index.html │ ├── hw3 │ │ └── index.html │ └── hw4.md ├── week11 │ ├── README.md │ ├── hw1 │ │ └── index.html │ ├── hw2 │ │ └── index.html │ └── hw3.md ├── week12 │ ├── README.md │ ├── blog.png │ ├── hw1 │ │ └── index.html │ ├── hw2 │ │ └── index.html │ ├── hw3 │ │ └── index.html │ └── hw4.md ├── week13 │ ├── README.md │ ├── hw1 │ │ └── index.html │ └── hw2.md ├── week14 │ ├── README.md │ ├── hw1 │ │ └── index.html │ └── hw2.md ├── week15 │ ├── README.md │ └── hw1 │ │ └── index.html ├── week2 │ ├── README.md │ ├── hw1.js │ ├── hw1.test.js │ ├── hw2.js │ ├── hw2.test.js │ ├── hw3.js │ ├── hw3.test.js │ ├── hw4.js │ ├── hw4.test.js │ ├── hw5.js │ ├── hw5.test.js │ └── hw6.md ├── week3 │ ├── README.md │ ├── example.png │ ├── example2.png │ ├── hw1 │ │ └── index.html │ ├── hw2 │ │ └── index.html │ └── hw6.md ├── week4 │ ├── README.md │ ├── calculator.png │ ├── form.png │ ├── hw1 │ │ └── index.html │ ├── hw2 │ │ └── index.html │ ├── hw3 │ │ └── index.html │ ├── hw4 │ │ └── index.html │ └── twitch.png ├── week5 │ ├── README.md │ ├── board.png │ ├── board2.png │ ├── hw1.md │ ├── hw2 │ │ └── index.html │ └── hw4.md ├── week6 │ ├── README.md │ ├── hw1 │ │ └── index.html │ ├── hw2 │ │ └── index.html │ ├── hw3 │ │ └── index.html │ ├── hw4 │ │ └── index.html │ └── hw5.md ├── week7 │ ├── README.md │ ├── hw1 │ │ └── index.html │ ├── hw2 │ │ └── index.html │ ├── hw3 │ │ └── index.html │ ├── hw4.md │ └── todo.png ├── week8 │ ├── README.md │ ├── hw3 │ │ └── index.html │ └── hw4.md └── week9 │ ├── README.md │ ├── hw1 │ └── index.html │ ├── hw2 │ └── index.html │ └── hw5.md ├── package.json └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "node" 4 | cache: yarn 5 | before_script: 6 | - wget $TESTCASE_URL 7 | notifications: 8 | email: false 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 程式導師實驗計畫第二期 2 | 3 | ## 這是什麼 4 | 5 | [程式導師實驗計畫第二期](https://medium.com/hulis-blog/mentor-program-s2-f876c4e13d3b)是一個為期四個月的計畫,要求學生全程參與(每週至少付出四十小時),希望能在結業時培養出合格的(意思就是找得到工作)的工程師。 6 | 7 | ## 課程目標 8 | 9 | ### 綜合能力 10 | 1. 具有找資料的能力,能夠知道如何找到相關資訊 11 | 2. 具有分析問題的能力,能夠快速定位問題 12 | 3. 知道如何解決問題,包括但不限於拆解問題、簡化問題、轉化問題 13 | 4. 解決問題後能夠重新歸納並整理 14 | 15 | ### 工具能力 16 | 17 | 1. 後端:知道後端原理,知道什麼是資料庫、server,可以寫出簡單的網站並且自己部署 18 | 2. 前端:知道前端原理,HTML、CSS、JavaScript,知道 Ajax 以及如何與後端串接 19 | 3. 資安:基本資安概念,SQL Injection、XSS、CSRF 20 | 21 | ## 課程規則 22 | 23 | 1.根據課程規則,必須要報告每日進度,其實主要不是給我看的,是給你們自己看的,可以順便整理一下自己昨天學過哪些東西以及今天預計要學哪些東西,詳細規則請參考:[程式導師實驗計畫第二期每日任務](https://github.com/Lidemy/mentor-daily-report)。 24 | 25 | 2.有任何意見回饋或是課程相關問題,都可以直接私訊導師(@huli)討論,但比較建議的方法是去[ Lidemy 討論區](https://github.com/Lidemy/forum)開一個 Issue 來問。 26 | 27 | 3.請在 GitHub 開一個 repository,把 Issue 頁面當作 blog 紀錄心得,順便練習 Markdown 語法,可參考[簡單範例](https://github.com/Lidemy/blog-example)或是[第一期學生的心得記錄](https://github.com/Lidemy/mentor-program-xu3cl40122/issues)。 28 | 29 | 30 | ## 課程進行方式 31 | 32 | 每週一、四晚上九點進行直播教學,其餘時間可利用 slack 群組隨時發問。每次教學時間約為一小時至兩小時。 33 | 34 | 週一上半場會講解上週的作業以及幫上週做個總結,下半場會把這週的課程內容大概講過一遍,而學生利用週二以及週三自學並且嘗試練習題目。 35 | 36 | 週四會總結大家這兩天以來的問題一併回答,並且重新把課程內容再講過一遍(或是補完週一上不完的)。 37 | 38 | ## 課程大綱 39 | 40 | 從 2018/09/03 至 2019/01/14 ,為期四個月的課程,一共約十九週。每週的開始為禮拜一,結束為禮拜日。 41 | 42 | ### 第一週(09/03 ~ 09/09):程式基礎(上) 43 | 44 | 大致介紹整個計畫以及帶學生看過一次課程大綱,接著說明整體架構,介紹各種不同工程師職位所負責的工作內容並著重在網頁工程師的介紹。 45 | 46 | Mindset 建立: 47 | 48 | 1. 不要害怕問問題,每個問題都值得被提出來,你的問題可能也是其他人的問題 49 | 2. 問問題前應該要自己查詢資料(有些很難查的直接問也可以) 50 | 3. 你有老師讓你盡量問,反正問就對了,有錯的話我會提醒你 51 | 4. 重點是「目的」,而不是「手段」,持續問為什麼為什麼為什麼為什麼 52 | 53 | 建置基礎環境,例如說 command line tool、Git 以及 Node.js。 54 | 55 | 複習程式基礎,像是變數、陣列、迴圈、判斷式以及函式(以 ES5 為例)。 56 | 57 | 學會如何交作業。 58 | 59 | [HW1 作業連結](/homeworks/week1) 60 | 61 | #### 目標: 62 | 63 | - [ ] 知道程式如何執行 64 | - [ ] 了解寫程式的本質只是一行行的指令 65 | - [ ] 了解前端與後端的區別 66 | - [ ] 能說出從發出一個 request 到接收 response 中間發生的事 67 | - [ ] 了解不同載具的差異(Desktop、Mobile、Web) 68 | - [ ] 了解基本的 command line 指令 69 | - [ ] 知道 Git 在做什麼 70 | - [ ] 知道 add、commit、push、pull 等基本 Git 指令 71 | 72 | ### 第二週(09/10 ~ 09/16):程式基礎(下) 73 | 74 | 根據上一期的經驗,在一開始的程式基礎培養一週是不夠的,所以這一期特地多留了一週來加強程式基礎。在這一週裡面我們會延伸上一週的內容,並且多講一些有關於 ES6 的語法。 75 | 76 | 介紹常用內建函式如 replace、indexOf、split、map、filter、join、parseInt 以及 Math 等等。 77 | 78 | 也會教大家寫簡單的 unit test,並且自己寫 test case 檢驗自己的函式。 79 | 80 | [HW2 作業連結](/homeworks/week2) 81 | 82 | #### 目標: 83 | 84 | - [ ] 了解常用內建函式 85 | - [ ] 熟悉程式語法並解決基礎問題 86 | - [ ] 知道什麼是 unit test 87 | - [ ] 知道如何寫測試 88 | - [ ] 知道如何測試 function 89 | 90 | ### 第三週(09/17 ~ 09/23):前端基礎(上) 91 | 92 | 本週將會正式進入到前端課程的領域,開始用 HTML 與 CSS 打造出基本的網頁,並且利用 media query 實現簡單的 RWD(Responsive Web Design)。 93 | 94 | HTML 的部分就簡單帶過幾個常見的 tag,帶到 head 的一些屬性跟設定,也會講到跟 SEO 有關的一些 tag(title, description, json ld...)。 95 | 96 | 主要會著重在 CSS 的部分,並且讓大家多多練習。 97 | 98 | 也可以先看一下這兩篇文章(很多地方你會看不懂,但沒關係)先培養一下對前端的感覺,等幾週過後當我們學得越來越多,再看一次會有完全不同的感受:[零基礎的小明要如何成為前端工程師?](https://medium.com/hulis-blog/frontend-engineer-guide-297821512f4e)、[跟著小明一起搞懂技術名詞:MVC、SPA 與 SSR](https://medium.com/@hulitw/introduction-mvc-spa-and-ssr-545c941669e9) 99 | 100 | [HW3 作業連結](/homeworks/week3) 101 | 102 | #### 目標: 103 | 104 | - [ ] 知道 HTML 是什麼 105 | - [ ] 知道 CSS 是什麼 106 | - [ ] 知道 inline、block 跟 inline-block 的區別 107 | - [ ] 知道什麼是 box model 108 | - [ ] 知道 position 的所有屬性及其差別 109 | - [ ] 知道 :hover, :before, :after 110 | - [ ] 知道 :nth-child 111 | - [ ] 熟悉 CSS selector 112 | 113 | ### 第四週(09/24 ~ 09/30):前端基礎(中) 114 | 115 | 這一週將會進入到 JavaScript,讓網頁變得有互動性,並結合 `