---
tags: teach
---

# ~~滑水~~教學計畫

# 目錄
- Codesandbox
- html, css
- Javascript(包含基礎API)
- 變數
- 閉包
- 運算子
- 函式
- 迴圈
- ECMAScript 6新語法
- Syntactically Awesome Style Sheets(SASS)
- Node Package Manager(NPM)

# 教學架構

1. 簡介
2. 示範
3. 回家自習
<!-- 因為他們想要有"成果"，所以是不是不用驗收而是最後有做就好? -->
<!-- 是，但要能保證一定能做出來 -->
<!-- 如果不習慣分段打那可能連==都會打成=，它們可能會一直有這種問題 -->
4. 驗收

以導覽列為例
1. 簡介
目的是為使網頁的導覽列黏在頁頂
2. 示範
示範position: sticky
4. 回家自習
回家了解position 的其他value
6. 驗收

# 時間規劃

堂數|內容
-|-
2|HTML
2|CSS
5|JS
1|SASS(補充)
1|NPM(補充)

保留1堂緩衝

# 課程規劃

> 🚀=完成 🚧=還在寫 ❌=還沒做

<!-- (html+body+head+meta+title++h1~6+p+pre+hr+br+style text系列+list系列+table系列) -->

堂次|類別|內容|講義
:-:|:-:|-|:-:
1|HTML|自我介紹>>工具介紹（codesandbox)>>xml概述>>html教學 |[🚀](//slides.com/easonqq0000/intro)
2|HTML|form系列+多媒體系列+span+div+(script+style+link 帶過)+event-attr+註解|[🚀](//mdtech.netlify.app/web/2)
3|CSS|基礎語法+常見css屬性|[🚀](//slides.com/easonqq0000/3)
4|CSS|flex box+偽類&偽元素+漸變+動畫|[🚀](//slides.com/easonqq0000/4)
5|JS|簡介+基礎語法|[🚀](//slides.com/easonqq0000/javascript-short-intro)
6|JS|DOM api|[🚀](//hackmd.io/@kaiyohugo/jsdom)
7|JS|進階語法|[🚀](https://hackmd.io/@mdcpp/rytR7YAPt#/)
8|JS|es6語法|[🚀](https://hackmd.io/@mdcpp/SykGvFQcF#/)
9|JS|實作，用js做自己的計算機|❌
10|NPM|Node Package Manager|[🚧](https://hackmd.io/@mdcpp/r1PjEJmiK#/)
11|SASS|selector+parent selector+變數+運算元+extends+import|❌

主題教學(電人用)|網址
:-:|:-:
vite|[🚀](https://codesandbox.io/s/vite-vanilla-x4mk7)
方格背景|[🚀](https://codesandbox.io/s/example1-5xcd0)
霓虹按鈕|[🚀](https://codesandbox.io/s/example2-smiud)
navbar|[🚀](https://hackmd.io/@kaiyohugo/navbar)
countdown|[🚀](https://hackmd.io/@kaiyohugo/countdown)
landing page|[🚀](https://hackmd.io/@kaiyohugo/landingpage)
dino|[🚧](https://github.com/mdcpp/web-10)

計算機範例
- [live2d-pixi-template](https://github.com/Eason0729/live2d-pixi-template/tree/calculator)

# 補充資料

> 補充資料我們不會教，當作自學資源

- 網頁技術
- [Fireship 🔥](//www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA)
- [Online Tutorials](//www.youtube.com/c/OnlineTutorials4Designers)
- [pixijs](https://pixijs.io/examples)
- 資安
- [PwnFunction](//www.youtube.com/c/PwnFunction)
- 後端
- Golang
- [Golang 設計與實現](https://draveness.me/golang/)
- [使用 Golang 打造 Web 應用程式](//willh.gitbook.io/build-web-application-with-golang-zhtw/)
- Node js
- Express.js
- filesystem
- process
- Deno
- [offical website](https://deno.land/)
- [官方教學](https://deno.land/manual)