Clone the Instagram UI with HTML and CSS (No JS)

Instagram has one of the most recognizable and polished UIs on the web: a clean feed, familiar icons, and a mobile-first layout that feels natural on any screen. Rebuilding this kind of interface is a great way to sharpen your HTML and CSS skills.

In this tutorial, you’ll learn how to clone a simplified Instagram-style UI using only HTML and CSS — no JavaScript at all. We’ll focus entirely on layout, typography, spacing, and responsive design to create a static but realistic interface.

By the end, you will have:

• A mobile-first Instagram-style layout with:

  • A top navigation bar (logo + action icons)

  • A stories bar with circular story avatars

  • A feed section with posts (user info, image, actions, likes, caption, comments)

  • A bottom navigation bar similar to the Instagram app

• A responsive design that scales nicely from mobile to desktop using Flexbox and CSS Grid.

• Clean, reusable CSS utility classes for spacing, alignment, and colors.

What we won’t cover

To keep this tutorial focused on HTML and CSS:

• No JavaScript (no real interactions like liking posts or switching tabs).

• No backend, no database, and no real authentication.

• No real image uploads or API calls.

We’ll use placeholder images, icons, and static text to simulate a real feed. The goal is to master structure and styling, not functionality.

Who is this tutorial for?

This tutorial is perfect if you:

• Know basic HTML and CSS and want to build a realistic UI.

• Want to practice using Flexbox and responsive design with a real-world layout.

• Are looking for a project to add to your front-end portfolio.

What you’ll need

Before you start, you should be comfortable with:

• Basic HTML structure: div, header, nav, section, footer, etc.

• Basic CSS: selectors, classes, fonts, colors, margins, and padding.

• Flexbox basics: display: flex, justify-content, align-items.

A simple code editor (VS Code, Sublime, etc.) and a modern browser (Chrome, Firefox, Edge, Safari) are enough.

Project Overview — What We’re Building (Mobile-First UI)

Before writing any code, let’s take a clear look at the layout we’re going to build. Instagram is designed mobile-first, and that’s exactly how we’ll approach this tutorial: we’ll begin with a compact mobile layout, then scale it up for larger screens.

Below is a breakdown of the key UI sections we’ll recreate—purely with HTML and CSS, no JavaScript.

📱 1. Top Navigation Bar

A minimal header similar to Instagram’s mobile app:

• Left: Instagram-style logo (text or an image placeholder)

• Right: action icons such as:

  • Add Post

  • Like

  • Messages

We’ll include icons using a free CDN (e.g., Remix Icon or Font Awesome).

📚 2. Stories Bar

A horizontally scrollable row of circular profile bubbles:

• User’s own story with a special border

• Friend stories with gradient borders

• Small username labels

• No scrolling behavior required — only layout structure and visuals

We’ll simulate stories with placeholder images.

🖼 3. Feed Posts (The Main Content)

Each post in the feed will include:

Post Header

• Profile picture

• Username

• Three-dots menu icon

Post Image

• A static image (placeholder or any sample image)

Action Row

• Like

• Comment

• Share

• Save (aligned to the right)

Post Details

• Likes count

• Caption (username + text)

• View comments link

• Timestamp

We’ll style these to mimic Instagram’s spacing, fonts, and alignment.

🔽 4. Bottom Navigation Bar

A fixed bottom bar similar to Instagram’s mobile app:

• Home

• Search

• Reels

• Shop

• Profile

This will remain visible as users “scroll” the page (although our page is static).

🧱 5. Utility & Global Styles

We’ll also create:

• A simple CSS reset

• A color system

• Reusable utility classes (margin, padding, rounded images, flex helpers)

• A consistent font (Instagram uses Roboto and Proxima Nova, we’ll use Inter or Roboto)

This helps keep the code clean and maintainable.

🖥 6. Responsiveness

Although Instagram is primarily mobile, we’ll ensure:

• Feed width scales to a centered column on tablets & desktops

• Stories bar looks clean on wider screens

• Bottom nav becomes optional on desktop (we’ll hide it for larger screens)

The core layout will rely on Flexbox, CSS Grid, and media queries.

🎯 Final Result

