Hello Coders, good day. The purpose of this post is to teach you how to use HTML and CSS to build a Facebook Clone Website. A Facebook clone is a copy of Facebook that is made with the primary goal of honing our talents and having a similar appearance to the original Facebook.
A Facebook clone is a public profile that has been made especially for the site's many millions of users, as well as for brands, famous people, and many other groups. It includes a profile with pictures, a feed for ideas, and all of the articles and tags from the account you created and used to log in. They have no pals other than their admirers, and we might like or feed on that, thus their profile for influencing people may vary.
I'd recommend doing a practise run while reading our blog if you're curious about how we used HTML and CSS to develop the Facebook clone. Your front-end skills will improve as a result of this as you guys build a Facebook clone.
HTML Code For Facebook Clone:
HTML is used to design the website's layout. So, first, we create the layout, then we style it. So we will add structure for the facebook clone .
You must first generate two files, one in HTML and one in CSS. Simply insert the following codes into your file after producing these files.
Before we start giving our facebook clone a structure. A few links need to be updated. In this project, we used two separate files for our HTML and CSS, therefore we need to link them all together. Please add the links to our CSS into the heading to accomplish this. In this article, we will put the Google Fonts link inside our HTML head area like we sometimes add a link inside the head section or use CSS to add Google Fonts.
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
We will build our replica Facebook with a similar structure because we all use Facebook and are aware that it has a header at the top, a body with the user's postings inside, and a sidebar feed.
Starting Header:
We will now create a container for our Facebook header using the div element. We will use an SVG image as the header section's image. This technique is known by the term SVG (Scalable Vector Graphics). Simply described, SVGs are a type of graphic image. These photographs are pixel-perfect at all sizes and can be resized. We will use SVGs to give our website a pleasing appearance because using images like jpg or jpeg would eventually cause their pixels to degrade. We will therefore add the Facebook emblem using SVGs utilising the img tag.
Now that we've created our header, let's add a search bar. To do this, we'll use a text input box with the placeholder "Search Facebook." Now we'll make a span tag and place several links for home, flag, subscription, store font, etc. inside of it.
Now, using the image element, we will put a picture of the user on the right side of our header. We will also be generating an icon using the span tag.
<!-- header starts -->
<div class="header">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons
/thumb/5/51/Facebook_f_logo_%282019%29.svg/1200px Facebook_f_logo_%282019%29.svg.png" alt="" />
<div class="header__input">
<span class="material-icons"> search </span>
<input type="text" placeholder="Search Facebook" />
</div>
</div>
<div class="header__middle">
<div class="header__option active">
<span class="material-icons"> home </span>
</div>
<div class="header__option">
<span class="material-icons"> flag </span>
</div>
<div class="header__option">
<span class="material-icons"> subscriptions </span>
</div>
<div class="header__option">
<span class="material-icons"> storefront </span>
</div>
<div class="header__option">
<span class="material-icons"> supervised_user_circle </span>
</div>
</div>
<div class="header__right">
<div class="header__info">
<img class="user__avatar"
src="https://img.freepik.com/free-vector/businessman-character-avatar-isolated_24877-60111.jpg?w=2000"
alt="" />
<h4>Somanath Goudar</h4>
</div>
<span class="material-icons"> add </span>
<span class="material-icons"> forum </span>
<span class="material-icons"> notifications_active </span>
<span class="material-icons"> expand_more </span>
</div>
</div>
<!-- header ends -->
Creating sidebar:
The user profile photo will now be added to the page, and his name will be added to the sidebar using the h4 tag. To construct a hyperlink, we will now combine an icon with text. Using the material icons class, we will design an icon, then we will add text to the symbol using the h4 element.
<!-- main body starts -->
<div class="main__body">
<!-- sidebar starts -->
<div class="sidebar">
<div class="sidebarRow">
<img class="user__avatar"
src="https://img.freepik.com/free-vector/businessman-character-avatar-isolated_24877-60111.jpg?w=2000"
alt="" />
<h4>Somanath Goudar</h4>
</div>
<div class="sidebarRow">
<span class="material-icons"> local_hospital </span>
<h4>Covid - 19 Information Center</h4>
</div>
<div class="sidebarRow">
<span class="material-icons"> emoji_flags </span>
<h4>Pages</h4>
</div>
<div class="sidebarRow">
<span class="material-icons"> people </span>
<h4>People</h4>
</div>
<div class="sidebarRow">
<span class="material-icons"> chat </span>
<h4>Messenger</h4>
</div>
<div class="sidebarRow">
<span class="material-icons"> storefront </span>
<h4>Marketplace</h4>
</div>
<div class="sidebarRow">
<span class="material-icons"> video_library </span>
<h4>Videos</h4>
</div>
<div class="sidebarRow">
<span class="material-icons"> expand_more </span>
<h4>More</h4>
</div>
</div>
<!-- sidebar ends -->
Creating Feed:
The first thing we notice when we enter the feed is the stories. We will therefore create a div for the narrative in order to create the stories. We'll put a background image inside that div, then we'll put an image for the user story inside that div using the image tag. For that, we'll also build a messenger. Prior to creating an input box with entered content, we will first add the user profile picture using the form tag.
Now we will be adding posts for that we will be creating a div called post . Inside that we will be adding a profile photo and using the h3 tag we will be adding the name of the user and using the paragraph tag we will be adding date and time.
Now we will creating a paragraph inside these we can add up the messages for the post if we want and then using the image tag we will be adding the post image.
Now under our post image we will add the like , comment ,share icons using the material -icon class.In the same way we will be adding the another post for our facebook page.
<div class="feed">
<div class="storyReel">
<!-- story starts -->
<div style="
background-image: url('https://images.unsplash.com/photo-1527082395-e939b847da0d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
" class="story">
<img class="user__avatar story__avatar"
src="https://www.shareicon.net/data/2016/05/24/770139_man_512x512.png" alt="" />
<h4>Somanath Goudar</h4>
</div>
<!-- story ends -->
<!-- story starts -->
<div style="
background-image: url('https://cellularnews.com/wp-content/uploads/2020/04/Delete-photo-337x600.jpg');
" class="story">
<img class="user__avatar story__avatar"
src="https://image.freepik.com/free-vector/businessman-avatar-cartoon-character-profile_18591-50584.jpg"
alt="" />
<h4>Somanath Goudar</h4>
</div>
<!-- story ends -->
<!-- story starts -->
<div style="
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTBHC2s4NFdzXEsVzvBPGjkrSePQa-8XFuNtQ&usqp=CAU');
" class="story">
<img class="user__avatar story__avatar"
src="https://image.freepik.com/free-vector/businessman-avatar-cartoon-character-profile_18591-50584.jpg"
alt="" />
<h4>Somanath Goudar</h4>
</div>
<!-- story ends -->
<!-- story starts -->
<div style="
background-image: url('https://images.unsplash.com/photo-1527082395-e939b847da0d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
" class="story">
<img class="user__avatar story__avatar"
src="https://image.freepik.com/free-vector/businessman-avatar-cartoon-character-profile_18591-50584.jpg"
alt="" />
<h4>Somanath Goudar</h4>
</div>
<!-- story ends -->
<!-- story starts -->
<div style="
background-image: url('https://cellularnews.com/wp-content/uploads/2020/04/Delete-photo-337x600.jpg');
" class="story">
<img class="user__avatar story__avatar"
src="https://image.freepik.com/free-vector/businessman-avatar-cartoon-character-profile_18591-50584.jpg"
alt="" />
<h4>Somanath Goudar</h4>
</div>
<!-- story ends -->
<!-- story starts -->
<div style="
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTBHC2s4NFdzXEsVzvBPGjkrSePQa-8XFuNtQ&usqp=CAU');
" class="story">
<img class="user__avatar story__avatar"
src="https://image.freepik.com/free-vector/businessman-avatar-cartoon-character-profile_18591-50584.jpg"
alt="" />
<h4>Somanath Goudar</h4>
</div>
<!-- story ends -->
</div>
<!-- message sender starts -->
<div class="messageSender">
<div class="messageSender__top">
<img class="user__avatar"
src="https://image.freepik.com/free-vector/businessman-avatar-cartoon-character-profile_18591-50584.jpg"
alt="" />
<form>
<input class="messageSender__input" placeholder="What's on your mind?" type="text" />
</form>
</div>
<div class="messageSender__bottom">
<div class="messageSender__option">
<span style="color: red" class="material-icons"> videocam </span>
<h3>Live</h3>
</div>
<div class="messageSender__option">
<span style="color: green" class="material-icons"> photo_library </span>
<h3>Photo</h3>
</div>
<div class="messageSender__option">
<span style="color: orange" class="material-icons"> insert_emoticon </span>
<h3>Feeling</h3>
</div>
</div>
</div>
<!-- message sender ends -->
<!-- post starts -->
<div class="post">
<div class="post__top">
<img class="user__avatar post__avatar"
src="https://image.freepik.com/free-vector/businessman-avatar-cartoon-character-profile_18591-50584.jpg"
alt="" />
<div class="post__topInfo">
<h3>Somanath Goudar</h3>
<p>25 April at 20:30</p>
</div>
</div>
<div class="post__bottom">
<p>Message</p>
</div>
<div class="post__image">
<img src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2Fyc3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
alt="" />
</div>
<div class="post__options">
<div class="post__option">
<span class="material-icons"> thumb_up </span>
<p>Like</p>
</div>
<div class="post__option">
<span class="material-icons"> chat_bubble_outline </span>
<p>Comment</p>
</div>
<div class="post__option">
<span class="material-icons"> near_me </span>
<p>Share</p>
</div>
</div>
</div>
<!-- post ends -->
<!-- post starts -->
<div class="post">
<div class="post__top">
<img class="user__avatar post__avatar"
src="https://image.freepik.com/free-vector/businessman-avatar-cartoon-character-profile_18591-50584.jpg"
alt="" />
<div class="post__topInfo">
<h3>Somanath Goudar</h3>
<p>25 April at 20:30</p>
</div>
</div>
<div class="post__bottom">
<p>Post Without Image</p>
</div>
<div class="post__options">
<div class="post__option">
<span class="material-icons"> thumb_up </span>
<p>Like</p>
</div>
<div class="post__option">
<span class="material-icons"> chat_bubble_outline </span>
<p>Comment</p>
</div>
<div class="post__option">
<span class="material-icons"> near_me </span>
<p>Share</p>
</div>
</div>
</div>
<!-- post ends -->
<!-- post starts -->
<div class="post">
<div class="post__top">
<img class="user__avatar post__avatar"
src="https://image.freepik.com/free-vector/businessman-avatar-cartoon-character-profile_18591-50584.jpg"
alt="" />
<div class="post__topInfo">
<h3>Somanath Goudar</h3>
<p>25 April at 20:30</p>
</div>
</div>
<div class="post__bottom">
<p>Message</p>
</div>
<div class="post__image">
<img src="https://wallpapercave.com/wp/wp7357832.jpg" alt="" />
</div>
<div class="post__options">
<div class="post__option">
<span class="material-icons"> thumb_up </span>
<p>Like</p>
</div>
<div class="post__option">
<span class="material-icons"> chat_bubble_outline </span>
<p>Comment</p>
</div>
<div class="post__option">
<span class="material-icons"> near_me </span>
<p>Share</p>
</div>
</div>
</div>
<!-- post ends -->
</div>
<!-- feed ends -->
Creating the Footer:
For the footer we will add the link for the script from the facebook itself so you just simply add the link inside the script tag which we will be using to add the footer.
<!-- main body ends -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v10.0"
nonce="zUxEq08J"></script>
All that's required is for us to provide structure to our webpage.
Now let's a look at our structure.
CSS Code For Facebook Clone:
Styling Header:
We shall now style our Facebook clone. First, we set the box-sizing to "border-box" and the margin for our entire webpage to "zero" using the universal selector.
Now that our logo's height has been set to 40px using the class selector and the pusedo-child element, it is ready for use. We'll set the width to "45px" and the border-radius to "50%" using the border-radius property.
Now we will be adding style to our whole header using the (.header) tag. We set the padding property to 15px for the top and bottom, and 20px for the left and right.The display for our header is set as "flex" and position is set to "sticky" so that it sticks to the page and moves as the pages scroll.
Similarly, we will be adding style to our input and icons using our CSS. I would suggest going through the code once. We have used the basic CSS to add the style to our header section.
* {
margin: 0;
box-sizing: border-box;
}
.header__left img {
height: 40px;
}
.user__avatar {
border-radius: 50%;
width: 45px;
}
.header {
padding: 15px 20px;
display: flex;
justify-content: space-between;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0 5px 8px -9px rgba(0, 0, 0, 0.75);
}
.header__left {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.header__input {
display: flex;
align-items: center;
background-color: #eff2f5;
padding: 10px;
margin-left: 10px;
border-radius: 999px;
}
.header__input input {
border: none;
background-color: transparent;
outline-width: 0;
}
.header__middle {
display: flex;
flex: 1;
justify-content: center;
}
.header__option .material-icons {
font-size: xx-large;
color: gray;
}
.header__option:hover .material-icons {
color: #2e81f4;
}
.header__option {
display: flex;
align-items: center;
padding: 0 30px;
cursor: pointer;
}
.header__option.active .material-icons {
color: #2e81f4;
}
.header__option.active {
border-bottom: 4px solid #2e81f4;
}
.header__option:hover {
background-color: #eff2f5;
border-radius: 10px;
align-items: center;
padding: 0 30px;
border-bottom: none;
}
.header__info {
display: flex;
align-items: center;
}
.header__info h4 {
margin-left: 10px;
}
.header__right {
display: flex;
align-items: center;
}
.header__right .material-icons {
color: gray;
margin: 0 10px;
}
.header__right .material-icons:hover {
cursor: pointer;
}
Styling Sidebar:
We will set the display to be flexible using the class selector, and we will centre the objects using the align-item attribute. Additionally, we'll add the hover property, which will change the background colour to a light grey shade with a 10 pixel border as soon as you hover over it.
The margin-left and font weight of the h4 pusedo element were set to 20 px and 600, respectively.
The text size is now set to xx-large and the colour is set to "blue" using the material icon.
/* sidebar */
.sidebarRow {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
}
.sidebarRow:hover {
background-color: lightgray;
border-radius: 10px;
}
.sidebarRow h4 {
margin-left: 20px;
font-weight: 600;
}
.sidebarRow .material-icons {
font-size: xx-large;
color: #2e81f4;
}
Styling Story:
The position is set to relative, and the background is no-repeat using the class selector (.story). The width & heit are set as120 px and 200 px, respectively. We will add some body shadow to our narrative using thebox-shadow, and we also added an ease-in transition with a 100ms delay.
In a similar manner, we will give each component of our story its own styling. We've given all the elements some basic styling.
/* story */
.story {
position: relative;
background-repeat: no-repeat;
background-size: cover;
width: 120px;
height: 200px;
box-shadow: 0px 5px 17px -7px rgba(0, 0, 0, 0.75);
border-radius: 10px;
margin-right: 10px;
transition: transform 100ms ease-in;
cursor: pointer;
}
.story:hover {
transform: scale(1.07);
}
.story__avatar {
margin: 10px;
color: blue;
}
.story h4 {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
}
.storyReel {
padding: 10px 0;
display: flex;
}
.main__body {
display: flex;
}
body {
background-color: #f1f2f5;
}
.feed {
flex: 1;
padding: 30px 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sidebar {
padding: 25px 10px;
flex: 0.33;
}
Styling Message Sender
The class selector (.messageSender) , the display is set to "flexand using the margin-top property, we will add a margin-top of 30px. The background colour is set to "white" and we also added some border radius and box shadow to our message sender.
As we have also added some basic style to all the individual elements in the story, similarly we will add style to all the elements of our message sender.
/* message sender */
.messageSender {
display: flex;
margin-top: 30px;
flex-direction: column;
background-color: white;
border-radius: 15px;
box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.75);
width: 100%;
}
.messageSender__top {
display: flex;
align-items: center;
border-bottom: 1px solid #eff2f5;
padding: 15px;
}
.messageSender__top form {
flex: 1;
display: flex;
}
.messageSender__top form input {
flex: 1;
outline-width: 0;
border: none;
padding: 15px 20px;
margin: 0 10px;
border-radius: 999px;
background-color: #eff2f5;
}
.messageSender__bottom {
display: flex;
justify-content: space-evenly;
}
.messageSender__option {
padding: 8px;
display: flex;
align-items: center;
color: gray;
margin: 5px;
}
.messageSender__option h3 {
font-size: medium;
margin-left: 10px;
}
.messageSender__option:hover {
cursor: pointer;
background-color: #eff2f5;
border-radius: 20px;
}
Adding style to post and adding response:
We also prefer class selectors because these selectors help in styling all the elements that have the same class . Similarly, we will be using the (.post) class selector . The width is set to "100%" and the margin-top is defined as "15px". I also added a border-radius of "15px" and the background colour is set to "White."
Now to add responsiveness, we will be using the media query selector. Using the maximum-width property, we will define the screen width. If the screen size is less than the defined media query screen width, we set sidebar , header as none and the feed as responsive.
* post */
.post {
width: 100%;
margin-top: 15px;
border-radius: 15px;
background-color: white;
box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.75);
}
.post__image img {
width: 100%;
}
.post__top {
display: flex;
position: relative;
align-items: center;
padding: 15px;
}
.post__avatar {
margin-right: 10px;
}
.post__topInfo h3 {
font-size: medium;
}
.post__topInfo p {
font-size: small;
color: gray;
}
.post__bottom {
margin-top: 10px;
margin-bottom: 10px;
padding: 15px 25px;
}
.post__options {
padding-top: 10px;
border-top: 1px solid lightgray;
display: flex;
justify-content: space-evenly;
font-size: medium;
color: gray;
cursor: pointer;
padding: 15px;
}
.post__option {
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
flex: 1;
}
.post__option p {
margin-left: 10px;
}
.post__option:hover {
background-color: #eff2f5;
border-radius: 10px;
}
@media (max-width: 768px) {
.sidebar {
display: none;
}
.header__input input {
display: none;
}
.header__middle {
display: none;
}
.header__info {
display: none;
}
.widgets {
display: none;
}
.feed {
margin-top: 20px;
width: 100%;
padding: 0;
}
.story h4 {
font-size: 10px;
}
.story img {
width: 40px;
}
}
@media (min-width: 320px) {
.storyReel {
width: 100%;
overflow-x: scroll;
}
}
@media (min-width: 769px) and (max-width: 1440px) {
/* CSS To Target 767 px width of screen */
.feed {
width: 50%;
padding: 10px 50px;
}
}
The project is now finished, we have completed Facebook clone using HTML and CSS. Now look at the live preview.
Now We have Successfully created Facebook Clone using HTML and CSS . You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!!
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
follow : codewithrandom
Written By : arun
Code by : Saul
Top comments (0)