Make Instagram Clone Using HTML CSS And JavaScript

Cloning an Instagram profile using HTML and CSS allows you to restore the appearance of your Instagram profile page. Although this tutorial doesn’t cover advanced features like back-end interactions or publishing capabilities, it will walk you through the process of replicating design elements using front-end technology.

Whether you’re a web developer looking to improve your HTML and CSS skills or just want to understand how popular websites are designed, this tutorial will walk you step-by-step through creating a visually similar Instagram account. Side profile. By the end of this tutorial, you will have gained valuable hands-on experience creating an HTML structure, applying CSS styles, and creating a responsive layout.

Output

Make Instagram clone using HTML CSS and JavaScript

See also

Download Source Code

Table of Contents

How to Create Instagram clone with JavaScript?

In this blog post, you will understand how HTML,CSS and JavaScript work together to create a visually appealing and user-friendly Instagram clone that looks great on all devices. So, let’s waste no time and start the steps to creating a Instagram clone.

Folder Structure for Instagram Clone

   //instagram-clone-main/
        |__assets
     	|__index.html
     	|__style.css
     	|__script.js

Create HTML Page for Instagram Clone

This is the HTML file for our Instagram below. Here, we are using the HTML, CSS and script to create the content of the Instagram UI.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Instagram Clone</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="assets/favicon.svg" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  	<body>
  		/*  Here all code of Instagram clone. You can download all code from below button*/
  	</body>
</html>

Create CSS file for Styling

We are using CSS for managing the content of HTML like the content color, width, height, font size, padding, margin, etc.

style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* CSS Reset */
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*,
button,
input,
select,
textarea {
  font-family: 'Roboto', sans-serif;
}

/* Vars */
:root {
  --primary: hsl(0, 0%, 100%);
  --secondary: hsl(0, 0%, 98%);
  --border: hsl(0, 0%, 86%);

  --story-border: hsl(0, 0%, 78%);
  --img-border: hsla(0, 0%, 0%, 0.1);

  --text-dark: hsl(0, 0%, 15%);
  --text-light: hsl(0, 0%, 60%);

  --like: hsl(355, 82%, 61%);
  --link: hsl(204, 100%, 48%);

  --header-height: 44px;
  --nav-height: 44px;
}
:root.darkTheme {
  --primary: hsl(0, 0%, 0%);
  --secondary: hsl(0, 0%, 2%);
  --border: hsl(0, 0%, 15%);

  --story-border: hsl(0, 0%, 44%);
  --img-border: hsla(0, 0%, 100%, 0.1);

  --text-dark: hsl(0, 0%, 98%);
  --text-light: hsl(0, 0%, 60%);
}

/* -------------------------------------------------- */

