如何克隆Hackernoon HTML页面

网站克隆是每个新手Web开发人员的证明。 纯粹的无功能网站克隆是巩固程序员的HTML和CSS技能的好方法。 但是，一开始它可能会令人恐惧。 在本文中，我将与您分享如何克隆此网页，是的，本文本身。

首先，输入收集。 在此步骤中，我们收集网站中使用的所有颜色/图像/图标，并将它们放置在目录中。 从颜色开始，使用颜色选择器扩展名精确定位颜色，然后按以下格式将它们放在.css文件的顶部：

:root {
  --primary-color : #7FF21A ;
  --primary-color-dark : #1A3B02 ;
  --secondary-color : #F5EC42 ;
  --light-blue : #66BBF5 ;
  --white : #fff ;
  --black : #000 ;
}

它称为:root伪类，它允许用户设置颜色变量并在以后检索它们。 您可以通过以下方式提取它们：

header {
  background-color : var (--primary-color);
}

通过提取和赎回CSS文件顶部的颜色，它可以将所有颜色保留在一个位置，并且可以轻松进行修改。

接下来，创建一个图像文件夹，以存储网站上使用的每个图像和图标。 直观地和数字地命名所有图像，例如logo.png ， content-img-1.png 。 通过标准化图像的名称，您可以通过调整其数字顺序轻松地对其进行更改。

接下来，浏览网站布局。 在此步骤中，浏览网站部分，功能，断点，然后尝试解释布局并与合作伙伴交流粗略想法。

例如，这大致就是我解释这种布局的方式-“共有3个部分， <header> ， <nav>和<div> 。

标头中有一个徽标，我们可以将其裁剪掉，或者在可能的情况下找到确切的.png文件。

接下来，我们有4个图标，分别是搜索栏，Twitter，Facebook，Youtube图标。 我们可以从fontawesome.com获得它们并将它们链接到我们的HTML文件中。 在图标旁边，我们有一个“ Subscribe ”框，其中可能有2-3px solid dark green线和4-5px border-radius 。 之后，我们有一个化身， 100% border-radius为100% border-radius ，即圆形。 标头的最后一个元素是带有toggling效果的sun图标。 我们无法执行切换效果，因为它需要JavaScript。 <header>布局可以通过将徽标设置为'1fr' grid-column size来实现，从而将其余部分挤压到右侧。

通过在编码之前与协作伙伴解释和交换布局的想法，它可以在克隆之前提取必要的CSS属性。 这将大大提高您的生产率并简化您的Web克隆过程。

其余部分非常直观，例如导航栏，您可以使用display: flex或grid-auto-flows: columns CSS Grid grid-auto-flows: columns将它们水平对齐。 对于文章部分，使用width: 50%; margin:0 auto; 集中文章。

预防胜于治疗。 出色的准备工作和诠释可以节省您建立网站的时间。 幸运的是，作为一名Microverse学生，我们被分配给每个项目的编码合作伙伴，因此当我们迷路时，我们可以相互利用。

本文由Microverse全日制学生Kyle Law撰写，属于专业课程。 Microverse全职软件开发计划不仅提供技术技能，还提供软件开发人员所需的必要专业技能。 要了解更多信息，请访问www.microverse.org。

From: https://hackernoon.com/how-to-clone-hackernoon-html-page-2akb325z