--- title: 網頁前端知識樹 tags: 書本, 共筆, 研究, 網頁組 GA: UA-54884750-6 --- <!-- Tag 規範：https://hackmd.io/@cmrdb/tags --> # 網頁前端知識樹 :::spoiler [TOC] ::: ## 1111 教學簡報 :::spoiler [第一週：HTML 介紹](https://drive.google.com/file/d/1s9W_ket4ZC8kZanPr5bHchr7rjt1r2DF/view) [第二週：CSS 課表美化、個人網站製作](https://drive.google.com/file/d/1ktqy6hXWeSp--LpuS4u3bDtogH6KGATv/view) [第三週：Bootstrap 5](https://drive.google.com/file/d/1_frKZ381yu0ypJx_V7NFCt3kzoJhbWsY/view) [第四週：JavaScript & jQuery](https://drive.google.com/file/d/1AUl9JPySYvIR8Vs9mENXrVvBrvaKvU_s/view) [第五週：剪刀石頭布](https://drive.google.com/file/d/1cGRHww1_IGhPg16MdP8qFsZHcjE2GX2l/view) [第六週：JSON 介紹](https://drive.google.com/file/d/16kfV8NUixUHtkgm5ZEPVy41veBLp7KHI/view) [第七週: AJAX](https://drive.google.com/drive/u/0/folders/1jv7R__I-aJFfZVwrcquFqJRJNk1Ve96Z) [第八週: API](https://drive.google.com/file/d/1ZcLVWEFxiqwXJFKPZJbLQVXsQ60d-UQC/view) ::: ## 112 學期 [112-1全端網頁行事曆 ](https://hackmd.io/QPoZMZD9SCGhVCOmWMVSjA?both) ## Roadmap （學習路線） - [kamranahmedse/developer-roadmap](https://github.com/kamranahmedse/developer-roadmap) - [Frontend Developer](https://roadmap.sh/frontend?mibextid=Zxz2cZ) ## 練習題目參考 - [app-ideas](https://github.com/florinpop17/app-ideas) - [100-days-100-projects](https://www.florin-pop.com/blog/2019/09/100-days-100-projects/) # 入門 ## 本節目標 - 了解如何使用 VSCode 做為開發工具 - 了解簡易的前端網頁如何撰寫 ## 環境建置 (開發的第一步) ### 手牽手一起來實作 - [網頁組環境架設簡報](https://docs.google.com/presentation/d/1JoskT1_aVeRPvqDu6wkw7JpOOzkd1XMF7Fb6CwRFjWw/edit?usp=sharing) - 包含各種編輯器 - 建置 VSCode 的編輯環境 ### 延伸閱讀 #### VSCode 插件 - [VS Code Extensions you absolutely need in 2021(Adrian Twarog) - youtube](https://www.youtube.com/watch?v=qWNj3tfVjWI) ## HTML ### 手牽手一起來實作 - [網頁組教學簡報](https://docs.google.com/presentation/d/116l95PTWy8q1syQhHanaIX4wGSupWGejoh-CqD4kejo/edit?usp=sharing) - [HTML 語法教學，快速攻略網頁 HTML 標籤的基本元素](https://tw.alphacamp.co/blog/html-guide) （從0開始的好文章） - [【html】1小時初學者教學(GrandmaCan -我阿嬤都會) - youtube](https://www.youtube.com/watch?v=CLUPkcLQm64) - [HTML 全基本(Proladon) - youtube](https://www.youtube.com/watch?v=0opZbh15rDI) ### 參考資料 - [HTML 介紹 - MDN](https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML) ## CSS ### 手牽手一起來實作 - [網頁組教學簡報](https://docs.google.com/presentation/d/1PL-ZZ1Kk5x4l6l2d5jyqxpzgI5WHL7NenVoT8dbhhcQ/edit?usp=sharing) - [【css】2小時初學者教學(GrandmaCan -我阿嬤都會) - youtube](https://www.youtube.com/watch?v=Ml78vnNTBLw) - [金魚都能懂的CSS](https://ithelp.ithome.com.tw/users/20112550/ironman/3803)(詳細且實用 Yt搜尋關鍵字也有影片教學) ### 參考資料 - [CSS 基本 - MDN](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics) - [CSS](https://www.w3schools.com/css/)(有很多css的使用方法) ## JavaScript ### 手牽手一起來實作 - [網頁組教學簡報](https://docs.google.com/presentation/d/1mapPJPaK9ITkYkP0gv520cjGOCznPgxVSWwY3fHk19M/edit?usp=sharing) - [Javascript 30](https://javascript30.com/) - [30-seconds/30-seconds-of-code](https://github.com/30-seconds/30-seconds-of-code) - [Javascript](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript)(從入門開始介紹，也有提供範例) - [Javascript 語法](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types)(有一些基礎的語法方便學習) ### 參考資料 - [JavaScript Tutorial - w3schools](https://www.w3schools.com/js/default.asp) - [JQuery Datatable](https://www.datatables.net/)(datatable的官網，會提供範例，也有每個語法用途介紹) - [留言板教學簡報](https://docs.google.com/presentation/d/176WBFKTjrw-QS1jxUCYdcQFPUN-SmPpW/edit#slide=id.p1) # 基礎 ## 本節目標 - 學會套用簡易的 UI 函式庫 ## UI 函式庫 - [Bootstrap](https://getbootstrap.com/) - [金魚都能懂的Bootstrap](https://www.youtube.com/watch?v=YX6KZIcUeY8&list=PLqivELodHt3jq3oWBZfdhMu0GE7774HBW&ab_channel=CSScoke) - [Bootstrap 模板](https://startbootstrap.com/templates)(有範例可以比較方便學習與套用修改) - [Semantic UI](https://semantic-ui.com/) - [網頁組教學簡報](https://docs.google.com/presentation/d/1GHJ6yAnsIsDtK5zdMxjA15odQGEa-M_0daaGRn5hQnM/edit?usp=sharing) # 進階 ## 本節目標 - 學會使用前端框架 - 學會遵循 Coding Style 來撰寫程式碼 ## 框架 - [**Vue.js**](https://vuejs.org/) - 最輕量的前端框架，只包含需要的核心功能，不包山包海。 - 適合只要撰寫一個頁面的簡單網頁。 - [**React**](https://reactjs.org/) - [**Angular**](https://angular.io/) - 包山包海，該有的都有。 - [**Nuxt.js**](https://nuxtjs.org/) - Vue.js 的延伸框架，整合了 vue-router、vuex 等等功能。 - 若要使用 Vue 開發多頁面絕對不可或缺。 ## UI 函式庫 - [**Tailwind**](https://tailwindcss.com/) - 非常靈活的 UI 函式庫，只要透過調整 class 就可以做出各種樣式。 - [**Material UI**](https://material-ui.com/) - [**Vuetify.js**](https://vuetifyjs.com/) - 只適用於 Vue。 - 除了介面之外，在功能上也一應具全，不需要自己撰寫很多邏輯。 ## webpack - [**webpack**](https://webpack.js.org/) - [1. Webpack 初學者教學課程Part1](https://neighborhood999.github.io/webpack-tutorial-gitbook/Part1/) - [Webpack教學 (一) ：什麼是Webpack? 能吃嗎？](https://medium.com/i-am-mike/%E4%BB%80%E9%BA%BC%E6%98%AFwebpack-%E4%BD%A0%E9%9C%80%E8%A6%81webpack%E5%97%8E-2d8f9658241d) - [webpack 新手教學之淺談模組化與 snowpack](https://blog.huli.tw/2020/01/21/webpack-newbie-tutorial/) ## JavaScript Coding Style - [**Google** JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html) - [**Airbnb** JavaScript Style Guide](https://github.com/airbnb/javascript) --- # 其他參考 ## UI 設計 - [**Adobe XD**](https://www.adobe.com/tw/products/xd.html) - [Get Started](https://www.adobe.com/tw/products/xd/learn/get-started.html) - [**Figma**](https://www.figma.com/) ## 版本控制 - [**Git**](https://git-scm.com/) - [Git與GitHub介紹，軟體版本控制基本教學](https://tw.alphacamp.co/blog/git-github-version-control-guide) - [Git-Tutorials 基本使用教學](https://github.com/twtrubiks/Git-Tutorials) - [**GitHub**](https://github.com/) - [Searching on GitHub](https://docs.github.com/en/github/searching-for-information-on-github/searching-on-github) - [github 專案搜尋技巧-讓你更高效精準地搜尋專案](https://www.gushiciku.cn/pl/p8Vr/zh-tw) ## Node.js - [**Node.js**](https://nodejs.org/en/) - [Node.js 是什麼？NPM又是什麼？為什麼前端與後端都需要用它們呢？](https://progressbar.tw/posts/291) ## Vite - [**Vite**](https://vitejs.dev/) ## Docker - [Docker 教程｜菜鳥教程](https://www.runoob.com/docker/docker-tutorial.html) - [Docker 學習筆記](https://medium.com/%E4%B8%80%E5%80%8B%E5%B0%8F%E5%B0%8F%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E9%9A%A8%E6%89%8B%E7%AD%86%E8%A8%98/docker-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-%E4%B8%80-docker-%E7%B0%A1%E4%BB%8B-8af404cb5b98)