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
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!
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/).
- 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
andspotify-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.
To get a local copy up and running follow these simple example steps.
- Clone the repo
git clone https://github.com/procrastian/html-spotify-challenge.git
- View HTML from an IDE live server
Open with Live Server
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.
- Exercise Criteria
- Update code using new skills
- Improve Animations
See the open issues for a full list of proposed features (and known issues).
Ian Grantham - [email protected]
Project Link: https://github.com/procrastian/html-spotify-challenge