By the end of this tutorial, you will have:

• A pixel-perfect Instagram-like UI clone, fully static

• Clean, semantic HTML

• Modern CSS with mobile-first responsive design

• A project you can proudly include in your portfolio

Setting Up the Project (Files, Fonts, Colors, CSS Reset)

Before we start building the Instagram UI clone, let’s prepare our project structure and core styling foundation. Keeping things organized from the start will make the rest of the tutorial much easier.

📁 1. Project Structure

Create a new folder for the project:

instagram-ui-clone/
│── index.html
│── styles.css
│── /assets
│     ├── profile1.jpg
│     ├── profile2.jpg
│     ├── post1.jpg
│     └── post2.jpg

 

• index.html → Main HTML file

• styles.css → All your CSS styles

• /assets → Images for stories and posts (you can use placeholders from Unsplash or Lorem Picsum)

🔤 2. Adding Google Fonts

Instagram uses clean, modern fonts. We’ll use Inter, which looks great and is free.

Add this inside <head> of index.html:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

🎨 3. Define Colors and Theme Variables

In styles.css, start by creating CSS variables for consistent styling:

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --text-muted: #737373;
  --border-color: #dbdbdb;
  --story-gradient-start: #f99b4a;
  --story-gradient-end: #d62976;
  --nav-height: 55px;
  --bottom-nav-height: 55px;
  font-family: 'Inter', sans-serif;
}

These values mimic Instagram’s color scheme.

🧹 4. Minimal CSS Reset

Apply a reset to ensure consistency across browsers:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
}

img {
  max-width: 100%;
  display: block;
}

📏 5. Global Layout Settings

Add basic utility classes to save time later:

.flex {
  display: flex;
  align-items: center;
}

.space-between {
  justify-content: space-between;
}

.rounded-full {
  border-radius: 50%;
}

