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