Clone an Instagram Profile with HTML and CSS (Complete with Source Code!)

Faraz

By Faraz -

Learn how to clone an Instagram profile using HTML and CSS. Follow this comprehensive tutorial with step-by-step instructions and complete source code.

Join us on Telegram
clone an instagram profile with html and css.jpg
Read Alsodesigning a delicious website using html, css, and javascript for restaurant web development.jpgDesigning a Delicious Website: Using HTML, CSS, and JavaScript for Restaurant Web Development

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Preview
  5. Conclusion

Cloning an Instagram profile using HTML and CSS allows you to recreate the visual appearance of an Instagram profile page. While this tutorial won't cover advanced functionalities like backend interactions or posting capabilities, it will guide you through the process of replicating the design elements using front-end technologies.

Whether you're a web developer looking to enhance your HTML and CSS skills or simply interested in understanding how popular websites are designed, this tutorial will provide you with a step-by-step guide to create a visually similar Instagram profile page. By the end of this tutorial, you will have gained valuable hands-on experience in structuring HTML, applying CSS styles, and creating a responsive layout.

Prerequisites:

Before diving into the tutorial, it's important to have a basic understanding of HTML and CSS. Familiarity with CSS Flexbox or CSS Grid will be beneficial for creating the layout. If you're new to these technologies, don't worry! We'll explain the necessary concepts as we progress through the tutorial.

To follow along, make sure you have a text editor of your choice installed on your computer. Popular options include Visual Studio Code, Sublime Text, or Atom. Additionally, you'll need a web browser to view and test your code. Chrome, Firefox, or Safari are recommended for the best experience.

This tutorial is designed for beginners, so don't worry if you're still learning the ropes of web development. Let's get started by setting up the HTML structure of our Instagram profile clone!

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Instagram profile clone.

After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Let's go through it step by step:

The <!DOCTYPE html> declaration is used to specify that the document is an HTML5 document.

The <html> element represents the root of an HTML document.

The <head> section contains meta information about the document, such as the page title, character encoding, and viewport settings.

The <title> element sets the title of the web page to "Instagram Clone."

The <meta charset="UTF-8" /> specifies the character encoding for the document as UTF-8.

The <meta name="viewport" content="width=device-width" /> sets the viewport width to the device width, ensuring proper scaling on different devices.

The <link> elements are used to include external stylesheets into the document.

  1. The first <link> element imports the "Open Sans" font from Google Fonts.
  2. The second <link> element includes the Font Awesome library for icons.
  3. The third <link> element imports the "meyer-reset" CSS file, which provides a CSS reset for consistent styling across different browsers.
  4. The fourth <link> element imports a custom stylesheet named "styles.css".

The <body> section contains the content of the web page.

The <header> element represents the header section of the page.

Inside the header, there is a <div> element with the class "container" that wraps the header content.

The header includes the profile information of a user.

  1. The profile section contains the user's profile picture, username, profile settings, post count, followers count, following count, and bio.
  2. Various HTML elements such as <div>, <h1>, and <button> are used to structure and display the profile information.
  3. The profile picture is displayed using the <img> element with a specified source (URL).

The <main> element represents the main content section of the web page.

Inside the main section, there is another <div> element with the class "container" that wraps the main content.

The main content includes a gallery of images or videos.

  1. Each gallery item is represented by a <div> element with the class "gallery-item" and a specified tabindex.
  2. Inside each gallery item, there is an <img> element displaying an image or video thumbnail.
  3. Additionally, there are elements displaying the number of likes and comments for each gallery item.

After the gallery, there is a <div> element with the class "loader" which presumably represents a loading animation or indicator.

Finally, the closing tags </div> and </body> indicate the end of the container and body sections respectively, and </html> indicates the end of the HTML document.

This is the basic structure of our Instagram profile clone using HTML, and now we can move on to styling it using CSS.

Read Alsoclone an instagram profile with html and css.jpgClone an Instagram Profile with HTML and CSS (Complete with Source Code!)

Step 2 (CSS Code):

Once the basic HTML structure of the Instagram profile clone is in place, the next step is to add styling to the Instagram profile clone using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our Instagram profile clone.

Let's go through the code section by section to understand its purpose.

Base Styles:

  • The :root selector sets the base font size to 10 pixels.
  • The *, *::before, and *::after selectors set the box-sizing property to border-box for all elements, which includes padding and border within the element's total width and height.
  • The body selector sets the overall styling for the webpage's body element, including font-family, background-color, and color. It also sets a minimum height for the body and adds some padding at the bottom.
  • The img selector sets the display property to block for all images, which makes them behave as block-level elements.
  • The .container selector sets the maximum width, margin, and padding for a container element.
  • The .btn selector defines the styles for buttons, including display, font, background, border, color, padding, and cursor. It also adds an outline style when a button is focused.
  • The .visually-hidden selector hides an element visually by positioning it absolutely, setting its width and height to 1 pixel, and clipping it.

