Hello developers! Are you looking to recreate the WhatsApp Channels UI for the web? You’ve come to the right place. In this tutorial, we’ll guide you through the process of building this stunning user interface from scratch.
WhatsApp Channels UI is originally designed for mobile applications, but in this tutorial, we’ll guide you through the process of adapting it for the web. We’ll take you step by step, starting with setting up the fundamental HTML structure and then enhancing it with CSS and JavaScript to create an interactive web-based WhatsApp Channels UI. By the end of this tutorial, you’ll have a fully functional web version of the WhatsApp Channels UI
Prerequisites
Before we dive into the development process, here are a few prerequisites to ensure you’re ready for this journey:
- A text editor (e.g., Visual Studio Code, Sublime Text).
- Basic knowledge of HTML, CSS, and JavaScript.
Step 1: Setting Up the HTML Structure
Let’s start by creating the basic HTML structure for our WhatsApp Channels UI. Open your text editor and create a new HTML file (e.g., index.html). Copy and paste the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>whatsapp-channels</title>
<link rel="stylesheet" href="styles.css" />
<link
href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
rel="stylesheet"
/>
</head>
<body>
<div class="sidemenu">
<div class="status">
<div class="sidemenu-title-container">
<h4>Status</h4>
<i class="ri-add-line"></i>
</div>
<div class="status-container horizontal-scroll">
<div>
<div class="status-img-border">
<div class="status-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
<p class="name">My status</p>
</div>
<div>
<div class="status-img-border active">
<div class="status-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
<p class="name">My status</p>
</div>
<div>
<div class="status-img-border">
<div class="status-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
<p class="name">My status</p>
</div>
<div>
<div class="status-img-border">
<div class="status-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
<p class="name">My status</p>
</div>
<div>
<div class="status-img-border">
<div class="status-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
<p class="name">My status</p>
</div>
<div>
<div class="status-img-border">
<div class="status-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
<p class="name">My status</p>
</div>
<div>
<div class="status-img-border">
<div class="status-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
<p class="name">My status</p>
</div>
</div>
</div>
<div class="divider"></div>
<div class="channels">
<div class="sidemenu-title-container">
<h4>Channels</h4>
<i class="ri-more-2-fill"></i>
</div>
<div class="channels-container vertical-scroll">
<div>
<div class="channel-title">
<div class="channel-logo-cover">
<img src="sample.png" alt="" />
</div>
<h5>Olivia Rodrigo</h5>
</div>
<div class="channel-content">
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Inventore perspiciatis!
</p>
<p class="created">28 minutes ago</p>
</div>
<div class="channel-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
</div>
<div class="divider"></div>
<div>
<div class="channel-title">
<div class="channel-logo-cover">
<img src="sample.png" alt="" />
</div>
<h5>Olivia Rodrigo</h5>
</div>
<div class="channel-content">
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Inventore perspiciatis!
</p>
<p class="created">28 minutes ago</p>
</div>
<div class="channel-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
</div>
<div class="divider"></div>
<div>
<div class="channel-title">
<div class="channel-logo-cover">
<img src="sample.png" alt="" />
</div>
<h5>Olivia Rodrigo</h5>
</div>
<div class="channel-content">
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Inventore perspiciatis!
</p>
<p class="created">28 minutes ago</p>
</div>
<div class="channel-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
</div>
<div class="divider"></div>
<div>
<div class="channel-title">
<div class="channel-logo-cover">
<img src="sample.png" alt="" />
</div>
<h5>Olivia Rodrigo</h5>
</div>
<div class="channel-content">
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Inventore perspiciatis!
</p>
<p class="created">28 minutes ago</p>
</div>
<div class="channel-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
</div>
<div class="divider"></div>
<div>
<div class="channel-title">
<div class="channel-logo-cover">
<img src="sample.png" alt="" />
</div>
<h5>Olivia Rodrigo</h5>
</div>
<div class="channel-content">
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Inventore perspiciatis!
</p>
<p class="created">28 minutes ago</p>
</div>
<div class="channel-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
</div>
<div class="divider"></div>
<div>
<div class="channel-title">
<div class="channel-logo-cover">
<img src="sample.png" alt="" />
</div>
<h5>Olivia Rodrigo</h5>
</div>
<div class="channel-content">
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Inventore perspiciatis!
</p>
<p class="created">28 minutes ago</p>
</div>
<div class="channel-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
</div>
<div class="divider"></div>
<div>
<div class="channel-title">
<div class="channel-logo-cover">
<img src="sample.png" alt="" />
</div>
<h5>Olivia Rodrigo</h5>
</div>
<div class="channel-content">
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Inventore perspiciatis!
</p>
<p class="created">28 minutes ago</p>
</div>
<div class="channel-img-cover">
<img src="sample.png" alt="" />
</div>
</div>
</div>
<div class="divider"></div>
<div class="find-title-container">
<h6>Find channels</h6>
<p>See all <i class="ri-arrow-right-s-line"></i></p>
</div>
<div class="find-container horizontal-scroll">
<div>
<div class="find-img-border">
<div class="find-img-cover">
<img src="sample.png" alt="" />
</div>
<i class="ri-verified-badge-fill verified"></i>
</div>
<p class="name">Name here</p>
</div>
<div>
<div class="find-img-border">
<div class="find-img-cover">
<img src="sample.png" alt="" />
</div>
<i class="ri-verified-badge-fill verified"></i>
</div>
<p class="name">Name here</p>
</div>
<div>
<div class="find-img-border">
<div class="find-img-cover">
<img src="sample.png" alt="" />
</div>
<i class="ri-verified-badge-fill verified"></i>
</div>
<p class="name">Name here</p>
</div>
<div>
<div class="find-img-border">
<div class="find-img-cover">
<img src="sample.png" alt="" />
</div>
<i class="ri-verified-badge-fill verified"></i>
</div>
<p class="name">Name here</p>
</div>
<div>
<div class="find-img-border">
<div class="find-img-cover">
<img src="sample.png" alt="" />
</div>
<i class="ri-verified-badge-fill verified"></i>
</div>
<p class="name">Name here</p>
</div>
<div>
<div class="find-img-border">
<div class="find-img-cover">
<img src="sample.png" alt="" />
</div>
<i class="ri-verified-badge-fill verified"></i>
</div>
<p class="name">Name here</p>
</div>
<div>
<div class="find-img-border">
<div class="find-img-cover">
<img src="sample.png" alt="" />
</div>
<i class="ri-verified-badge-fill verified"></i>
</div>
<p class="name">Name here</p>
</div>
<div>
<div class="find-img-border">
<div class="find-img-cover">
<img src="sample.png" alt="" />
</div>
<i class="ri-verified-badge-fill verified"></i>
</div>
<p class="name">Name here</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="top-bar">
<div class="name">
<div class="img-cover">
<img src="sample.png" alt="" />
</div>
<div>
<h3>Liverpool Football Club</h3>
<p>2.8M followers</p>
</div>
</div>
<div>
<i class="ri-notification-2-fill"></i><i class="ri-more-2-fill"></i>
</div>
</div>
<div class="content vertical-scroll">
<div class="card">
<div class="img-cover">
<img src="sample.png" alt="" />
</div>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam
odio voluptatum porro rerum saepe, debitis quasi, odit
exercitationem consequatur, illum dignissimos fugiat ab similique
impedit doloremque explicabo voluptatem dolorum minima! Fugit
blanditiis ex ducimus non hic veniam repudiandae quos quibusdam?
</p>
</div>
</div>
<div class="card">
<div class="img-cover">
<img src="sample.png" alt="" />
</div>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam
odio voluptatum porro rerum saepe, debitis quasi, odit
exercitationem consequatur, illum dignissimos fugiat ab similique
impedit doloremque explicabo voluptatem dolorum minima! Fugit
blanditiis ex ducimus non hic veniam repudiandae quos quibusdam?
</p>
</div>
</div>
<div class="card">
<div class="img-cover">
<img src="sample.png" alt="" />
</div>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam
odio voluptatum porro rerum saepe, debitis quasi, odit
exercitationem consequatur, illum dignissimos fugiat ab similique
impedit doloremque explicabo voluptatem dolorum minima! Fugit
blanditiis ex ducimus non hic veniam repudiandae quos quibusdam?
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Step 2: Adding CSS Styles
We’ll add CSS styles to make our UI look visually appealing. Create a new CSS file (e.g., styles.css) in the same directory as your HTML file. Copy and paste the provided CSS code into this file.
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.horizontal-scroll::-webkit-scrollbar {
width: 100%;
height: 0.4rem;
}
.vertical-scroll::-webkit-scrollbar {
width: 0.4rem;
height: 100%;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #42494e;
border-radius: 5px;
}
/* titles */
h4 {
font-size: 1.2rem;
}
h5 {
font-size: 1rem;
}
h6 {
font-size: 0.95rem;
}
h4,
h5,
h6 {
font-weight: 400;
color: white;
}
body {
display: flex;
height: 100vh;
overflow: hidden;
}
.sidemenu {
background-color: #1e262c;
width: 30%;
}
.container {
background-color: #0b141a;
width: 70%;
}
.status {
margin-top: 34px;
}
.sidemenu-title-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
}
.sidemenu-title-container i {
font-size: 1.2rem;
color: #bbbec4;
}
.status-container {
display: flex;
gap: 0.7rem;
overflow-x: scroll;
margin: 1rem 1rem 0 1rem;
padding-bottom: 0.5rem;
}
.status-img-border {
padding: 2px;
border: 1px solid #bbbec4;
width: fit-content;
border-radius: 50%;
}
.status-img-border.active {
border: 1px solid #11d951;
}
img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.status-img-cover {
position: relative;
height: 50px;
width: 50px;
border-radius: 50%;
overflow: hidden;
}
.status-container p {
font-size: 0.72rem;
margin-top: 0.5rem;
color: white;
text-align: center;
width: 56px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.divider {
margin-block: 1rem;
border-top: 1px solid #474d53;
}
/* channels */
.channels-container {
margin-top: 1rem;
height: calc(100vh - 255px);
overflow-y: scroll;
padding: 0 1rem;
}
.channel-title {
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
}
.channel-logo-cover {
position: relative;
height: 40px;
width: 40px;
border-radius: 50%;
overflow: hidden;
}
.channel-content {
display: flex;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.5rem;
}
.channel-content p {
font-size: 0.8rem;
color: #91989d;
}
.channel-img-cover {
position: relative;
height: 60px;
min-width: 60px;
max-width: 60px;
border-radius: 0.5rem;
overflow: hidden;
}
p.created {
font-size: 0.7rem;
margin-top: 2px;
}
/* find channels */
.find-img-cover {
position: relative;
height: 50px;
width: 50px;
border-radius: 50%;
overflow: hidden;
}
.find-title-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
}
.find-title-container p {
font-size: 0.9rem;
color: #01a884;
}
.find-container {
margin-top: 1rem;
display: flex;
gap: 0.7rem;
overflow-x: scroll;
padding-bottom: 0.5rem;
}
.find-container p {
font-size: 0.72rem;
margin-top: 0.5rem;
color: white;
text-align: center;
width: 56px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.find-img-border {
position: relative;
height: 50px;
width: 50px;
}
.verified {
position: absolute;
color: #11d951;
right: 0;
bottom: -5px;
padding: 3px;
background-color: #1e262c;
border-radius: 50%;
}
/* cntent */
.top-bar {
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
}
.top-bar .img-cover {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
}
.top-bar .name {
display: flex;
align-items: center;
gap: 0.5rem;
}
.top-bar .name p {
font-size: 0.8rem;
color: #91989d;
}
.top-bar i {
font-size: 1.2rem;
margin-left: 1rem;
}
.content {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 2rem;
height: calc(100vh - 80px);
overflow-y: scroll;
}
.card {
background-color: #1e262c;
padding: 5px;
width: fit-content;
border-radius: 1rem;
}
.card .img-cover {
position: relative;
height: 400px;
width: 400px;
border-radius: 1rem;
overflow: hidden;
}
.description {
padding: 0.5rem 0;
font-size: 0.9rem;
color: white;
width: 400px;
}
Make sure to link this CSS file to your HTML document inside the <head> section:
<link rel="stylesheet" href="styles.css" />
Certainly! Let’s conclude our step-by-step guide to building the WhatsApp Channels UI for the web:
Conclusion
Congratulations, you’ve successfully created a stunning WhatsApp Channels UI for the web by following this step-by-step guide. Here’s a recap of what we’ve accomplished:
- Setting Up: We started by setting up the basic HTML structure and linking our CSS styles.
- Creating the Side Menu: We built the side menu, which includes “Status” and “Channels” sections.
- Building the Status Section: Inside the “Status” section, we added a title, icons, and a container for status items.
- Adding Status Items: We created individual status items with images and names.
- Building the Channels Section: We extended the side menu by adding the “Channels” section with titles, icons, and a container for channel items.
- Adding Channel Items: We populated the “Channels” section with individual channel items, including logos, names, descriptions, and timestamps.
- Adding a “Find Channels” Section: We introduced a “Find Channels” section with titles, icons, and a container for discoverable channel items.
- Adding Discoverable Channel Items: We populated the “Find Channels” section with discoverable channel items, including images, names, and verified badges.
- Creating the Main Content: We created the main content area of our UI, including the user profile section and content cards.
- Adding User Profile Section: We included a user profile section with an image, user name, and follower count, along with notification and more options icons.
- Adding Content Cards: Finally, we added content cards with images and descriptions to the main content area.
You’ve now learned how to structure and style a WhatsApp Channels UI for the web. Feel free to customize and expand upon this foundation to create your unique web application. Don’t forget to replace placeholder images and text with your content to make it truly yours.
Keep experimenting and learning, and you’ll be well on your way to becoming a skilled web developer. If you have any questions or need further assistance, don’t hesitate to seek help from the developer community or online resources. Happy coding!
Video Tutorial
Don’t forget to Subscribe to our YouTube Channel for more
I needed to thank you for this very good read!!
I certainly enjoyed every bit of it. I have you bookmarked to look at new stuff you
Just wanna comment that you have a very nice website , I like the style it really stands out.