/* General Styles */
body {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

svg {
  display: block;
}

img {
  max-width: 100%;
}

/* -------------------------------------------------- */

/* Header Navbar */
.header {
  width: 100%;
  height: var(--header-height);
  background-color: var(--primary);

  display: flex;
  justify-content: center;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}
.header::after {
  content: '';
  position: absolute;
  bottom: 0;

  width: 100%;
  height: 1px;
  background-color: var(--border);
}

.header__content {
  width: 100%;
  max-width: 975px;

  padding: 0 14px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__home {
  margin-top: 5px;
}
.header__theme-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.header__theme-button-sun {
  display: none;
}
.header__theme-button-moon {
  display: unset;
}
:root.darkTheme .header__theme-button-sun {
  display: unset;
}
:root.darkTheme .header__theme-button-moon {
  display: none;
}

.header__search {
  width: 216px;
  height: 28px;

  display: none;
  align-items: center;
  position: relative;
}
.header__search svg {
  width: 12px;
  height: 12px;

  position: absolute;
  left: 8px;
}
.header__search input {
  width: 100%;
  height: 100%;
  background-color: var(--secondary);

  padding: 4px 10px 4px 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;

  font-size: 12px;
  font-weight: 300;
  text-decoration: none;
  color: var(--text-light);

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.header__search input:focus {
  color: var(--text-dark);
}

.header__buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Bottom Navbar */
.navbar {
  width: 100%;
  height: var(--nav-height);
  background-color: var(--primary);

  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.navbar::after {
  content: '';
  position: absolute;
  top: 0;

  width: 100%;
  height: 1px;
  background-color: var(--border);
}

.navbar__button {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar__button.profile-button .profile-button__border {
  width: 28px;
  height: 28px;
  border-width: 2px;
}

/* Main Content */
.main-container {
  background-color: var(--primary);

  margin-top: var(--header-height);
  margin-bottom: var(--nav-height);

  display: flex;
  flex: 1;
}

.content-container {
  width: 100%;
  max-width: 935px;

  padding: 0 0 8px;

  margin: 0 auto;
  display: flex;
}
.content {
  width: 100%;
  max-width: 614px;

  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.stories {
  width: 100%;
  background-color: var(--primary);
  padding: 16px 0;
  flex-shrink: 0;

  position: relative;
  overflow: hidden;
}
.stories::after {
  content: '';
  position: absolute;
  bottom: 0;

  width: 100%;
  height: 1px;
  background-color: var(--border);
}
.stories__content {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 16px;
  padding: 0 16px;
  position: relative;

  scroll-behavior: smooth;
  scrollbar-width: none;
}
.stories__content::-webkit-scrollbar {
  display: none;
}

.posts {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.stories__left-button,
.post__left-button,
.stories__right-button,
.post__right-button {
  width: 24px;
  height: 24px;
  display: none;

  background-color: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.stories__left-button {
  left: 10px;
}
.stories__right-button {
  right: 10px;
}
.post__left-button {
  left: 16px;
  opacity: 0.7;
}
.post__right-button {
  right: 16px;
  opacity: 0.7;
}

/* Components */
/* Story */
.story {
  background-color: transparent;
  border: none;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.story__avatar {
  position: relative;
}
.story__border {
  width: 64px;
  height: 64px;

  fill: none;
  stroke: var(--story-border);
  stroke-width: 1.5;
}
.story--has-story .story__border {
  stroke: url(#--story-gradient);
  stroke-width: 2;
}
.story__picture {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
}
.story__picture::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  border: 1px solid var(--img-border);
  border-radius: 50%;
}

.story__user {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-light);
  text-transform: lowercase;

  max-width: 72px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.story--has-story .story__user {
  color: var(--text-dark);
}

/* Post */
.post {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.post__header {
  background-color: var(--primary);
  border-bottom: 1px solid var(--border);

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}
.post__profile {
  display: flex;
  align-items: center;
  gap: 12px;
}
.post__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.post__avatar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  border: 1px solid var(--img-border);
  border-radius: 50%;
}
.post__user {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  text-decoration: none;
  text-transform: lowercase;
}
.post__user:hover {
  text-decoration: underline;
}
.post__more-options {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.post__content {
  display: flex;
  position: relative;
}
.post__medias {
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;

  width: 100%;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.post__medias::-webkit-scrollbar {
  display: none;
}
.post__media {
  width: 100%;
  flex: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.post__footer {
  background-color: var(--primary);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}
.post__buttons {
  display: flex;
  position: relative;
}
.post__button {
  background-color: transparent;
  border: none;
  cursor: pointer;

  padding: 8px;
}
.post__button--align-right {
  margin-left: auto;
}
.post__indicators {
  display: flex;
  align-items: center;
  gap: 4px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
}
.post__indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--text-light);
}
.post__indicator--active {
  background-color: var(--link);
}

.post__infos {
  display: flex;
  flex-direction: column;
  padding: 0 8px;
  gap: 10px;
}
.post__likes,
.post__description {
  display: flex;
}
.post__likes {
  align-items: center;
  gap: 6px;
}
.post__likes-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.post__likes-avatar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  border: 1px solid var(--img-border);
  border-radius: 50%;
}
.post__likes span,
.post__description span {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark);
}
.post__likes a,
.post__description a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  text-decoration: none;
}
.post__name--underline:hover {
  text-decoration: underline;
}
.post__date-time {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-light);
  text-transform: uppercase;
}

/* Side Menu */
.side-menu {
  max-width: 290px;
  position: fixed;
  left: 50%;
  top: 84px;
  transform: translateX(calc(-50% + 322px));

  display: none;
  flex-direction: column;
}

.side-menu__user-profile {
  display: flex;
  align-items: center;

  margin: 20px 0 22px;
}
.side-menu__user-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;

  margin-right: 12px;
  flex-shrink: 0;

  overflow: hidden;
  position: relative;
}
.side-menu__user-avatar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  border: 1px solid var(--img-border);
  border-radius: 50%;
}
.side-menu__user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  gap: 4px;
}
.side-menu__user-info a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  text-decoration: none;
  text-transform: lowercase;

  max-width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.side-menu__user-info span {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-light);

  max-width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.side-menu__user-button {
  background-color: transparent;
  border: none;
  cursor: pointer;

  font-size: 12px;
  font-weight: 500;
  color: var(--link);

  flex-shrink: 0;
}

.side-menu__suggestions-section {
  display: flex;
  flex-direction: column;
}
.side-menu__suggestions-header {
  display: flex;
  justify-content: space-between;
}
.side-menu__suggestions-header h2 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-light);
}
.side-menu__suggestions-header button {
  background-color: transparent;
  border: none;
  cursor: pointer;

  font-size: 12px;
  font-weight: 500;
  color: var(--text-dark);
}

.side-menu__suggestions-content {
  display: flex;
  flex-direction: column;
  gap: 16px;

  margin: 16px 0 24px;
  padding-left: 4px;
}
.side-menu__suggestion {
  display: flex;
  align-items: center;
}
.side-menu__suggestion-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;

  margin-right: 12px;
  flex-shrink: 0;

  overflow: hidden;
  position: relative;
}
.side-menu__suggestion-avatar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  border: 1px solid var(--img-border);
  border-radius: 50%;
}
.side-menu__suggestion-info {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex: 1;
  gap: 2px;
}
.side-menu__suggestion-info a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  text-decoration: none;
  text-transform: lowercase;

  max-width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.side-menu__suggestion-info a:hover {
  text-decoration: underline;
}
.side-menu__suggestion-info span {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-light);

  max-width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.side-menu__suggestion-button {
  background-color: transparent;
  border: none;
  cursor: pointer;

  font-size: 12px;
  font-weight: 500;
  color: var(--link);

  flex-shrink: 0;
}