Profile Section:

  • The .profile selector sets the padding for a profile section.
  • The .profile::after selector inserts a clearfix to clear any floated elements within the profile section.
  • The .profile-image selector sets the styling for a profile image, including float, width, display, alignment, and margin.
  • The .profile-image img selector sets the border-radius property to create a circular profile image.
  • The .profile-user-settings, .profile-stats, and .profile-bio selectors set the width and margin for different sections within the profile.
  • The .profile-user-name selector defines the styles for the user name within the profile, including display and font properties.
  • The .profile-edit-btn and .profile-settings-btn selectors define the styles for the edit and settings buttons, respectively, including font size, line height, border, padding, and margin.
  • The .profile-stats selector sets the margin for the statistics section within the profile.
  • The .profile-stats li selector defines the styles for individual statistics items, including display, font size, line height, and margin.
  • The .profile-bio selector sets the styles for the biography section, including font size, font weight, line height, and margin.
  • The .profile-real-name, .profile-stat-count, and .profile-edit-btn selectors set the font weight to 600 for specific elements within the profile section.

Gallery Section:

  • The .gallery selector sets the display property to flex and defines a flex-wrap property to create a flexible gallery layout.
  • The .gallery-item selector sets the styling for each item within the gallery, including position, flex properties, margin, color, and cursor. It also includes hover and focus styles for displaying information on the item.
  • The .gallery-item-info selector sets the display property to none initially and defines the styles for the information displayed on hover or focus.
  • The .gallery-item-info li selector sets the styles for individual items within the information section, including display, font size, and font weight.
  • The .gallery-item-likes selector adds a margin to the likes item within the information section.
  • The .gallery-item-type selector sets the position and styles for the type indicator within each gallery item.
  • The .fa-clone and .fa-comment selectors define the styles for specific icons within the gallery item.
  • The .gallery-image selector sets the width and height to 100% and uses object-fit to ensure the image covers the container.

Loader:

  • The .loader selector defines the styles for a loader element, including width, height, border, border-radius, margin, and animation.

Media Query:

  • The @media rule applies specific styles when the screen width is less than or equal to 40rem (640 pixels).
  • Within this media query, the styles for the profile section are adjusted to create a responsive layout for smaller screens. Elements are displayed as flex items, font sizes are modified, and the grid is reconfigured.
  • The @keyframes rule defines a spinner animation that rotates the element 360 degrees.

Supports Grid Layout:

  • The @supports rule checks if the browser supports CSS grid layout.
  • If the browser supports grid, the styles within this rule are applied to enhance the layout and positioning of elements.
  • The profile section and gallery section are modified to utilize CSS grid features.
  • Grid templates, grid gaps, and alignment properties are defined to create the desired grid layout for different screen sizes.

This will give our Instagram profile clone an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

/*

All grid code is placed in a 'supports' rule (feature query) at the bottom of the CSS (Line 310). 
        
The 'supports' rule will only run if your browser supports CSS grid.

Flexbox and floats are used as a fallback so that browsers which don't support grid will still recieve a similar layout.

*/

/* Base Styles */

:root {
  font-size: 10px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", Arial, sans-serif;
  min-height: 100vh;
  background-color: #fafafa;
  color: #262626;
  padding-bottom: 3rem;
}

img {
  display: block;
}

