在這篇文章中，我將分享100 多個免費的Web 開發資源，包括API、託管平台、備忘錄、圖示、範本、字體、色彩資源、學習平台、CSS 遊戲、程式碼編輯器和JavaScript 動畫庫。
讓我們直接開始吧！
學習 Web 開發的免費資源🔥
網站
.[免費程式碼營]
（https://www.freecodecamp.org/）
。 MDN 網路文件
。 W3學校
。 [麻布]
（https://scrimba.com/）
。 [學院]
（https://www.codecademy.com/）
。 [奧丁計劃]
（https://www.theodinproject.com/）
。 [前端導師]
（https://www.frontendmentor.io/）
。 [JavaScript30]
（https://javascript30.com/）
。 [課程]
（https://www.coursera.org/）
。 [可汗學院]
（https://www.khanacademy.org/）
YouTube 頻道
。 [穿越媒體]
（https://www.youtube.com/user/TechGuyWeb）
。 [網路忍者]
（https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg）
。 [與哈利一起編碼]
（https://www.youtube.com/channel/UCeVMnSShP_Iviwkknt83cww）
。 [Web 開發簡化]
（https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw）
。 [編碼器編碼器]
（https://www.youtube.com/channel/UCzNf0liwUzMN6_pixbQlMhQ）
。 [編碼列車]
（https://www.youtube.com/user/shiffman）
。 [自由程式碼營]
（https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ）
適合您網站的免費託管平台🔥
。 [網絡化]
(https://www.netlify.com/)：輕鬆部署您的 Web 專案。
。 [使成為]
(https://render.com/)：輕鬆託管 Web 應用程式和靜態網站。
。 [GitHub 頁面]
(https://pages.github.com/)：直接從 GitHub 儲存庫託管靜態網站。
。 [Firebase 託管]
(https://firebase.google.com/docs/hosting)：使用 Firebase 輕鬆擴充您的網路應用程式。
。 [韋爾塞爾]
(https://vercel.com/)：透過自動部署來部署網站和應用程式。
。 [循環.sh]
(http://cycl.sh/)：以零配置託管靜態網站。
。 [應用編寫]
(https://appwrite.io/)：面向 Web 和行動開發人員的開源後端伺服器。
。 [蘇帕巴斯]
(https://supabase.io/)：建立具有可擴展後端的現代應用程式。
。 [無限免費]
(https://infinityfree.net/)：使用 PHP、MySQL 等的免費且無限的網站寄存。
。 [湧]
(https://surge.sh/)：前端開發人員的靜態 Web 發佈。
為您的專案提供免費 API 🔥
。 [開放天氣地圖 API]
(https://openweathermap.org/api)：存取任何位置的當前天氣資料。
。 [新聞API]
(https://newsapi.org/)：從各種來源檢索即時新聞文章。
。 [REST 國家 API]
(https://restcountries.com/)：取得全球國家的資訊。
。 [查克諾里斯笑話 API]
(https://api.chucknorris.io/)：用 Chuck Norris 的笑話來點亮你的專案。
。 [開放食品事實 API]
(https://world.openfoodfacts.org/data)：存取食品資訊和食材。
。 [GitHub API]
(https://docs.github.com/en/rest)：將 GitHub 功能整合到您的應用程式中。
。 [返回API]
(https://www.reddit.com/dev/api/)：取得 Reddit 資料，包括貼文和留言。
。 [OneDrive API]
(https://docs.microsoft.com/en-us/onedrive/developer/rest-api/)：管理 Microsoft OneDrive 上的檔案和資料夾。
。 [狗API]
(https://thedogapi.com/)：將可愛的狗圖像和資訊加入到您的專案中。
。 [GIPHY API]
(https://developers.giphy.com/docs/sdk)：將 GIF 和貼圖整合到您的應用程式中。
。 [VirusTotal API]
(https://developers.virustotal.com/reference)：分析可疑檔案和 URL 中是否有惡意軟體。
。 [美國太空總署應用程式介面]
(https://api.nasa.gov/)：存取大量 NASA 資料，包括影像和資訊。
免費向量、圖像和插圖網站🔥
。 [免費圖片]
(https://www.freepik.com/)：發現免費向量、照片、PSD 和圖示。
。 [Vecteezy]
(https://www.vecteezy.com/)：尋找高品質的向量藝術、圖形和插圖。
。 [不飛濺]
(https://unsplash.com/)：存取超過一百萬張免費高解析度照片。
。 [圖片灣]
(https://pixabay.com/)：探索龐大的免費圖像和影片庫。
。 [平面圖像]
(https://www.flaticon.com/)：下載免費圖示、SVG、PSD、PNG、EPS 格式或 ICON FONT 格式。
。 [打開剪貼畫]
(https://openclipart.org/)：分享並使用免費的剪貼畫和圖片。
。 [SVGRepo]
(https://www.svgrepo.com/)：免費下載 SVG。
。 [向量傳送門]
(https://www.vectorportal.com/)：免費向量、剪貼畫和圖示。
。 [SVG背景]
(https://www.svgbackgrounds.com/)：可自訂的 SVG 圖案和背景。
。 [免費設計文件]
(https://freedesignfile.com/)：高品質的圖形設計資源。
。 [像素]
(https://www.pexels.com/)：尋找才華洋溢的創作者分享的免費庫存照片和影片。
為您的專案提供免費圖示🔥
。字體棒
。 [平面圖像]
（https://www.flaticon.com/）
。 [圖示查找器]
（https://www.iconfinder.com/）
。 [材質圖示]
（https://material.io/resources/icons/）
。 [圖標8]
（https://icons8.com/）
。 [框圖示]
（https://boxicons.com/）
。 [羽毛圖示]
（https://feathericons.com/）
。 [圖示字體]
（https://icofont.com/）
。 [SVGHUB]
（https://www.svghub.com/）
。 [表格圖示]
（https://tabler-icons.io/）
。 [圖標心靈]
（https://iconsmind.com/）
。 [SVGRepo]
（https://www.svgrepo.com/）
適合您專案的免費字體🔥
。 [Google字體]
（https://fonts.google.com/）
。 [1001免費字體]
（https://www.1001freefonts.com/）
。 [字體歡樂]
（https://fontjoy.com/）
。 [字體]
（https://www.fontsly.com/）
。 [字體空間]
（https://www.fontspace.com/）
。 [抽象字體]
（https://www.abstractfonts.com/）
。 [字體區]
（https://www.fontzone.net/）
。 [開發字體]
（https://devfonts.gafi.dev/）
。 [大字體]
（https://www.dafont.com/）
。 [字體松鼠]
（https://www.fontsquirrel.com/）
為您的專案提供免費的色彩資源🔥
。 [冷卻器]
（https://coolors.co/）
。 [帕萊頓]
(http://paletton.com/)
。 [顏色]
（https://colorion.co/）
。 [色彩狩獵]
（https://colorhunt.co/）
。 [六角色]
（https://www.colorhexa.com/）
。 [土坯顏色]
（https://color.adobe.com/create）
。 [色彩思維]
（http://colormind.io/）
。 [選色器]
(https://www.colorpicker.com/)
。 [色彩套件]
（https://colorkit.co/）
。 [我的顏色]
（https://mycolor.space/）
。 [色彩中心]
（https://colorhub.app/）
免費備忘單網站🔥
。 [HTML 備忘單]
(https://htmlcheatsheet.com/)：HTML 元素和屬性的快速參考指南。
。 [CSS 備忘單]
(https://websitesetup.org/css3-cheat-sheet/)：CSS 屬性和選擇器的綜合指南。
。 [JavaScript 備忘單]
(https://javascript.info/)：JavaScript 語法和概念的方便參考。
。 [Git 備忘單]
(https://education.github.com/git-cheat-sheet-education.pdf)：Git 的基本命令與工作流程。
。 [Markdown 備忘錄]
(https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)：用於建立富文本格式的 Markdown 語法指南。
。 [反應備忘單]
(https://reactcheatsheet.com/)：React 概念和語法的快速概述。
。 [在 y 分鐘內學習 x]
(https://learnxinymonths.com/)：簡潔教程，快速學習各種程式語言和工具。
。 [SQL 備忘單]
(https://sqlbolt.com/)：綜合 SQL 指令與查詢參考。
。 [透過API]
(https://overapi.com/)：各種程式語言和框架的備忘單集合。
HTML/CSS 模板的免費網站🔥
。 [HTML5UP]
（https://html5up.net/）
。 [HTML 修訂版]
（https://www.htmlrev.com/）
。 [免費CSS]
(https://www.free-css.com/)
。 [模板化]
（https://templated.co/）
。 [免費HTML5]
（https://freehtml5.co/）
。 [啟動引導程式]
（https://startbootstrap.com/）
。 [引導製作]
（https://bootstrapmade.com/）
。 [靴子樣本]
（https://bootswatch.com/）
。 [引導測試]
（https://bootstraptaste.com/）
。 [克魯普]
（https://cruip.com/）
。 [車牌]
（https://www.tooplate.com/）
。 [HTML5xCSS3]
（https://www.html5xcss3.com/）
透過玩遊戲學習 CSS 🔥
。 [CSS晚餐]
(https://flukeout.github.io/)：透過有趣的遊戲練習 CSS 選擇器。
。 [彈性盒蛙]
(https://flexboxfroggy.com/)：透過玩這個遊戲來學習 CSS Flexbox。
。 [網格花園]
(https://cssgridgarden.com/)：透過玩這個遊戲掌握 CSS 網格佈局。
。 [彈性盒防禦]
(http://www.flexboxdefense.com/)：學習 CSS Flexbox 的遊戲。
。 [CSS之戰]
(https://cssbattle.dev/)：透過撰寫 CSS 程式碼與其他人競爭。
。 [彈性盒殭屍]
(https://mastery.games/flexboxzombies)：透過玩這個遊戲來學習 CSS Flexbox。
免費程式碼編輯器🔥
。 [Visual Studio 程式碼]
(https://code.visualstudio.com/)（VS (VS Code)
。 [崇高的文字]
（https://www.sublimetext.com/）
。 [括號]
（http://brackets.io/）
。 [因為]
(https://www.vim.org/)
JavaScript 動畫庫🔥
。 [動漫.js]
(https://animejs.com/)：輕量級 JavaScript 動畫函式庫。
。 [ScrollReveal.js]
(https://scrollrevealjs.org/)：在元素進入視窗時輕鬆顯示元素。
。 [流行動作]
(https://popmotion.io/)：一個功能齊全、靈活的 JavaScript 運動庫。
。 [八角]
(https://anijs.github.io/)：CSS 動畫的聲明性處理庫。
。 [哇.js]
(https://wowjs.uk/)：向下捲動頁面時顯示 CSS 動畫。
。 [打字.js]
(https://mattboldt.com/demos/typed-js/)：一個類型的 JavaScript 函式庫。
。 [速度.js]
(http://velocityjs.org/)：加速 JavaScript 動畫。
。 [全球策略規劃]
(https://greensock.com/gsap/)：現代網路的專業級動畫。
這就是今天的全部內容。
我希望這有幫助。
謝謝閱讀。
繼續編碼！
原文出處：https://dev.to/agunwachidiebelecalistus/100-free-resources-every-web-developer-must-try-47ln
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式