How to Design Homepage like Facebook using HTML and CSS ?
Last Updated :
15 Jul, 2025
Creating a Facebook Home page is an Innovative way to learn and apply modern web design principles. In this article, we’ll walk you through the process of creating a Facebook-like homepage using only HTML and CSS. This project is perfect for beginners who want hands-on experience in structuring a professional-looking webpage while improving their frontend development skills.
You’ll learn how to set up a basic project, build the foundational HTML layout, and apply CSS styles to bring the interface to life. From fixed navigation bars to side panels and post sections, we’ll create the familiar features of Facebook’s UI, giving you a solid grasp of real-world web design. Whether you're looking to sharpen your coding skills or build an impressive portfolio project, this guide will help you every step of the way.
Setting Up the Project for Your Webpage
To start a project, create a folder and add files to it.
- index.html: The main file that contains the structure of the webpage.
- new.css: The file where you will add all the styling to make the page more appealing.
Project Preview:
Project Preview
Building the HTML Structure for your Webpage
In this part, we will recreate the layout of a Facebook homepage using HTML Structure — from the fixed header and interactive sidebar to the post creation area and feed. Each section is thoughtfully structured using <div> containers and semantic tags, making the layout not only visually accurate but also easy to manage and style with CSS.
Below is a Easy example of how you can create structure of the HTML webpage:
file: index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css"
href="new.css" media="screen" />
</head>
<body>
<div class=" header1">
<div id="name" class="header1">
OLD MASTER
</div>
<div id="searcharea" class="header1">
<input placeholder="search here...."
type="text" id="searchbox" />
</div>
<div id="profilearea" class="header1">Profile</div>
<div id="profilearea1" class="header1">|</div>
<div id="profilearea2" class="header1">Home</div>
</div>
<div class="sidenav">
<div class="bodyn">
<div id="side1" class="bodyn">Profile</div>
<div id="side2" class="bodyn">edit profile</div>
<div id="side3" class="bodyn">News feed</div>
<div id="side4" class="bodyn">Messages</div>
<div id="side5" class="bodyn">Events</div>
<div id="side6" class="bodyn">PAGES</div>
<div id="side7" class="bodyn">Pages feed</div>
<div id="side8" class="bodyn">Like pages</div>
<div id="side9" class="bodyn">Create page</div>
<div id="side10" class="bodyn">Create ad</div>
<div id="side11" class="bodyn">GROUPS</div>
<div id="side12" class="bodyn">New groups</div>
<div id="side13" class="bodyn">Create group</div>
<div id="side14" class="bodyn">APPS</div>
<div id="side15" class="bodyn">Games</div>
<div id="side16" class="bodyn">On this day</div>
<div id="side17" class="bodyn">Games feed</div>
<div id="side18" class="bodyn">FRIENDS</div>
<div id="side19" class="bodyn">Close friends</div>
<div id="side20" class="bodyn">Family</div>
<div id="side21" class="bodyn">INTERESTS</div>
<div id="side22" class="bodyn">Pages and public</div>
<div id="side23" class="bodyn">EVENTS</div>
<div id="side24" class="bodyn">Create event</div>
</div>
</div>
<div class="post00"></div>
<div class="post10"></div>
<div class="header0001"></div>
<div class="sideboxxx"></div>
<div class="sideboxxxx2"></div>
<div class="post">
<div id="column-1" class="post">
update status | add photos/
videos | create photo album
<hr><br><br><br><br><br><br>
<hr>
</div>
<div id="postpos" class="post">
<input type="submit" id="buttonpost" value="post" />
</div>
<div id="postboxpos" class="post">
<textarea placeholder="What's in your mind"
id="postbox">
</textarea>
</div>
</div>
<div class="post1">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20250604104322476439/mini1.png" alt="image is here"
height="40" width="40" /><br>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20250604105051422400/mini_reduced.webp" alt="image is here"
height="400" width="575" /><br><br>
<p6>Like Comment Share</p6><br>
<hr>
<p1>Amit Deb</p1>
<p2> and</p2>
<p1> 5 others</p1>
<p2> like this</p2>
<div id="post2text" class="post1">
<p3>Rani Mukharji </p3>
<p2>with </p2>
<p1> Arup Pegu</p1>
<p2> and</p2>
<p1> 15 others.</p1><br>
<p4>4 hrs.</p4>
</div>
<div id="commentprof2" class="post1">
<img src="mini1.png" alt="image is here"
height="25" width="25" id="profpic" />
</div>
<div id="commentboxpos2" class="post1">
<input type="text" placeholder="comment"
id="commentbox" />
</div>
</div>
<div class="sidebox">
<div id="sidebox1" class="sidebox">
<div id="sideboxx1">YOUR PAGES</div>
<hr><br><br>See all
<hr>
<div id="sideboxx2">
This Week
</div><br><br>See more
<hr>
<div id="sideboxx3">
Recent Posts
</div><br><br>See more
<hr>
<div id="sideboxx4">
You haven't posted in this days
</div><br><br><br>See all
</div>
<div id="post1pos" class="sidebox">
<input type="submit" id="buttonpost1"
value="write a post" />
</div>
</div>
<div class="sideboxxx2">
<div id="sidebox2" class="sideboxxx2">
<hr>
<div id="sideboxx21">Trending</div>
<br><br><br>See more
<hr>
<div id="sideboxx22">
Suggested Pages
</div><br><br><br>See all
<hr>
<div id="sideboxx23">
People you may know
</div><br><br><br><br>See all
</div>
</div>
</body>
</html>
Code Overview:
- The webpage structure is divided into key sections using semantic HTML elements and
div tags. - A fixed top navigation bar (
.header1) contains the website name, search box, and profile area. - A left sidebar (
.bodyn) presents categorized navigation links like dashboard sections and settings. - The main content area includes post containers (
.post00, .post10, .post1) for creating and displaying posts. - Text input areas and buttons allow users to type and submit content (e.g., post box and comment box).
- Right-side panels (
.sidebox, .sideboxxx, .sideboxxx2) provide additional information or widgets, like trending topics or suggestions. - Custom paragraph tags (
p1 to p7) are used throughout to style text content consistently. - Elements are precisely positioned using inline styles and IDs to create a structured layout.
Styling with CSS
Now that you’ve set up the HTML structure, it’s time to make your page more attractive. Here’s how you can style it:
file: new.css
new.css
/* Write CSS Here */body{ background: linear-gradient(to bottom right, white, #bcbdc4);
height:400px;}
.header1{
position:fixed;
width :100%;
height:70px;
background :#147064;
top:0;
bottom:0;
color: white;
z-index:7;
}
#name{left:0px;
font-family: verdana sans-serif;
font-size:60px;}
#searcharea{top:17px;
left:400px;
height:50px;
}
#searchbox{width:500px;
height:30px;
background:white;
padding:5px;
outline:none;
border-radius: 15px/15px;
}
#profilearea{top:20px;
left:920px;
height:30px;
font-size:20px;
font-family:verdana sans-serif;
}
#profilearea1{top:10px;
left:980px;
height:30px;
font-size:30px;
font-family:verdana ;
}
#profilearea2{top:20px;
left:1000px;
height:30px;
font-size:20px;
font-family:verdana sans-serif ;
}
.bodyn{top:70px;
left:30px;
position:absolute;
width:200px;
height:740px;
font-family:verdana;
}
#side1{top:0px;
left:10px;
width:160px;
height:25px;
font-size:20px;
color:#868383;
}
#side2{top:30px;
left:10px;
width:180px;
height:25px;
font-size:15px;
color:#868383;
}
#side3{top:60px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side4{top:85px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side5{top:110px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side6{top:145px;
left:10px;
width:180px;
height:30px;
font-size:20px;
color:#868383;
padding-top:5px;
}
#side7{top:175px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side8{top:200px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side9{top:225px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side10{top:250px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side11{top:285px;
left:10px;
width:180px;
height:30px;
font-size:20px;
color:#868383;
padding-top:5px;
}
#side12{top:315px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side13{top:340px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side14{top:375px;
left:10px;
width:180px;
height:30px;
font-size:20px;
color:#868383;
padding-top:5px;
}
#side15{top:405px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side16{top:430px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side17{top:455px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side18{top:490px;
left:10px;
width:180px;
height:30px;
font-size:20px;
color:#868383;
padding-top:5px;
}
#side19{top:520px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side20{top:545px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side21{top:580px;
left:10px;
width:180px;
height:30px;
font-size:20px;
color:#868383;
padding-top:5px;
}
#side22{top:610px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side23{top:645px;
left:10px;
width:180px;
height:30px;
font-size:20px;
color:#868383;
padding-top:5px;
}
#side24{top:675px;
left:15px;
width:160px;
height:25px;
font-size:15px;
color:#363030;
padding-top:5px;
padding-left:20px;
}
#side1:hover{background:#e9f0f2;
}
#side2:hover{background:#e9f0f2;
}
#side4:hover{background:#e9f0f2;
}#side5:hover{background:#e9f0f2;
}#side6:hover{background:#e9f0f2;
}#side7:hover{background:#e9f0f2;
}#side8:hover{background:#e9f0f2;
}#side9:hover{background:#e9f0f2;
}#side10:hover{background:#e9f0f2;
}#side11:hover{background:#e9f0f2;
}#side12:hover{background:#e9f0f2;
}#side13:hover{background:#e9f0f2;
}#side14:hover{background:#e9f0f2;
}#side15:hover{background:#e9f0f2;
}#side16:hover{background:#e9f0f2;
}#side17:hover{background:#e9f0f2;
}#side18:hover{background:#e9f0f2;
}#side19:hover{background:#e9f0f2;
}#side20:hover{background:#e9f0f2;
}#side21:hover{background:#e9f0f2;
}#side22:hover{background:#e9f0f2;
}#side23:hover{background:#e9f0f2;
}#side24:hover{background:#e9f0f2;
}.post00{top:70px;
left:370px;
position:absolute;
width:600px;
height:210px;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.post10{top:290px;
left:370px;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
position:absolute;
background:white;
width:580px;
height:600px;
border-radius:3px/3px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}
.header0001{
position:fixed;
width:100%;
height:60px;
background:#142170;
top:0;
left:0;
color:white;
z-index:6;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.sideboxxx{top:70px;
left:1000px;
width:220px;
height: 550;
position:absolute;
font-family:verdana;
color:#363030;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
font-size:15px;}
.sideboxxxx2{top:500px;
left:1000px;
width:220px;
height:380px;
position:absolute;
font-family:verdana;
color:#363030;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.post{top:70px;
left:370px;
position:absolute;
width:600px;
height:210px;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
#column-1{left:0px;
top:0px;
background:white;
width:580px;
height:200px;
border-radius:3px/3px;
font-size:15px;
font-family:verdana;
color:#1b6192;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}
#postpos{left:450px;
top:170px;
width:85px;
height:30px;}
#buttonpost{width:85px;
height:30px;
border-radius:4px/4px;
background:#147064;
font-size:15px;
outline:none;
color:white;
}
#postboxpos{top:45px;
left:10px;
height:105px;
width:580px;
z-index:5;}
#postbox {height:105px;
outline:none;
border:white;
background:#e9f0f2;
width:580px;}
.post1{top:290px;
left:370px;
position:absolute;
background:white;
width:580px;
height:600px;
border-radius:3px/3px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}
p1{color:#1b6192;
font-family:verdana;
font-size:15px;}
p2{color:#868383;
font-family:verdana;
font-size:15px;}
p3{color:#1b6192;
font-family:verdana;
font-size:15px;
font-weight:bold;}
p4{color:#868383;
font-family:verdana;
font-size:10px;}
p6{color:#1b6192;
font-family:verdana;
font-size:15px;
word-spacing:10px;}
p7{font-size:20px;
color:#868383;
font-family:verdana;}
#post2text{left:50px;
top:10px;
padding-top:0px;
height:20px;
width:400px;}
#commentprof2{top:550px;
left:0px;
width:25px;
height:25px;}
#commentboxpos2{top:550px;
left:40px;
width:500px;
height:30px;}
#commentbox{
height:30;
width:500;}
.sidebox{top:70px;
left:1000px;
width:210px;
height:400px;
position:absolute;
font-family:verdana;
color: #363030;
font-size:15px;}
#sidebox1{top:0;
left:0;
width:200px;
height:400px;
background:white;
border-radius:3px/3px;
padding:10px;
}
#sideboxx1{top:0;
left:0;
width:200px;
height:20px;
font-size:20;
color:#868383;}
#sideboxx2{top:0;
left:0;
width:200px;
height:20px;
font-size:20;
color:#868383;}
#sideboxx3{top:0;
left:0;
width:200px;
height:20px;
font-size:20;
color:#868383;
}#sideboxx4{top:0;
left:0;
width:200px;
height:20px;
font-size:20;
color: #868383;
}
#post1pos{ left:100px;
top:500;
width:100px;
height:30px;}
#buttonpost1{width:100px;
height:30px;
font-size:15px;
border-radius:4px/4px;
color:white;
background:#147064;
outline:none;
}
.sideboxxx2{top:500px;
left:1000px;
width:220px;
height:250px;
position:absolute;
font-family:verdana;
color:#363030;
font-size:15px;}
#sidebox2{top:0px;
left:0;
width:200px;
height:380px;
background:white;
border-radius:3px/3px;
padding:10px;}
#sideboxx21{
left:0px;
width:180px;
height:20px;
font-size:20px;
color:#868383;
}
#sideboxx22{
left:0px;
width:180px;
height:20px;
font-size:20px;
color:#868383;
}
#sideboxx23{
left:0px;
width:180px;
height:20px;
font-size:20px;
color:#868383;
}
Code Overview:
- The
.header1 class creates a fixed top navigation bar with a specific background color and text styling. - The sidebar (
.bodyn and #side1 to #side24) is styled with specific padding, font settings, and hover effects to enhance interactivity. - Search and profile areas (
#searcharea, #searchbox, #profilearea, etc.) are positioned precisely within the header. - Multiple content boxes (
.post, .post00, .post10, .post1) are styled using shadows, padding, and rounded corners for better UI presentation. - Right-side widgets (
.sidebox, .sideboxxx, .sideboxxx2) are added with box shadows and text styling to display supplementary information. - Buttons (
#buttonpost, #buttonpost1) and input areas (#postbox, #commentbox) are styled for usability and aesthetic appeal. - Custom tag-like elements (
p1 to p7) are used for various text color and font styling to maintain visual hierarchy across the layout.
Output:
output
Similar Reads
Design a Tribute Page using HTML and CSS Making a tribute page is an Innovative way to honor someone special in your life. In this article, we create a tribute webpage using HTML and CSS. This page has a simple and creative design. It contains a header with a title, a main section with text and images, and a footer for main details or cred
4 min read
Design a Webpage like Technical Documentation using HTML and CSS In this article, we will design a webpage-style technical documentation using HTML and CSS, which accounts for nearly 30% of the structure and user experience in many educational and product-based websites. Technical documentation refers to structured content that describes the functionality, usage,
3 min read
Design a Google Chrome Page Template using HTML and CSS Google Chrome Page Template is a replica of Google Chrome Page which can be built with the help of HTML and CSS. This project has fundamental features and design elements, a search option, along with using the FontAwsome Icons, and various CSS styling, which offer you hands-on experience in web desi
4 min read
Design a Layered Image Page Template using HTML and CSS The article provides a complete guide for creating a layered image layout using HTML and CSS. The Layered Image Page refers to a webpage design that contains layered structured visual elements using images. Here, the design contains two boxes with background images and some empty rounded boxes with
3 min read
Design a Webpage for online food delivery system using HTML and CSS Creating your own online food delivery website is a great way to present a user-friendly platform for customers to browse and order food online. In this project, we’ll design a simple yet effective food delivery website using HTML and CSS.What We’re Going to Create...We’ll develop a straightforward
7 min read
How to Create Facebook Login Page in HTML & CSS ? To Create a Facebook Login Page with HTML and CSS, we will first create the overall structure of the application and then apply the styling and formatting properties using CSS. The application consists of exactly a similar design to the Facebook Login Page. The application is designed in a responsiv
4 min read