Spotify UI Design Clone

My solution to a Boolean UK exercise using HTML and CSS to recreate the Spotify UI based on reference images, using only plain HTML and CSS.
Explore the docs »

View Demo

Table of Contents

1. About The Project
   • Assignment Brief
   • Built With
2. Getting Started
   • Installation
3. Usage
4. Roadmap
5. Contact

About The Project

Assignment Brief

Today we are building the UI for Spotify. This exercise will put into practice everything we have learned about HTML & CSS. Layouts for apps are different to websites so this will put your CSS Grid skills to the test!

Instructions

In the screens folder you will see images of spotify at different resolutions. Your goal is replicate this layout structure as closely as possible. The image assets needed to complete the exercise are in the assets/img folder.

For the player icons, you can use your own images or Font Awesome icons (https://fontawesome.com/v4.7/icons/).

Assesment Criteria

• The overall structure of the layout reflects the spotify-lg.png reference image.
• Fonts, colors and spacings used are similar (they don't need to be identical) to the reference images
• CSS avoids repetition.
• CSS class names are descriptive.
• HTML is semantic and well structured.
• The left menu collapses as shown in spotify-xs.png.
• The list of albums expands and collapses to fill the available page space (see spotify-md.png and spotify-s.png)
• The top navigation list wraps as the page size is reduced.
• On hovering over cover images, a play icon appears overlaid.
• Only the main content area scrolls - it moves behind the upgrade bar and the player controls. The side menu also stays fixed as the main content scrolls.

(back to top)

Built With

• 
• 

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Installation

1. Clone the repo

   git clone https://github.com/procrastian/html-spotify-challenge.git

2. View HTML from an IDE live server

   Open with Live Server

(back to top)

Usage

The main goal with this exercise is to replicate a popular and interactive UI design, with a focus on using CSS Grid properties to build the layout from the ground up.

The links and buttons do not direct to additional pages, as this lies outside of the scope of this project.

(back to top)

Roadmap

• Exercise Criteria
• Update code using new skills
• Improve Animations

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contact

Ian Grantham - [email protected]

Project Link: https://github.com/procrastian/html-spotify-challenge

(back to top)