# 前端開發 ## 製作筆記 - [<i class="fa fa-file-text"></i> &nbsp; HackMD 功能介紹](https://hackmd.io/c/tutorials-tw/%2Fs%2Ffeatures-tw)[target=_blank] - [➤ hackmd的進階功能使用](https://hackmd.io/@chiaoshin369/hackmd) - [markdown語法介紹](https://hackmd.io/@wootu/SkY0M5wsZ?type=view) ## 開發技巧 - [如何看這個物件有甚麼function?](https://hackmd.io/h-XuCPafQsSkB-gn9N7DxQ) - [Console 使用技巧](https://hackmd.io/d75AzXNbTduM10FnU2dZ2g) - [絕對路徑與相對路徑](https://hackmd.io/@OHZRCATvRi6_DK0T-HpKpA/HyqrLOFlt) - [如何自動產生一段文章](https://hackmd.io/@Shen-An/HJifNH9eF) - [如何擴大 `<a>` 標籤的點擊範圍](https://hackmd.io/@Shen-An/ByYjGiieY) - [基於搜尋引擎調整`<h1>`標籤內容](https://hackmd.io/@Shen-An/BkIgpKm-t) - [如何覆蓋別人的CSS](https://hackmd.io/@Shen-An/Hy-SAuw-Y) - [新輸入字會替代原來的字](https://hackmd.io/@Shen-An/BkTGAE19t) - [Cheat Sheet快速碼 | Emmet](https://docs.emmet.io/cheat-sheet/)[target=_blank] - [Github Pages如何透過 Chrome 看別人程式碼？](https://hackmd.io/@Yo5GrExxRfClh2IThnFHhQ/H1X3hQiOL) ## 編輯器 - [[VS Code] 自動換行設定](https://hackmd.io/BVBW9Sb0TNyhzwKhc0GRyA) - [[VS Code] Emmet 載入環境語法](https://hackmd.io/@OHZRCATvRi6_DK0T-HpKpA/Hk1v-OYeF) - [[VS Code] 如何選擇一個「目標」後，然後慢慢的也將其他的「目標」加進來](https://hackmd.io/@Shen-An/SyTzpq3MK) - [[VS Code] 在 VSCode 上使用 SCSS 進行開發](https://hackmd.io/@Shen-An/S1LrfPKSY) - [[CodePen] 在 CSS 欄位設定 CSS Reset](https://hackmd.io/@Shen-An/S1e_QrAgF) - [[CodePen] 十分鐘快速入門上手 CodePen](https://hsiangfeng.github.io/other/20201020/1425713503/)[target=_blank] - [Visual Studio Code(VSCode) 必備實用套件](https://hsiangfeng.github.io/vscode/20191212/2147775133/)[target=_blank] - [VSCode - 好用功能 feat.快捷鍵大全](https://ithelp.ithome.com.tw/articles/10202305)[target=_blank] ## 實際開發 - [[開發] 9大常見的新手錯誤](https://hackmd.io/@Shen-An/HyCXbhOZt) ## HTML & CSS(SASS) - [HTML & CSS 筆記列表](https://hackmd.io/@Shen-An/rJyF6lyfF) - [ARIA 標籤和關係 - 無障礙網頁](https://developers.google.com/web/fundamentals/accessibility/semantics-aria?hl=zh-tw)[target=_blank] - [Google Fonts載入教學 | 六角](https://hackmd.io/bvLKze7nRU6kOa2jZxXDIg) ## CSS 框架 - [Bootstrap 筆記列表](https://hackmd.io/@Shen-An/rkEbpf5bY) - [Ant Design](https://ant.design/index-cn)[target=_blank] ## RWD - [Table裡的內容要如何在RWD網頁設計內漂亮呈現？](https://www.ctkpro.com/blog/fine-table-in-rwd/)[target=_blank] - [如何讓CSS HTML Table RWD方法](https://www.ucamc.com/e-learning/css/420-table-rwd)[target=_blank] ## 圖表工具 - [Chart.js](https://www.chartjs.org/)[target=_blank] ## JavaScript - [JavaScript - 基礎筆記列表](https://hackmd.io/@Shen-An/B1-QYe1zt) - [JavaScript - 核心筆記列表](https://hackmd.io/@Shen-An/BJG5_inYF) ## Google Map API - [使用Google Map API(Directions Service)獲取及顯示最佳路徑](https://icelandcheng.medium.com/%E4%BD%BF%E7%94%A8google-map-api-directions-service-%E7%8D%B2%E5%8F%96%E5%8F%8A%E9%A1%AF%E7%A4%BA%E6%9C%80%E4%BD%B3%E8%B7%AF%E5%BE%91-cf82060b90f2)[target=_blank] ## WebAPIs - [[WebAPIs] JSON](https://hackmd.io/jBSBPL5CTM2PM4DrvUwxPA) ## AJAX - [[AJAX] 網路請求](https://hackmd.io/@OHZRCATvRi6_DK0T-HpKpA/SkWq-17lF) - [[AJAX] POST API 講解](https://hackmd.io/@Shen-An/S18zosPlt) - [[AJAX] XMLHttpRequest & Fetch](https://hackmd.io/v2XlWPSkROuaig980IzTlA) - [[AJAX] axios](https://hackmd.io/@Shen-An/HywBNDLet) ## node.js - [[Node.js] Node.js 和 npm ](https://hackmd.io/@OHZRCATvRi6_DK0T-HpKpA/SyklxSIxK) - [[Node.js] package.json & package-lock.json](https://hackmd.io/@Shen-An/rJ9UPMTHF) - [[Node.js] 用 Node.js 開啟伺服器](https://hackmd.io/@OHZRCATvRi6_DK0T-HpKpA/rkghe4Vlt) - [[Node.js] node.js 指令操作](https://hackmd.io/@Shen-An/ByHVEbLMK) - [[Node.js] NPM script 自訂指令](https://hackmd.io/@Shen-An/Hyz7w9dMK) - [[套件] 開發套件](https://hackmd.io/@Shen-An/rJWTr4mbF) - [從零開始: 使用NPM套件](https://medium.com/html-test/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B-%E4%BD%BF%E7%94%A8npm%E5%A5%97%E4%BB%B6-317beefdf182)[target=_blank] - [比 NPM 更快的套件管理工具 — Yarn](https://medium.com/html-test/%E6%AF%94-npm-%E6%9B%B4%E5%BF%AB%E7%9A%84%E5%A5%97%E4%BB%B6%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7-yarn-7f274b823ec6)[target=_blank] ## webpack - [ webpack 筆記列表](https://hackmd.io/@Shen-An/S1k02sABK) ## git - [git 筆記列表](https://hackmd.io/@Shen-An/SyNTn7zYK) ## 測試 - [從零開始: 測試吧! 前端](https://medium.com/html-test/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B-%E6%B8%AC%E8%A9%A6%E5%90%A7-%E5%89%8D%E7%AB%AF-c32c29df875d)[target=_blank] ## Vue - [Vue 筆記列表](https://hackmd.io/@Shen-An/rJLcK4rtt) - [2021 Vue 作品實戰班](https://hackmd.io/@Shen-An/HkD2X9f2K) ## 網路工具 - [[工具] 流程圖製作](https://hackmd.io/@OHZRCATvRi6_DK0T-HpKpA/SJ3O2iZJY) - [Chrome 插件 - 網頁測量工具](/2XhAbmYSTquT-UKnm7MpJg) - [對切版有幫助 - 工具](https://hackmd.io/@Albertnotes/rylWr2Z9L) ## 免費圖庫 - [免費 可商業使用 圖片 文字 音樂 影片](https://hackmd.io/@Not/FreeMaterial) - [免費圖庫相片和影片 - pexels](https://www.pexels.com/zh-tw/)[target=_blank] - [免費圖庫 - unsplash](https://unsplash.com/)[target=_blank] - [免費大頭貼 - randomuser](https://randomuser.me/photos)[target=_blank] - [icon 圖標 - icon-icons](https://icon-icons.com/) ## 免版權音樂 - [免版稅音樂 - Mubert Render](https://mubert.com/render) ## 圖片處理 - [壓縮圖片 - TinyPNG](https://tinypng.com/)[target=_blank] - [線上圖片切版資源 - photopea](https://www.photopea.com/)[target=_blank] - [線上圖片切版資源 - gimp](https://www.gimp.org/)[target=_blank] ## HEX 色碼 - [HEX 色碼 ｜ 秒懂16 進位原理，快速搭配所需顏色](https://www.shutterstock.com/zh-Hant/blog/how-hex-colors-work) - [色碼轉換器](https://www.ifreesite.com/color/color-code-converter.htm) - [色碼轉換器](https://www.peko-step.com/zhtw/tool/tfcolor.html) # 參考網頁 - [卡斯伯的 Blog](https://wcc723.github.io/)[target=_blank] - [Fooish 程式技術](https://www.fooish.com/)[target=_blank] - [Welcome.Web.World](https://hsiangfeng.github.io/)[target=_blank] - [免費前端學習路線](https://hackmd.io/@peipei1113/rypnA5PgF)[target=_blank] - [洧杰老師訓練菜單](/iE6mxohOS-ujKU398Ewk1w) - [前端UI軍火庫](https://ithelp.ithome.com.tw/users/20020617/ironman/988)[target=_blank] - [前端工具百寶箱 - 六角學院](https://ithelp.ithome.com.tw/users/20111449/ironman/1767)[target=_blank]
{"metaMigratedAt":"2023-06-16T05:02:20.239Z","metaMigratedFrom":"YAML","title":"前端開發","breaks":true,"contributors":"[{\"id\":\"38765108-04ef-462e-bf0c-ad13f87a4aa4\",\"add\":11335,\"del\":5571}]"}
Expand menu