在這篇文章中,我將分享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