有哪些项目或练习可以帮助我练习HTML和CSS？

（我刚刚收到通知，说我之前写过这篇文章。它是面向想要练习 HTML 和 CSS 的初学者，我仍然坚持我的观点。）

首先：笔和纸！

用笔和纸创建一个网站。一个想法是创建一个展示你最喜欢的书的网站——用笔和纸画方框代表书的封面，用粗线写书名，用细线写作者。

然后开始将该图翻译成HTML格式。

停止！

你已经完成了一幅图，现在，只有你需要决定在哪里使用 HTML 标签。标题和作者分别应该使用哪个标签？从你的论文设计来看，将标题和作者信息组合在一起是否更合适？你是使用 div、header 还是 hgroup 将它们组合在一起？或者，你是否应该只使用一个元素，然后用 span 来区分两者？

你需要的是ID、类名，还是ID和几个类名？

现在来说说CSS。你的图可能很简单，你或许能一次性完美地实现样式。

停止！

为什么我在不同的元素上使用相同的样式？如何才能减少 CSS 代码的重复性？我还需要添加一些类。

第二步

缩小浏览器窗口后，你的设计就失效了。赶紧拿出纸笔，重新思考如何调整元素布局以适应空间。

现在回到 CSS 学习上来。学习最佳方法。如果你觉得媒体查询很难，那就复制项目，从头开始，针对这个屏幕尺寸重新设计网站。这不是好的做法，网站应该是响应式的，但你现在只是在练习，你之前尝试过为大屏幕设计，现在又想为小屏幕设计。

（题外话：学习一下 Git 的基础知识，即使是你，学习 Git 的基础知识也会受益匪浅。简单来说，它就像代码的监控录像。你可以回溯到代码正常运行的那一刻。）

第三步

到目前为止，你已经有了两个不同的网站，一个在小屏幕上显示效果好，一个在大屏幕上显示效果好。现在，使用媒体查询创建第三个版本！

通过第一步和第二步，您已经充分了解了在设计小屏幕和大屏幕页面时遇到的问题。现在您知道为了适应过渡效果，HTML 的结构需要如何调整。您也知道可能需要添加更多类，或者在某些地方添加一两个 div 元素。

返回顶部

你不需要使用 Photoshop，也不需要设计出精美的页面。你只需要在一张 A4 纸上放置一些元素（如果是图书网站，则包括书籍封面和书籍信息）。目前，如果你只使用 CSS 将这些元素按照你在 A4 纸上的布局方式排列，那么 CSS 就足够了。

对于较小的网站，方法类似：从 A4 纸上裁出一个完美的正方形。将正方形丢弃，然后在剩下的 A4 纸片上设计网站（与你在 A4 纸上的设计完全相同）。

设计这两个网站，然后将它们合并在一起（响应式设计的定义），这将比你可能做或复制的任何艺术设计都要好。

如果需要，可以在工作时边做边写。我每次学习复杂知识时都会这样做。我会创建一个 Markdown 文件（如果你不知道那是什么：它是一种文本文件），记录我正在做的事情、我应该思考的问题，以及我应该记住哪些内容以备将来项目之用。

完成这些步骤后，你可能会发现自己需要在这个过程中进行更多练习。你或许已经有了其他的设计想法，那就大胆去做吧！拿张新纸，尽情地涂涂画画。

网络上到处都是精美的网站截图。Pinterest 上就有很多。选一个你喜欢的。或者从你看到的每个设计中汲取你喜欢的元素，然后拼贴出你自己的设计（当然，纸笔仍然能帮你完成很多工作）。接下来，就开始用 HTML 和 CSS 重新创建这个新网站。

有一个叫做Frank DeLoupe 的工具，它是一个颜色拾取器，你可以从任何地方拾取任何颜色，并将颜色复制到剪贴板——在你的操作系统中查找类似的功能。浏览器可能也有类似的功能，但 Frank 的优势在于，你可以从任何地方拾取颜色，而不仅仅是网页。