How To Clone Hackernoon HTML Page by@kyle-law

How To Clone Hackernoon HTML Page

Kyle-Law HackerNoon profile picture


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;
  --light-blue: #66BBF5;
  --white: #fff;
  --black: #000;

It is called

pseudo-class, it allows users to set color variables and later retrieve them. You can extract them by:

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,

and a

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 and link them into our HTML files. Next to the icons, we have a '

' box with probably
2-3px solid dark green
line, and
4-5px border-radius
. After that, we have an avatar, with
100% border-radius
, i.e. round shape. The last element of the header is a
icon with a
effect. We can't do the toggling effect as it requires JavaScript. The
layout can be achieved by setting the
grid-column size
to the logo so that the rests are squeezed to the right side.

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
with CSS Grid. For the article part, using
width: 50%;
margin:0 auto;
to centralize the article.

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