Vic's Note
===

## 筆記說明
- [<i class="fa fa-user" aria-hidden="true"></i> &nbsp; 如何瀏覽筆記](/rXaTBhXKS9GeqcoD-N76Ug)
- [<i class="fa fa-file-text"></i> &nbsp; HackMD 功能介紹](https://hackmd.io/features-tw?both#fn1)[target=_blank]

## HTML
### ⏣ HTML 基礎概念 (入門推薦)
- [<i class="fa fa-html5" aria-hidden="true"></i> - 標籤元素](/c3FS3Q9WQeOjLdCcXPwDug)
- [<i class="fa fa-html5" aria-hidden="true"></i> - 網頁初始結構](/bzxIq6eJRf6buNpoqLo4QQ)
- [<i class="fa fa-html5" aria-hidden="true"></i> - 標籤選擇](/QYGyd29oQP-DHDHRe1Wwpw)

## CSS
### ⏣ CSS 基礎概念 (入門推薦)
- [<i class="fa fa-css3" aria-hidden="true"></i> - CSS 是甚麼 ?](/ryppnXo4bx)
- [<i class="fa fa-css3" aria-hidden="true"></i> - 選擇器與權重](/jigt0lTMRjqU2YMYhvHyFw)
- [<i class="fa fa-css3" aria-hidden="true"></i> - 偽元素](/7seBMX1kSrWYV2j17o4CMw)
- [<i class="fa fa-css3" aria-hidden="true"></i> - 預處理器 SASS/SCSS](/PkEZCzYGSHGsSZkH6hMwBw)

### ⏣ CSS 屬性調整
- [<i class="fa fa-css3" aria-hidden="true"></i> - 跑版了嗎? 試著調整 flex-shrink / basis / grow](/22iWW3g4RDaAeExgpTYLow)
- [<i class="fa fa-css3" aria-hidden="true"></i> - 文字太小看不清楚? 了解 font-size 預設倍率與單位](/EU7TtpxVTMaCAfs2t3SKDg)
- [<i class="fa fa-css3" aria-hidden="true"></i> - 內容寬度怎麼變來變去? 了解 width 與 max-width / min-width](/gl7CmIJ-SPuvaAKsRRoyUg)
- [<i class="fa fa-css3" aria-hidden="true"></i> - 利用 position 定位你的元素](/5yY3gnpeRR2la5blUQrHCg)
- [<i class="fa fa-css3" aria-hidden="true"></i> - 容器大小怎麼變來變去的，到底誰影響了 box-model ?](/euc00OdtRG6AuU6LHcfMNA)
- [<i class="fa fa-css3" aria-hidden="true"></i> - 為什麼元素無法往下推? 原來中了邊距重疊](/oideyb7wQvKee30PtLmNQA)
<!-- - [CSS - 匯入字體] -->
<!-- - [CSS - flexbox - 青蛙或海盜船] -->

### ⏣ CSS 小技巧
- [<i class="fa fa-css3" aria-hidden="true"></i> - 文字取代圖片](/IRfCUCWCTHuEBZURehY5uQ)
- [<i class="fa fa-css3" aria-hidden="true"></i> - 利用 position 與 pointer-events 製作彈跳視窗](/Vmhgsk_cRNqII4RmYJB1Ww)
<!-- - [CSS - 月曆] -->
<!-- - [CSS - 互動視窗] -->

### BootStrap 5
- [Bootstrap 通用類別 - API 使用方式](/th_uKVWmSg6ZYzNgKvveYQ)
- [Bootstrap 預設樣式更改](/Py1UItSJQt-j_JqBEsyYqA)

## JavaSctipt
### ⏣ JavaSctipt 基礎概念 (入門推薦)
- [變數宣告與全域環境](/uzz7eKAFRrOSOgVLQvZozQ)
- [運算子](/Fq22uWlmRDGujeD-L4zQ1A)
- [物件結構](https://hackmd.io/ltyqo9zCSdOASjtO41FSBA)
- [解構賦值與其餘參數](https://hackmd.io/93DF2YwzRWeia0rD5GAyeg)
- [函式](https://hackmd.io/RwPX-_-NSb-M5drw4FE82Q)
- [Promise](https://hackmd.io/huG_7qaRQrKE11KB73uNdA)

### ⏣ JavaSctipt 核心概念
- [箭頭函式沒有 this，this 到底是誰? - 箭頭函式與 this (上)](/vrViU7i6T427d5WRLcHdtg)
- [箭頭函式與 this (下) - call、apply、bind](/kx7PSiXUSWec4vN_Vuks3Q)
- [為什麼 forEach 無法修改值? - 傳值與傳址](/VobwKAPHR0OX-tceB8LIsw)
- [宣告變數時先後順序 - 提升 Hosting](/UqzZSuKdQK6TgVNT9bdpPQ)
- [你要現在做還是晚點做? - 函式的類型與特性](/RwPX-_-NSb-M5drw4FE82Q)
- [物件屬性細項設定](/JXBJMkiLSMGi38MMJ6ywsA)
- [為什麼 JavaScript 會有那麼多內建語法可以使用? - 原型鏈](/wlZNwLo1QGW3_tgDmDqtfw)
- [給我記住 - 閉包](/TcI_xbm5SZa6MYAAas9gDQ)
- [不同的變數宣告有不同的結果 - 迴圈變數與作用域](/b_aNS5I4QPiryJmbtFDeWg)
- [主角還沒上場，配角怎麼偷跑了? 用 Promise 來改善吧! ](/tSqtesz6QbGoey4kOdgCwg)

### ⏣ JavaSctipt 事件
- [拖曳元素](/zsfb-1qRRS2u2OgvOKs6jw)

## 共用
### ⏣ 套件
- [NPM <i class="fab fa-npm"></i> 安裝與指令意義](/skSw8vx5TE6UQIVZ26ARYg)
- [紀錄各種套件](/AY7NCvqdRUip7MeSGrOCOQ)

### ⏣ Git
- [<i class="fa fa-git" aria-hidden="true"></i> 環境安裝](/rNp-U67CRlmrJWZOP7-4HA)
- [<i class="fa fa-github" aria-hidden="true"></i> Git 初始化](/j2rDKz_sRzWXc4BhWXGbMg)
- [<i class="fa fa-github" aria-hidden="true"></i> 部署至 gh-pages(手動部屬)](/rK5_H_VkTU2k2WewuZGZTg)
- [<i class="fa fa-github" aria-hidden="true"></i> 部署至 gh-pages(自動佈署)](/SkiMpr9VWg)

<!-- - [Git - git rebasue 減少 commit] -->

### ⏣ Docker
- [讓開發與佈署環境保持乾淨，來使用 Docker 吧! (基礎概念)](https://hackmd.io/@VicSun/SJSXdUjVZl)
- [使用 Dockerfile 製作 image](https://hackmd.io/@VicSun/HycqB6nEZe)

### ⏣ VScode
- [Emmet](/XHCzgUPdQm-Mwj6XRdYRJA)
- [新增程式碼片段](/KUfhPxJRQ4qcrlrpvGj48g)
- [在 Windows 中使用 Linux 系統](/rJ__E7tCu)
- [指令太多記不住? Makefile 來相助](https://hackmd.io/@VicSun/r1PrAJT4Wl)

### ⏣ Firebase
- [簡易後端資料庫 - Firebase 資料庫與帳號驗證登入](/ANwsk3JlTyaOXZsnm7al5Q)

### ⏣ 前端開發樣版
- [樣版下載](/yQGof1DlTvuBVSqf4l0u7A)