# Front End Homepage

## 第一技能樹 - 前端

* Reset
* [前端學習roadmap](/bEk_FpelRMifW-4ic5ffTA)
* [前端相關資源](/B4QeiZSGR1-UIEfKyU0QhQ)

:::spoiler CSS Monster
| No. | Topic | Abstract |
|:--- |:----- |:-------- |
| 001 | [CSS2 微模組](/jce-DMXFRs-7mie9LkI2yw) | 背景&邊框、排版相關、文字相關 |
| 002 | [CSS2 排版](/7SX6YHqlRvO4Ail4i0RguQ) | margin、float、inline-block、position |
| 003 | [CSS3 工具書](/OU2gTKslSiiqMJ5Fg_h4_w) | 偽元素、linear-gradient、border-radius圓形、shadow、opacity、background-size、pointer-event |
| 004 | [CSS3 動畫相關](/cK7w2OSPRw2vLaWN6fu-tg) | transition、transform、animation |
| 005 | [CSS3 flex](/KRbjfZv_S061rQ3CngzMoA) | flex related... |
| 006 | [CSS3 grid](/1GoczoT9TmOJLPs2_XEgeA) | grid related... |
| 007 | [CSS 小細節s](/6vbUITxuQUivgZTO2G-Pew) | 略 |
| 008 | [CSS 組合技](/yUvT_-ndSLK8yqpV4a-Cig) | 雙向置中、漢堡 |
| 009 | [CSS RWD](/MM5RCO7vRHm7_XHjAUfvPw) | 往左展開的漢堡、HTML5圖片替換、YT寬高自動縮放 |
| 010 | | ... |
:::
<br>

:::spoiler CSS 設計風格
| No. | Topic | Abstract |
|:--- |:----- |:-------- |
| 001 | [BEM](/1Wr9JnreSeG_GdfuCJxyLQ) | |
| 002 | | |
:::
<br>

:::spoiler JS Note
| No. | Topic | Abstract |
|:--- |:----- |:-------- |
| 001 | [JS 基本元素](/Cn6ne902QM-zq2Hn_oadpg) | Naming Rule、三元運算子、相關資源 |
| 002 | [JS 流程控制](/5eqjIB2MS8i9eiENUgfi3A) | if、while、for、switch |
| 003 | [JS 陣列](/BZfBCNelSUy2AX0WQvcK4A) | 技巧、二維陣列 |
| 004 | [JS 函式](/h7lW_2YlRAKOGJSszKOYvw) | ... |
| 005 | [JS 物件](/xn8pyshoTX2xT8gdnpno9Q) | 待補 |
| 006 | [JS BOM](/0Zj3vZ-tSsyoctMMEmRLwA) | 略 |
| 007 | [JS DOM](/izmpqzq-QDOI3xtmow1jAQ) | 取得節點、查找節點、更新節點、新增節點、刪除節點、操控CSS屬性、操控class屬性 |
| 008 | [JS Window & document Event](/9O3ECGhmTHymgxNGo7a8Sg) | 待補load應用 |
| 009 | [JS 滑鼠Event](/VAUOks6KSLmvKLhZ4oEItg) | click event - block(停止事件冒泡應用)</br>click event - lightbox(停止事件冒泡應用)</br>click event - remove element</br>mouse event - img after mouse |
| 010 | [JS 鍵盤Event](/QlN7i791SkK7c-O-nlVN_Q) | keydown & keyup event</br> |
| 011 | [JS scroll Event](/Y3-Zqu6AQKuiqDMZ5hKovw) | scroll event(`getBoundingClientRect()`應用)</br> |
| 012 | [JS Event 應用1](/dnjLbdiUQ8qV2pgQUhHR7A) | scroll & click event |
| 013 | [To do test](/p1K33yNsQda7AJ4xuPJ4ww) | ... |
| 014 | ... | ... |
:::
</br>

:::spoiler {state="open"} Git
| No. | Topic | Abstract |
|:--- |:----- |:-------- |
| 001 | [Git 專案開發前-初始設定](/v0T-r6hlR_6GPhugUSHNWw) | |
| 002 | [Git 專案開發中-操作](/cEHjj6pWTFuId0_o-pABrA) | |
| 003 | [Git commit規範](/R3QtxbAeT3ybjociCaMqnA) | |
| 004 | | |

---
## Other
| ... | ... | ... | ... |
|:--- |:--- |:--- |:--- |
| [Figma相關](/TgN8TDMXQqGdrX_nWdd-sQ) | [色彩印象](/QzE_R_jvTMiqn430bwBlXA) | [Sublime編輯器相關](/kc2ODYpJRK6gbWOgxXrqYA) | [selfnote](/etyTe0teR5CDlIrd0NzzQg) |
| ... | ... | ... | ... |

---
:::warning
:bulb:**待整理**: for of, CSS選取器
:::

###### tags: `index` `frontend`