A Spotify main page clone built with HTML, CSS & JavaScript.
Unlike my previous Netflix clone, this project is fully responsive and includes scrollable content sections.
The aim of this project was to level up my responsive design skills and create a functional music streaming interface.
For this version, I focused on:
- Making it fully responsive across all devices
- Creating scrollable content areas
- Building interactive UI components
- Matching Spotify's dark theme and layout
✅ Major Improvement: This version is fully responsive unlike my Netflix clone! I used relative units, flexbox, and media queries to ensure it works perfectly on mobile, tablet, and desktop.
- HTML5 – for semantic structure
- CSS3 – for responsive styling and animations
- JavaScript – for interactivity and functionality
- 📱 Fully responsive design (mobile, tablet, desktop)
- 🎨 Authentic Spotify dark theme and UI
- 📜 Scrollable content in main sections
- 🎵 Music player controls at bottom
- 📚 Your Library section with playlist creation
- 📊 Featured Charts (Top Songs Global, India, etc.)
- 🎙️ Podcast discovery section
- 🔍 Search and navigation functionality
index.html- Main HTML filestyle.css- Main stylesheetresponsive.css- Media queries for responsivenessscript.js- JavaScript functionality
assets/- Images, icons, album covers
Through this project, I improved on:
- Building responsive layouts with flexbox and grid
- Using relative units (rem, em, %, vw, vh) instead of fixed pixels
- Creating scrollable sections for better UX
- Implementing media queries for different screen sizes
- Adding JavaScript interactivity to UI elements
- Mobile: 320px - 768px
- Tablet: 768px - 1024px
- Desktop: 1024px+
- Sidebar Navigation - Home, Search, Your Library
- Main Content - Daily mixes and recommendations (scrollable)
- Featured Charts - Top Songs Global/India, Top 50
- Music Player - Bottom controls with current track
- ✅ Now shifting focus to JavaScript - Adding more functionality and interactivity
- ✅ Add actual music playback functionality
- ✅ Implement user authentication UI
- ✅ Add more interactive animations and transitions
- ✅ Create additional pages (Search, Library, etc.)
- ✅ Optimize performance and loading times
Inspired by Spotify's official web player interface.
Built as part of my responsive web design learning journey.
Major milestone: First fully responsive project! 🎉