[[343967]]

HTML

• W3C Markup Validator 檢查網頁文件的標記是否合法
• Meta Tags 編輯生成用于社交網絡等站點的元標簽，并預覽效果
• Favicon Generator 將 GIF、PNG、JPG 格式的圖像文件轉換為 ICO 格式

CSS

• Animate.css 開箱即用的跨瀏覽器 CSS 動畫效果
• animista 按需定制 CSS 動畫效果
• CSSeffectsSnippets CSS動畫效果收集，點擊某個效果即可復制相應的代碼片段至剪貼板
• SpinKit 匯集了實現各種加載效果的 CSS 代碼片段
• CSS Minifier 在線 CSS 代碼極簡化/壓縮工具

JavaScript

• JavaScript30 使用原生 JavaScript 在 30 天內完成 30 個項目
• Codewars和其他人一起完成真實的代碼挑戰，提升你的技術
• ESLint檢測、修正 JavaScript 代碼的問題
• Prettier格式化 JavaScript 代碼

圖標

• Font Awesome 網站開發最流行的圖標集
• Feather簡潔美觀的開源圖標
• Ionicons精心繪制的開源圖標
• Simple Icons 常見品牌的 SVG 圖標
• Material Design Icons 輕快、精美的符號圖標，包括常見操作和事項
• Tabler Icons 681 枚可定制的開源 SVG 圖標

色彩

• Material Design Colors Material Design色彩
• Flat UI Colors 2 14 組配色、280 種顏色
• Color Hunt 分享色彩搭配的自由開放平臺，包括成千上萬人工選取的配色，可以從中獲取配色的靈感
• Color Space配色方案、CSS 顏色漸變生成工具
• uiGradients美觀的顏色漸變
• Colors and Fonts 色彩和字體工具
• Coolors配色方案生成工具

插畫

• Undraw持續更新的精美的 SVG 插畫集
• manypixels 免費插畫集
• IRA Design 通過調配漸變色、搭配手繪組件定制插畫
• Free Illustrations by Lukasz Adam免費 SVG 插畫
• Blobmaker在線 SVG 形狀生成器
• Get Waves在線 SVG 波形生成器

圖片

• Unsplash 可供免費使用的圖片
• Pexels精美的免費圖片和視頻
• Burst免費高分辨率圖片，可用于網站和商業用途
• ISO Republic使用 CC0 許可的免費高分辨率圖片和視頻
• Pixabay令人驚嘆的免費（公共領域）圖片和視頻站點
• StockSnap.io 精美的免費圖片，同樣使用 CC0 許可
• Photopea在線圖片編輯工具，支持大量高級功能
• Online Image Compressor在線圖片壓縮工具，一次可以壓縮多達 20 張圖片
• Bulk Resize Photos最快的在線圖片縮放工具（圖片縮放和壓縮在本地完成，無需上傳到服務器）

參考

• Front-end Developer Handbook 2019 前端開發者手冊 2019 版，如何學習前端開發實踐的全面指引
• HackerRank 2020 Developer Skills Report HackerRank 的 2020 年開發者技能報告，有 116648 名開發者參與調查
• Stack Overflow Developer Survey 2020 Stack Overflow 的 2020 年開發者調查報告，將近 65000 名開發者參與調查
• HTML & CSS很好的學習 HTML、CSS 的資料
• Refactoring UI從開發者的角度講解如何應用特定的策略來設計美觀的用戶界面
• Airbnb JavaScript Style Guide Airbnb 的 JavaScript 風格指南，算是目前業界最流行的 JavaScript 代碼風格指南
• JavaScript & jQuery 很好的學習 JavaScript 和 jQuery 的資料
• You Don't Know JS 深入理解 JavaScript 語言的核心機制
• Eloquent JavaScript 面向編程初學者的 JavaScript 教程
• Learning JavaScript Design Patterns JavaScript 設計模式，面向 JavaScript 和 jQuery 開發者
• Web Content Accessibility Guidelines (WCAG) 2.1 各種讓網站的可訪問性更好的建議

可訪問性

• NV Access Windows平臺下的屏幕閱讀器
• ChromeVox Chrome Extension Google出品的 Chrome 屏幕閱讀插件
• axe Chrome Extension給 Chrome 開發者工具增加可訪問性測試的插件

部署

• GitHub Pages GitHub提供的免費靜態網站托管服務
• Netlify 30秒內部署你的網站
• Vercel 快速部署你的網站
• surge 只需一個命令就可以發布你的網站
• Heroku 在云端構建、運行你的應用

其他

• web.dev 評測網站性能（基于 Lighthouse）
• Shape Divider 定制各種形狀的網站分區 SVG 的工具
• GTmetrix 網頁性能分析工具
• Can I Use 前端技術的瀏覽器支持情況
• Carbon代碼轉圖片工具
• Wappalyzer檢測某個網站使用的技術棧