web dev resources下載 - web dev resources源代碼下載

web dev resources

其他源碼

1.0.0

下載

您需要的網絡開發資源

Ismile Hossain
_{LinkedIn上的Twitter上關注我。}

這是一個完整的Web開發資源，您需要構建下一個項目。此處包括150多個以上的資源。隨時探索和使用您的項目。

內容

開發人員路線圖
文檔和作弊表
設計工具
網絡如何工作？
HTML和CSS
前端挑戰或技能
字體和版式
顏色和工具
圖像資源
插圖
圖示
發電機
可訪問性
站點分析儀
Windows的終端
在線IDE，編輯
JavaScript
node.js
Python
反應
蜜蜂
開發人員工具
在線學習資源
恢復
其他的
開發人員博客網站
YouTube頻道

資源

開發人員路線圖

前端 - 前端開發路線圖。
後端 - 後端開發路線圖。
反應 - 反應開發路線圖。
Andriod- Android開發路線圖。
DevOps -DevOps路線圖。

文檔和作弊表

MDN Web文檔 - MDN Web文檔網站提供有關網站和漸進式Web應用程序的開放Web技術的信息，包括HTML，CSS和API。
DevDocs-快速，離線和免費文檔瀏覽器供開發人員瀏覽。在一個Web應用程序中搜索100多個文檔。
Devhints-備用表單的謙虛集。
Flex -Malven- CSS Flex佈局的視覺備忘單。
網格 - 馬爾文 - CSS網格佈局的視覺備忘錄。
CSS網格備忘單 - 您的最終CSS網格視覺指南。
Overapi-收集作弊表。
很棒的作弊表 - 流行編程語言，框架和開發工具的很棒的作弊表。
gitsheet-一個死去的簡單git備忘錄。
HTML5醫生 - 這是對新元素或已在HTML5中重新定義的元素的快速參考。
HTML5帆布備忘單-HTML5畫布備忘單。
備忘錄 - 編程作弊表。
CSS 3，媒體查詢備忘單-CSS 3，媒體查詢備忘單。
SEO備忘單 - 網絡開發人員的SEO備忘單。
Bootstrap 5備忘單 - ThemeSelection的Bootstrap 5備忘單。

？設計工具

無花果 - 無花果可幫助團隊從頭到尾創建，測試和運送更好的設計。
Adobe XD-與看起來和感覺像真實事物的設計分享您的故事。線框，動畫，原型，協作等等 - 一切都在一個地方。
草圖 - 創建，原型，協作並通過超過一百萬人使用的設計平台（從自由職業者到世界上最大的團隊）將您的想法栩栩如生。
異想天開 - 以思想速度在視覺上進行交流 - 協作流程圖，線框，粘性音符和思維地圖。
不設計的 - 為製造商，開發人員和設計師收集免費設計工具和資源。
Flyonui-最簡單的組件庫，用於逆風CSS。

網絡如何工作？

互聯網的工作方式 - 互聯網如何運作？
互聯網的工作方式簡短視頻 - 簡要說明，互聯網如何運作？
DNS- DNS的工作原理？
HTTPS- HTTPS的工作原理？

？ HTML和CSS