.side-menu__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.side-menu__footer-links {
  display: flex;
}
.side-menu__footer-list {
  list-style: none;
}
.side-menu__footer-item {
  display: inline-block;
}
.side-menu__footer-item:not(:last-of-type)::after {
  content: '\00B7';
  margin: 0 0.5px;
}
.side-menu__footer-item,
.side-menu__footer-link,
.side-menu__footer-copyright {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-light);
  text-decoration: none;
}
.side-menu__footer-copyright {
  text-transform: uppercase;
}

/* Profile Button */
.profile-button {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
}
.profile-button__border {
  display: none;

  width: 30px;
  height: 30px;
  border: 1px solid var(--text-dark);
  border-radius: 50%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.profile-button:focus .profile-button__border {
  display: block;
}
.profile-button__picture {
  width: 24px;
  height: 24px;
  border-radius: 50%;

  overflow: hidden;
  position: relative;
}
.profile-button__picture::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  border: 1px solid var(--img-border);
  border-radius: 50%;
}

/* Media Queries */
@media (max-width: 767px) {
  .header__buttons--desktop {
    display: none;
  }

  /* Fix post medias indicators bugs on mobile */
  .post__medias {
    gap: 1px;
  }
}

@media (min-width: 620px) {
  .content-container {
    padding: 30px 0 24px;
  }

  .content {
    gap: 24px;
  }

  .stories {
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  .stories::after {
    content: none;
  }

  .posts {
    gap: 24px;
  }
  .post {
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  .post__footer {
    padding: 4px 8px 12px;
  }
  .post__date-time {
    margin-top: 6px;
  }
}

@media (min-width: 768px) {
  :root {
    --header-height: 54px;
    --nav-height: 0px;
  }

  .header__content {
    padding: 0 20px;
  }

  .header__search {
    display: flex;
  }

  .header__buttons--mobile {
    display: none;
  }

  .navbar {
    display: none;
  }
}

@media (min-width: 1024px) {
  .main-container {
    background-color: var(--secondary);
  }

  .content {
    margin: unset;
  }

  .side-menu {
    display: flex;
  }
}

Create JavaScript File for Instagram Clone

Third, paste the following codes into your script.js file.

script.js

// Elements
const toggleThemeBtn = document.querySelector('.header__theme-button');
const storiesContent = document.querySelector('.stories__content');
const storiesLeftButton = document.querySelector('.stories__left-button');
const storiesRightButton = document.querySelector('.stories__right-button');
const posts = document.querySelectorAll('.post');
const postsContent = document.querySelectorAll('.post__content');

// ===================================
// DARK/LIGHT THEME
// Set initial theme from LocalStorage
document.onload = setInitialTheme(localStorage.getItem('theme'));
function setInitialTheme(themeKey) {
  if (themeKey === 'dark') {
    document.documentElement.classList.add('darkTheme');
  } else {
    document.documentElement.classList.remove('darkTheme');
  }
}

// Toggle theme button
toggleThemeBtn.addEventListener('click', () => {
  // Toggle root class
  document.documentElement.classList.toggle('darkTheme');

  // Saving current theme on LocalStorage
  if (document.documentElement.classList.contains('darkTheme')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
});

// ===================================
// STORIES SCROLL BUTTONS
// Scrolling stories content
storiesLeftButton.addEventListener('click', () => {
  storiesContent.scrollLeft -= 320;
});
storiesRightButton.addEventListener('click', () => {
  storiesContent.scrollLeft += 320;
});

// Checking if screen has minimun size of 1024px
if (window.matchMedia('(min-width: 1024px)').matches) {
  // Observer to hide buttons when necessary
  const storiesObserver = new IntersectionObserver(
    function (entries) {
      entries.forEach((entry) => {
        if (entry.target === document.querySelector('.story:first-child')) {
          storiesLeftButton.style.display = entry.isIntersecting
            ? 'none'
            : 'unset';
        } else if (
          entry.target === document.querySelector('.story:last-child')
        ) {
          storiesRightButton.style.display = entry.isIntersecting
            ? 'none'
            : 'unset';
        }
      });
    },
    { root: storiesContent, threshold: 1 }
  );

  // Calling the observer with the first and last stories
  storiesObserver.observe(document.querySelector('.story:first-child'));
  storiesObserver.observe(document.querySelector('.story:last-child'));
}

// ===================================
// POST MULTIPLE MEDIAS
// Creating scroll buttons and indicators when post has more than one media
posts.forEach((post) => {
  if (post.querySelectorAll('.post__media').length > 1) {
    const leftButtonElement = document.createElement('button');
    leftButtonElement.classList.add('post__left-button');
    leftButtonElement.innerHTML = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path fill="#fff" d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zM142.1 273l135.5 135.5c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L226.9 256l101.6-101.6c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L142.1 239c-9.4 9.4-9.4 24.6 0 34z"></path>
      </svg>
    `;

    const rightButtonElement = document.createElement('button');
    rightButtonElement.classList.add('post__right-button');
    rightButtonElement.innerHTML = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path fill="#fff" d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm113.9 231L234.4 103.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L285.1 256 183.5 357.6c-9.4 9.4-9.4 24.6 0 33.9l17 17c9.4 9.4 24.6 9.4 33.9 0L369.9 273c9.4-9.4 9.4-24.6 0-34z"></path>
      </svg>
    `;

    post.querySelector('.post__content').appendChild(leftButtonElement);
    post.querySelector('.post__content').appendChild(rightButtonElement);

    post.querySelectorAll('.post__media').forEach(function () {
      const postMediaIndicatorElement = document.createElement('div');
      postMediaIndicatorElement.classList.add('post__indicator');

      post
        .querySelector('.post__indicators')
        .appendChild(postMediaIndicatorElement);
    });

    // Observer to change the actual media indicator
    const postMediasContainer = post.querySelector('.post__medias');
    const postMediaIndicators = post.querySelectorAll('.post__indicator');
    const postIndicatorObserver = new IntersectionObserver(
      function (entries) {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            // Removing all the indicators
            postMediaIndicators.forEach((indicator) =>
              indicator.classList.remove('post__indicator--active')
            );
            // Adding the indicator that matches the current post media
            postMediaIndicators[
              Array.from(postMedias).indexOf(entry.target)
            ].classList.add('post__indicator--active');
          }
        });
      },
      { root: postMediasContainer, threshold: 0.5 }
    );

    // Calling the observer for every post media
    const postMedias = post.querySelectorAll('.post__media');
    postMedias.forEach((media) => {
      postIndicatorObserver.observe(media);
    });
  }
});

