preetikatiyar5
- Dec 3, 2022
- 6 min read

Whatsapp Clone Using HTML and CSS

Updated: Jan 24

HTML (Hyper Text Markup Language) –

HTML is the standard markup language to create web pages and web-based applications
It describes the structure of a web page
It consists of a series of elements that tells the browser how to display the content

Basic Structure of an HTML Document –

<!DOCTYPE html>

<html>

<head>

<title>WhatsApp Clone</title>

</head>

<body>

<h1>let's learn Web Development</h1>

<p>My first project - WhatsApp Cloning</p>

</body>

</html>

Explanation of the above example –

<!DOCTYPE html> - It defines that the document is HTML5 document
<html> - It is the root elements on an HTML Page
<head> - It contains all the meta-information about the HTML Page
<title> - It is used to specify the title of the page which is displayed on the browser’s title bar
<body> - This element contains all the visible content of the page, such as paragraphs, headlines, tables, lists, etc.
<h1> - It defines the largest heading for any topic, it ranges from <h1>-<h6>
<p> - It defines a paragraph in the HTML page

Elements –

It is the collection of a start and an end tags, and in between content is inserted between them.

It consists of 3 parts –

Opening Tag – Used to tell the browser where the content starts.
Closing Tag – Used to tell the browser where the content material ends.
Content – Whatever is written inside the opening and closing tags is content.

Some Common tags are –

<header> – Used to define a document or section, as it contains information related to titles and the heading of related content.
<nav> – The navigation tag is used to declare navigation sections in HTML documents. Websites typically have a section dedicated to navigation links that allow users to move around the site
<a> – Anchor tag is used for creating hyperlinks on the webpage. It is used to link one web page to another.
<p> – It is used to define a paragraph. Content written inside the <p> tag always starts from a new line.
<h> – It is used to define the heading of a web page. There are 6 different heading h1, h2, h3, h4, h5 and h6. H1 is the main heading and the biggest followed by h2, h3, h4, h5, and h6.
<div> - It is used to group multiple elements together. It helps in applying CSS.
<img> - Image tag is used to embed an image in a web page.

CSS (Cascading Style Sheet) –

CSS (Cascading Style Sheets) describes HTML elements that appear on screen, paper, or other media.
CSS is used for designing web pages, in order to make web pages presentable.
CSS is standardized across Web Browsers and is one of the core languages of the open web

CSS Selector –

It is used to select or target the element that you want to style. Selectors are part of the CSS ruleset. CSS selectors select HTML elements by ID, class, type, attributes, etc.

Types of CSS Selectors –

Element Selector – It selects the HTML elements directly using the name
ID Selector – It selects the id attribute of an element. ID is always unique, in the code. So, it is used to target and apply design to a specific or unique element.
Class Selector - It selects the class attribute of an element. Unlike ID selectors class selectors can be the same for many elements.
Universal Selector – It selects all the elements of the webpage, and applies changes to it.
Group Selector – It is used when the same style is to be applied to many elements. It helps in the non-duplication of code.

Also Read- Competitive Programming Crash Course using JAVA for Interview Prep

How to apply CSS?

CSS can be applied in different ways –

Inline CSS –

Styling is done using different attributes inside an element itself. It can be used to apply a unique style to a single element.

<h1 style="color:blue;">Let's learn Web Development</h1>

External CSS –

It is used to apply CSS on multiple pages. As all the styling is written in a different file with an extension “.css” Example style.css.

It is written instead head tag.

Internal CSS –

It is defined or written within the <style> element, nested instead <head> section of an HTML document.

It is mainly used when need to apply CSS on a particular page.

h1 {

color:blue;

}

</style>

For a more detailed guide – Click here

Let’s implement the above-learned concepts –

What does cloning a website means?

Cloning a website means creating a new website by copying or modifying the design or script of an existing website. Website cloning allows the designer to create the website without writing scripts from scratch.

We can clone any website we want, while cloning a website we can also integrate some additional new features at our own convenience.

Cloning a website is one of the best practices that you can adopt to learn web development more quickly. It gives you basic to advanced ideas of the working and the functionality of a website and how to integrate it.

