.jpg)
Hello Developers! If you’re looking to develop WhatsApp clone using HTML and CSS, then this tutorial blog is definitely help You, step by step from start to end. The practice of making clones of popular applications like WhatsApp, Facebook, Google, YouTube, and others is excellent. You just require strong CSS knowledge to replicate these platforms.
In my opinion, first you should start by trying to make this WhatsApp clone by carefully following the video tutorial. It will help you understand the implementation clearly. After that, compare your code with the provided source codes to see if there are any errors or if it isn't working. It will let you realize all of your mistakes.
First, create an HTML file with the name of index.html. In HTML we’ve create the complete structure like a search box, WhatsApp title, a list & icons. Second, create a CSS file with the name of style.css. we’ve easily designed the whole structure and give it a look similar to WhatsApp interface using CSS properties.
HTML CODES
Complete source codes and images at the end 🠋🠋🠋
You may also like
Check the video tutorial
Recommended Videos
HTML CODES
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" type="image/jpg" href="whatsapp.png">
<title>WhatsApp</title>
</head>
<body>
<div class="sidebar">
<div class="header">
<div class="avatar">
<img src="avatar.png" alt="">
</div>
<div class="chat-header-right">
<img src="circle-notch-solid.svg" alt="">
<img src="chat.svg" alt="">
<img src="more.svg" alt="">
</div>
</div>
<div class="sidebar-search">
<div class="sidebar-search-container">
<img src="search-solid.svg" alt="">
<input type="text" placeholder="Search or start new chat">
</div>
</div>
<div class="sidebar-chats">
<div class="sidebar-chat">
<div class="chat-avatar">
<img src="avatar.png" alt="">
</div>
<div class="chat-info">
<h4>Mike Daisan</h4>
<p>Last Message</p>
</div>
<div class="time">
<p>2:44 pm</p>
</div>
</div>
<div class="sidebar-chat">
<div class="chat-avatar">
<img src="avatar.png" alt="">
</div>
<div class="chat-info">
<h4>Amelia Cuiree</h4>
<p>Last Message</p>
</div>
<div class="time">
<p>2:44 pm</p>
</div>
</div>
<div class="sidebar-chat">
<div class="chat-avatar">
<img src="avatar.png" alt="">
</div>
<div class="chat-info">
<h4>Mike Daisan</h4>
<p>Last Message</p>
</div>
<div class="time">
<p>2:44 pm</p>
</div>
</div>
<div class="sidebar-chat">
<div class="chat-avatar">
<img src="avatar.png" alt="">
</div>
<div class="chat-info">
<h4>Mike Daisan</h4>
<p>Last Message</p>
</div>
<div class="time">
<p>2:44 pm</p>
</div>
</div>
<div class="sidebar-chat">
<div class="chat-avatar">
<img src="avatar.png" alt="">
</div>
<div class="chat-info">
<h4>Mike Daisan</h4>
<p>Last Message</p>
</div>
<div class="time">
<p>2:44 pm</p>
</div>
</div>
<div class="sidebar-chat">
<div class="chat-avatar">
<img src="avatar.png" alt="">
</div>
<div class="chat-info">
<h4>Mike Daisan</h4>
<p>Last Message</p>
</div>
<div class="time">
<p>2:44 pm</p>
</div>
</div>
<div class="sidebar-chat">
<div class="chat-avatar">
<img src="avatar.png" alt="">
</div>
<div class="chat-info">
<h4>Mike Daisan</h4>
<p>Last Message</p>
</div>
<div class="time">
<p>2:44 pm</p>
</div>
</div>
<div class="sidebar-chat">
<div class="chat-avatar">
<img src="avatar.png" alt="">
</div>
<div class="chat-info">
<h4>Mike Daisan</h4>
<p>Last Message</p>
</div>
<div class="time">
<p>2:44 pm</p>
</div>
</div>
<div class="sidebar-chat">
<div class="chat-avatar">
<img src="avatar.png" alt="">
</div>
<div class="chat-info">
<h4>Mike Daisan</h4>
<p>Last Message</p>
</div>
<div class="time">
<p>2:44 pm</p>
</div>
</div>
<div class="sidebar-chat">
<div class="chat-avatar">
<img src="avatar.png" alt="">
</div>
<div class="chat-info">
<h4>Mike Daisan</h4>
<p>Last Message</p>
</div>
<div class="time">
<p>2:44 pm</p>
</div>
</div>
<div class="sidebar-chat">
<div class="chat-avatar">
<img src="avatar.png" alt="">
</div>
<div class="chat-info">
<h4>Mike Daisan</h4>
<p>Last Message</p>
</div>
<div class="time">
<p>2:44 pm</p>
</div>
</div>
</div>
</div>
<div class="message-container">
<div class="header">
<div class="chat-title">
<div class="avatar">
<img src="avatar.png" alt="">
</div>
<div class="message-header-content">
<h4>Amelia Cuiree</h4>
<p>online</p>
</div>
</div>
<div class="chat-header-right">
<img src="search-solid.svg" alt="">
<img src="more.svg" alt="">
</div>
</div>
<div class="message-content">
<p class="chat-message">This is a message <span class="chat-timestamp">11:33 pm</span></p>
<p class="chat-message chat-sent">This is a message <span class="chat-timestamp">11:33 pm</span></p>
<p class="chat-message">This is a message <span class="chat-timestamp">11:33 pm</span></p>
<p class="chat-message chat-sent">This is a message <span class="chat-timestamp">11:33 pm</span></p>
<p class="chat-message">This is a message <span class="chat-timestamp">11:33 pm</span></p>
<p class="chat-message chat-sent">This is a message <span class="chat-timestamp">11:33 pm</span></p>
<p class="chat-message">This is a message <span class="chat-timestamp">11:33 pm</span></p>
<p class="chat-message chat-sent">This is a message <span class="chat-timestamp">11:33 pm</span></p>
<p class="chat-message">This is a message <span class="chat-timestamp">11:33 pm</span></p>
<p class="chat-message chat-sent">This is a message <span class="chat-timestamp">11:33 pm</span></p>
<p class="chat-message">This is a message <span class="chat-timestamp">11:33 pm</span></p>
<p class="chat-message chat-sent">This is a message <span class="chat-timestamp">11:33 pm</span></p>
</div>
<div class="message-footer">
<img src="smile.svg" alt="">
<img src="paper-clip.svg" alt="">
<input type="text" placeholder="Type a message">
<img src="microphone.svg" alt="">
</div>
</div>
</body>
</html>
CSS codes
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #303030;
font-family: 'Roboto', sans-serif;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: #b9b3ae;
}
::-webkit-scrollbar-thumb:hover {
background: #888;
}
.avatar {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.avatar img,
.chat-avatar img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.chat-header-right img {
width: 20px;
height: 20px;
margin: 5px 13px;
opacity: 0.4;
}
body {
display: flex;
overflow: hidden;
}
.sidebar {
flex: 5.17;
}
.header {
background-color: #ededed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.sidebar-search {
display: flex;
align-items: center;
background-color: #f6f6f6;
padding: 8px 15px;
}
.sidebar-search-container {
display: flex;
align-items: center;
background-color: white;
width: 100%;
height: 35px;
border-radius: 20px;
}
.sidebar-search-container img {
width: 15px;
height: 15px;
margin: 0 15px;
opacity: 0.4;
}
.sidebar-search-container input {
border: none;
outline: none;
margin-left: 20px;
}
.chat-avatar {
position: relative;
height: 50px;
min-width: 50px;
border-radius: 50%;
overflow: hidden;
flex: 1;
}
.sidebar-chats {
height: calc(100vh - 115px);
overflow-y: scroll;
}
.sidebar-chat {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 10px 12px;
width: 100%;
}
.sidebar-chat:hover {
background-color: #f5f5f5;
}
.sidebar-chat:nth-child(2) {
background-color: #ebebeb;
}
.sidebar-chat::before {
content: '';
position: absolute;
width: 80%;
bottom: 0;
left: 80px;
border-bottom: 1px solid #999;
opacity: 0.2;
}
.chat-info {
margin-left: 15px;
flex: 10;
}
.chat-info p {
font-size: 13px;
line-height: 20px;
color: gray;
}
.time {
flex: 1;
}
.time p {
white-space: nowrap;
font-size: 13px;
margin-top: -16px;
color: gray;
}
/* Message Content */
.message-container {
flex: 12;
}
.chat-title {
display: flex;
align-items: center;
}
.message-header-content {
margin-left: 15px;
}
h4 {
font-weight: 400;
}
.message-header-content p {
font-size: 13px;
color: gray;
}
.message-content {
background-image: url(background.png);
background-position: center;
height: calc(100vh - 120px);
padding: 20px 80px;
overflow-y: scroll;
}
.chat-message {
font-size: 14px;
padding: 8px 10px;
width: fit-content;
border-radius: 8px;
background-color: white;
margin-bottom: 30px;
}
.chat-sent {
margin-left: auto;
background-color: #dcf8c6;
}
.chat-timestamp {
margin-left: 10px;
font-size: 10px;
color: grey;
}
/* message footer */
.message-footer {
display: flex;
align-items: center;
padding: 5px 10px;
background-color: #f0f0f0;
}
.message-footer img {
flex: 1;
width: 22px;
height: 22px;
opacity: 0.4;
}
.message-footer input {
flex: 20;
margin: 5px 10px;
padding: 12px 15px;
outline: none;
border: none;
border-radius: 20px;
font-size: 15px;
}
Don't forget to Subscribe to our Youtube Channel for more.
.jpg)
.jpg&description=How to create WhatsApp clone using HTML and CSS){kind=link}
0 Comments