Hello folks, today is a new project for you. Today you’ll learn how to create WhatsApp like a web page with only plain HTML and CSS from start to end.
So without wasting any more time let’s jump to the code.
step 1): Write HTML for WhatsApp clone
<body>
<div id="mainBox">
<div class="header1">
<img id="profile-image" src="person Image.jpg" alt="">
<i class="fas fa-plus header1Icons"></i>
<i class="fas fa-ellipsis-h header1Icons"></i>
</div>
<div id="contactNames">
<input type="search" name="search" id="searchName" placeholder="Search or start a new Chat">
<div class="contact">
<img src="image2.jfif" alt="">
<span class="names">Julie</span>
<span class="message">Hello friends</span>
</div>
<div class="contact">
<img src="Image3.jfif" alt="">
<span class="names">Ayaan</span>
<span class="message">Hello friends</span>
</div>
<div class="contact">
<img src="Image5.jpg" alt="">
<span class="names">Yusuf</span>
<span class="message">Hello friends</span>
</div>
<div class="contact">
<img src="image4.webp" alt="">
<span class="names">Alex</span>
<span class="message">Hello friends</span>
</div>
<div class="contact"></div>
</div>
<div class="header2">
<img src="Image2.jfif" alt="" id="image2">
<span class="person">Julie</span>
<i class="fas fa-video header2Icons"></i>
<i class="fas fa-phone-alt header2Icons"></i>
</div>
<div id="mainTextArea">
<img src="Background.jfif" alt="">
<div id="sendingText">
<i class="far fa-laugh"></i>
<i class="fas fa-paperclip"></i>
<input type="text" name="textArea" id="textArea" placeholder = "Type a message">
<i class="fas fa-microphone"></i>
</div>
</div>
</div>
</body>Write this type of code in you IDE
You’ll see this type of page in your browser. See no CSS added yet. Now it’s time to add CSS in it.
Next step is write CSS to customize it and look like WhatsApp
Here is code –
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Neonderthaw&family=Open+Sans:wght@300&family=Outfit:wght@300&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Outfit', sans-serif;
}
#mainBox{
display: flex;
}
.header1{
display: flex;
align-items: center;
width: 30vw;
height: 8vh;
background: #132b34;
color: white;
border-right: 1px solid white !important;
}
#profile-image{
width: 40px;
height: 40px;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.header1Icons {
position: relative;
right: 0;
margin: 0 1.2vw 0 0;
transform: translateX(20vw);
color: white;
cursor: pointer;
}
#contactNames{
display: flex;
left: 0;
bottom: 0;
position: absolute;
background: rgb(58, 58, 58);
width: 30vw;
height: 92vh;
flex-direction: column;
align-items: center;
}
#searchName{
width: 28vw;
padding: 20px;
height: 5vh;
margin: 10px auto;
border: none;
border-radius: 30px ;
outline: none;
background: rgb(150, 150, 150);
color: white;
}
#searchName::-webkit-input-placeholder{
color: white;
}
.contact{
display: flex;
align-items: center;
width: 90%;
border-top: 1px solid white;
height: 10vh;
}
.contact img{
width: 40px;
height: 40px;
border-radius:50%;
}
.names{
color: white;
position: relative;
top: -12px;
left: 2vw;
}
.message{
color: grey;
position: relative;
top: 9px;
}
.header2{
display: flex;
align-items: center;
height: 8vh;
width: 70vw;
background: #132b34;
}
#image2{
width: 40px;
height: 40px;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.person {
font: 1.3em;
color: white;
}
.header2Icons{
cursor: pointer;
color: white;
margin: 0 1.5vw 0 0;
transform: translateX(57vw);
}
#mainTextArea{
width: 70vw;
height: 92vh;
position: absolute;
left: 30vw;
top: 8vh;
}
#mainTextArea img{
width: 70vw;
height: 92vh;
}
#sendingText{
display: flex;
align-items: center;
width: 100%;
height: 8vh;
background: #646464;
position: absolute;
bottom: 0;
}
#sendingText i{
color: white;
margin: 0 1.6%;
cursor: pointer;
font-size: 1.3em;
}
#sendingText input{
width: 80%;
height: 30px;
margin-left: 1.6%;
padding: 2px 8px;
border-radius: 30px;
outline: none;
border: none;
background: grey;
color: white;
}
::-webkit-input-placeholder{
color: white;
}And it’s all done you’ll see a perfect WhatsApp like application in your browser
You can see a perfect page looking like a WhatsApp, But this page will not work properly.
You can see the video of this project on YouTube for better understanding.
Here is the link for that video- https://youtu.be/Bumu67Ry2n8
So why are you waiting for let’s create your own WhatsApp and enjoy coding.
GladCode 
Leave a comment