social media dashboard with theme switcher

前端导师 - 带主题切换器的社交媒体仪表板

欢迎！

感谢您检查此前端编码挑战。

前端导师的挑战使您可以在现实生活流中提高技能。

为了做到这一挑战，您需要对HTML，CSS和一小部分JavaScript的基本了解。

挑战

您的挑战是建立这个社交媒体仪表板，并使它尽可能接近设计。

您可以使用您喜欢的任何工具来帮助您完成挑战。因此，如果您有一些想练习的东西，请随时尝试一下。

您的用户应该能够：

• 根据设备的屏幕尺寸查看网站的最佳布局
• 有关页面上的所有交互元素，请参见悬停状态
• 将颜色主题切换到他们的喜好

想要对挑战提供一些支持？加入我们的Slack社区，并在#HELP频道中提出问题。

在哪里可以找到一切

您的任务是为/design文件夹内的设计构建项目。您会发现可以使用的设计的手机和桌面版本。

设计采用JPG静态格式。这意味着您需要对诸如font-size ， padding和margin等样式使用最佳判断。这应该有助于训练您的眼睛，以感知间距和大小的差异。

如果您希望草图文件更详细地检查设计，则可以从平台上的挑战页面购买。

您将在/images文件夹中找到所有必需的资产。资产已经进行了优化。

还有一个style-guide.md文件，其中包含您需要的信息，例如调色板和字体。

构建您的项目

随意使用您感到舒适的任何工作流程。以下是一个建议的过程，但不觉得您需要遵循以下步骤：

1. 将您的项目初始化为GitHub上的公共存储库。如果您需要一些帮助，这将使与社区共享您的代码变得更加容易。如果您不确定该怎么做，请仔细阅读此尝试GIT资源。
2. 配置您的存储库将您的代码发布到URL。如果您在挑战期间需要一些帮助，这也将很有用，因为您可以与回购URL共享项目的URL。有多种方法可以做到这一点，但是我们建议现在使用Zeit。我们有有关下面使用ZEIT部署项目的更多信息。
3. 浏览设计，以开始计划如何解决该项目。此步骤对于帮助您为CSS课程提前思考以创建可重复使用的样式至关重要。
4. 在添加任何样式之前，请使用HTML构建内容。首先编写HTML可以帮助您将注意力集中在创建结构良好的内容上。
5. 写出项目的基本样式，包括通用内容样式，例如font-family和font-size 。
6. 开始在页面顶部添加样式并进行工作。只有一旦您完成了您的工作区域，才能进入下一节。

部署您的项目

如上所述，有多种免费托管您的项目的方法。我们建议现在使用Zeit，因为它是一项了不起的服务，并且非常容易设置。如果您想使用Zeit，请遵循以下步骤以开始：

1. 立即注册到ZEIT，并通过入职流，确保您的github帐户通过现在使用其ZEIT进行GitHub集成来连接您的GitHub帐户。
2. 现在使用“创建新项目”页面将您的项目连接到Zeit，使用“ GitHub”按钮的“新项目”并选择要部署的项目。
3. 连接后，每次您git push时，Zeit现在都会创建一个新的部署，并且部署URL将显示在您的Zeit仪表板上。您还将收到带有URL的每个部署的电子邮件。

分享您的解决方案

有多个地方可以共享您的解决方案：

1. 将其提交在平台上，以便其他用户可以在网站上看到您的解决方案。其他用户将能够给您反馈，这可以帮助改善下一个项目的代码。
2. 在Slack社区的＃完成项目频道中分享您的存储库并实时URL。
3. 推文@frontendmentor，并提及@frontendmentor ，其中包括repo和Tweet中的现场网址。我们很想看看您的建造内容并帮助分享它。

给出反馈

始终欢迎反馈，因此，如果您有任何挑战，请发送电子邮件给hi [dot] io。

这个挑战是完全免费的。请与任何会发现对练习有用的人分享。

有有趣的建筑！