正在进行我的第一个项目（希望得到一些反馈）

大家好！最近我在 freeCodeCamp 上完成了响应式网页设计认证。在这篇文章中，我想向大家展示我构建的项目，以及我在这个过程中的一些想法和收获。

警告：请耐心等待，如果我没有使用正确的术语，我很抱歉。

#1 项目：致敬页面

这次我选择了 Grace Hopper。

CodePen 链接

想法：

• 我对于我想要的设计只有一个非常模糊的想法，所以我不得不花一段时间尝试字体和颜色，直到对结果满意为止。

• 为了实现“早期生活”部分想要的深色背景，我了解到我可以添加margin: 0到body，这样背景颜色就可以覆盖整个部分。

• 最初，我把这个添加到width: 100vw了“早年生活”部分，以为这样就能实现我想要的（全宽）深色背景，结果却出现了一个水平滚动条，真是烦人！当然，我花了好几分钟才弄清楚，还花了好几个小时浏览论坛。解决办法：直接删除这个width属性就行了，因为没必要。

#2 项目：调查表

我选择的主题是“工作倦怠”

CodePen 链接

想法：

• 我觉得这次最难的部分是表单控件的样式设计。这对我来说是一个全新的世界。

• 我了解了box-sizing它在设计块元素样式时的重要性。

• 我了解到，对于垂直对齐（align-items），父容器应该具有定义的height属性，并且为了使 margin-auto 技术起作用，它需要一个定义的width属性，但它不能是 100%（呃）。

#3 项目：产品登陆页面

为此，我确实花时间挑选颜色，甚至设计了一个非常简单的标志，这为我节省了很多时间。

CodePen 链接

想法：

• 我明白了“少即是多”。有时候，我会想出一些非常复杂（且不必要）的方式来显示我想要的布局，但后来发现，只需几行代码就能得到我想要的结果。

• 我学习了如何添加 CSS 图标，特别是 Font Awesome 的图标。

• 我了解了分组选择器及其重要性。

• 我无法弄清楚的一个问题是如何做出iframe响应，但总的来说，我对最终结果感到非常满意。

#4 项目：技术文档页面

这次活动我玩得很开心。我选择的主题是 CSS Flexbox。

CodePen 链接

• 我遇到的第一个挑战是创建固定侧边栏，我不想使用它，position: fixed所以我了解了更多相关知识position: sticky。

• 我还了解了溢出以及如何使用该auto属性帮助我实现我想要的布局。

• 我尝试position: absolute将“Maru 制造”放在侧边栏底部，一开始还算管用。但是，由于这会将该元素从常规布局中移除，当我垂直调整窗口大小时，它会与菜单重叠，所以我决定将其保留在原来的位置。

#5 项目：个人作品集

CodePen 链接

想法：

• 这实际上是我为 freeCodeCamp 提交的原始项目的第二个版本。

• 对于进度条，我使用了在线找到的一些 CSS，这不是最好的方法，但现在它可以完成工作。

• 我在这个项目的媒体查询方面遇到了很多困难，我希望移动版本看起来不错，但我认为我仍然需要对此做一些研究。

• 总的来说，尽管我还想改进一些事情，但我真的很喜欢它！

• 在从事这些项目的过程中，我发现了 Figma，并且一直在使用它。

如果你读到这里，非常感谢！我也非常希望收到一些反馈🤓