你的网站会是什么样子？
首先：规划
在做任何事情之前，你需要一些想法。你的网站实际上应该做什么？网站基本上可以做任何事情，但是，对于你的第一次尝试，你应该保持简单。我们将从创建一个简单的网页开始，其中包含标题、图像和几个段落。
首先，你需要回答以下问题
- 你的网站主题是什么？你喜欢狗、纽约还是吃豆人？
- 你将在主题上呈现哪些信息？写一个标题和几个段落，并想想你想在页面上显示的图像。
- 你的网站长什么样？（用简单的、高级别的术语描述）。背景颜色是什么？什么类型的字体合适：正式的、卡通的、粗体和响亮的、微妙的？
注意：复杂的项目需要详细的指南，这些指南会深入到颜色、字体、页面上项目之间的间距、合适的写作风格等所有细节。这有时被称为设计指南、设计系统或品牌手册，你可以在Firefox Photon 设计系统中看到一个示例。
勾勒你的设计
接下来，拿起笔和纸，粗略地勾勒出你希望你的网站的样子。对于你的第一个简单的网页，没有太多需要勾勒的东西，但是你现在应该养成这个习惯。它真的很有帮助——你不必成为梵高！
注意：即使在真实的、复杂的网站上，设计团队通常也从纸上的粗略草图开始，然后使用图形编辑器或 Web 技术构建数字模型。
Web 团队通常包括图形设计师和用户体验（UX）设计师。图形设计师负责网站的视觉效果。UX 设计师在解决用户如何体验和与网站交互方面扮演着更抽象的角色。
选择你的素材
此时，最好开始整理最终将出现在你的网页上的内容。
文本
你应该仍然保留你之前写的段落和标题。将它们放在手边。
主题颜色
要选择颜色，请访问颜色拾取器并找到你喜欢的颜色。当你点击一种颜色时，你会看到一个奇怪的六字符代码，例如#660066。这称为十六进制代码（十六进制的简称），表示你的颜色。将代码复制到某个安全的地方以备后用。
图像
要选择图像，请访问Google 图片并搜索合适的图像。
- 找到你想要的图像后，点击该图像以获得其放大的视图。
- 右键点击图像（在 Mac 上按住 Ctrl + 点击），选择另存为…，然后选择一个安全的位置保存你的图像。或者，从浏览器地址栏复制图像的 Web 地址以备后用。
请注意，网络上的大多数图像，包括 Google 图片中的图像，都受版权保护。为了降低你侵犯版权的可能性，你可以使用 Google 的许可证过滤器。点击工具按钮，然后点击下面出现的使用权选项。你应该选择知识共享许可证选项。
字体
与图像一样，许多字体受许可证保护，这意味着你不能在你的网站上随意使用它们。Google Fonts是 Google 拥有的一个 Web 服务，提供对许多字体的访问。
找到字体后，主要有两种使用方式
- 在你的代码中添加引用，以从 Google 的服务器加载字体。
- 将字体文件下载到你的系统，自行托管字体，并在网站代码中使用你托管的副本。
注意：使用 Google Fonts 托管的字体可能会与欧盟的数据隐私法规GDPR不兼容，因为字体服务会公开用户的 IP 地址。如果这对你是潜在问题，那么可以选择第二个选项，或者选择符合 GDPR 的字体提供商，例如Bunny Fonts。
或者，你可以使用安全的 Web 字体，例如 Arial、Times New Roman 或 Courier New。