// Adding buttons features on every post with multiple medias
postsContent.forEach((post) => {
  if (post.querySelectorAll('.post__media').length > 1) {
    const leftButton = post.querySelector('.post__left-button');
    const rightButton = post.querySelector('.post__right-button');
    const postMediasContainer = post.querySelector('.post__medias');

    // Functions for left and right buttons
    leftButton.addEventListener('click', () => {
      postMediasContainer.scrollLeft -= 400;
    });
    rightButton.addEventListener('click', () => {
      postMediasContainer.scrollLeft += 400;
    });

    // Observer to hide button if necessary
    const postButtonObserver = new IntersectionObserver(
      function (entries) {
        entries.forEach((entry) => {
          if (entry.target === post.querySelector('.post__media:first-child')) {
            leftButton.style.display = entry.isIntersecting ? 'none' : 'unset';
          } else if (
            entry.target === post.querySelector('.post__media:last-child')
          ) {
            rightButton.style.display = entry.isIntersecting ? 'none' : 'unset';
          }
        });
      },
      { root: postMediasContainer, threshold: 0.5 }
    );

    if (window.matchMedia('(min-width: 1024px)').matches) {
      postButtonObserver.observe(
        post.querySelector('.post__media:first-child')
      );
      postButtonObserver.observe(post.querySelector('.post__media:last-child'));
    }
  }
});

You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊

Make Instagram clone using HTML CSS and JavaScript

How to Create Instagram clone with JavaScript?

Folder Structure for Instagram Clone

Create HTML Page for Instagram Clone

Create CSS file for Styling

Create JavaScript File for Instagram Clone

Leave a ReplyCancel Reply

Razorpay Payment Gateway Integration in PHP

How to Send Bulk Emails in PHP using PHPMailer with Ajax jQuery

How to Created PHP CRUD using OOPS with MYSQLi in MVC

Create User Registration and Login using PHP OOPs Concepts

Generate PDF File From MySQL Database Using PHP

About WebsCodex

Customer Area

Quick Links

How to Create Instagram clone with JavaScript?

Folder Structure for Instagram Clone

Create HTML Page for Instagram Clone

Create CSS file for Styling

Create JavaScript File for Instagram Clone

RELATED ARTICLES

Leave a ReplyCancel Reply

Currently Trending

About WebsCodex

Customer Area

Quick Links