Skip to content

avdeshjadon/Spotify-Home

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

15 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Spotify Homepage Clone

A pixel-perfect desktop homepage clone of Spotify built using only HTML and CSS โ€” no JavaScript or frameworks involved.


๐Ÿš€ Live Demo

Check out the live hosted version here:
https://avdeshjadon.github.io/Spotify-Home/


๐Ÿ“ About the Project

This project is a recreation of Spotifyโ€™s desktop homepage interface focusing purely on frontend skills with semantic HTML and modern CSS techniques. The goal was to replicate the look and feel of Spotifyโ€™s homepage as closely as possible without using any JavaScript.


๐Ÿ› ๏ธ Features

  • Pixel-perfect clone of Spotifyโ€™s desktop homepage layout
  • Uses the exact same icons as Spotify (manually sourced and integrated)
  • Montserrat font used as a close match to Spotifyโ€™s proprietary font
  • Clean and semantic HTML structure for accessibility and SEO
  • Responsive layout built using Flexbox and CSS Grid (Note: currently desktop-only version)
  • Attention to detail with spacing, typography, color scheme, and animations
  • Hosted live on GitHub Pages for easy access and demonstration

๐ŸŽฏ What I Learned

  • Planning and building complex layouts using only HTML and CSS
  • Recreating real-world UI with pixel-perfect precision
  • Improving semantic HTML markup and accessibility best practices
  • Enhancing skills with Flexbox and CSS Grid for responsive design planning
  • Understanding visual hierarchy, spacing, and typography nuances

๐Ÿ“‚ Project Structure

About

A pixel-perfect Spotify homepage UI clone built with pure HTML and CSS

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors