9种Web开发人员必备的工具和资源

拼搏现实的明天。 2022-09-01 15:43 194阅读 0赞

#  #

![5499ebc58620358f1479a8f865be95af.png][]

原文 | https://betterprogramming.pub/9-must-have-tools-and-resources-for-web-developers-86d6832f0242

翻译 | 小爱

学习 Web 设计或 Web 开发所需的技能是你在开始Web工作的第一步，但它还涉及到一些你需要熟悉的开发工具。

今天我与你分享的这些工具资源，对学习Web 开发、Web 设计或两者兼有一定帮助，希望你会喜欢。

**1、调色板——Colorhunt**

地址：https://colorhunt.co/

![93a4b82ce5a9fb8743c6cb86c124b956.png][]

Color Hunt 是一个开放的调色板集合。该工具提供数以千计的美学配色方案及其颜色代码。你可以在这里为你的项目寻找色彩灵感和完美调色板的绝佳工具。

你也可以保存你最喜欢的调色板，管理你的个人收藏，并可以快速访问以复制颜色代码。

**2、响应式设计——XRespond**

地址：https://xrespond.com/

![bba8ca7d7a8c6c3c8bce6bb1ff1d5516.png][]

XRespond 应用程序是一个“虚拟设备实验室”，你可以在这里预览任何网站在各种设备上的显示效果，包括各种型号的 iPhone、iPad、诺基亚、Google Nexus、Kindle 和 Chromebook。

它有一个下拉菜单，可以从多种智能手机、平板电脑和笔记本电脑中进行选择，以测试特定设备。如果你想查看你的网站在特定显示器上的呈现效果，它还支持自定义宽度/高度设置。

虽然测试应该在真实设备上完成，但此工具允许你在不同设备上模拟你的站点，以直观地让人们了解你的作品。

注意：如果你正在寻找一种类似的工具来模拟你在本地构建的项目，一个很好的选择是 Am I Responsive。尽管屏幕尺寸和其他功能受到限制，但它允许你通过在 URL 栏中使用 http://localhost/ 来了解你的站点在各种设备上的显示方式。

**3、Web 性能测试——****WebPageTest**

地址：https://www.webpagetest.org/

![101b65129a946d2f34d74fc212fc7a70.png][]

WebPageTest 是比较流行的网页性能测量工具之一，而且是免费的。它能够帮你从世界各地的许多不同位置以及许多不同的浏览器中进行站点的Web性能测试。

输入你的网站，然后单击开始测试。

以下是一些显示输出窗口参数的值：

*  加载时间：加载页面所需的时间
 *  首字节时间：你的请求开始执行的时间
 *  页面大小：网页的总大小
 *  请求数：你的网页发出的请求数

它还提供信息，包括网络托管性能检查、资源加载瀑布图和改进建议。

**4、 可视化网格生成器——CSS Grid**

地址：https://cssgrid-generator.netlify.app/

![82386425ca8c87c17d2680e5fa6dc980.png][]

CSS Grid 已经被证明是 CSS 最令人兴奋的演变。它是一个特定的 CSS 工具，用于构建你能想到的任何 Web 布局，从最简单到最复杂，将使用浮动布局的黑暗时代抛在脑后。

CSS Grid Generator 是一款在线工具，适用于使用可视化编辑器对布局进行编码的人。界面非常时尚，你可以立即组合一个基本的 CSS 网格布局。

**5、 CSS 代码生成器——CSS3 生成器**

地址：https://css3generator.com/

![41deb8d3c61eb16bda3e4232b45d0304.png][]

CSS3 Generator 是我最喜欢的工具之一，可以在可视化的帮助下轻松生成 CSS 代码。你可以为框大小、过渡、变换、弹性框、列等生成 CSS 代码。

它是免费软件，不需要下载并允许用户通过下拉框选择选项。

**6、 免费库存照片 — Unsplash**

地址：https://unsplash.com/

![1790d436dd6630470c456c13d9d69018.png][]

Unsplash 是一个很好的免费库存照片资源，你可以在你的 Web 开发项目中使用它们。它授予你“不可撤销的、非排他性的、全球版权许可，可以免费下载、复制、修改、分发、执行和使用来自 Unsplash 的照片，包括用于商业目的，而无需获得摄影师或 Unsplash 的许可或归属。”

该平台拥有超过 207,000 名贡献摄影师，并在其不断增长，该平台有超过170 亿张照片，每月以200万张的速度进行增长。

**7、免费网页字体——Google Fonts**

地址：https://fonts.google.com/

![bcdce5471e2afa08368cbdfcf0e32da9.png][]

根据维基百科的说法，谷歌字体是“一个包含一千多个免费和开源字体系列的库，一个用于浏览库的交互式网络目录，以及通过 CSS 和 Android 使用字体的 API。”

由于 Google Fonts 目录中列出的所有字体都是开源的，你不仅可以将它们用于任何网页，无论是商业的还是非商业的。

而且与 Typekit 不同的是，你还可以将它们下载到你的计算机上，甚至对其进行调整变成你自己喜欢的样式字体！

要使用 Google 字体：

使用左侧的过滤器来显示你想要选择的字体种类，并选择你喜欢的几种字体。

要选择字体系列，请按它旁边的 ⊕ 按钮。

选择字体系列后，按页面底部的 \[Number\] Families Selected 栏。

在结果屏幕中，你首先需要复制显示的 HTML 代码行并将其粘贴到 HTML 文件的头部。将它放在现有的 <link> 元素之上，以便在你尝试在 CSS 中使用它之前导入字体。

然后，你需要根据需要将列出的 CSS 声明复制到你的 CSS 中，以将自定义字体应用于你的 HTML。

一些最流行的谷歌字体是 Robotto、Lato、Open Sans、Montserrat。

**8、免费网页图标 — Font Awesome**

地址：https://fontawesome.com/

![4010e47a53bf680986377d715b9e468d.png][]

Font Awesome 是将字体图标添加到网站的最流行方式。Font Awesome 图标是使用可缩放矢量创建的，因此，它可以在任何尺寸的屏幕上都能正常工作。

它是免费的、开源的，并且对 GPL（通用公共许可证）友好。你可以将它用于商业项目、开源项目或几乎任何你想要的项目。

在 CSS 中使用 Font Awesome 图标：

将整个 font-awesome 目录复制到你的项目中。

在 HTML 的 <head> 中，将该位置引用到你的 font-awesome.min.css。

你可以使用 CSS 前缀 fa 和图标名称将 Font Awesome 图标放置在几乎任何位置。Font Awesome 旨在与内联元素一起使用。

**9、标记验证——W3C验证器**

地址：https://validator.w3.org/

![937c5539b2abd8591e28217280065e1c.png][]

标记验证是确保网页技术质量的重要一步。标记验证服务是万维网联盟的一个验证器，它允许互联网用户根据文档类型定义检查 HTML5 之前的 HTML 和 XHTML 文档是否有良好格式的标记。

W3C 验证可帮助你在搜索引擎 (SEO) 中获得更好的收益。因搜索在搜索时会检查网站的 HTML 或 XHTML 代码，因此代码中的错误会影响网站的性能引擎网站的 SEO 产生重大 影响。

感谢你的阅读，希望今天内容对你有用。

**学习更多技能**

**请点击下方公众号**

![1dd624dbbdbc5c46a5eba4ead11283d7.gif][]

![3cc1314fe028c0c541aab857cfd58397.png][]

![24acefa8c64d6593a98d2aaadc49b175.png][]

[5499ebc58620358f1479a8f865be95af.png]: /images/20220829/1fc09d22f9af4356b1a5378e8a915769.png
[93a4b82ce5a9fb8743c6cb86c124b956.png]: /images/20220829/a0ae63451ced40f096b9c23af9b41b02.png
[bba8ca7d7a8c6c3c8bce6bb1ff1d5516.png]: /images/20220829/de406dd6080f4126a6eb5f0846161574.png
[101b65129a946d2f34d74fc212fc7a70.png]: /images/20220829/640a854057814c1eabc12fe71318b638.png
[82386425ca8c87c17d2680e5fa6dc980.png]: /images/20220829/545400ce068c43dc97257f2e1b7fbfce.png
[41deb8d3c61eb16bda3e4232b45d0304.png]: /images/20220829/102a0c971cbe4bf78ebcd23211b83696.png
[1790d436dd6630470c456c13d9d69018.png]: /images/20220829/5ab6b4e4eb984874b5e4a3d59347471a.png
[bcdce5471e2afa08368cbdfcf0e32da9.png]: /images/20220829/77907a9376664b3ea013d2eab49f6aff.png
[4010e47a53bf680986377d715b9e468d.png]: /images/20220829/0ca24be5d4c44c4ca9a04420edbbc689.png
[937c5539b2abd8591e28217280065e1c.png]: /images/20220829/4e04048aeaba4a81a0528b264cf987b8.png
[1dd624dbbdbc5c46a5eba4ead11283d7.gif]: /images/20220829/1e674e9313bd4aa6a240b719fb83c4a2.png
[3cc1314fe028c0c541aab857cfd58397.png]: /images/20220829/a8cd24f2670c4806852d6d917351b358.png
[24acefa8c64d6593a98d2aaadc49b175.png]: /images/20220829/ebed546e68b8405abdfaa87cfffaa383.png