how write netflix clone coding

You can build a Netflix-style website using HTML, CSS, and JavaScript. Start with the homepage, movie cards, search, and a video player. Add accounts and a backend later.

Here’s a working beginner version.

1. Create a file named index.html

Paste this code into it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>StreamBox</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: #141414;
      color: white;
      font-family: Arial, sans-serif;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding: 20px 5%;
      background: #111;
    }

    .logo {
      color: #e50914;
      font-size: 28px;
      font-weight: bold;
    }

    input {
      width: min(220px, 50%);
      padding: 10px;
      background: #222;
      border: 1px solid #777;
      border-radius: 5px;
      color: white;
    }

    .hero {
      min-height: 400px;
      display: flex;
      align-items: center;
      padding: 60px 5%;
      background:
        linear-gradient(90deg, #000e, #0003),
        url("https://picsum.photos/seed/cinema/1400/700")
        center / cover;
    }

    .hero-content {
      max-width: 500px;
    }

    h1 {
      margin: 0 0 16px;
      font-size: clamp(36px, 7vw, 64px);
    }

    p {
      line-height: 1.6;
      color: #ddd;
    }

    button {
      cursor: pointer;
      font: inherit;
    }

    .play-button {
      padding: 12px 24px;
      border: none;
      border-radius: 5px;
      background: white;
      color: black;
      font-weight: bold;
    }

    main {
      padding: 20px 5% 50px;
    }

    .movies {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 20px;
    }

    .movie {
      padding: 0;
      overflow: hidden;
      text-align: left;
      color: white;
      background: #222;
      border: none;
      border-radius: 8px;
      transition: transform 0.2s;
    }

    .movie:hover {
      transform: translateY(-5px);
    }

    .movie:focus-visible,
    .play-button:focus-visible {
      outline: 3px solid #e50914;
      outline-offset: 4px;
    }

    .movie img {
      display: block;
      width: 100%;
      aspect-ratio: 2 / 3;
      object-fit: cover;
    }

    .movie span {
      display: block;
      padding: 12px;
      font-weight: bold;
    }

    dialog {
      width: min(900px, 95vw);
      padding: 20px;
      background: #181818;
      color: white;
      border: 1px solid #444;
      border-radius: 10px;
    }

    dialog::backdrop {
      background: #000c;
    }

    .player-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .close-button {
      background: transparent;
      color: white;
      border: 1px solid #777;
      border-radius: 4px;
      padding: 8px 12px;
    }

    video {
      display: block;
      width: 100%;
      margin-top: 16px;
    }
  </style>
</head>

<body>
  <header>
    <div class="logo">STREAMBOX</div>

    <input
      id="search"
      type="search"
      placeholder="Search movies..."
      aria-label="Search movies"
    >
  </header>

  <section class="hero">
    <div class="hero-content">
      <h1>Your next favorite.</h1>
      <p>
        Explore adventures, mysteries, and unforgettable stories.
        Choose a title below to try the demo player.
      </p>
      <button class="play-button" id="hero-play">
        ▶ Play demo
      </button>
    </div>
  </section>

  <main>
    <h2>Popular titles</h2>
    <div class="movies" id="movie-list"></div>
    <p id="empty-message" hidden>No movies found.</p>
  </main>

  <dialog id="player-dialog" aria-labelledby="player-title">
    <div class="player-header">
      <h2 id="player-title">Demo player</h2>
      <button class="close-button" id="close-player">Close</button>
    </div>

    <p>Demo only: all titles play the same sample video.</p>

    <video id="video" controls playsinline preload="none">
      <source
        src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        type="video/mp4"
      >
      Your browser does not support HTML video.
    </video>
  </dialog>

  <script>
    // Fictional titles with placeholder poster images.
    const movies = [
      { id: 1, title: "Midnight City" },
      { id: 2, title: "Beyond the Stars" },
      { id: 3, title: "The Last Journey" },
      { id: 4, title: "Hidden Truth" },
      { id: 5, title: "Ocean Adventure" },
      { id: 6, title: "Future World" }
    ];

    const movieList = document.getElementById("movie-list");
    const search = document.getElementById("search");
    const emptyMessage = document.getElementById("empty-message");
    const dialog = document.getElementById("player-dialog");
    const video = document.getElementById("video");

    function openPlayer(title) {
      document.getElementById("player-title").textContent = title;
      dialog.showModal();

      // If autoplay is blocked, the video controls remain available.
      video.play().catch(() => {});
    }

    function renderMovies(query = "") {
      const filtered = movies.filter(movie =>
        movie.title.toLowerCase().includes(query.trim().toLowerCase())
      );

      movieList.replaceChildren();
      emptyMessage.hidden = filtered.length > 0;

      filtered.forEach(movie => {
        const card = document.createElement("button");
        card.className = "movie";
        card.setAttribute("aria-label", `Play ${movie.title}`);

        const poster = document.createElement("img");
        poster.src = `https://picsum.photos/seed/movie${movie.id}/300/450`;
        poster.alt = "";
        poster.loading = "lazy";

        const title = document.createElement("span");
        title.textContent = movie.title;

        card.append(poster, title);
        card.addEventListener("click", () => openPlayer(movie.title));
        movieList.append(card);
      });
    }

    search.addEventListener("input", event => {
      renderMovies(event.target.value);
    });

    document.getElementById("hero-play").addEventListener("click", () => {
      openPlayer("Big Buck Bunny — sample video");
    });

    document.getElementById("close-player").addEventListener("click", () => {
      dialog.close();
    });

    dialog.addEventListener("close", () => {
      video.pause();
      video.currentTime = 0;
    });

    renderMovies();
  </script>
</body>
</html>

2. Run it

Open index.html in a modern browser. An internet connection is needed for the placeholder images and sample video.

Included: responsive layout, movie cards, search, and a video-player popup.

3. Build a full app later

This is a frontend demo, not a complete streaming service. Use your own branding and videos you have permission to distribute.