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.

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).

https://updategadh.com/php-project/bike-rental-management-system/

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

Instagram Clone Using HTML, CSS

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

Post Views: 1,464