Instagram Clone Using HTML, CSS with Free Code
Introduction
Ever wondered how social media giants like Instagram are built? Well, here’s a chance to create your own simplified version! In this tutorial, we’ll guide you through building an Instagram clone using just HTML and CSS. While this version won’t have all the complex functionality of the real app (such as user authentication and data storage), it will focus on the UI design—allowing you to create an interface that looks similar to Instagram’s feed.
Table of Contents
Key Features
- User Profile Section: Displaying a user’s profile picture, name, and bio.
- Post Section: Posts with images and captions that mimic Instagram’s feed.
- Like and Comment Buttons: Buttons for interaction (without back-end functionality).
- Responsive Layout: Ensuring the page looks good on both mobile and desktop screens.
Technologies Used
- HTML for developing the webpage’s fundamental framework.
- CSS for styling and layout, ensuring it looks visually appealing.
Setting Up
Before we begin, set up your project by creating a folder named instagram-clone. Inside that folder, create two files: index.html (for the structure) and style.css (for the styles).
Step-by-Step Guide
1. Structuring the HTML
Start by building the HTML structure in index.html. This will include sections for the navigation bar, profile section, and post feed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram Clone</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="logo">Instagram</div>
<input type="text" placeholder="Search">
<div class="nav-icons">
<a href="#"><img src="home-icon.png" alt="Home"></a>
<a href="#"><img src="profile-icon.png" alt="Profile"></a>
</div>
</nav>
</header>
<section class="profile">
<img class="profile-pic" src="profile-pic.jpg" alt="Profile Picture">
<div class="profile-info">
<h2>John Doe</h2>
<p>Photographer | Traveler | Dreamer</p>
</div>
</section>
<section class="posts">
<div class="post">
<img class="post-image" src="post1.jpg" alt="Post Image">
<div class="post-info">
<h3>@johndoe</h3>
<p>Exploring the mountains!</p>
<button class="like-button">❤️ Like</button>
<button class="comment-button">💬 Comment</button>
</div>
</div>
<!-- More posts can be added similarly -->
</section>
</body>
</html>2. Creating the Basic Layout with CSS
Now, let’s add the styles to make the clone look like Instagram. Open the style.css file and add the following code:
/* Global Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #fafafa;
}
header {
background-color: white;
border-bottom: 1px solid #dbdbdb;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar .logo {
font-family: 'Pacifico', cursive;
font-size: 24px;
color: #262626;
}
.navbar input[type="text"] {
padding: 5px;
border-radius: 3px;
border: 1px solid #dbdbdb;
}
.nav-icons img {
width: 25px;
margin-left: 20px;
}
/* Profile Section */
.profile {
display: flex;
align-items: center;
padding: 20px;
background-color: white;
border-bottom: 1px solid #dbdbdb;
}
.profile .profile-pic {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 20px;
}
.profile-info h2 {
margin: 0;
font-size: 24px;
}
.profile-info p {
color: #737373;
}
/* Posts Section */
.posts {
padding: 20px;
}
.post {
background-color: white;
margin-bottom: 20px;
border: 1px solid #dbdbdb;
border-radius: 5px;
overflow: hidden;
}
.post .post-image {
width: 100%;
}
.post .post-info {
padding: 15px;
}
.post-info h3 {
margin: 0;
}
.post-info p {
margin: 10px 0;
}
button.like-button, button.comment-button {
background: none;
border: none;
color: #3897f0;
font-weight: bold;
cursor: pointer;
margin-right: 10px;
}3. Styling Posts and Profile Section
In the CSS above, we created simple styles for the navigation bar, profile section, and posts. The profile section includes a profile picture and a bio, while the posts have images, captions, and buttons for likes and comments.
Student Management System in Python With Free Code
4. Making the Layout Responsive
To ensure the clone works well on both desktop and mobile, we can use media queries. Add this at the bottom of your style.css:
/* Responsive Design */
@media (max-width: 768px) {
.profile {
flex-direction: column;
align-items: flex-start;
}
.profile .profile-pic {
margin-bottom: 10px;
}
.posts {
padding: 10px;
}
.post .post-info {
padding: 10px;
}
}- New Project :-https://www.youtube.com/@Decodeit2
- PHP PROJECT:- CLICK HERE
Improving
- Add Animations: Make buttons and images more interactive with CSS animations.
- Dark Mode: Create a toggle switch that changes the theme from light to dark.
- JavaScript Features: Implement basic JavaScript to add dynamic features like updating the like button when clicked.
- instagram clone using html css and javascript github
- instagram clone html css, javascript
- download instagram html code
- instagram clone project report pdf
- instagram clone website template
- Instagram Clone Using HTML source code html
- Instagram Clone Using HTML, github
- Instagram Clone Using HTML code w3schools