---
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)