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 file in this format: .css { : ; : ; : ; : ; : ; : ; } :root --primary-color #7FF21A --primary-color-dark #1A3B02 --secondary-color #F5EC42 --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: :root { : (--primary-color); } header background-color var 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 , . By standardizing the names of the images, you could change them easily by adjusting their numerical orders. logo.png content-img-1.png 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 . <header> <nav> <div> In the header, there is a logo, which we could simply crop it down or if possible, find the exact file. .png 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 ' ' box with probably line, and . After that, we have an avatar, with , 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 to the logo so that the rests are squeezed to the right side. 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 or with CSS Grid. For the article part, using with to centralize the article. 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.
