前端發展
你好呀
對於所有想要學習前端開發的人來說，這是一個開源存儲庫。
前端發展
前端Web開發是通過使用HTML，CSS和JavaScript將數據轉換為圖形接口的實踐，以便用戶可以查看並與該數據進行交互。
確保通過Star Mark展示您的支持並共享存儲庫
前端開發人員有用的資源列表
目錄
- 前端發展
- 你好呀
- 前端開發人員有用的資源列表
- 目錄
- 路線圖
- 有用
- 學習
- A11y
- YouTube頻道
- 部落格
- podcast
- 代碼編輯器
- 工具
- CSS框架
- 圖示
- 顏色
- 排版
- 設計靈感
- 動畫框架
- 庫存資源
- 地理位置
- 蜜蜂
- 模型
- 圖書
- 挑戰 /遊戲
- 免費的學生工具
- YouTube視頻
- 測試
路線圖
- 路線圖 - 針對前端開發人員的分步路線圖進行了詳盡的描述。
有用
- BGJAR-用於您的網站，博客和應用程序的免費SVG背景生成器。
- 檢查 - 檢查並調試您的移動網絡應用程序以及直接從Mac或Windows上的iOS設備上的網站。
學習
- Flexbox的完整指南| CSS -tricks- Flexbox佈局的綜合指南。
- 網格的完整指南| CSS -Tricks-網格佈局的綜合指南。
- 命令線電源用戶 - 用於Web開發人員的視頻系列，用於學習使用ZSH，Z和相關工具的現代命令行工作流程。
- CSS網格 - 完整的視頻課程有關CSS網格
- 最好的JS網站，以查看您最喜歡的JS框架的最佳GitHub存儲庫
- CodeCademy-一系列互動課程教導世界如何編碼。提供各種語言的免費和付費訂閱。
- Codementor-一種工具，可以在學習過程中從各種編碼語言中獲得經驗豐富的開發人員的幫助。
- Scaleer主題 - 學習諸如HTML，Java，JavaScript，Python等編程語言的平台。
- 征服響應式佈局 - 由凱文·鮑威爾（Kevin Powell）（https://twitter.com/kevinjpowell）製作。本課程將介紹他在他出色的21天課程中創建響應式佈局所需的一切。
- Coursera-從斯坦福大學和耶魯大學等著名學校提供的各種課程。
- CSS年鑑| CSS -Tricks- CSS許多功能的快速參考指南。
- CSS網格遊樂場 - 由Mozilla團隊策劃的視覺指南，可幫助您學習CSS的網格佈局功能，其中包括許多代碼示例和演示。
- 設計資源 - Skullface設計資源。
- dev.to-程序員分享想法並互相幫助的地方。
- DevProjects-一個免費的社區由高級開發人員的精心策劃項目組成，以幫助您彌合理論與實踐之間的差距。呢
- Dicoding Academy-每個人都可以從基本面學習編程（僅在印度尼西亞提供）。
- EDX-哈佛大學，麻省理工學院，沃頓商學院等一系列大學級課程。
- Egghead-“咬合大小”段中的網絡開發視頻教程。具有免費和“ Pro”（付費）會員資格。
- Enboard |前端資源 - 有關前端開發的有組織資源。
- Flexbox-升級您的Flexbox知識 - 在線，以殭屍為中心的故事課程。
- FreeCodeCamp-一種免費的資源，結合了編程項目和開發人員工作的面試準備。
- 前端大師 - 來自行業領導者的網絡開發視頻教程（經常更新）。具有免費（限時）和付費會員資格。
- Full Stack Open-赫爾辛斯基大學的全堆棧Web開發課程。一口氣學習React，Redux，Node.js，MongoDB，GraphQl和TypeScript！本課程將向您介紹基於JavaScript的現代網絡開發。主要重點是使用使用Node.js構建的REST API的ReactJ構建單頁應用程序。
- Geeksforgeeks-怪胎的計算機科學門戶。
- 可汗學院 - 一個通用的在線學習平台，還為開發人員提供了重要的課程。
- 學習 - 搜索交互式思維地圖以學習任何東西。
- 學習JavaScript-在互動環境中學習JavaScript。在瀏覽器中直接閱讀簡短的課程，記筆記和完整的挑戰。
- 掌握Markdown-一個迷你係列，將改變您編寫文檔的方式。
- Mozilla開發人員網絡 - 有關開放Web技術的最新信息。
- 完整的Web開發教程-Lyty.dev完整的Web開發教程，免費解釋了示例。
- PLURALSIGHT - 來自行業專家的無限在線開發人員培訓。
- Saylor-一種開放的在線學習解決方案，為學生提供大學學分機會。
- Scrimba-基於多種語言的基於代碼屏幕的學習。
- 蘇格蘭威士忌 - 許多網絡開發課程。具有免費和“ Premium”（付費）會員資格。
- 搜索課程 - 精選的趨勢課程和教程。
- SoloLearn-一個免費學習Web開發的門戶。
- Team Treehouse-跨多種語言和主題的自定進度學習。
- 現代JavaScript教程 - 有關JavaScript語言的所有內容。
- ODIN項目 - 用於學習Web開發的開源課程
- 教程點 - 具有交互式代碼示例的許多不同語言的教程。
- Udacity-在線學習任何東西 - 深度學習，機器學習，前端語言。
- Udemy-在線學習和教學市場。
- 觀看和代碼 - 針對要求智力嚴格和深度的學生的計算機科學學校。
- W3School-網絡開發參考庫。涵蓋HTML，CSS，JavaScript（jQuery，Ajax等）以及一些服務器端語言。包括描述和交互式示例。
- Web API | MDN-初學者需要了解的有關Web API的一切。
- Bulma CSS和Marksheet.io的Jeremy Thomas Creator在4分鐘內的網頁設計。
- Wesbos-網絡開發中的免費和高級課程
- Web開發技巧 - 您的所有CSS，JS，jQuery趨勢代碼都在一個地方源代碼。您的所有類型現代網絡開發和設計的方便合作夥伴。
- Web.dev- Google開發人員的現代快速網站指南和資源。
- 成為前端Web開發人員 - 與HTML，CSS，JavaScript和JQuery開發能力。
- WebGlossary.info-網絡開發和設計的詞彙表，有3500多個條目（截至2023年8月）
- 網絡技能 - 作為網絡開發人員學習的有用技能的視覺概述。
- 應用程序啤酒廠 - 一台平台，以涵蓋您的網絡開發技能
- Full Stack Open 2021-本課程用JavaScript作為現代Web應用程序開發的介紹。
- DevTools Tech-一個免費的面試準備平台，針對前端工程師，重點是高質量的現實世界編程問題。
⬆回到頂部
A11y
- A11Y樣式指南 - 由KSS記錄的樣式產生的生活方式指南或模式庫……具有可訪問性的扭曲。
- 斧頭 - 可訪問性測試工具包。
- 顏色對比分析儀 - CCA可幫助您確定文本的可讀性以及視覺元素的對比度，例如圖形控件和視覺指示器。
- Deque University-網絡和移動可訪問性技能的在線課程。
- W3C介紹Web可訪問性 - 策略，標準，資源，使殘疾人可以使用網絡。
⬆回到頂部
YouTube頻道
- APNA學院 - HTML，CSS，Bootstrap，JavaScript，Git，Git，GitHub，SQL
- Adrian Twarog- HTML，CSS，Bootstrap，JavaScript，React，React的教程
本地，UI/UX和酷設計的東西 - 1stwebdesigner- WordPress上的教程，PSD到HTML
- 布拉德·侯賽（Brad Hussey） - 自舉，薩斯（Sass），jquery，php，自由職業的教程
- CSS技巧 - Chris Coyier的YouTube頻道CSS CSS Tricks的YouTube頻道。
- CSS教程 - 侯賽因爵士（Husain Sir）在印地語中的教程，涵蓋了CSS的所有基礎知識。
- 編碼器指南 - HTML，CSS，JavaScript，Bootstrap的教程
- CodeVolution-關於React，Vue，Angular，MongoDB，JavaScript，Mean Stack，HTML，CSS的教程。
- 聰明的程序員 - 關於React，MongoDB，JavaScript，Mern Stack，HTML，CSS的教程。
- 德里克·巴納斯（Derek Banas） - C＃，Visual Basic，Django，Python，Nodejs，AngularJS，MongoDB，Jquery，Jquery，JavaScript，CSS，Ruby on Rails，Java，sqlite，sqlite，android，html，html，php，php，php，php，php，php，php，php，
- DevTips- HTML5，CSS，Sass，Bootstrap，Foundation，Jquery，Ruby on Rails on Rails，Github上的教程。
- DesignCourse- UI/UX設計或HTML5，CSS，SASS，動畫庫的教程。
- Dennis Ivy-關於Django和Flask Full -Stack Web開發項目的教程
- Elzero Web學校 -僅阿拉伯語
- FreecodeCamp-關於jQuery，JavaScript，React，數學，科學，軟件工程，開源軟件的教程
- 有趣的娛樂功能 - 關於JavaScript，React，功能編程，GraphQl，Life作為開發人員的教程
- Google Chrome Developers - 有關現代網絡開發的最新和最偉大的談判，採用專業指數，見解和技術，可幫助您提高網絡開發技能。
- 凱文·鮑威爾（Kevin Powell） - HTML，CSS上的教程，以簡單的方式幫助更好地理解CSS
- LearnCode.Academy- HTML，CSS，JQUERY，JAVASCRIPT，REECT JS / REDUX，節點JS的教程
- Leveluptuts- HTML，CSS，SASS，WordPress，Magento，Drupal，React，流星的教程
- Mackenzie Child-設計對代碼挑戰的設計 - UI上的教程，如何設計和編碼多種樣式的網站。
- 編碼列車 - 有關JavaScript，節點，機器學習，神經網絡，算法的教程
- NET NINJA- HTML，CSS，JQUERY，JAVASCRIPT，GIT和GITHUB，Bootstrap，Mangodb，PSD，psd到WordPress，PSD，psd到HTML等等。
- Thedigicraft- HTML，CSS，JQuery，PHP，Ajax，Bootstrap，MySQL上的教程。
- 當時的ewboston-關於ecmascript 6，react js / redux，django，angular 2，gulp，git，git，python，seo，sass，sass，sass，grunt，插圖儀，蒙古多德，php，php，php，ruby，ruby，ruby，ruby，ruby，ruby，客觀c
- Traversy Media - Tutorials on HTML, CSS, jQuery, PHP, Ajax, Bootstrap, MySQL, ECMAScript 6, React JS / Redux, Django, Angular, Ionic, Gulp, Git, Python, Node JS, PHP, Laravel, Cake PHP, Symfony, CodeIgniter, Programming Tips
- CodeWithHarry- HTML，CSS，JavaScript，Node JS，MongoDB和託管的教程。
- 使用MOSH的編程 - 關於React，Nodejs，Python，JavaScript，Angular，typescipt和C＃的教程。
- 開發 - 學習網絡開發，網頁設計，3D建模，諸如無花果等工具等等
- Web Dev簡化 - 使用HTML，JavaScript，CSS和其他相同項目的框架以及更多的框架學習網站開發
- Mozilla開發人員 - 用於幫助您作為網頁設計師，Web開發人員或涉及的網站或網絡應用程序的人員的視頻
- Academind-總有一些東西要學習。無論您想看角教程還是指南，vue.js，其他前端開發內容或數據科學主題或其他任何內容 - 您都可能正確
- Sonny Sangha項目教程有關React，Redux，Next JS和React本地的教程
- WB Web開發 - HTML，CSS，Bootstrap，Sass，JavaScript，Git和Github，MongoDB，Nodejs，reactjs的教程
- 在線教程 - 前端Web開發的頂級內容。具有HTML，CSS和JavaScript的獨家教程，具有驚人的效果。必須訪問所有前端開發人員
- Akshay saini-在前端面試技巧，面試經驗以及JavaScript的核心概念。
- DevTools的技術視頻 - 有關高級前端概念，面試問題和經驗，並專注於中間至高級JavaScript概念。
⬆回到頂部
部落格
- 10需要了解JavaScript概念課程 - 從基本到進步JavaScript概念，以簡單的方式解釋了每個JavaScript開發人員都需要知道的。
- 提高創意的100種方法 - 從Shaunta Grimes中提高創意的100種方法。
- 2017年設計綜述 - 2017年所有CODROPS Web開發資源的收集。
- 您（可能）忘記設計的50件事 - UX電動工具 - 中型 - 您可能忘了從喬恩·摩爾（Jon Moore）設計的50件事
- 代碼2K17的ACM月份：構建Moodify -ACM代碼2K17：從Ajay NS構建Moodify。
- 使用Github＆Cloudflare建立網站的插圖指南 - 使用Karan Thakkar的GitHub和Cloudflare設置網站的插圖指南。
- Brad Frost Blog- CSS＆HTML的Atomic Design，建築設計系統的作者。
- 最佳免費字體-70+最佳設計師字體 - 2019年免費商業用途
- CSS動畫與網絡動畫API：案例研究
- CSS技巧 - 有關CSS，HTML，JavaScript的每日文章以及與Web設計和開發有關的所有內容。
- 設計和創造力引號-Margaret Kelsey關於設計和創造力的72句話。
- 設計資源 - 用於設計和學習設計的資源清單。
- 變革設計 - Viba Mohan關於再生和可持續設計的文章。
- 域註冊商DNS和託管 - 域註冊商，DNS和來自Kirby Kohlmorge的託管
- Gatsby的初學者指南-Gatsby.js：如何設置和使用Aman Mittal的React靜態站點生成器
- 2016,2017，2018年所有內容的示例
- Flavio應對教程 - 關於JavaScript和Web開發的每日教程，Flavio Copes
- 從URL到互動 - 解釋我們的萬維網如何運作。
- 前端教條 - 前端開發的新聞和工具，通常每天兩次更新
- Frontend Weekly-與Frontend開發有關的最佳文章，鏈接和新聞每周向您的收件箱交付一次。
- 我如何使用CSS - 自定義CSS動畫上的Process文章對BitsofCode徽標進行動畫動畫。
- MinMax（）函數的工作原理 - CSS MinMax（）函數的解釋，可用於CSS網格佈局。
- 當您是技術新手時，如何建立令人印象深刻的投資組合 - 當您是Randle Browning的新手時，如何建立令人印象深刻的投資組合
- 如何使用JavaScript和HTML為絕對初學者構建隨機報價生成器 - 如何使用JavaScript和HTML構建隨機引用Generator，以適用於Sophanarith Sok的絕對初學者。
- 如何構建第一個VUE組件 - 初學者項目教程，以構建Sarah Dayan的VUE組件。
- 讓我們從頭開始編碼神經網絡 - 第1部分 - Typeme - 中間 - 讓我們從查爾斯·弗里德（Charles Fried）從頭開始編碼神經網絡
- 音樂播放器的靈感 - Muzli的音樂播放器2017年靈感。
- 前端清單 - 在啟動網站進行生產之前，您需要/測試的所有元素的詳盡列表。
- 當您只有14歲時，建造和銷售聊天機器人的感覺 - 當您只有14歲的Alec Jones時，建立和銷售聊天機器人的感覺
- 可折疊邊緣有什麼關係？ - CSS崩潰邊緣特徵的說明。
- fernandocomet的UX策劃資源列表的精心策劃列表。
- Airbnb開源 - 工程和數據科學文章以及開源項目。
- JS的成本 - 如何有效地交付JavaScript，以獲得Addy Osmani的寶貴用戶體驗。
- CSS捲軸snap- CSS滾動卡片上的教程，該教程使您可以在用戶完成滾動後鎖定視口。
- Chrome的預加載，預取和優先事項 - 有關Web Loading Operitives如何在Chrome的Neworking Stack上使用Addy Osmani的文章。
- 為自己學習git-傳統的中文
- Web開發人員的IDE-選擇用於Web開發的IDE時需要考慮的因素和良好選擇的示例。
- 2020年的前8個天氣API- 2020年的前8個天氣API-開發人員的最佳免費天氣API
- 數字海洋社區教程 - 專家的免費教程系列。所有這些都來自數字海洋社區。
- 對初學者的反應 - 前端開發人員的React.js手冊 - 前端開發人員的React.js手冊
- Ultimate React Resources - 博客包括博客文章，免費電子書，帶有精選列表的GitHub存儲庫，使用工作代碼在現實世界中對React.js的實際實現。
- CSS網格的完整介紹 - 一個博客，可通過構建不同的複雜佈局來了解CSS網格的基礎知識。
- Rado的博客） - 關於React依賴性和實現，GraphQL等文章的博客共同說明！
- ROBLOG-與技術，JavaScript，Node.js和Web開發有關的所有事物的首選目的地。
- 莫妮卡·鮑威爾（Monica Powell）博客 - 關於JavaScript，React，Gatsby和Git的很棒的博客。
- DevTools Tech-精心策劃了前端工程師的高質量資源。
僱用
podcast
- 編碼塊 - 專業程序員團隊的軟件開發播客。
- 前端歡樂時光 - 行業小組成員的前端，軟件和職業發展播客。
- JavaScript Jabber- JavaScript開發人員的播客。網站還提供許多與編程相關的播客。
- 語法 - Wes Bos和Scott Tolinski的前端開發播客從Tuts等級。
⬆回到頂部
代碼編輯器
Atom- Atom是一種文本編輯器，現代化，平易近人卻可以黑客入侵 - 您可以自定義任何事情，但可以進行有效的使用，而無需觸摸配置文件。開源|所有平台
支架 - 借助聚焦的視覺工具和預處理程序支持，Brackets是一款現代文本編輯器，可在瀏覽器中易於設計。它是為網絡設計人員和前端開發人員而製作的。開源|所有平台
Geany -Geany是一個小型且輕巧的綜合開發環境。
Intellijidea-噴氣橋的通用IDE。它具有代碼完成，Integrationa和版本控制系統（VCS）。
Notepad ++ -Notepad ++是免費的（如“言論自由”，也是“免費啤酒”中的）源代碼編輯器和支持幾種語言的替代者。僅使用Windows -PyCharm專門用於Python語言，它提供代碼分析，圖形調試器，集成的單元測試儀，與版本控制系統的集成，並與Django以及與Anaconda一起支持Web開發。所有平台|開源
崇高文本 - 代碼，標記和散文的複雜文本編輯器。所有平台
vim -vim是一個高度可配置的文本編輯器，用於有效地創建和更改任何類型的文本。它與大多數Unix系統和Apple OS X一起被包括在“ VI”中。
Visual Studio代碼 - 編輯重新定義。它具有Intellisense，內置的git命令，可擴展且可自定義的語法突出顯示和自動完成。開源|所有平台
WebStorm- WebStorm是最聰明的JavaScript IDE，是用於JavaScript和相關技術的集成開發環境。所有平台
Ultraedit -Ultraedit是一種功能強大的HTML，代碼編輯器可用於Mac，Windows和Linux。它帶有內置文件比較實用程序，自動完成，高級佈局，多標籤，多窗格編輯器以及最受歡迎的編程語言的語法突出顯示。
Nano -GNU Nano是Unix式操作系統的文本編輯器。
Stackblitz-一個用於JavaScript框架和庫的在線開放源代碼強大的代碼編輯器，具有一些很棒的功能，例如GitHub Imports，Live Server和Live Server和直接提交編輯器到Github！
⬆回到頂部
視覺工作室代碼擴展
- 自動重命名標籤 - 重命名一個HTML/XML標籤時，會自動重命名配對的HTML/XML標籤。
- 更好的評論 - 此擴展顏色代碼各種類型的註釋，使它們具有不同的意義，並在您的其餘代碼中脫穎而出。
- 括號對配色器 - 顏色匹配括號以使您的代碼更加可讀性 - 非常有用。
- 代碼咒語檢查器 - 與駱駝代碼配合良好的基本咒語檢查器。
- ES Lint -JavaScript Linter用於突出顯示代碼錯誤和最佳實踐。
- 格式化切換 - VS代碼擴展名，可讓您簡單單擊打開和關閉格式器（Prettier，Beautify，…）。
- git歷史記錄 - 查看git日誌，文件歷史記錄，比較分支或提交
- Gitlens-增強Visual Studio代碼中內置的GIT功能 - 通過GIT責備註釋和代碼鏡頭一目了然地可視化代碼作者身份，無縫導航和探索Git存儲庫，通過強大的比較命令獲得寶貴的見解，等等。
- JS片段 - 此擴展名在ES6語法中包含JavaScript的代碼段，用於VS代碼編輯器（支持JavaScript和Typescript）。
- 實時服務器 - 具有實時瀏覽器重新加載的快速開發實時服務器。
- 材料圖標主題 - Google材料主題圖標包。
- 路徑IntelliSense-當您開始在引號中鍵入路徑時，您將獲得目錄和文件名稱的IntelliSense。
- 孔雀 - 巧妙地更改工作區的工作區顏色。當您擁有多個VS代碼實例並且想快速確定哪個是哪個。
- Polacode-您知道您在文章和推文中看到的那些精美的代碼屏幕截圖嗎？好吧，他們很可能來自Polacode。它非常簡單。將一塊代碼複製到剪貼板，打開擴展名，粘貼代碼，然後單擊以保存圖像！
- Prettier-在保存時自動格式化代碼。
- quokka.js -quokka.js是用於快速JavaScript /打字稿原型製作的開發人員生產力工具。輸入時，在代碼旁邊的IDE中更新了運行時值並顯示在您的IDE中。
- 設置同步 - 設置同步擴展名在GitHub中保存設置。然後，您可以使用一個命令將它們加載到任何新版本的VS代碼中。
⬆回到頂部
工具
- API目錄|可編程Web
- Animista -CSS動畫預設/發電機
- 更好的代碼中心 - 根據軟件工程指南檢查GitHub代碼庫並提供反饋。
- 瀏覽 - 虛擬機上實時交互式跨瀏覽器測試。
- Lambdatest- 2000+瀏覽器和OS的測試網站和Web應用程序。
- 瀏覽器 - 在不同的瀏覽器和移動設備上測試網站和移動應用程序。
- 我可以使用...-桌面和移動瀏覽器上的HTML5，CSS3等支持表
- CheckBot-瀏覽器擴展程序，用於測試SEO，速度和安全問題的網站
- Codepen-社會發展環境，您可以在瀏覽器中編寫代碼，並在構建時查看結果。
- codeply- html，CSS，JavaScript編輯器遊樂場，供設計師和開發人員比較，原型和測試前端框架。
- CodesandBox-網絡開發的即時IDE和原型製作工具。
- 在線代碼編輯器中創建一個新的小提琴-JSFIDDLE -JSFIDDLE-測試JS，CSS，HTML或Coffeescript。
- 關鍵路徑CSS生成器 - 喬納斯·奧爾森（Jonas Ohlsson） - 減少瀏覽器必須通過渲染網頁的CSS數量。
- CrossBrowserTesting應用程序 - 用於在移動和桌面Web瀏覽器上運行功能網絡測試的Web服務。
- CSS備忘單 - 非常易於使用的CSS選擇器和屬性的一頁參考。它還包括Flexbox和Grid的類別。
- CSS Minifier-縮小您的CSS文件！
- CSS參考 - CSS的免費視覺指南。
- CSS觸發器 - 告訴您突變給定CSS屬性時觸發的是什麼。
- CSS過濾器 - 交互式CSS濾波器發生器
- Colorlisa-基於偉大藝術家的調色板生成器
- dirtymarkup-整理您的HTML，CSS和JavaScript代碼。
- ExtendSclass-提供工具以添加瀏覽器中可直接可用的功能。
- Favicon Generator-上傳圖像並為您的網站生成Favicon。
- iOS/Google Progressive Web應用清單的Favicon Generator -Online工具在不同平台上測試Favicons。
- 免費開發人員的東西 - 開發人員使用的免費內容清單要使用。有些服務永遠是免費的，或者至少有1年的免費服務。
- 免費開發人員 - 本網站擁有大量的免費和付費資源列表，不僅為前端開發人員，而且針對任何類型的開發人員而策劃。
- 基於文本生成Favicon-從文本，圖像或表情符號生成粉絲。
- 獲取波 - 生成許多類型的SVG波，用於Web設計。
- Glitch-小故障就像在Google文檔中一起工作 - 眾多人可以同時在同一項目上工作。
- 圖形生成器 - 為某些常見前端應用程序生成圖形。
- Google Analytics（分析） - 跟踪和報告網站流量的Web服務。
- Google APIS Explorer-交互式探索各種Google API的工具。
- sublime文本中的JavaScript控制台 - 測試JavaScript的教程，並通過Sublime Text 3中的構建系統執行它。
- jQuery Mega備忘單 - jQuery selectros，操縱，事件等的備忘單。
- JS bin-用於HTML，CSS和JS的Live Pastebin以及一系列處理器。
- 燈塔 - 開源，自動化工具，用於提高網頁的質量。
- 現代JavaScript備忘單 - Manuel Beaudru的JavaScript提示和概念的絕佳集合，可以很好地概述，如果您剛剛開始使用JavaScript和其他相關框架，則需要熟悉的許多內容。
- Node軟件包管理器（NPM） - JavaScript的軟件包管理器。
- 紗線 - JavaScript的軟件包經理，例如NPM。
- 反應器 - 複製響應站點在流行設備上的外觀。
- React備忘單 - 基於文檔的網站也是一個漸進的Web應用程序，這意味著即使在離線也可以正常運行。您可以通過關鍵字搜索或選擇一個預定義的過濾器之一。
- 響應式網格系統 - 生成靈活的網格以創建響應式網站。
- 正則表達式（REGEX）編輯器 - 有助於創建和驗證您的正則表達式。
- Sans Francisco-設計師的工具 - 設計師的工具收集
- ScreensizeMap-與設備無關像素中屏幕大小的比較。
- Sizzy：瀏覽器測試工具 - 一次在多個設備上開發和測試響應式設計的工具。
- 堆疊溢出 - 在線社區供開發人員提出問題並獲得答案。
- W3C標記驗證服務 - 檢查HTML，XHTML，SMIL，MATHML等中Web文檔的標記有效性。
- W3C CSS驗證服務 - 使用樣式表檢查CSS和XHTML文檔的有效性。
- 時間助理 - 幫助將Millis轉換為數據級，反之亦然。
- TINYPNG -PNG和JPEG壓縮/優化器
- Web開發人員清單 - 對網絡開發期間要介紹的內容進行了分類。
- 漸進式工具以優化您在Web上的性能 - 可用於改善頁面性能的工具列表。
- Stackblitz-可以通過鏈接共享的Angular和React項目的在線IDE。
- Postman（用於測試API的工具）-API客戶端以創建，共享，測試和文檔API。
- 免費的Bootstrap 5備忘單 - 這是Bootstrap 5類，變量和Mixins的交互式列表。
- JSONT-一種在線簡單而強大的JSON格式化工具。
⬆回到頂部
CSS框架
- Bootstrap-設計和自定義負責任的移動優先站點。
- Bulma CSS-基於Flexbox的模塊化開源框架。
- 焦糖 - 一個簡單，現代，響應迅速的網站框架。
- 紅衣主教 - 性能和可擴展性的模塊化移動優先框架。
- 元素CSS-基於VUE 2.0的組件庫。
- 基金會CSS-響應式前端框架家族。
- 半月 - 用於構建儀表板和工具的完全可定制且響應迅速的前端框架。
- Jeet-用於Sass和手寫筆的分數網格系統。
- 少-CSS網格系統用於設計自適應網站。
- 材料設計精簡版 - 在香草CSS，JS和HTML中實現材料設計組件。
- 物質化CSS -CSS框架旨在允許在任何平台上的所有產品中都有統一的用戶體驗。
- 毫克 - 簡約的CSS框架。
- 整潔 - 輕巧且靈活的雜種網格。
- 花瓣CSS-基於較少的光CSS UI框架。
- 純CSS-一組響應的小型CSS模塊。
- 語義UI -UI框架設計用於主題和響應式設計。
- 骨架CSS-簡單，響應式的樣板，以啟動任何響應式項目。
- Spectre CSS-輕巧，響應和現代CSS框架，以更快，可擴展的開發。
- Tacit-對於圖形設計的初學者來說，原始但有吸引力的框架。
- TailWindCSS-高度可定制的低級CSS框架。
- UI套件 - 網絡接口的輕質和模塊化前端框架。
- 非大氣 - 基於百分比的流體網格系統，而不是設定的列數。
- 重要的CSS-最小的侵入性CSS框架，用於使用Sass和Slim構建的Web應用程序。
⬆回到頂部
圖示
- Brandicons-圖標字體生成器和查看器。
- 平面圖標 - PNG，SVG，EPS，PSD和BASE64格式的免費圖標數據庫。
- 字體很棒 - 開源圖標集和具有一致樣式的工具包。
- Glyphicon-與Bootstrap，其他CSS框架和任何Web項目一起使用的圖標。
- Google材料設計圖標 - 材料圖標的概述以及如何將它們集成到項目中。
- Icomoon-圖標字體生成器和圖標集合。
- Icongram-來自不同來源的圖標包裝。
- ICONSVG-您項目的快速可自定義圖標
- ICONS8-始終如一的樣式和可自定義的圖標包。
- Ionicons- SVG和WebFont中的開源圖標。
- Mapicons-使用SVG標記和圖標標籤與Google Maps API和Google Places API一起使用的圖標字體。
- 材料設計標誌性字體 - 完整的材料設計圖標，適用於網站或桌面上的SVG。
- MFGLABS -ICONSET -MFG LAB的圖標集用於WebFonts和CSS。
- MICON- Windows字體和CSS工具包。
- 名詞項目 - 綜合圖標集合。
- Octicons - Github的項目圖標集合。
- 打開標誌性，免費開放的圖標集 - SVG，WebFont和Raster格式中的開源圖標集。
- OpenWebicons-可擴展向量圖標和徽標的WebFont。
- ReactiCons -SVG React React React Icon的圖標包裝。
- Remixicon-開源中性樣式圖標系統。
- SHAPE.SO-可自定義的圖標和動畫集合。
- Stackicons-社交品牌的可定製圖標。
- Typicons-嵌入WebFont中的免費使用向量圖標。
- 天氣圖標 - 天氣主題圖標字體和CSS。
- zocial | CSS3按鈕集 - 使用CSS創建社交按鈕，並將社交圖標作為字體。
⬆回到頂部
顏色
- Adobe顏色 - 色輪，提取主題，提取梯度，可訪問性工具等
- BADA55顏色代碼 - 將Leet單詞轉換為CSS十六進制顏色。
- Branition Colors-手工策劃的調色板收集最適合品牌。
- 彩色狩獵 - 開放的美麗調色板集
- Natalya Shelburne的顏色理論 - 代碼的人的實用顏色理論：有關顏色使用的教程與示例
- 色輪|配色方案 - Adobe Color CC-具有不同顏色規則的交互式色輪（可能）
- ColorDesigner工具 - 此工具的主要目的是幫助構建調色板並基於它生成色調和陰影。只需選擇顏色，其餘的應用程序就可以完成。您可以使用預選的顏色或顏色選擇器進行更多控制。在這裡還檢查其他工具
- Colormind -Bootstrap -Colormind是一種配色方案生成器，它使用深度學習自動將顏色pallete應用於實時網站模型。
- Coolors-超級快速的配色創建者，具有很多功能
- CSS梯度 - 策劃的站點列表，以探索梯度和調色板。
- 數據顏色選擇器 - 生成具有視覺等距顏色的調色板。對於數據可視化有用。
- 顏色設計 - 顏色設計的完整指南（文章中的文章）
- UI顏色平坦 - 平面設計的顏色選擇器
- 圖像彩色拾取器 - 圖像彩色選擇器和調色板生成器
- 大聲笑顏色 - 精選調色板靈感
- 材料調色板 - 材料設計的調色板生成器
- Palettable - Interactive color picker: creates a color scheme based on your preferences and palettes on the Internet
- Paletton - The Color Scheme Designer - Advanced tool for creating color schemes
- Picular - Google, but for colors - Primary color generator using Google's image search.
- Pigment - Palette Generator - Generate color palettes based on lighting and pigment.
- UI Gradients - Scroll through or pick from beautiful gradients, download JPG and copy CSS Code
- W3school Color Picker - Find the perfect color from the color wheel, easy control
- UI Color Picker - Best colors in few selected shades to choose from very helpful for quickly choosing and adding color to design. ！ [自由的]
⬆ back to top
排版
- A Crash Course in Typography: The Basics of Type - First article of a series on Typography
- Circular Font Combinations | Free Alternatives | Typewolf - A great resource for everything related to Typography
- Font Pair - Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs. - Clean web-tool on How to pair Google Fonts
- Fontspiration - An iOS app for creating custom typographic designs
- Fontsquirrel - A resource for FREE, hand-picked, high-quality, commercial-use fonts
- Google Fonts - A catalog of free & open source fonts, great details and font pair suggestions
- Just My Type - A collection of font pairings
- Table of Contents | The Elements of Typographic Style Applied to the Web - A practical guide to web typography
- Typekit - "Quality fonts from the world's best foundries"
- Typography Terms - An infographic on Typography Terms + explanations
⬆ back to top
Design Inspiration
- Admire The Web - Admire the Web is where we showcase the very best in website design inspiration - carefully curated and organised to keep you inspired.
- Awwwards - The Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
- Dribble - Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.
- Site Inspire - siteInspire is a showcase of the finest web and interactive design.
- Web design Inspiration - Find inspiration for your next web design project. We help web designers, digital agencies and entrepreneurs to be inspired. Everyday, our team of experts hand picks the best new web designs from all over the world.
- Behance - Behance is a social media platform to showcase and discover creative work like Graphic Design, Illustration, Game Design and many more things
- Pinterest - Pinterest has a host of design inspirations in a variety of forms and styles.
- Pixpa - Pixpa features some nice modern designs and inspirations for web designers and photographers.
- Lapa Ninja - Lapa Ninja is a gallery featuring the best 4127 landing page examples, free books for designers and free UI kits from around the web.
- Landings - Find the best landing pages for your design inspiration based on your preference.
⬆ back to top
Animation Frameworks
- Animate CSS - Choose, try out and get the CSS-Code for different animation types (over 70)
- Anime JS - It's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.
- Bounce JS - Tool and JS Library, creating CSS3 powered animations(adjustments possible) & export CSS code
- Magic Animations - Showcase of different animations with link to GitHub repo
- MO JS - The library provides built-in components to start animating from scratch like HTML, shape, swirl, burst, and stagger but also brings you tools to help craft your animation in a most natural way.
- Particles JS - A lightweight JavaScript library for creating particles.
- Typed JS - A JavaScript typing animation library with a great documentation on GitHub
- Wow JS - JavaScript library: Reveal CSS animation as you scroll down a page
⬆ back to top
Stock Resources
- Burst - Free, high-resolution images. All our pictures are free to download for personal and commercial use.
- Canva - 8,000+ free templates and thousands of free photos
- Free stock images and Videos - A great collection of stock photos, videos and other resources. Most of them under the CC0-License, all of them free.
- Gratisography - Photographer Ryan McGuire provides this collection of high-resolution pictures for free. You can use them on your personal or commercial project free of copyright restrictions.
- Humaaans - Library of editable people illustrations. Free for both commercial and personal use.
- I'd Pin That! - Created to help bloggers and non-designers create high quality images like those often seen on Pinterest. I'd Pin That is more than just a source for free images — it is an image editor! Use the tools provided here to add your own text and edit the images right on the site.
- Illlustrations - 120+ Awesome free illustrations made by the artist vijay verma on a 100 days challenge.
- MakerBook - The best free resources for creatives - A directory of sites to get free resources (Photography, Mockups, Graphics, Textures, Fonts, Colours, Video, Audio & Tools).
- Morguefile - Founded in 1996 by college student Michael Connors.Photographers contribute images to Morguefile for visitors to use in their creative projects. Yes, they're all completely free. The website does ask that you credit the photographer when possible.
- Open Doodles - A Free Set of Open-Source Illustrations.
- The Open Photo Project - The Open Photo Project is a photo sharing platform created in 1998 by Michael Jastremski. Contributors have offered their images free of charge under terms of Creative Commons licensing.
- Pexels - Exclusively stock photos of high quality, great feature: Filter photos by color.
- Picalls - Free photos and wallpapers licensed under the Creative Commons CC0 license.
- Pixabay - In addition to photos, Pixabay offers video, vectors and illustrations.
- Pikwizard - Free stock photo library for commercial and editorial use. Huge library of stunning, high quality, royalty free images. No attribution required
- Public Domain Archive - “a public domain image repository” created by Matt a graphic designer, web designer and photographer.Vintage and modern images.
- StockSnap.io - High quality stock photos free to download and use. Licensed under the Creative Commons CC0 license.
- The Stocks - Another awesome directory sharing sites for resources, loading directly on the webpage
- UnDraw - "MIT licensed illustrations for every project you can imagine and create
- UnSplash - "Beautiful, Free Photos" & themed collections of photos
- 3D Bay - "Free, 3D Illustrations" A collection of High-quality 3D Illustration resources
- Design Stripe - "Create beautiful illustrations, no design skills needed
⬆ back to top
地理位置
- Geocomplete-location autocomplete - An advanced jQuery plugin that wraps the Google Maps APIs Geocoding and Places Autocomplete services into a dropdown for an input-form.
- Google maps API | Google - Google Map APIs including documentation & learning resources - extensive
- Google maps API | Traversy - Great YouTube tutorial on using the Google Maps APIs
- OpenCage Geocoder - Free to use forward (lat/long to text) and reverse (text to lat/long) geocoding API
- GeoJS - Free to use API for geolocation lookup by IP address
⬆ back to top
蜜蜂
- Alexa API | Codecademy - Learn to develop a custom Amazon Alexa skill that respond to the user's voice with custom messages.
- Abstract APIs - Free utility API's for compressing images, creating user avatars, validating emails, and more
- jsonplaceholder - Fake Online REST API for Testing and Prototyping
- A list of public APIs
- Lorem Picsum - Easy to use and customize placeholder photos
- OpenWeatherMap - Weather API with free and paid licenses
- Random famous quotes | Rapid APIs - Gets a random quote in JSON format.
- TMDB API - API Service for those who are interested in displaying data/images about different movies, TV Shows or actors in their application.
- Unsplash Source - API to retrieve random images from Unsplash.com
- Web APIs | MDN
- News API - Locate articles and breaking news headlines from news sources and blogs across the web with our JSON API.
- Spotify API - Spotify's Web API allows you to find music and podcasts, manage your Spotify collection, control audio playing, and do a variety of other things.
⬆ back to top
Mockups
- Am I Responsive - This is a tool to check the responsiveness of a website and take a screenshot on multiple devices in a single frame. Go to the site and enter the URL to capture the screenshot. You should have separate screen capture tool to take the proper screenshot.
- Figma - Free app with a simple to use surface for designing, prototyping and sharing your website and app ideas
- Adobe XD - One of the best tool for UI/UX Design, Wireframe, animate, prototype, collaborate, and more
- Magic Mockups - Place your product in realistic environment! Free real-life product/app mockup generator. Laptop, Phone, Tablet, Imac.
- Rotato 3D Mockup Generator - Make video 3D mockups and images. No experience required. Unlimited renders. MacOS.
- The MockUp Club - Website that offers free downloads of design mockups (mostly Photoshop format).
- MockupsJar - Build mockups with screenshots of your application or web Design for free to share with customers and clients
- MockUPhone - Free and simple screenshots device mockups generator. Wrap your design in mobile devices or Laptop/Desktop in a few clicks!
- Multi Device Website Mockup Generator - Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, MacBook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click. You should have a proper screen grabber tool to take the screenshot from the browser.
- Wireframe.cc - Great tool for sketching out ideas and layouts, super minimalistic
⬆ back to top
圖書
- Ebook Foundation-free programing books: GitHub Repository - A directory of free learning resources, categorized by language
- HTML Basics - A workshop covering the basics of HTML (free pdf/18 pages)
- HTML5 for Masterminds, 2nd Edition - A complete course from Beginner to Mastermind
- HTML5 Pocket Reference (Pocket Reference (O'Reilly) - A comprehensive compact reference for HTML 5
- HTML Tutorialspoint - A thorough tutorial on HTML (free pdf/486 pages)
- Learn How To Code In HTML5 and CSS3 - A free e-book about making websites in HTML5 and CSS for absolute beginners
- Responsive Web Design with HTML5 and CSS3 - A comprehensive book about making RWD
- You don't know JS - Book series diving deep into the core mechanisms of the JavaScript language.
- Guide to Git and Github - A beginner friendly guide to using git and working with Github.
- Introduction to HTTP - Introduction to HTTP, the stateless protocol underlying all of the web.
- Introduction to the Command Line - A short and beginner friendly introduction to the command line, covering common commands that will make you immediately productive.
- HTML & CSS Books ![Free]
- Web Design Playground, Second Edition - Modern HTML, CSS, and web design standards.Paid
- Build a Frontend Web Framework (From Scratch) - Learn how a frontend web framework works by coding your own.Paid
⬆ back to top
Challenges / Games
- Ace Front End - Ace Front End has complete and practical coding challenges, with a detailed walk through of a perfect interview solution.
- Codepen Challenges - Each month has a theme and every week there is a new challenge prompt that you can use to build a project online using HTML, CSS and JavaScript. The best projects are featured on Codepen's homepage.
- Codewars - Improve your skills by training with others on real code challenges.
- CSS Battle - CSSBattle is an online CSS Code Golfing game. Here, players from all around the world try to visually replicate Targets in smallest possible CSS code and battle it out to get to the top of the leaderboard.
- CSS Diner - It's a fun game to learn and practice CSS selectors.
- CSS Zen Garden - A demonstration of what can be accomplished through CSS-based design, and a chance to do your own.
- Dev Challenges - Made by Thu Nghiem. devChallenges.io is a community driven platform for anyone who wants to solve practical tasks. It has some tricky and curated challenges.
- Flexbox Defense - It is a game that covers the flex properties align-items, justify-content, flex-direction, align-self and has 12 different levels.
- Flexbox Froggy - This game is also about Flexbox and it covers even more flex properties: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and has 24 different levels.
- Front End Mentor - Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 192,401 developers building projects, reviewing code, and helping each other get better.
- Grid Garden - Interactive CSS code game. Practice your CSS skills by watering your garden! It has 28 different levels to learn CSS Grid Layout.
- Hackerrank - Practice coding, prepare for interviews, and solve interview style coding challenges.
- JavaScript30 - A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript.
- Leetcode - Coding problems to solve in a range of categories and difficulties
- Project Euler - Challenging computer science and mathematical problems.
- 100DaysOfCode - Regardless of your coding skills or your language of choice, this challenge invites you to code for at least 1 hour a day.
- Devtools Tech - Devtools Tech is a free platform for Frontend Engineers to practice high quality real world programming interview questions, follow curated learning paths, read blogs, and track progress across various frontend domains.
⬆ back to top
Free Tools For Students
- JetBrains Student License : Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members.
- Student Developer Pack : The best developer tools, free for students via @githubeducation
⬆ back to top
YouTube Videos
- Flexbox in 20 minutes - Quick crash-course on the CSS Flexbox model.
- SVGs can do that ? - Sarah Drasner's talk on nontypical pratical uses of SVGs.
- CSS Grid Tutorial - Use CSS grid to structure and position websites with ease.
- Git and GitHub for Beginners - Crash Course - Ad-free tutorial by freeCodeCamp.
- 12HR Coding Bootcamp 2021! - Complete frontend bootcamp!
⬆ back to top
測試
- Jest - JavaScript testing framework
- Mocha - JavaScript testing framework
- Karma - JavaScript test runner
- Istanbul - JavaScript test coverage tool
- TestCafe - Node.js end-to-end testing
- Cypress - JavaScript end-to-end testing framework
- Puppeteer - Google's Chrome automation tool for E2E testing.
- Playwright - Microsoft's browser automation tool for E2E testing.
- Sinon.JS - Standalone test spies, stubs and mocks for JavaScript
- Chai - Assertation library for JavaScript testing
- PactumJS - REST API Testing Tool used to automate e2e, integration, contract & component (or service level) tests
- Vitest - Vitest is a blazing fast unit test framework powered by Vite
⬆ back to top
