[[343967]]

HTML

• W3C Markup Validator 檢查網(wǎng)頁文件的標(biāo)記是否合法
• Meta Tags 編輯生成用于社交網(wǎng)絡(luò)等站點(diǎn)的元標(biāo)簽，并預(yù)覽效果
• Favicon Generator 將 GIF、PNG、JPG 格式的圖像文件轉(zhuǎn)換為 ICO 格式

CSS

• Animate.css 開箱即用的跨瀏覽器 CSS 動(dòng)畫效果
• animista 按需定制 CSS 動(dòng)畫效果
• CSSeffectsSnippets CSS動(dòng)畫效果收集，點(diǎn)擊某個(gè)效果即可復(fù)制相應(yīng)的代碼片段至剪貼板
• SpinKit 匯集了實(shí)現(xiàn)各種加載效果的 CSS 代碼片段
• CSS Minifier 在線 CSS 代碼極簡(jiǎn)化/壓縮工具

JavaScript

• JavaScript30 使用原生 JavaScript 在 30 天內(nèi)完成 30 個(gè)項(xiàng)目
• Codewars和其他人一起完成真實(shí)的代碼挑戰(zhàn)，提升你的技術(shù)
• ESLint檢測(cè)、修正 JavaScript 代碼的問題
• Prettier格式化 JavaScript 代碼

圖標(biāo)

• Font Awesome 網(wǎng)站開發(fā)最流行的圖標(biāo)集
• Feather簡(jiǎn)潔美觀的開源圖標(biāo)
• Ionicons精心繪制的開源圖標(biāo)
• Simple Icons 常見品牌的 SVG 圖標(biāo)
• Material Design Icons 輕快、精美的符號(hào)圖標(biāo)，包括常見操作和事項(xiàng)
• Tabler Icons 681 枚可定制的開源 SVG 圖標(biāo)

色彩

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

插畫

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

圖片

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

參考

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

可訪問性

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

部署

• GitHub Pages GitHub提供的免費(fèi)靜態(tài)網(wǎng)站托管服務(wù)
• Netlify 30秒內(nèi)部署你的網(wǎng)站
• Vercel 快速部署你的網(wǎng)站
• surge 只需一個(gè)命令就可以發(fā)布你的網(wǎng)站
• Heroku 在云端構(gòu)建、運(yùn)行你的應(yīng)用

其他

• web.dev 評(píng)測(cè)網(wǎng)站性能（基于 Lighthouse）
• Shape Divider 定制各種形狀的網(wǎng)站分區(qū) SVG 的工具
• GTmetrix 網(wǎng)頁性能分析工具
• Can I Use 前端技術(shù)的瀏覽器支持情況
• Carbon代碼轉(zhuǎn)圖片工具
• Wappalyzer檢測(cè)某個(gè)網(wǎng)站使用的技術(shù)棧