FreeCodeCamp-免費課程學習Web開發。
互聯網很難 - 完整初學者的友好網絡開發教程。
學習編碼HTML＆CSS-該指南涵蓋了各種網頁設計和開發主題，從初學者到高級技能水平。
HTML元素 - MDN引用的HTML元素。
HTML實體 - CSS -tricks的HTML實體參考。
HTML鯊魚 - 用於編碼網站，效果和元素的智能動作和骯髒的技巧。
CSS3屬性-MDN參考CSS參考。
CSS參考 - CSS的免費視覺指南。
CSS佈局 - 由CSS製成的流行佈局和圖案的集合。
現代CSS解決方案 - 研究現代CSS解決方案的系列問題。
CSS Diner-一款有趣的遊戲，可幫助您學習和練習CSS選擇器。
Flexbox Froggy-一種可以幫助您學習CSS Flex的遊戲。
CSS技巧 - Flexbox-彈性箱的完整指南。
以示例網格 - 學習CSS網格佈局所需的所有內容。
網格花園 - 學習CSS網格的遊戲。
CSS技巧 - 網格的完整指南 - CSS網格的綜合指南，重點介紹了網格父母容器和網格子元素的所有設置。
學習CSS網格 - 喬納森·蘇（Jonathan Suh）的綜合指南，可幫助您了解和學習CSS網格佈局。
我可以使用 - 最新的瀏覽器支持表，以支持台式機和移動網絡瀏覽器上的前端Web技術。
CSS效果-CSS動畫。
UI片段 - 更多的CSS動畫。
KeyFrames-使用Visual Timeline編輯器創建基本或複雜的CSS @KeyFrame動畫。
Animista-播放準備使用CSS動畫的集合。
BEM- BEM命名備忘單。
AutoPrefixer -AutoPrefixer是一個PostCSS插件，可以解析您的CSS並添加供應商前綴。
CSS Formatter-在線CSS格式化，CSS Beautifier。
佔位符 - 如何使用我們的佔位符。只需在我們的URL之後指定圖像大小，您就會獲得佔位符圖像。
DevProjects-通過免費的HTML/CSS項目練習您的編碼技能。項目從初學者到高級級別不等。
HTML備忘單 - 完整的HTML備忘單，可幫助您掌握HTML。
CSS備忘單 - 通過此綜合備忘單刷新CSS技能。
HTML和HTML5面試問題 - HTML面試問題的完整列表，可幫助您王牌面試。
ReadyTools HTML結構生成器 - 在幾秒鐘內生成HTML結構。使用Bootstrap或您的樣式/JavaScript。
ReadyTools組件生成器 - 輕鬆生成HTML組件。
ReadyTools生成的按鈕 - 一鍵單擊複製精美按鈕，然後在您的網站上使用它。
ReadyTools HTML minifier-壓縮您的HTML文件以獲得更快的加載時間和更好的性能。
HTMLREV -HTMLREV為網站和著陸頁提供免費的HTML模板。

？前端挑戰或技能

codepen-與我們的在線代碼編輯器一起構建，共享和學習JavaScript，CSS和HTML
前端導師 - 通過構建實際項目來提高前端技能。在研究專業設計時，解決了現實世界中的HTML，CSS和JavaScript挑戰。
好的代碼 - 瀏覽數十個前端編碼挑戰，並附有Adobe XD文件和StyleGuides。
Codier-探索和嘗試前端編碼挑戰。
CSSBATTATLE -CSS代碼高爾夫在這裡！使用您的CSS技能以最小的代碼複製目標。隨時查看下面的目標，並將CSS技能進行測試。

？字體和版式

Google字體 - 免費且易於使用的WebFonts的＃1資源。
字體競技場 - 免費字體，高級字體的免費替代方案，對您進行的研究文章。
Fontjoy -Fontjoy幫助設計師選擇最佳的字體組合。混合併匹配不同的字體以進行完美配對。
字體配對可幫助設計師將Google字體配對在一起。美麗的Google字體組合和對。
字體遊樂場 - 播放可變字體。
字體任何內容 - 鍵入任何內容都是一種免費且令人敬畏的排版工具，可為您的項目創建和測試字體組合。

？顏色和工具

冷卻器 - 為您的設計生成或瀏覽美麗的顏色組合。
0to255-一種顏色工具，使其易於減輕和深色的顏色。
Colorbox-創建驚人的顏色套件超快。
顏色X顏色 - 為UI創建可訪問的顏色系統的工具
顏色和字體 - 查找顏色和版式組合，準備一鍵複製糊狀物。
Colorspace-生成漂亮的調色板。
CSS梯度 - 免費CSS梯度生成器工具。
Uigradients-設計師和開發人員精心挑選的精美顏色梯度集合。
picular-任何東西的顏色。
可著色 - 根據您的背景顏色選擇字體顏色。
快樂的色調 - 上下文中精心策劃的顏色。
Branition Colors-最適合品牌的手工策劃的顏色托盤系列。
彩色選擇器 - 獲取一個免費的彩色選擇器，其中包含顏色名稱，十六進制，RGB和HSL代碼。
調色板 - 您的項目免費分類調色板。獲取十六進制和RGB代碼。
顏色對比檢查器 - 輕鬆檢查顏色對比度，以確保您的設計易於訪問和視覺吸引力。
顏色梯度發生器 - 輕鬆地創建令人驚嘆的顏色梯度。

？圖像資源

Unsplash-免費圖像和照片。
pexels-免費庫存照片。
Pixabay-免費圖像或視頻。
Loading.io-您的項目免費旋轉器。
Lottiefiles- Lottiefiles是為Lottie設計的動畫集合 - 已經消失了開發人員的日子。
REMOVEBG-刪除圖像背景。
刪除照片數據 - 在Internet上共享照片之前，請從照片中刪除個人數據。
Befunky- Befunky的多合一在線創意平台擁有輕鬆編輯照片，創建圖形設計並製作照片拼貼的一切所需的一切。