Let’s learn how to clone a website just using HTML5 and CSS in a simple way.

Will take an example of the WhatApp Website and will clone it.

WhatsApp is a free cross-platform messaging service. iPhone and Android smartphone, Mac, and Windows PC users can call or exchange text, photo, voice, and video messages with anyone in the world for free, regardless of the recipient's device. WhatsApp uses Wi-Fi connections to communicate across platforms. This differs from Apple iMessage and Messages by Google, which requires a cellular network and Short Message Service (SMS).

Key WhatsApp Terminology

Cross Platform
Messaging apps
End-to-end encryption
Video & Audio Calls
WhatsApp Business

In this example will clone a static page of WhatsApp using Internal CSS-

<!DOCTYPE html>

<head>

:root {

font-size: 15px;

--primaryColor: #075e54;

--secondaryColor: #aaa9a8;

--tertierColor: #25d366;

}

* {

margin: 0;

padding: 0;

font-family: inherit;

font-size: inherit;

}

body {

font-family: Helvetica;

font-weight: 300;

}

img {

object-fit: cover;

width: 100%;

}

.container {

margin: 0 1.2em;

}

header {

background-color: var(--primaryColor);

padding: 1.4em 0;

}

header .container {

display: flex;

justify-content: space-between;

align-items: center;

color: white;

}

header .logo {

font-size: 1.5rem;

font-weight: 300;

}

header .menu {

margin-left: 18px;

}

.nav-bar {

background-color: var(--primaryColor);

margin-bottom: 8px;

display: grid;

grid-template-columns: 16% 28% 28% 28%;

justify-items: space-between;

align-items: center;

text-align: center;

box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,

rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

}

.nav {

color: var(--secondaryColor);

text-transform: uppercase;

padding: 1em 0;

}

.nav.active {

border-bottom: 3px solid white;

color: white;

}

.chat {

padding: 1em 0;

display: flex;

justify-content: space-between;

}

.chat .info {

display: flex;

}

.chat .username {

font-size: 1.2rem;

margin-bottom: 5px;

font-weight: 300;

}

.chat .recent-chat {

color: gray;

max-width: 200px;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

.chat .recent-chat .read {

color: #34b7f1;

}

.chat .photo {

width: 55px;

height: 55px;

border-radius: 50%;

margin-right: 18px;

}

.chat .recent-chat-time {

font-size: 12px;

color: gray;

}

.contact-button {

padding: 1em;

border: 0;

border-radius: 50%;

color: white;

transform: rotate(0deg);

font-size: 1.3rem;

position: fixed;

bottom: 20px;

right: 1.2em;

background-color: var(--tertierColor);

}

</style>

<title>WhatsApp</title>

</head>

<body>

<h1 class="logo">WhatsApp</h1>

<div>

</div>

</header>

<a role="button" class="nav active">Chats</a>

<a role="button" class="nav">Status</a>

<a role="button" class="nav">Calls</a>

</nav>

<div>

<h6 class="username">Anurag</h6>

<i class="bi bi-check2-all"></i> Yes, i remembered that! 😄

</p>

</div>

</div>

<div>

<h6 class="username">Cipher</h6>

<p class="recent-chat">Do you wanna hangout?</p>

</div>

</div>

<div>

<h6 class="username">CipherSchools</h6>

<i class="bi bi-check2-all read"></i> Hey bro, time to band!

🥁🎸

</p>

</div>

<small class="recent-chat-time"> Yesterday </small>

</div>

<div>

<h6 class="username">Schools</h6>

<p class="recent-chat">Hey, where are you now? 🙄</p>

</div>

</div>

<div>

<h6 class="username">Anurag CS</h6>

<i class="bi bi-check2-all read"></i> May i borrow your games

for 2 weeks?

</p>

</div>

</div>

</div>

</section>

</body>

</html>

Also Read- How to get started with DevOps - A Quick Guide

Whatsapp Clone Using HTML and CSS

Explanation of the above example –

CSS (Cascading Style Sheet) –

Types of CSS Selectors –

How to apply CSS?

What does cloning a website means?

Recent Posts