483 reads

How To Clone Hackernoon HTML Page

by Kyle-LawJanuary 21st, 2020

Too Long; Didn't Read

Website cloning is a great way to solidify a programmer's HTML and CSS skills. In this article, Kyle Law, a Microverse student, shares with you how to clone this article itself. We collect all colors/images/icons used in a website and place them inside the directory. Create an image folder to store every image and icon used on the website. By standardizing the names of the images, you could change them easily by adjusting their numerical orders. By interpreting and exchanging ideas on how the layout be with your collaborative partner, it extracts necessary CSS properties.

Companies Mentioned

featured image - 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

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,

<header>

<nav>

and a

<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

' 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

sun

icon with a

toggling

effect. We can't do the toggling effect as it requires JavaScript. The

<header>

layout can be achieved by setting the

'1fr'

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%;

with

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 www.microverse.org.