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.pngreference 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.
- ☑ CSS makes use of grid for the page main structure.
- ☑ 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.pngandspotify-s.png) - ☑ The top navigation list wraps as the page size is reduced.
- ☑ On hovering over cover images, a play icon appears overlaid.
- ☑ CSS makes use of grid for all subelements structures.
- ☑ 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.