How to Build Responsive Facebook Clone using HTML and CSS | Tutorial

Hello Coders, In this article we are going to learn how to create Responsive Facebook Clone using HTML and CSS. Yes you heard it right! The Facebook itself. We are going to clone Facebook.

Facebook really has a very attractive UI. Building it would be really a good practice to improve our html and css skills. In this article I have provided all the resources such as a step by step video tutorial as well as complete source code and all the resources to help you build this project. You can also call it Social media website with HTML and CSS.

Build Responsive Facebook Clone with HTML and CSS | Video Tutorial

In the above video tutorial I have explained each and everything. You can follow the video tutorial and build this project. This video is going to be really helpful if you are beginner to the world of web development.

Responsive Facebook Clone with HTML and CSS | Source Code

Below I have provided both html and css code for you to build this project. You can also download the complete source code of this project by clicking on the download button at the bottom of this article.

How do I build Facebook Clone using HTML? HTML Source Code

Create an index.html file and add all the required boiler plate of the html document and copy the below code. (Download from the button below)

How do I design Responsive Facebook Clone using CSS? CSS Source Code

Create an styles.css file and link it our html document and copy the below codes.

.header* {
  margin: 0;
}

.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;
}

/* 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;
}

/* 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;
}

/* 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;
}

/* 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;
  }
}

Done! You can download the complete source code by clicking on download button below.

Download Code Files