How To Clone Hackernoon HTML Page

Author profile picture

@kyle-lawKyle-Law

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
or
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.

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!