- 📌 Overview
- ✨ Features
- 🖼️ Preview
- 🛠️ Tech Stack
- 🚀 Getting Started
- 📁 Project Structure
- 🤝 Contributing to GSSoC 2025
- 📋 Contribution Guidelines
- 🌟 How to Contribute
- 📊 Project Statistics
- 👥 Contributors
- 🏆 GSSoC 2025 Guidelines
- 📄 License
- 🙏 Acknowledgments
🎯 A pixel-perfect, responsive clone of Netflix India's homepage
This project is a beginner-friendly frontend challenge that focuses on:
- 🎨 Clean UI/UX Design - Mimicking Netflix's modern interface
- 📱 Responsive Layout - Works seamlessly across all devices
- 🚀 Performance Optimized - Fast loading and smooth interactions
- 🔧 Educational Purpose - Perfect for learning HTML5 & CSS3
Originally created by Dhruv Johri and now enhanced by the amazing open-source community under GSSoC 2025.
| Feature | Description | Status |
|---|---|---|
| 🎬 Hero Section | Eye-catching banner with Netflix branding | ✅ Complete |
| 📱 Responsive Design | Mobile-first approach with breakpoints | ✅ Complete |
| 🎭 Movie Carousel | Interactive movie/show browsing | 🚧 In Progress |
| 🔍 Search Functionality | Search movies and shows | 📋 Planned |
| 👤 User Profiles | Multiple user profile support | 📋 Planned |
| 🌙 Dark Mode | Toggle between light and dark themes | 📋 Planned |
Screenshots will be added as mobile responsiveness is enhanced
| Technology | Usage | Badge |
|---|---|---|
 |
Structure & Semantics | Core |
 |
Styling & Layout | Core |
 |
Flexible Layouts | Layout |
 |
Grid Layouts | Layout |
 |
Media Queries | Design |
Before you begin, ensure you have:
- ✅ Code Editor (VS Code, Sublime Text, or any preferred editor)
- ✅ Web Browser (Chrome, Firefox, Safari, or Edge)
- ✅ Git (for version control)
- ✅ Basic knowledge of HTML and CSS
# 1️⃣ Clone the repository
git clone https://github.com/dhruvjohri/netflix-clone.git
# 2️⃣ Navigate to project directory
cd netflix-clone
# 3️⃣ Open in your preferred code editor
code . # For VS Code users- Click on "Code" button above
- Select "Download ZIP"
- Extract the downloaded file
- Open
index.htmlin your browser
# Simply open the index.html file in your browser
# Or use a local server (recommended)
# Using Python (if installed)
python -m http.server 8000
# Using Node.js (if live-server is installed)
npx live-server
# Using PHP (if installed)
php -S localhost:8000netflix-clone/
├── 📄 index.html # Main HTML file
├── 📁 css/
│ ├── 🎨 style.css # Main stylesheet
│ ├── 📱 responsive.css # Media queries
│ └── 🎭 components.css # Component styles
├── 📁 assets/
│ ├── 🖼️ images/ # Image assets
│ ├── 🎬 videos/ # Video assets (if any)
│ └── 🔤 fonts/ # Custom fonts
├── 📁 js/ # JavaScript files (future)
├── 📄 README.md # Project documentation
├── 📄 LICENSE # MIT License
└── 📄 CONTRIBUTING.md # Contribution guidelines
🎉 We're excited to be part of GSSoC 2025! 🎉
- 🏆 Gain Experience - Work on real-world projects
- 🤝 Build Network - Connect with amazing developers
- 📈 Enhance Skills - Learn from code reviews and feedback
- 🎯 Make Impact - Contribute to open-source ecosystem
- 🏅 Earn Recognition - Get featured in our contributors list
-
🍴 Fork the Repository
# Click the "Fork" button at the top right of this page -
📥 Clone Your Fork
git clone https://github.com/YOUR_USERNAME/netflix-clone.git cd netflix-clone -
🌿 Create a New Branch
git checkout -b feature/your-feature-name # or git checkout -b fix/bug-description -
⚡ Make Your Changes
- Write clean, readable code
- Follow existing code style
- Test your changes thoroughly
-
💾 Commit Your Changes
git add . git commit -m "✨ Add: Your descriptive commit message"
-
🚀 Push to Your Fork
git push origin feature/your-feature-name
-
🔄 Create Pull Request
- Go to your fork on GitHub
- Click "New Pull Request"
- Fill out the PR template
- Wait for review!
- Mobile Responsiveness - Enhance mobile experience
- Accessibility - Add ARIA labels and keyboard navigation
- Performance - Optimize images and CSS
- Animations - Add smooth transitions and hover effects
- Search Functionality - Implement movie/show search
- Movie Details - Create detailed movie pages
- User Profiles - Add multiple profile support
- Watchlist - Implement favorites/watchlist feature
- Code Comments - Add detailed code documentation
- Setup Guides - Create deployment guides
- API Documentation - Document any future APIs
- Tutorial Videos - Create learning resources
- Cross-browser Issues - Fix compatibility problems
- Layout Issues - Resolve responsive design bugs
- Performance Issues - Fix loading and rendering problems
We're grateful to all our amazing contributors who have helped make this project better!
| Avatar | Name | Role | Contributions |
|---|---|---|---|
 |
Dhruv Johri | 👑 Project Creator | Initial project setup, Core development |
| 🎯 | Your Name Here | 🌱New Contributor | Contribute and see your name here! |
| 🎯 | Your Name Here | 🌱 New Contributor | Contribute and see your name here! |
💡 Want to see your avatar here? Contribute now!
- ✅ Read documentation thoroughly before contributing
- ✅ Follow code style and project structure
- ✅ Write descriptive commit messages
- ✅ Test your changes before submitting PR
- ✅ Be respectful and collaborative
- ✅ Ask questions if you're unsure about anything
- ❌ Don't spam with multiple PRs for same issue
- ❌ Don't copy code without understanding
- ❌ Don't make unnecessary changes
- ❌ Don't ignore code review feedback
- ❌ Don't forget to update documentation when needed
| Level | Description | Points | Badge |
|---|---|---|---|
| 🥉 Beginner | Fix typos, update docs, minor bug fixes | 5-10 |  |
| 🥈 Intermediate | Add features, improve UI/UX, performance | 15-25 |  |
| 🥇 Advanced | Major features, architecture improvements | 30-50 |  |
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2025 Dhruv Johri
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
- Netflix® branding, logos, and visuals are owned by Netflix, Inc.
- This project is for educational purposes only
- Not affiliated with or endorsed by Netflix, Inc.
- All trademarks belong to their respective owners
- 🎓 GirlScript Summer of Code 2025 - For supporting open source
- 🚀 GitHub - For hosting our code
- 🎨 Netflix - For the design inspiration
- 👥 Open Source Community - For continuous support and contributions
- 💡 All Contributors - For making this project awesome