.container {
  max-width: 93.5rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.btn {
  display: inline-block;
  font: inherit;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
}

.btn:focus {
  outline: 0.5rem auto #4d90fe;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* Profile Section */

.profile {
  padding: 5rem 0;
}

.profile::after {
  content: "";
  display: block;
  clear: both;
}

.profile-image {
  float: left;
  width: calc(33.333% - 1rem);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 3rem;
}

.profile-image img {
  border-radius: 50%;
}

.profile-user-settings,
.profile-stats,
.profile-bio {
  float: left;
  width: calc(66.666% - 2rem);
}

.profile-user-settings {
  margin-top: 1.1rem;
}

.profile-user-name {
  display: inline-block;
  font-size: 3.2rem;
  font-weight: 300;
}

.profile-edit-btn {
  font-size: 1.4rem;
  line-height: 1.8;
  border: 0.1rem solid #dbdbdb;
  border-radius: 0.3rem;
  padding: 0 2.4rem;
  margin-left: 2rem;
}

.profile-settings-btn {
  font-size: 2rem;
  margin-left: 1rem;
}

.profile-stats {
  margin-top: 2.3rem;
}

.profile-stats li {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-right: 4rem;
  cursor: pointer;
}

.profile-stats li:last-of-type {
  margin-right: 0;
}

.profile-bio {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 2.3rem;
}

.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
  font-weight: 600;
}

/* Gallery Section */

.gallery {
  display: flex;
  flex-wrap: wrap;
  margin: -1rem -1rem;
  padding-bottom: 3rem;
}

.gallery-item {
  position: relative;
  flex: 1 0 22rem;
  margin: 1rem;
  color: #fff;
  cursor: pointer;
}

.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.gallery-item-info {
  display: none;
}

.gallery-item-info li {
  display: inline-block;
  font-size: 1.7rem;
  font-weight: 600;
}

.gallery-item-likes {
  margin-right: 2.2rem;
}

.gallery-item-type {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2.5rem;
  text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}

.fa-clone,
.fa-comment {
  transform: rotateY(180deg);
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Loader */

.loader {
  width: 5rem;
  height: 5rem;
  border: 0.6rem solid #999;
  border-bottom-color: transparent;
  border-radius: 50%;
  margin: 0 auto;
  animation: loader 500ms linear infinite;
}

/* Media Query */

@media screen and (max-width: 40rem) {
  .profile {
      display: flex;
      flex-wrap: wrap;
      padding: 4rem 0;
  }

  .profile::after {
      display: none;
  }

  .profile-image,
  .profile-user-settings,
  .profile-bio,
  .profile-stats {
      float: none;
      width: auto;
  }

  .profile-image img {
      width: 7.7rem;
  }

  .profile-user-settings {
      flex-basis: calc(100% - 10.7rem);
      display: flex;
      flex-wrap: wrap;
      margin-top: 1rem;
  }

  .profile-user-name {
      font-size: 2.2rem;
  }

  .profile-edit-btn {
      order: 1;
      padding: 0;
      text-align: center;
      margin-top: 1rem;
  }

  .profile-edit-btn {
      margin-left: 0;
  }

  .profile-bio {
      font-size: 1.4rem;
      margin-top: 1.5rem;
  }

  .profile-edit-btn,
  .profile-bio,
  .profile-stats {
      flex-basis: 100%;
  }

  .profile-stats {
      order: 1;
      margin-top: 1.5rem;
  }

  .profile-stats ul {
      display: flex;
      text-align: center;
      padding: 1.2rem 0;
      border-top: 0.1rem solid #dadada;
      border-bottom: 0.1rem solid #dadada;
  }

  .profile-stats li {
      font-size: 1.4rem;
      flex: 1;
      margin: 0;
  }

  .profile-stat-count {
      display: block;
  }
}

/* Spinner Animation */

@keyframes loader {
  to {
      transform: rotate(360deg);
  }
}

/*

The following code will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox & floated styling. 

*/

@supports (display: grid) {
  .profile {
      display: grid;
      grid-template-columns: 1fr 2fr;
      grid-template-rows: repeat(3, auto);
      grid-column-gap: 3rem;
      align-items: center;
  }

  .profile-image {
      grid-row: 1 / -1;
  }

  .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
      grid-gap: 2rem;
  }

  .profile-image,
  .profile-user-settings,
  .profile-stats,
  .profile-bio,
  .gallery-item,
  .gallery {
      width: auto;
      margin: 0;
  }

  @media (max-width: 40rem) {
      .profile {
          grid-template-columns: auto 1fr;
          grid-row-gap: 1.5rem;
      }

      .profile-image {
          grid-row: 1 / 2;
      }

      .profile-user-settings {
          display: grid;
          grid-template-columns: auto 1fr;
          grid-gap: 1rem;
      }

      .profile-edit-btn,
      .profile-stats,
      .profile-bio {
          grid-column: 1 / -1;
      }

      .profile-user-settings,
      .profile-edit-btn,
      .profile-settings-btn,
      .profile-bio,
      .profile-stats {
          margin: 0;
      }
  }
}

Final Output:

clone an instagram profile with html and css.gif
Read AlsoCreate Event Keycodes Using HTML, CSS, and JavaScript.jpgCreate Event Keycodes Using HTML, CSS, and JavaScript

Conclusion:

Congratulations! You have successfully completed the tutorial on cloning an Instagram profile using HTML and CSS. Throughout this tutorial, you've learned how to structure the HTML, apply CSS styles, and create a responsive layout to replicate the visual design of an Instagram profile page.

By following the step-by-step instructions and implementing the provided code snippets, you have gained valuable hands-on experience in front-end web development. You now have a solid understanding of how to use HTML and CSS to recreate the elements of a popular website like Instagram.

Remember that this tutorial focused on the visual aspects of an Instagram profile and did not cover advanced functionalities or backend interactions. However, with the foundation you've built, you can further enhance and customize the clone to add more features and interactivity using JavaScript and backend technologies.

Now that you have a good grasp of HTML and CSS, continue practicing and exploring new techniques to expand your skills. Experiment with different layouts, styles, and design elements to create unique and visually appealing web pages.

Thank you for joining us on this tutorial journey. We hope you found it informative and engaging. Keep building, keep learning, and have fun with your web development projects!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: clone instagram profile, clone, html and css, instagram profile design, web development tutorial, front-end development, source code, web design, how to clone an instagram profile using html and css, creating an instagram profile replica using html and css, learn html and css by cloning an instagram profile
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post