How To Clone Hackernoon HTML Page

Website cloning is a testament to every novice web developer. A pure function-less website clone is a great way to solidify a programmer's HTML and CSS skills. However, it could be horrified at the start. In this article, I'm going to share with you how to clone this webpage, yes, this article itself.

Firstly, input collection. In this step, we collect all colors/images/icons used in a website and place them inside the directory. Starting with colors, pinpoint the colors by using the color picker extension, then place them on the top of your .css file in this format:

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

It is called

:root

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

By extracting and redeeming colors on the top of your CSS file, it keeps all your colors in one place and easily be modified.

Next, create an image folder to store every image and icon used on the website. Naming all the images intuitively and numerically like logo.png, content-img-1.png. By standardizing the names of the images, you could change them easily by adjusting their numerical orders.

Next, walk through the website layout. In this step, browse the website sections, functionality, breakpoints, then try to interpret the layout and communicate the rough ideas with your partner.

For instance, this is roughly how I would interpret this layout - "There are 3 sections,

<header>

<nav>

<div>

In the header, there is a logo, which we could simply crop it down or if possible, find the exact .png file.

Next, we have 4 icons, which are search bar, Twitter, Facebook, Youtube icons accordingly. We could get them from fontawesome.com and link them into our HTML files. Next to the icons, we have a '

Subscribe

2-3px solid dark green

4-5px border-radius

100% border-radius

sun

toggling

<header>

'1fr'

grid-column size

By interpreting and exchanging ideas on how the layout be with your collaborative partner before the coding, it extracts necessary CSS properties way before you clone it. This drastically boosts your productivity and smoothen your web cloning journey.

The rests come pretty much intuitive, like the navbar, you may align them horizontally by using

display: flex

grid-auto-flows: columns

width: 50%;

margin:0 auto;

Prevention is better than cure. Great preparations and interpretations could save you tons of time while building a website. Luckily, being a Microverse student, we are assigned with a coding partner for each project, hence able to leverage each other ideas when we are lost.

This article is written by Kyle Law, a full-time Microverse student, as being part of the professional curriculum. Microverse full-time software development program provides beyond technical skills, but also the necessary professional skills required as a software developer. To find out more, please visit www.microverse.org.