Site icon FSIBLOG

How To Make Netflix Website Clone Using HTML And CSS

Ammar Habib (HTML, CSS)
How To Make Netflix Website Clone Using HTML And CSS

I’ll take you on a journey through my fun little experiment, creating a Netflix Clone using just HTML and CSS. This project was not only a great way to strengthen my layout and design skills but also an opportunity to understand the essence of a modern, clean UI.

Build a Netflix Clone?

Netflix has one of the most recognizable designs on the web. The sleek layout, responsive grid, and minimalist color scheme make it an ideal target for a design exercise. Here’s what I wanted to achieve:

  1. UI Practice: Replicating Netflix’s interface is a great way to learn modern design techniques.
  2. CSS Layout Exploration: Mastering CSS properties like Flexbox, Grid, and responsive design.
  3. Just for Fun: Because who doesn’t enjoy saying, “I built Netflix!” even if it’s just a clone .

Project Goals

  1. Recreate Netflix’s homepage layout.
  2. Add a responsive design that works well on mobile, tablet, and desktop.
  3. Stick to pure HTML and CSS no JavaScript, no frameworks.
  4. Incorporate some basic hover effects for interactivity.

Key Features of the Netflix Clone

Setting Up the HTML

The HTML structure is simple. Here’s how I broke it down:

Example Code:

code<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netflix Clone</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Navigation -->
  <header class="nav-bar">
    <div class="logo">Netflix</div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">TV Shows</a></li>
        <li><a href="#">Movies</a></li>
        <li><a href="#">New & Popular</a></li>
        <li><a href="#">My List</a></li>
      </ul>
    </nav>
    <button class="btn-login">Sign In</button>
  </header>

  <!-- Hero Section -->
  <section class="hero">
    <div class="hero-content">
      <h1>Unlimited Movies, TV Shows, and More.</h1>
      <p>Watch anywhere. Cancel anytime.</p>
      <div class="hero-buttons">
        <button class="btn-primary">Get Started</button>
        <button class="btn-secondary">Learn More</button>
      </div>
    </div>
  </section>

  <!-- Movie Rows -->
  <section class="movie-row">
    <h2>Trending Now</h2>
    <div class="row">
      <img src="movie1.jpg" alt="Movie 1">
      <img src="movie2.jpg" alt="Movie 2">
      <img src="movie3.jpg" alt="Movie 3">
      <img src="movie4.jpg" alt="Movie 4">
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <p>Questions? Call 1-800-NETFLIX</p>
    <div class="footer-links">
      <a href="#">FAQ</a>
      <a href="#">Help Center</a>
      <a href="#">Terms of Use</a>
      <a href="#">Privacy</a>
    </div>
  </footer>
</body>
</html>

Adding Style with CSS

Netflix’s design revolves around dark themes and bold text. Here’s how I styled it:

Example CSS:

code/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #000;
  color: #fff;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Navigation */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #141414;
}

.nav-bar .logo {
  font-size: 24px;
  font-weight: bold;
  color: #e50914;
}

.nav-bar ul {
  display: flex;
  gap: 15px;
  list-style: none;
}

.nav-bar a {
  color: #fff;
  text-decoration: none;
}

/* Hero Section */
.hero {
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  padding: 100px 20px;
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background-color: #e50914;
  color: #fff;
}

.btn-secondary {
  background-color: #333;
  color: #fff;
}

/* Movie Rows */
.movie-row {
  padding: 20px;
}

.movie-row h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.row img {
  width: 100%;
  border-radius: 5px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background-color: #141414;
}

Lessons Learned

  1. CSS Grid is Powerful: I discovered how easy it is to create complex layouts with Grid.
  2. Importance of Responsiveness: Ensuring the site looked good on all devices was both challenging and rewarding.
  3. Minimalism Works: Netflix’s design proves you don’t need clutter to create an impact.

Conclusion

Building a Netflix Clone with just HTML and CSS was a fantastic learning experience. It taught me about layout techniques, responsive design, and the beauty of minimalism. If you’re looking to sharpen your front-end skills, I highly recommend taking on a similar project.

Exit mobile version