切版筆記 | 目錄 === ## 基礎練習小工具 - [洧杰老師訓練菜單](/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}]"}
Expand menu