使用 HTML 和 CSS，2 小时即可搭建您的专业作品集网站。
你好👋，在本文中，我们将学习如何使用纯HTML和CSS构建一个简单而专业的作品集。
拥有个人作品集网站的理由数不胜数，从在线展示你的作品/项目，到提高你的求职机会等等。事实上，并非每个人都需要作品集网站。我最近写了一篇文章，详细解释了什么是作品集网站，你为什么可能需要它，以及它在当今世界的重要性。
我们将建造什么💪
- 联系方式部分（兼作导航栏和页脚）
- 关于部分
- 作品/作品集
需要注意的是，本教程面向初学者，您无需具备“HTML或CSS大神”般的知识。我们将一起逐行讲解代码，并提供后续改进建议，因为我们力求做到简洁明了。
文件结构📂
要学习本教程，您需要类似这样的文件结构：
热身
通过查看用户界面设计，并了解代码的编写方向以及最终网站的外观，我们可以开始标记一些关键点，例如颜色、部分、样式等。
因此，我们将首先遵循 DRY（不要重复自己）原则创建一些全局样式。此外，在本教程中，我们将交替使用Grid和Flexbox。我承诺本教程将力求简单易懂，所以我们不会编写任何复杂的代码。
如果你在这篇文章中发现任何不明白的地方，没关系，你可以随时上网搜索或者以后再学习。不要让任何事情阻碍你，你已经很棒了👍。
我决定将代码片段以PNG格式粘贴。我这样做是为了鼓励你手动编写代码，因为这有助于理解和记忆。
如果你不想手动输入，请前往页面末尾访问 GitHub 链接，即可从那里下载整个项目🧑💻。
解决了这个问题，我们就可以开始编写代码了。
索引.html
你的文件结构应该类似于这样👇
请忽略 `.js`index.js和`.htm`README.md文件。本教程不需要用到它们。顺便一提，我使用的是VS Code ，您可以使用任何您喜欢的代码编辑器。
在你的文件中，创建一个基本的 HTML 模板。你可以通过输入 `html`并按Tab 键index.html来生成它。请参考下图👇!
完成上述步骤后，你应该会看到类似这样的内容👇
从上图中可以注意到以下几点。
- 我添加了一个谷歌字体（我们将使用此字体，但您可以随意使用任何您喜欢的字体）。
- 我已经把
index.css文件链接放在这里了，这样我们就可以在我们的程序中使用它了index.html。
其他内容，你可以随意填写，例如标签<title>或<meta>标签。
现在，运行应用程序并确保它按预期工作。我使用的是Live Server，这是一个 VS Code 扩展，可以提供更改的实时更新（不过您不必使用它）。
为了验证我们的CSS文件是否已正确链接，请
在您的CSS文件中粘贴以下内容：body {background-color: #333;}
现在运行应用程序，你应该会看到深色背景。
如果不是这种情况，请检查链接文件时是否拼写错误，无论如何，我相信你一定能解决的😎！
继续前进。
本教程中我们将使用的文件/资源（图标、图像），请查看GitHub 仓库，您可以从那里下载它们，或者您可以使用Font Awesome、Flat Icon或您选择的任何图标库。
CSS 全局变量和设置 ⚙️
我们将创建一些全局样式/变量和一些基本设置，这些属性我确信我们会在本教程中多次使用，你不必一开始就全部了解，只需在你注意到自己多次重复编写相同内容时创建一个全局变量即可。
如果图片模糊、拉伸或无法辨认，您可能需要点击图片进行查看。
我们将为这个作品集编写 3 个部分的代码，现在我们已经准备好了所有基本设置，让我们开始编写代码吧。
联系方式部分（也包括导航栏和页脚）
- HTML
- CSS
- 视觉🔎
如果你没有遗漏任何东西，你应该拥有这些：
您可以花些时间了解 HTML 结构以及样式是如何应用的。此外，随着您继续编写代码，您很快就会意识到，我们大部分时间都在重用之前在全局变量中编写的 CSS（参见“CSS 全局变量和设置”部分）。
关于部分
- HTML
如果你想知道它的<script>document.write(new Date().getFullYear() - 2013)</script>作用，它是 JavaScript 代码，它的作用是让我们无需手动更新作品集/代码来计算你的编程经验年限。所以，如果你是从 2012 年、2018 年或 2020 年开始编程的，只需将代码中的 2013 年替换成你的年份即可。
虽然你开始编程的年份可能还不能算作经验，但是……你明白我的意思🍵
- CSS
- 视觉效果🔎
如果你没有看到类似上图👆所示的内容，请确保所有HTML标签都已正确闭合。检查一下你的语法错误，我相信你一定能解决问题。
经验部分
- HTML
从上面的代码片段duplicateThisDiv可以看出，这个类名仅供参考，我们不会用它来设置样式。只需<div>根据你的经验进行复制即可。
- CSS
- 视觉效果🔎
作品集部分
- HTML
duplicateThisTag上面的代码片段中包含一个类。你已经知道该怎么做了👍
- CSS
- 视觉效果🔎
最后
- 页脚
这只是“联系我们”部分的副本，所以只需复制/粘贴并将其用作页脚即可。别忘了在这种情况下将 ` <nav><head>` 标签替换为 ` footer<body>` 标签。
完整设计🎨🖌️
我的想法 🤔 💭
我见过一些人因为拥有在线作品集而获得了更好的机会，包括我自己（当然，你不必拥有世界上最棒的作品集）。如果你已经积累了多年的丰富经验，或许并不一定需要作品集，但无论你在科技领域的级别如何，拥有作品集都绝无劣势（我理解你可能持有不同意见）。如果你仍然不确定作品集的重要性，
可以查阅一些资料，了解为什么你应该考虑拥有它。
专业提示💡
- 不妨试试AOS，为你的网站增添活力。
- 如果你想学习如何将你的网站托管到网上，请密切关注（我将在几天后发布相关内容）。
如需设计灵感（激发您的创造力），请查看：
1 Behance
2 Dribbble
3 Awwwards
4 Web Design Inspiration
5 Frontend Mentor等。
结论✅
很高兴您能读到这里。我会发布像这样的简单教程，所以别忘了关注我，获取更多内容。
欢迎在评论区留言/讨论，如果您喜欢这个博客，请点赞、收藏或分享给其他人。
谢谢！🙏
社交媒体
精彩读物📚
文章来源：https://dev.to/emmaccen/build-your-professional-portfolio-website-in-2-hours-using-html-css-5g9i