- 📌 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.
- 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
