This project is a Frontend-Only clone of the Spotify Web Player interface, created while learning and practicing HTML & CSS concepts. It focuses on layout structuring, responsive design, positioning, and UI styling without using any JavaScript functionality.
- Responsive Music Library & Playlist Layout
- Top Navigation Bar with navigation icons
- Stylish Card-Based Content Section
- Music Player Bar at the bottom with:
- Album thumbnail & track details
- Playback control icons
- Progress / seek slider
- Volume control slider
- Fully designed using Flexbox, Custom Fonts, and Font Awesome icons
| Tool / Tech | Purpose |
|---|---|
| HTML5 | Page Structure |
| CSS3 | Styling & Layout |
| Google Fonts (Montserrat) | Typography |
| Font Awesome Icons | Icons used throughout the UI |
| Flexbox | Page layout & alignment |
By building this project, I practiced:
- Flexbox layout and alignment
- Creating clean, modern UI themes
- Working with external fonts & icon libraries
- Designing a music player layout structure
- Improving CSS structuring and naming consistency
This is a UI clone only and does not include actual music playback features or backend functionality. It is intended purely for learning and design practice.
- Add JavaScript to control playback buttons
- Fetch real song data from an API
- Make playlists dynamic