？插圖

UNDRAW-瀏覽以找到適合您需求的插圖，然後單擊以下載。
多像素 - 免費插圖來為您的項目供電。以商業或非商業方式將它們用於您的著陸頁，博客文章，電子郵件新聞通訊，社交媒體圖形等。
drawkit-手繪矢量插圖和圖標資源，非常適合您的下一個項目。
Freepik-免費的圖形資源。
插圖無花果 - 您可以在無花果內使用5000多個矢量圖。所有FIGMA插圖均採用SVG和PNG格式，包括平坦，襯裡，抽像等的樣式。
矢量圖 - 搜索超過5000個矢量圖和70多種設計樣式，並具有集成的編輯器，以調整您希望的設計。

？圖示

離子 - 開源和麻省理工學院許可的圖標包。
字體很棒 - 矢量圖標和社交徽標。
材料圖標 - 材料圖標是令人愉悅的，精美的符號，用於常見動作和物品。在桌面上下載將它們用於Android，iOS和Web的數字產品中。
ICONE -ICONS集合。
ICONS8-在PNG和SVG中下載免費圖標。
Flaticon- SVG，PSD，PNG，EPS格式或圖標字體中的自由矢量圖標。
表圖標 - 完全可自定義的免費SVG圖標。
ICOFONT -2100+免費圖標，以增添創意設計。
簡單圖標-1463免費的SVG圖標，適用於流行品牌。
獲取表情符號 - ✂️複製和？粘貼表情符號？
Ikonate-可自定義圖標包。
UseAnimations-免費的動畫圖標。
3dicons-超過5000個3D圖標和具有4K分辨率的字符的集合，每個圖標都以5個調色板，前面和透視圖交付。
Iconshock-最大的圖標包，具有超過200萬個專業圖標的+400圖標集，具有30多種設計樣式：材料，平坦，3D，現實，iOS等。

⚙發電機

lorem ipsum -lorem ipsum Generator。
RealFavicongonerator -Favicon Generator
Favicon Maker-免費的Favicon Maker。
元標記 - 元標記生成器，預覽您的網頁在Google，Facebook，Twitter等上的外觀！
Clippy -CSS剪貼式路徑製造商。
我討厭正則表達式 - 我討厭正格書是一張正則備忘單，它也解釋了常用的表達式，以便您理解它。
REGEX101-在線正則測試儀。
pyrexp-在線視覺正則表達式測試儀。
Web代碼工具 - 生成HTML5，CSS3，MicroDATA，JSON -LD，Twitter卡，打開圖等！
碳 - 創建並分享您來源的美麗圖像。
CSS網格生成器 - 快速設計Web佈局，並獲取HTML和CSS代碼。通過視覺學習CSS網格，並使用我們的Interactive CSS網格生成器構建Web佈局。
CSS滾動陰影 - 調整控件（？），並查看CSS捲軸陰影更改。
CSS陰影發生器 - 使陰影平滑。
Haikei-生成獨特的SVG設計資產。
變換 - 變換|多磁場Web轉換器。
perflink | JS基準測試 - 您可以通過URL共享JavaScript性能基準。
OptimizeImages-使用此免費工具，在PNG，JPEG，SVG，AVIF，WebP，WebP和GIF格式中使用此免費工具在線優化圖像，甚至獲取圖片HTML標籤以進行正確的實現。
ReadyTools HTML和CSS Generator-使用ReadyTools代碼中心毫不費力地創建HTML和CSS代碼。通過複製生成的按鈕來增強網站的外觀。

？可訪問性

可訪問性博客 - 中型 - 七個易於實施的指南，以設計更容易訪問的網絡。
可訪問性博客-DEV- 13種升級網站可訪問性的方法。
可訪問性備忘單 - 通用設計的實用方法，以使您的網站/WebApp訪問所有人。

？站點分析儀

web.dev-查看您的網站的性能。然後，獲得提高您的用戶體驗的技巧。
燈塔指標 - 燈塔指標為您的網站性能提供了簡單的見解。

？ Windows的終端

Windows終端
氟
超級
cmder

在線IDE，編輯

repl.it
codesandbox
codepen
JS bin
JSFIDDLE
醋端
面試
Codilink

