原文 | https://betterprogramming.pub/9-must-have-tools-and-resources-for-web-developers-86d6832f0242學(xué)習(xí) Web 設(shè)計(jì)或 Web 開發(fā)所需的技能是你在開始Web工作的第一步，但它還涉及到一些你需要熟悉的開發(fā)工具。今天我與你分享的這些工具資源，對學(xué)習(xí)Web 開發(fā)、Web 設(shè)計(jì)或兩者兼有一定幫助，希望你會喜歡。
Color Hunt 是一個(gè)開放的調(diào)色板集合。該工具提供數(shù)以千計(jì)的美學(xué)配色方案及其顏色代碼。你可以在這里為你的項(xiàng)目尋找色彩靈感和完美調(diào)色板的絕佳工具。你也可以保存你最喜歡的調(diào)色板，管理你的個(gè)人收藏，并可以快速訪問以復(fù)制顏色代碼。2、響應(yīng)式設(shè)計(jì)——XRespond
XRespond 應(yīng)用程序是一個(gè)“虛擬設(shè)備實(shí)驗(yàn)室”，你可以在這里預(yù)覽任何網(wǎng)站在各種設(shè)備上的顯示效果，包括各種型號的 iPhone、iPad、諾基亞、Google Nexus、Kindle 和 Chromebook。它有一個(gè)下拉菜單，可以從多種智能手機(jī)、平板電腦和筆記本電腦中進(jìn)行選擇，以測試特定設(shè)備。如果你想查看你的網(wǎng)站在特定顯示器上的呈現(xiàn)效果，它還支持自定義寬度/高度設(shè)置。雖然測試應(yīng)該在真實(shí)設(shè)備上完成，但此工具允許你在不同設(shè)備上模擬你的站點(diǎn)，以直觀地讓人們了解你的作品。注意：如果你正在尋找一種類似的工具來模擬你在本地構(gòu)建的項(xiàng)目，一個(gè)很好的選擇是 Am I Responsive。盡管屏幕尺寸和其他功能受到限制，但它允許你通過在 URL 欄中使用 http://localhost/ 來了解你的站點(diǎn)在各種設(shè)備上的顯示方式。地址：https://www.webpagetest.org/
WebPageTest 是比較流行的網(wǎng)頁性能測量工具之一，而且是免費(fèi)的。它能夠幫你從世界各地的許多不同位置以及許多不同的瀏覽器中進(jìn)行站點(diǎn)的Web性能測試。它還提供信息，包括網(wǎng)絡(luò)托管性能檢查、資源加載瀑布圖和改進(jìn)建議。4、 可視化網(wǎng)格生成器——CSS Grid地址：https://cssgrid-generator.netlify.app/
CSS Grid 已經(jīng)被證明是 CSS 最令人興奮的演變。它是一個(gè)特定的 CSS 工具，用于構(gòu)建你能想到的任何 Web 布局，從最簡單到最復(fù)雜，將使用浮動布局的黑暗時(shí)代拋在腦后。CSS Grid Generator 是一款在線工具，適用于使用可視化編輯器對布局進(jìn)行編碼的人。界面非常時(shí)尚，你可以立即組合一個(gè)基本的 CSS 網(wǎng)格布局。地址：https://css3generator.com/
CSS3 Generator 是我最喜歡的工具之一，可以在可視化的幫助下輕松生成 CSS 代碼。你可以為框大小、過渡、變換、彈性框、列等生成 CSS 代碼。它是免費(fèi)軟件，不需要下載并允許用戶通過下拉框選擇選項(xiàng)。6、 免費(fèi)庫存照片 — Unsplash
Unsplash 是一個(gè)很好的免費(fèi)庫存照片資源，你可以在你的 Web 開發(fā)項(xiàng)目中使用它們。它授予你“不可撤銷的、非排他性的、全球版權(quán)許可，可以免費(fèi)下載、復(fù)制、修改、分發(fā)、執(zhí)行和使用來自 Unsplash 的照片，包括用于商業(yè)目的，而無需獲得攝影師或 Unsplash 的許可或歸屬?！?/span>該平臺擁有超過 207,000 名貢獻(xiàn)攝影師，并在其不斷增長，該平臺有超過170 億張照片，每月以200萬張的速度進(jìn)行增長。7、免費(fèi)網(wǎng)頁字體——Google Fonts地址：https://fonts.google.com/
根據(jù)維基百科的說法，谷歌字體是“一個(gè)包含一千多個(gè)免費(fèi)和開源字體系列的庫，一個(gè)用于瀏覽庫的交互式網(wǎng)絡(luò)目錄，以及通過 CSS 和 Android 使用字體的 API。”由于 Google Fonts 目錄中列出的所有字體都是開源的，你不僅可以將它們用于任何網(wǎng)頁，無論是商業(yè)的還是非商業(yè)的。而且與 Typekit 不同的是，你還可以將它們下載到你的計(jì)算機(jī)上，甚至對其進(jìn)行調(diào)整變成你自己喜歡的樣式字體！使用左側(cè)的過濾器來顯示你想要選擇的字體種類，并選擇你喜歡的幾種字體。選擇字體系列后，按頁面底部的 [Number] Families Selected 欄。在結(jié)果屏幕中，你首先需要復(fù)制顯示的 HTML 代碼行并將其粘貼到 HTML 文件的頭部。將它放在現(xiàn)有的 <link> 元素之上，以便在你嘗試在 CSS 中使用它之前導(dǎo)入字體。然后，你需要根據(jù)需要將列出的 CSS 聲明復(fù)制到你的 CSS 中，以將自定義字體應(yīng)用于你的 HTML。一些最流行的谷歌字體是 Robotto、Lato、Open Sans、Montserrat。8、免費(fèi)網(wǎng)頁圖標(biāo) — Font Awesome地址：https://fontawesome.com/
Font Awesome 是將字體圖標(biāo)添加到網(wǎng)站的最流行方式。Font Awesome 圖標(biāo)是使用可縮放矢量創(chuàng)建的，因此，它可以在任何尺寸的屏幕上都能正常工作。它是免費(fèi)的、開源的，并且對 GPL（通用公共許可證）友好。你可以將它用于商業(yè)項(xiàng)目、開源項(xiàng)目或幾乎任何你想要的項(xiàng)目。在 CSS 中使用 Font Awesome 圖標(biāo)：將整個(gè) font-awesome 目錄復(fù)制到你的項(xiàng)目中。在 HTML 的 <head> 中，將該位置引用到你的 font-awesome.min.css。<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
你可以使用 CSS 前綴 fa 和圖標(biāo)名稱將 Font Awesome 圖標(biāo)放置在幾乎任何位置。Font Awesome 旨在與內(nèi)聯(lián)元素一起使用。9、標(biāo)記驗(yàn)證——W3C驗(yàn)證器地址：https://validator.w3.org/
標(biāo)記驗(yàn)證是確保網(wǎng)頁技術(shù)質(zhì)量的重要一步。標(biāo)記驗(yàn)證服務(wù)是萬維網(wǎng)聯(lián)盟的一個(gè)驗(yàn)證器，它允許互聯(lián)網(wǎng)用戶根據(jù)文檔類型定義檢查 HTML5 之前的 HTML 和 XHTML 文檔是否有良好格式的標(biāo)記。W3C 驗(yàn)證可幫助你在搜索引擎 (SEO) 中獲得更好的收益。因搜索在搜索時(shí)會檢查網(wǎng)站的 HTML 或 XHTML 代碼，因此代碼中的錯(cuò)誤會影響網(wǎng)站的性能引擎網(wǎng)站的 SEO 產(chǎn)生重大 影響。
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號