.text-muted {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.border-bottom {
  border-bottom: 1px solid var(--border-color);
}

You’ll use these repeatedly for nav bars, story bubbles, feed headers, etc.

📄 6. Basic HTML Structure

Inside index.html, start with a simple shell:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Instagram UI Clone</title>
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
    rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Top Navigation -->
    <header class="top-nav border-bottom">
      <!-- Content goes here -->
    </header>

    <!-- Stories -->
    <section class="stories">
      <!-- Story bubbles -->
    </section>

    <!-- Feed -->
    <main class="feed">
      <!-- Posts go here -->
    </main>

    <!-- Bottom Navigation -->
    <nav class="bottom-nav">
      <!-- nav icons -->
    </nav>
  </body>
</html>

This sets up the skeleton for the UI we will flesh out in the next sections.

Building the Top Navigation Bar (Logo + Icons)

The top navigation bar is one of Instagram’s most recognizable UI elements. It’s clean, minimal, and always visible. In this section, we’ll build a simple, mobile-first version using only HTML and CSS.

📌 What We’re Building

The top nav will look like this:

┌───────────────────────────────────────┐
│ Instagram          +   ♥   ✉          │
└───────────────────────────────────────┘

 

Left side → Logo (we’ll use text for simplicity)
Right side → Icons (Add, Like, Messages)

We will use Remix Icon, a free icon set that loads via CDN.

1. Add Remix Icon CDN

Place this inside your <head>:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">

2. HTML Structure for the Top Nav

Inside your <header class="top-nav">:

<header class="top-nav border-bottom flex space-between">
  <div class="logo">Instagram</div>

  <div class="nav-icons flex">
    <i class="ri-add-box-line"></i>
    <i class="ri-heart-line"></i>
    <i class="ri-messenger-line"></i>
  </div>
</header>

3. Style the Navigation Bar

Add this to styles.css to match Instagram’s spacing and layout:

.top-nav {
  height: var(--nav-height);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-color);
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo {
  font-size: 1.4rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

.nav-icons i {
  font-size: 1.5rem;
  margin-left: 16px;
  cursor: pointer;
}

4. Make Icons Interactive (Hover Effect)

Even though we aren't using JS, CSS hover states add polish:

.nav-icons i:hover {
  opacity: 0.6;
}

5. Optional: Instagram Script Logo (Alternative)

If you want a logo closer to the real Instagram script:

<img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Instagram_logo.svg" 
     alt="Instagram" height="28">

Replace the <div class="logo">Instagram</div>.

✔ Top Navigation Completed

You now have:

• A responsive, sticky navigation bar

• Clean layout using flexbox

• Icons matching Instagram’s style

Creating the Stories Bar (Story Bubbles Row)

The Stories bar is one of the signature UI elements of Instagram. It’s a horizontal list of circular profile images with gradient borders and small usernames underneath. Even without JavaScript, we can replicate the look and feel perfectly using HTML + CSS.

📌 What We’re Building

A horizontal bar that looks like this:

[ ○ my story ] [ ○ friend1 ] [ ○ friend2 ] [ ○ friend3 ] ...

Each bubble:

• Circular avatar

• Gradient ring (except your own story, which often shows a different border)

• Username text centered below

Let’s build it step by step.

1. HTML Structure for Stories

Inside <section class="stories">, add:

<section class="stories">
  <div class="stories-wrapper">

    <div class="story">
      <div class="story-image my-story">
        <img src="assets/profile1.jpg" alt="Profile">
      </div>
      <p class="story-username">Your Story</p>
    </div>

    <div class="story">
      <div class="story-image">
        <img src="assets/profile2.jpg" alt="Profile">
      </div>
      <p class="story-username">user_two</p>
    </div>

    <div class="story">
      <div class="story-image">
        <img src="assets/profile3.jpg" alt="Profile">
      </div>
      <p class="story-username">alex</p>
    </div>

    <div class="story">
      <div class="story-image">
        <img src="assets/profile4.jpg" alt="Profile">
      </div>
      <p class="story-username">sandra</p>
    </div>

  </div>
</section>

You can add more as needed.

2. Basic Layout Styles

Add these styles:

.stories {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  white-space: nowrap;
}

.stories-wrapper {
  display: flex;
  padding-left: 12px;
}

.story {
  margin-right: 16px;
  text-align: center;
  width: 70px;
  flex-shrink: 0;
}

This makes the stories scroll horizontally on mobile (like the real Instagram app).

3. Story Image Styles

.story-image {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(
    45deg,
    var(--story-gradient-start),
    var(--story-gradient-end)
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid white;
  object-fit: cover;
}

This creates the signature Instagram gradient ring.

4. Special Style for "Your Story"

Your own story usually has no gradient ring. Instead, it uses a simple gray border:

.my-story {
  background: none;
  border: 1px solid var(--border-color);
}

5. Username Text Style

.story-username {
  margin-top: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

This ensures long usernames don’t break the layout.

6. Optional: Hide Scrollbar on Mobile Devices

.stories::-webkit-scrollbar {
  display: none;
}

This gives a cleaner Instagram-like look.

✔ Stories Section Completed

You now have:

• A horizontally scrollable stories bar

• Gradient story rings

• Clean and readable usernames

• Mobile-first responsive design

Building the Feed Card (Header, Image, Actions, Likes, Caption, Comments)

The feed card is the heart of the Instagram UI. Each post follows the same structure:

1. Post Header — Profile + Username + Menu icon

2. Post Image — Main content

3. Action Row — Like, Comment, Share, Save

4. Likes Count

5. Caption

6. Comments Preview

7. Timestamp

We’ll build this step-by-step using HTML and CSS.

1. HTML Structure for a Feed Post

Add inside <main class="feed">:

<div class="post">

  <!-- Post Header -->
  <div class="post-header flex space-between">
    <div class="flex">
      <img src="assets/profile2.jpg" class="post-profile" alt="profile">
      <span class="post-username">user_two</span>
    </div>
    <i class="ri-more-fill"></i>
  </div>

  <!-- Post Image -->
  <div class="post-image">
    <img src="assets/post1.jpg" alt="Post Image">
  </div>

  <!-- Action Buttons -->
  <div class="post-actions flex space-between">
    <div class="left-actions flex">
      <i class="ri-heart-line"></i>
      <i class="ri-chat-3-line"></i>
      <i class="ri-send-plane-line"></i>
    </div>
    <i class="ri-bookmark-line"></i>
  </div>

  <!-- Likes -->
  <div class="post-likes">
    Liked by <strong>alex</strong> and <strong>231 others</strong>
  </div>

  <!-- Caption -->
  <div class="post-caption">
    <span class="post-username">user_two</span>
    Loving this view today! 🌄✨
  </div>

  <!-- Comments -->
  <div class="post-comments">
    <span class="text-muted">View all 15 comments</span>
  </div>

  <!-- Timestamp -->
  <div class="post-time text-muted">
    2 hours ago
  </div>

</div>

You can duplicate this post block later to add more posts.

2. Post Container Styles

Add to styles.css:

.post {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

3. Post Header Styles

.post-header {
  padding: 10px 12px;
}

.post-profile {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}

.post-username {
  font-weight: 600;
  font-size: 0.95rem;
}

.post-header i {
  font-size: 1.3rem;
}

4. Post Image Styling

.post-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

If you want fixed height like Instagram's square posts:

.post-image {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

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

5. Action Row Styles

.post-actions {
  padding: 10px 12px;
}

.post-actions i {
  font-size: 1.6rem;
  margin-right: 14px;
  cursor: pointer;
}

.post-actions i:hover {
  opacity: 0.6;
}

.left-actions i:last-child {
  margin-right: 0;
}

6. Likes Section

.post-likes {
  padding: 0 12px;
  font-weight: 500;
  margin-bottom: 6px;
}

7. Caption Section

.post-caption {
  padding: 0 12px;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.post-caption .post-username {
  margin-right: 6px;
}

8. Comments Preview

.post-comments {
  padding: 0 12px;
  margin-bottom: 6px;
}

.post-comments span {
  font-size: 0.85rem;
}

9. Timestamp Style

.post-time {
  padding: 0 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

✔ Feed Card Completed

You now have:

• A fully structured feed card

• Clean, Instagram-like spacing

• Responsive design with no JS needed

At this point, your UI already looks very close to the Instagram app.

Adding the Bottom Navigation Bar (Mobile-Style Tab Bar)

Instagram’s bottom navigation bar is iconic in the mobile app. It contains five tabs:

1. Home

2. Search

3. Reels

4. Shop

5. Profile

We can recreate this easily using HTML + CSS + Remix Icons.

This navigation bar will be:

• Fixed at the bottom

• Mobile-first (visible on small screens)

• Hidden on larger screens (optional, like Instagram desktop)

Let’s build it.

1. HTML Structure for Bottom Navigation

Add inside your <nav class="bottom-nav">:

<nav class="bottom-nav">
  <i class="ri-home-5-line"></i>
  <i class="ri-search-line"></i>
  <i class="ri-video-line"></i>
  <i class="ri-shopping-bag-line"></i>
  
  <img src="assets/profile1.jpg" class="bottom-profile" alt="Profile" />
</nav>

2. Base Styles

Add to styles.css:

.bottom-nav {
  height: var(--bottom-nav-height);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--bg-color);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 20;
}

This makes the nav always visible at the bottom of the page.

3. Icon Styling

.bottom-nav i {
  font-size: 1.65rem;
  cursor: pointer;
}

.bottom-nav i:hover {
  opacity: 0.6;
}

4. Profile Icon Style

.bottom-profile {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}

5. Add Spacing for Bottom Nav (Important!)

To prevent the nav from covering content on small screens:

body {
  padding-bottom: var(--bottom-nav-height);
}

This ensures the last feed post isn’t hidden behind the navigation bar.

6. Hide Bottom Nav on Larger Screens (Optional)

Instagram hides the bottom nav on desktop, so let’s replicate that:

@media (min-width: 768px) {
  .bottom-nav {
    display: none;
  }
}

✔ Bottom Navigation Completed

You now have:

• A functional, mobile-style bottom navigation

• Icons matching Instagram’s look

• Sticky behavior at the bottom of the viewport

• Automatic hiding on larger screens

Your UI is nearly complete!

Making the Layout Responsive (Mobile → Tablet → Desktop)

Instagram is designed mobile-first, but the layout gracefully expands on tablets and desktops. In this section, we’ll add responsive CSS to ensure your UI clone adapts to different screen sizes.

By the end, your page will:

• Stay full-width on phones

• Center content in a narrower column on tablets & desktops

• Keep stories looking clean on large screens

• Hide mobile-only elements (like the bottom nav) when appropriate

Let’s build responsive breakpoints using simple media queries.

📌 1. Wrap Feed Content with a Responsive Container

Open your index.html and adjust the feed section like this:

<main class="feed container">
  <!-- posts -->
</main>

Do the same for the stories section:

<section class="stories container">

This will allow us to center and limit content width on larger screens.

📌 2. Create a .container Class (Mobile-First)

Add to styles.css:

.container {
  max-width: 600px;
  margin: 0 auto;
}

Instagram’s content column is roughly 600px on desktop — this matches the real UI.

📌 3. Fix the Navigation Bars for Desktop

Top Navigation:

Centered content:

.top-nav {
  max-width: 600px;
  margin: 0 auto;
}

Wrap it in a parent if needed later, but for now this keeps UI aligned.

📌 4. Stories Layout on Larger Screens

We want the stories bar centered and not stretched too wide.

Add:

@media (min-width: 768px) {
  .stories-wrapper {
    justify-content: center;
  }
}

📌 5. Feed Post Styling on Large Screens

Make posts look tighter and cleaner:

@media (min-width: 768px) {
  .post-image {
    height: 550px;
  }

  .post {
    margin-bottom: 24px;
  }
}

📌 6. Desktop-Specific Improvements

At 1024px and above, Instagram adds more whitespace. We'll replicate that:

@media (min-width: 1024px) {
  body {
    background: #fafafa;
  }

  .container {
    max-width: 600px;
    margin-top: 20px;
  }

  .top-nav {
    border-bottom: 1px solid var(--border-color);
    background: white;
  }
}

This gives the UI a proper desktop look.

📌 7. Optional: Add a Right Sidebar (Desktop Only)

Instagram desktop shows a sidebar with the logged-in user + suggestions.

You can prepare a 2-column layout:

@media (min-width: 1024px) {
  .layout {
    display: flex;
    justify-content: center;
  }

  .feed {
    width: 60%;
  }

  .sidebar {
    width: 25%;
    margin-left: 40px;
  }
}

You can add this later as a bonus section.

✔ Responsive Layout Complete

Your UI now:

• Matches Instagram’s mobile-first flow

• Centers feed content on tablet/desktop

• Scales images elegantly

• Hides the bottom navigation on larger screens

• Feels like a real Instagram clone across devices

At this point, your layout is nearly production-grade.

Polishing the UI (Spacing, Hover States, Dark-ish Theme, Reusable Classes)

Your Instagram UI clone is fully functional and responsive — now it’s time to polish it so it feels clean, smooth, and professional. This step makes a huge difference in how “real” your clone looks.

In this section, we’ll:

• Improve spacing and alignment

• Add hover states for better interactivity

• Introduce a subtle dark-ish theme option

• Create reusable utility classes

• Polish typography and colors

Let’s turn a good UI into a great one.

📌 1. Improve Global Spacing

Consistent spacing creates a cleaner interface. Add these spacing utilities to styles.css:

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }

These prevent repetitive CSS and keep markup clean.

📌 2. Soft Hover States for Interactive Elements

Instagram has a very subtle interaction feel. Let’s replicate it:

Icons Hover

i:hover,
.bottom-profile:hover,
.post-profile:hover {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

Post Image Hover

.post-image img:hover {
  filter: brightness(0.95);
  transition: filter 0.3s ease;
}

Username Hover

.post-username:hover,
.story-username:hover {
  opacity: 0.8;
  cursor: pointer;
}

This adds life without adding JavaScript.

📌 3. Typography Polishing

Improve readability and consistency:

body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #222;
}

.post-caption,
.post-comments,
.post-time {
  line-height: 1.4;
}

.story-username {
  font-weight: 400;
}

📌 4. Dark-ish Theme Option (Toggle-Free)

We won’t use JS, but we can provide a class-based theme:

Add theme variables:

<body class="dark-theme">

Everything will automatically shift colors because our CSS uses variables.

📌 5. Card Polish: Rounded Corners & Subtle Shadows

Instagram doesn’t use heavy shadows, but subtle depth looks good in clones.

.post-image img {
  border-radius: 4px;
}

.post {
  padding-bottom: 20px;
}

@media (min-width: 768px) {
  .post {
    background: #fff;
    border-radius: 6px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
  }

  body.dark-theme .post {
    background: #121212;
    border-color: #222;
  }
}

📌 6. Reusable Flex Utilities (Cleaner HTML)

Add:

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

Use these throughout the layout to avoid repetitive CSS.

📌 7. Reusable Text Utilities

.bold { font-weight: 600; }
.small { font-size: 0.8rem; }
.muted { color: var(--text-muted); }
.upper { text-transform: uppercase; }

Examples:

<div class="post-time muted small upper">2 hours ago</div>

Clean and easy to read.

📌 8. Border Consistency Cleanup

Ensure all borders use your theme variable:

.border-bottom,
.post,
.stories {
  border-color: var(--border-color);
}

This ensures dark/light mode is fully consistent.

✔ UI Polish Complete

Your Instagram UI clone now feels:

• Smooth

• Professional

• Interactive

• Balanced in spacing and layout

• Ready for real-world deployment or portfolio use

At this point, the UI should look very close to Instagram’s visual identity.

Conclusion

Congratulations — you’ve successfully built a clean, responsive Instagram UI clone using only HTML and CSS, with absolutely no JavaScript. This project demonstrates how far you can go with modern CSS techniques like Flexbox, responsive layouts, gradients, and utility classes.

Throughout this tutorial, you learned how to:

✔ Rebuild core Instagram UI components

• Top navigation bar

• Stories bar with gradient rings

• Feed cards with headers, images, actions, likes, captions, and comments

• Bottom tab navigation (mobile style)

✔ Structure a mobile-first layout

Instagram’s design philosophy starts on mobile — and so did ours. You now have a solid understanding of how to structure a responsive UI that naturally scales to tablet and desktop.

✔ Apply modern CSS practices

• Reusable utility classes

• CSS variables for theme control

• Hover effects for micro-interactions

• Spacing systems for consistent layout

• Responsive containers for centered desktop views

✔ Add polish and optional dark mode

Small improvements—rounded corners, soft transitions, muted text colors—go a long way in achieving a professional look. The optional dark theme also shows how powerful CSS variables can be.

🎉 What You Can Do Next

If you want to take your clone further, here are great extensions:

🔹 Add a Right Sidebar (Desktop Version)

Include suggestions, user profile, and follow buttons.

🔹 Add JavaScript Interactions

• Like button animation

• Show/hide comments

• Dark mode toggle

• Story click events

🔹 Convert to a Framework Version

Rebuild this UI using:

• React

• Vue

• Svelte

• Tailwind CSS for utility-first styling

🔹 Turn it into a real mini social app

If you’re comfortable with backend development, you can integrate:

• User login

• Image uploads

• Firestore or Supabase for storage

• Real-time likes and comments

⭐ Final Thoughts

This project is more than just a clone — it’s a complete exercise in layout, spacing, typography, and responsive design, which are the foundation of all modern UI development.

With this skillset, you’re now prepared to build clean, complex interfaces that work beautifully across all devices.

You can get the full source code on our GitHub.

That's just the basics. If you need more deep learning about CSS, SASS, SCSS, TailwindCSS, you can take the following cheap course:

• CSS - The Complete Guide 2025 (incl. Flexbox, Grid & Sass)
• Advanced CSS and Sass: Flexbox, Grid, Animations and More!
• Creative Advanced CSS & JavaScript Animations - 150 Projects
• CSS Layouts Masterclass: Build Responsive-Adaptive Websites
• The Complete Sass & SCSS Course: From Beginner to Advanced
• SASS - The Complete SASS Course (CSS Preprocessor)
• The Modern Flexbox, Grid, Sass & Animations Developer Course
• Tailwind CSS From Scratch | Learn By Building Projects
• Tailwind CSS v4 - Beginner to Pro
• Tailwind CSS – The Practical Bootcamp in 2025

Thanks!