⚡javaScript

FreeCodeCamp-交互式學習JavaScript的最佳免費資源。
CodeCademy-免費學習JavaScript的免費課程。
JavaScript.info-現代JavaScript教程。
JavaScripture -JavaScripture.com是所有JavaScript API的測試場和參考。
雄辯的JavaScript-這是一本關於JavaScript，編程和數字奇觀的書。您可以在此處在線閱讀。
JavaScript30-30天香草JS編碼挑戰。在30天內通過30個教程建造30件事。
JavaScript的工作原理
MDN的JavaScript參考
JavaScript事件參考
JavaScript教程 - 在JavaScript中學習重要概念，例如操作員，循環，功能，OOPS等。
DOM操縱參考
JavaScript設計模式
Regexone-通過簡單的互動練習學習正則表達式。
Scaleer-最佳的免費資源來學習頂級極客的JavaScript。
JavaScript備忘單 - 完整的JavaScript備忘單，可幫助您掌握JavaScript。
JavaScript採訪問題 - 頂級JavaScript面試問題的完整列表，以幫助您王牌面試。

⚡nodejs

Net Ninja的Node.js教程-Node.js速成課程教程。
Mixu的節點書 - 一本關於使用node.js的書
節點JS -node.js原始文檔。
30天節點-30天節點，node.js教程系列。
NodeBestPractices-構建節點應用程序的最佳實踐列表。對於大型項目來說很重要。
節點方式 - node.js的整個理念最佳實踐A0ND指導原則存在用於編寫可維護模塊，可擴展應用程序和代碼的整個哲學，實際上可以閱讀。
你不知道node.js
很棒的nodejs-令人愉悅的node.js軟件包和資源。
Express.js安全提示 - 如何保存和保護應用程序。
Node.js面試問題 - 頂級Node.js面試問題的完整列表，以幫助您王牌面試。

python

學習Python編程 - 本網站包含Python 3編程語言的材料和練習。
PY4E-每個人的Python。
潛入python 3-進入Python 3覆蓋Python 3及其與Python 2的差異。與潛水python相比，它的修訂後約為20％和80％的新材料。這本書現在完成了。
Codecademy-交互式學習Python的免費課程。
Programiz Pro-為Python初學者提供了一個策劃的學習路徑，該學習路徑為結構化的，深入的課程提供交互式測驗，編碼挑戰和現實世界中的項目。
programiz-學習Python編程。
很棒的Python-精選的Python框架，庫，軟件和資源的列表。
燒瓶教程 - 米格爾·格林伯格（Miguel Grinberg）的《燒瓶大型教程》。
Scaleer主題 - 免費資源來學習頂級極客的Python。
Python面試問題 - 頂級Python面試問題的完整列表，以幫助您王牌面試。
Python備忘單 - 一張綜合備忘單，可幫助您掌握Python。
Python教程 - Python教程：初學者的綜合指南
Python開發人員技能 - 通過2024年需要的20多個Python開發人員技能來提高您的技術職業。

⚡反應

React-官方站點文檔，教程。
Codecademy-編碼器的免費反應課程。
FreeCodeCamp-免費的Web開發資源，您也可以在其中學習React。
React教程 - React教程 - 基本原理，鉤子，上下文API，React路由器，通過編碼癮君子的自定義鉤子。
React Beach Resort-通過編碼吸毒者的React Beach Resort項目。
很棒的反應 - 關於React生態系統的一系列令人敬畏的事情。
REACT圖標 - 在您的React項目中將流行圖標包括在您的React -Icons中。
React訪談問題 - 頂級React訪談問題的完整列表，以幫助您王牌面試。
100+ React Redux訪談問題和答案（2023） - React Redux問題和答案的收集。

？蜜蜂

公共API-為開發人員提供了1000多個免費公共和開放REST API的集體清單。
jsonplaceholder-免費使用偽造的在線REST API進行測試和原型製作。
OpenWeather-從OpenWeatherMap中簡單，快速，自由的天氣API您可以訪問當前的天氣數據，每小時5和16天的預測。
Swapi-星球大戰API。
引號REST API-他們說，數據庫中有超過100萬以上的報價，這是世界上最大的此類數據庫。引號API可輕鬆訪問數據。
Rapid API-快速API包含是最大的API工具套件之一，其中包含大量免費API及其文檔化，這是一個名為Rapid API Learn的專用部分，其中包含有關使用和創建API的指南和教程。