nicopicchio / boolean-uk-html-spotify

Spotify

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.

Extension Criteria

• ☑ 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.