切版筆記 | 目錄
===
## 基礎練習小工具
- [洧杰老師訓練菜單](/iE6mxohOS-ujKU398Ewk1w)
- [切版練習工具合集](https://medium.com/%E9%BA%A5%E5%85%8B%E7%9A%84%E5%8D%8A%E8%B7%AF%E5%87%BA%E5%AE%B6%E7%AD%86%E8%A8%98/%E4%BB%80%E9%BA%BC%E6%98%AF%E5%88%87%E7%89%88-%E5%88%87%E7%89%88%E7%B7%B4%E7%BF%92%E7%9A%84%E6%96%B9%E5%BC%8F%E8%88%87%E5%B7%A5%E5%85%B7-7069b2dbf742)[target=_blank]
- [Cheat Sheet快速碼 | Emmet](https://docs.emmet.io/cheat-sheet/)[target=_blank]
- [Wrap wth. Ab](https://docs.emmet.io/actions/wrap-with-abbreviation/#wrapping-individual-lines)[target=_blank]
- [Wrap wth. Ab 說明文章](https://pjchender.blogspot.com/2016/07/emmet.html)
- [Codepen 使用教學](/TvXxCe7_SxWIhEnIK2-xZQ)
- [VS Codepen 快速鍵](https://ithelp.ithome.com.tw/articles/10237385)[target=_blank]
- [HackMD 使用教學](https://hackmd.io/features-tw?both)[target=_blank]
- [從 0 到 1 的 GitHub Pages 教學手冊](/@Albertnotes/B1_iKcAwI)[target=_blank]
- [Github Pages如何透過 Chrome 看別人程式碼?](https://hackmd.io/@Yo5GrExxRfClh2IThnFHhQ/H1X3hQiOL)[target=_blank]
## VS code 插件
- [Google Fonts載入教學](https://hackmd.io/bvLKze7nRU6kOa2jZxXDIg)[target=_blank]
- [Bootstrap5 官網](https://bootstrap5.hexschool.com/)[target=_blank]
- [Font Awesome](https://fontawesome.com/)[target=_blank]
- [snippet generator 產生程式碼片段](https://snippet-generator.app)[target=_blank]
- [前端愛用的擴充套件](https://wcc723.github.io/development/2020/12/13/vscode-extension/)[target=_blank]
- [實用插件 js/git](https://ithelp.ithome.com.tw/articles/10239034)[target=_blank]
## 體驗營
### 體驗營筆記影片
- [收錄自5湖4海高手](/LPP5jCPdT5KUYFvqX5Vayg)
- [程式新手如何突破困境並邁向自由人生 | Will保哥](https://www.facebook.com/119279178101235/videos/1788974251285389)[target=_blank]
- [kun.yin 課後心得](/G_F_TBanRrqyzFMfgKBzFQ)
- [練功求職心法](https://rpg.hexschool.com/training/22/show?embedhm=9XVdnRUXQe-HkThHR4MceQ)
### 體驗營組別筆記
- [疫情國家隊第18組](https://hackmd.io/@YIHQx96xTI-K9vDjhzEfDA/BJNuQONoO)[target=_blank]
- [疫情國家隊第4組](https://hackmd.io/@herbalice/rJK9oOIqu)[target=_blank]
- 很厲害的組別,下面的資訊都是從第4組搬過來的,大家可以去看他們整理的筆記。
- [第一堂直播筆記](https://hackmd.io/kF62wuSjRUKiU6ryQx0-2A)
- [第二堂直播筆記](https://hackmd.io/9RFkXFpDSR2qUByt4ySjkQ)
## 切版班
- [共筆區](https://hackmd.io/@Joy324/r18sbuThu/%2FTvXxCe7_SxWIhEnIK2-xZQ)[target=_blank]
- [每日任務 1](https://rpg.hexschool.com/training/21/show?embedhm=usQ0SFOwREm5ZYRKcIMrDg)[target=_blank]
- [小組任務 1](https://hackmd.io/tGtPukfZSVehEZtpZgvlcA)
- [小組任務 2](https://hackmd.io/L_EfoS5aQ8KGJb5rmgCrCQ)
## CSS
- [CSS 基礎功大神30篇教學影片](https://ithelp.ithome.com.tw/users/20040221/ironman/3567?fbclid=IwAR2JANwzCOcNdUjlpB2GCicCGjmbTphATiVwNqpWrnHfGqffjYGuG13sBy8)[target=_blank]
- 建議無限循環播放,鞏固一下基本功
- [新手村講義](https://rpg.hexschool.com/training/22/show?embedhm=e4W317GBSEKWNCK0ph91Tw)[target=_blank]
- [講義-1px不差的技術](https://hackmd.io/N_EWKZZzR0qWI6wEQ2AmLA?edit)
- [margin 與 padding 的使用時機](/9krH1l1SSFOl3hN3goNRlQ)
- [line-height padding 多行講解](https://hackmd.io/Yhqo7uRcS326IB6Hg35gGQ)
- [延伸學習資源](https://rpg.hexschool.com/training/22/show?embedhm=Axk6RCnEQkq1TTzujKw80w)[target=_blank]
- [SASS 7+1結構 | Wendy筆記](https://wendyblogspots.blogspot.com/2020/12/sass-71.html)[target=_blank]
- [Sass : BEM 命名](https://medium.com/@tina2793778/sass-bem-%E5%91%BD%E5%90%8D-b6af4539babd)[target=_blank]
- [html css 使用時機](http://inspiregate.com/programming/html-css/112-html-text-layout-raw-html-tags-and-w3c-recommended-difference.html?showall=1&limitstart=)
## Flex 切版教學
- [新手村講義](https://rpg.hexschool.com/training/22/show?embedhm=ZAXwxM3zTKaK9AdAWa9YSg)[target=_blank]
- [切版班講義](https://rpg.hexschool.com/training/21/show?embedhm=XbFXMWrmQcqNq3AH5IbyLg)[target=_blank]
- [Flex 說明影片](https://youtu.be/iVS7qrMEbe8)[target=_blank]
- [Flex 完整教學](https://www.youtube.com/watch?v=lmBM7_OTDBQ)[target=_blank]
- [進階教學](https://w3c.hexschool.com/flexbox/2186a786)[target=_blank]
- [極速切版](https://youtu.be/yHLFbaUbyF4)[target=_blank]
- [30 min 內切版](https://www.youtube.com/watch?v=mvGD8yJFnQI)
### Flexbox 練功房
* [Flexbox 青蛙](https://flexboxfroggy.com/#zh-tw)[target=_blank]
* [flex 海報船-初級](https://hexschool.github.io/flexbox-pirate/#/)[target=_blank]
* 刻意練習
* [圖解:CSS Flex 屬性](https://wcc723.github.io/css/2017/07/21/css-flex/)
* [跟著海盜學 Flex](https://w3c.hexschool.com/)
* [Flex 檢查小工具](https://codepen.io/peiqun/pen/WYzzYX)
## RWD 切版教學
- [RWD 切版任務](https://hackmd.io/txsXt0SdReGpMfKVD9v7Vg)[target=_blank]
## SCSS 切版教學
- [香水電商講解](https://hackmd.io/_2gSxUR-Q1ykFKAn95vA8Q)
## Bootstrap5
- [做出Bootstrap5募資網站](/@YmcMgo-NSKOqgTGAjl_5tg/ryar-vGOd)[target=_blank]
- [最終設計稿連結](https://hexschool.tw/hk1Ga)[target=_blank]
- [最終設計稿連結(拆版參考)](https://ecjia.com.tw/demo/bs5homework/#)[target=_blank]
### 助教、同學筆記連結
- [WangShuan助教](https://hackmd.io/@WangShuan)[target=_blank]
* [Sass講義&設定](/ntRm3RkoRbmw7UYFqau9dw)
* [Bootstrap5 每週筆記](https://hackmd.io/@WangShuan/BJGQkQB9u/%2F%40WangShuan%2FSJWPeQKdu)
* [Bootstrap5 最終設計稿筆記](/PboDQ9ZZSvy8IuGemyw35Q)
* [Bootstrap 5 如何客製化自己的樣式](/qHTbXtWvQLGM8opcjMD0Ew)
* [Bootstrap 5 最終作業共同檢核點直播講解](/INxUpoySTWyJNWhMzLLa2w)
## Vue 教學
- [Vue 3 夏令營](https://hackmd.io/@dbFY0UD9SUeKmNXhWf01ew/BkJoW-hn_/%2FC05go-8iTSS-nrMwKU22kA)[target=_blank]
#### 不相關連結
- [學員迷因圖分享](/EqPXEE71TXO_wvx9ivzKgg)
- [BLOG 素材分享](/ntHjhDpeRvy4v6YPlQRiDQ)
- [作業繳交常見 QA](/ZCGxQ_OITlmFRxFgDgz0zw)
#### 錄影
- [Win 10 錄影方式](https://hackmd.io/@Albertnotes/HJEOF92dI)
- [Mac 錄影方式](https://support.apple.com/zh-tw/HT208721)[target=_blank]
### Other
- [Chrome 插件 - 網頁測量工具](/2XhAbmYSTquT-UKnm7MpJg)
- [對切版有幫助 - 工具](https://hackmd.io/@Albertnotes/rylWr2Z9L)
{"metaMigratedAt":"2023-06-16T01:52:47.684Z","metaMigratedFrom":"YAML","title":"Joy Cheng 切版筆記 | 目錄","breaks":true,"contributors":"[{\"id\":\"906cc6df-9b58-4b21-b76c-e7305b15f375\",\"add\":15,\"del\":0},{\"id\":\"e905283d-619a-45d5-9f1e-1dadcd56b773\",\"add\":9075,\"del\":3612}]"}