# ✅ 【共筆】《2022 網頁開發全攻略》共同學習時程 **URL:** https://vip.studycamp.tw/t/%E3%80%90%E5%85%B1%E7%AD%86%E3%80%91%E3%80%8A2022-%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC%E5%85%A8%E6%94%BB%E7%95%A5%E3%80%8B%E5%85%B1%E5%90%8C%E5%AD%B8%E7%BF%92%E6%99%82%E7%A8%8B/3750 **Category:** JavaScript **Tags:** 進度總表, 上課筆記 **Created:** [2022年五月25日 15:39 UTC](https://vip.studycamp.tw/t/%E3%80%90%E5%85%B1%E7%AD%86%E3%80%91%E3%80%8A2022-%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC%E5%85%A8%E6%94%BB%E7%95%A5%E3%80%8B%E5%85%B1%E5%90%8C%E5%AD%B8%E7%BF%92%E6%99%82%E7%A8%8B/3750 "2022-05-25T15:39:37Z") **Posts on this page:** 1 **Page:** 1
### Author: ![WIKI](https://vip.studycamp.tw/user_avatar/vip.studycamp.tw/wiki/32/6678_2.png) [@WIKI](https://vip.studycamp.tw/u/WIKI) #### Post date: [2022年五月25日 15:39 UTC](https://vip.studycamp.tw/t/%E3%80%90%E5%85%B1%E7%AD%86%E3%80%91%E3%80%8A2022-%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC%E5%85%A8%E6%94%BB%E7%95%A5%E3%80%8B%E5%85%B1%E5%90%8C%E5%AD%B8%E7%BF%92%E6%99%82%E7%A8%8B/3750/1 "2022-05-25T15:39:38Z")
本組預計 34 週完成（滾動式調整），[**進度參考**](https://docs.google.com/spreadsheets/d/1IPfpC-r1FX3Qm7gqAfKralmKPXDr_Fgv/edit?usp=sharing&ouid=110436154192830116040&rtpof=true&sd=true) ← 點擊開啟 google sheet（需複製到自己的 google drive 才能編輯）。 6 月 1 日起，每週三晚上 9:30 開始，[**Zoom meeting 連結**](https://us06web.zoom.us/j/86491678855?pwd=TkVtbGJRbGtoZFJOajVmbTBwUUhkdz09)，通常1小時以內討論完畢（時程可能變更，詳見 Discord 本組頻道）。 本文設為 WIKI 共筆，歡迎大家共同維護更新。 | 日期 | 章節 | 導讀人 | 筆記連結 | 錄影連結 | | --- | --- | --- | --- | --- | | 6/1 | Section 1 | Ang | [筆記](https://lemon-dolomite-062.notion.site/Section-1-fcda8f4758264a3f9d8088cc2c0216f0) | [YouTube](https://www.youtube.com/watch?v=k7kgewZITTs&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=1) | | | Section 2 | | [筆記](https://lemon-dolomite-062.notion.site/Section-2-0d9725d8e30d426ca2a226a4c598141a) | | | | Section 3 | | [筆記](https://lemon-dolomite-062.notion.site/Section-3-HTML-1-e5ef32fa8570413987b5304374a94120) | | | 6/8 | Section 4 | 小玉 | [筆記](https://clean-boursin-54e.notion.site/HTML2-78ab2059a6ef445dbe4d93f632b81965) | [YouTube](https://www.youtube.com/watch?v=nQ25kpgN5eA&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=2) | | 6/15 | Section 5 | Sky | [筆記] | [YouTube](https://www.youtube.com/watch?v=O7hcL5KzrHo&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=3&t=2550s) | | 6/22 | Section 6 | 小玉 | [筆記](https://clean-boursin-54e.notion.site/CCS-2-6f68f45276d3415889088e5d9366cf7a) | [YouTube](https://www.youtube.com/watch?v=xjdDC3HJVbw&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=4) | | 6/29 | Section 7 | 小玉 | [筆記](https://clean-boursin-54e.notion.site/CSS-3-ea06c81b8c884e9a8405349dfeb52816) | [YouTube](https://www.youtube.com/watch?v=F-2HJoBXfnM&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=5) | | 7/6 | Section 8 | Oliver | [筆記] | [YouTube](https://www.youtube.com/watch?v=uRd2qQ3me98&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=6) | | 7/20 | Section 9 | Sky | [筆記](https://vip.studycamp.tw/t/topic/4005) | [YouTube](https://www.youtube.com/watch?v=AejHPQyteSw&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=7) | | | Section 10 | Sky | [筆記](https://vip.studycamp.tw/t/topic/4007) | 同上 | | 7/27 | Section 11 | Ang | [筆記](https://lemon-dolomite-062.notion.site/Section-11-HTML-CSS-Part-II-3d88bf5c9a4c4af4817982cfa9ceeb51) | [YouTube](https://www.youtube.com/watch?v=GTpBn2IW40M&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=8) | | 8/3 | Section 12 | 小玉 | 以程式說明 | [YouTube](https://www.youtube.com/watch?v=xKvGqArwkQg&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=9) | | 8/10 | Section 13 | 小玉 | 以程式說明 | [YouTube](https://www.youtube.com/watch?v=hXJjmYiWOu8&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=10) | | | Section 14 | 小玉 | 以程式說明 | 同上 | | 8/17 | Section 15 | 小玉 | 以程式說明 | [YouTube](https://www.youtube.com/watch?v=XIUVsXy6eb0&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=11) | | 8/24 | Section 16 | Sky | [colab](https://colab.research.google.com/drive/1gF83yj9ukmREv8BOKtlKYFw0EufVxB0L?usp=sharing) | [YouTube](https://www.youtube.com/watch?v=IBdgTPAX8J4&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=12) | | 8/31 | Section 17 | Sky | [筆記](https://vip.studycamp.tw/t/topic/4370) | [YouTube](https://www.youtube.com/watch?v=ieP3LEucvbg&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=13) | | 9/7 | Section 17 | Sky | [ipynb] | [YouTube](https://www.youtube.com/watch?v=mgZrgZvdj0g&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=14) | | 9/14 | Section 18 | Sky | [ipynb] | [YouTube](https://www.youtube.com/watch?v=CKXA7xM6OQY&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=15) | | 9/21 | Section 19 | Ang | [筆記](https://lemon-dolomite-062.notion.site/Section-19-Document-Object-Model-7ad123211e7d4702842bd5c26cfa8850) | [YouTube](https://www.youtube.com/watch?v=n5Wh_g9DXss&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=16) | | | **9/24 ~ 10/9 暫停** | | | | | 10/12 | Section 19 | Ang | [筆記同上](https://lemon-dolomite-062.notion.site/Section-19-Document-Object-Model-7ad123211e7d4702842bd5c26cfa8850) | [YouTube](https://www.youtube.com/watch?v=H8ngG8Nt7Uw&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=17) | | 10/19 | Section 19 | Ang | [筆記同上](https://lemon-dolomite-062.notion.site/Section-19-Document-Object-Model-7ad123211e7d4702842bd5c26cfa8850) | [YouTube](https://www.youtube.com/watch?v=CDHTdqubZyM&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=18) | | 10/19 | Section 20（上） | 小玉 | 以程式說明 | 同上 | | 10/26 | Section 20（下） | 小玉 | 以程式說明 | [YouTube](https://www.youtube.com/watch?v=CKlIe2NUknY&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=19) | | 11/2 | Section 22（上） | 小玉 | [筆記] | [YouTube](https://www.youtube.com/watch?v=_Cq2lOp-8jg&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=20) | | 11/9 | Section 22（下） | 小玉 | [筆記] | [YouTube](https://www.youtube.com/watch?v=iYLJjhaQitQ&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=21) | | 11/9 | Section 23 | Oliver | [筆記] | 同上 | | 11/16 | Section 24 | Oliver | [筆記] | [YouTube](https://www.youtube.com/watch?v=k35Qp7MY6V8&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=22) | | 11/23 | Section 25 | Sky | [筆記](https://vip.studycamp.tw/t/topic/5110) | [YouTube](https://www.youtube.com/watch?v=bKsl1Jcquxc&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=23) | | 11/30 | Section 26 | Anna | [筆記](https://well-dodo-4f2.notion.site/Section-26-6b8a4af8962541bb8cf079e87122898e) | [YouTube](https://www.youtube.com/watch?v=F1D251xEAx0&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=24) | | 12/7 | Section 27 | Anna | [筆記](https://well-dodo-4f2.notion.site/Section-27-1c32915bf7d540989d98b7d03a58dd8a) | [YouTube](https://www.youtube.com/watch?v=BaIFc7JHKa0&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=25&t=6s) | | | Section 28 | Ang | [筆記](https://lemon-dolomite-062.notion.site/Section-28-Embedded-JavaScript-Templating-EJS-a5cd592b53174d7b96f2253205c76126) | 同上 | | 12/14 | Section 29 | Ang | [筆記](https://lemon-dolomite-062.notion.site/Section-29-SQL-Database-76d531ecf8ab493bb82a57d01d5f19f9) | [YouTube](https://www.youtube.com/watch?v=ieZz2tnDbik&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=26) | | | Section 30 | 小玉 | [筆記](https://truthful-chokeberry-6f6.notion.site/MongoDB-2888983e141c44d0b3274b078dff09f3) | 同上 | | 12/21 | Section 31 | 小玉 | [筆記] | [YouTube](https://www.youtube.com/watch?v=hczkLU9RZy0&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=27) | | 12/28 | Section 32 | Oliver | [筆記] | [YouTube](https://www.youtube.com/watch?v=GwBgJn48Qrw&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=28) | | 1/4 | Section 33 | 小玉 | [筆記] | [YouTube](https://www.youtube.com/watch?v=riVr1di9WdU&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=29) | | 1/11 | Section 34 | 小玉 | [筆記] | [YouTube](https://www.youtube.com/watch?v=TR5pPGZGz4o&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=30) | | 2/1 | Section 35 | Anna | [筆記](https://well-dodo-4f2.notion.site/Section-35-86585a311e6144fb9851c50a7997e0f9) | [YouTube](https://www.youtube.com/watch?v=DwTepD4o8eE&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=31) | | 2/8 | Section 36 | Ang | [筆記](https://lemon-dolomite-062.notion.site/Section-36-Authentication-a2229cef2aca4eddb982cb740d8c316c) | [YouTube](https://www.youtube.com/watch?v=tvoleij9ETQ&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=32) | | 2/15 | Section 37 | Oliver | [筆記] | [YouTube](https://www.youtube.com/watch?v=6iAxN21xBfU&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=33) | | 2/22 | Section 38 | 小玉 | [筆記](https://www.notion.so/react-b390370765f94669a562d45980de5378?pvs=4) | [YouTube](https://www.youtube.com/watch?v=XAh0sr-t0mo&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=34) | | 3/8 | Section 39 | Ang | [筆記] | [YouTube](https://www.youtube.com/watch?v=j7Ssy47m3gE&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=35) | | 3/15 | Section 40 | Anna | [筆記] | [YouTube](https://www.youtube.com/watch?v=Z6Cm9BnspXs&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=36) | | 3/29 | Section 41（上） | 小玉、Ang | [筆記] | [YouTube](https://www.youtube.com/watch?v=LGtdFVNWrb4&list=PLxHlVV5gCbcNy-1qt3YG7jXD3E3B1wxRx&index=37) | | 3/29 | Section 41 | | [筆記] | [YouTube] | | - | Section 42 | | - | - | 內容視進行狀況彈性調整。 * * * ## 各章內容 Section 1: 課程準備 Section 2: 網路基本原理 Section 3: HTML - 1 Section 4: HTML - 2 Section 5: CSS - 1 Section 6: CSS - 2 Section 7: CSS - 3 Section 8: 進階 HTML、CSS(Flexbox 解說) Section 9: Project1 - 台灣經濟歷史發展 Section 10: Responsive Web Design Section 11: 進階 HTML、CSS(Part II) Section 12: Project2 - 夏威夷租借服務網頁 Section 13: 進階 HTML、CSS(Part III) Section 14: Project3 - Portfolio Project Section 15: Optimization and Deployment Section 16: JavaScript Basics - 1 Section 17: JavaScript Basics - 2 Section 18: JavaScript Practices Section 19: Document Object Model Section 20: Project4 - Todo List Section 21: Survey Section 22: Advanced JavaScript 1 Section 23: Advanced JavaScript 2 - Objects and OOP Section 24: Advanced JavaScript 3 Section 25: Unix Command, Git and GitHub Section 26: Node.js Section 27: Express.js Section 28: Embedded JavaScript Templating(EJS) Section 29: SQL Database Section 30: MongoDB Section 31: Mongoose Section 32: Advanced JavaScript 4 - Ajax and APIs Section 33: Express and Mongoose: Everything Together Section 34: RESTful API Section 35: Middlewares, Error Handling, Cookies, Sessions Section 36: Authentication Section 37: Project5 - MongoDB Atlas,Passport.js,OAuth(Google Login) Section 38: React Section 39: Project6 - Photo Website Section 40: MERN Project7 - Server with Json Web Token Section 41: MERN Project7 - React Front End Section 42: 恭喜完成 63 小時所有課程 !!