Codage de spotify

Le défi présenté ici est de reconstruire l’interface de Spotify en codant directement. 

BESOIN DE LA CONSTRUCTION D'UN SITE WEB ?

Pour assurer votre visibilité en ligne, demandez la réalisation d’un site web.

Du codage en musique

Dans l’optique d’améliorer mes fondamentaux en codage informatique, j’ai donc dû coder l’interface d’un site existant, ici open.spotify.com.

Pour cela, j’ai donc mélanger différent langages tels que le HTML et le CSS pour la structure et le design, mais aussi du PHP pour gérer les cartes et les composants.

L’interface du géant suédois est un peu particulière, car cette dernière est composé de beaucoup de carte su un fond sombre avec de nombreux effets de hover. D’autant plus que la navbar se situe dans un endroit non standard. Voyons le déroulement.

Une interface pensé mobile

Pour réaliser la page accueil de Spotify, il faut d’abord s’occuper de ses composants. Ainsi, la navbar se trouve cette fois-ci à gauche. Au niveau du codage, c’est seulement une zone contenant elle la navbar constituée elle des pages “Accueil, Rechercher et Bibliothèques”. 

Le player est aussi une partie se retrouvant sur les différentes pages. Ici, les logos du player sont constitués de logo provenant de Font Awesome.

Enfin, nous retrouvons le bouton de profil et de retour. Les card d’albums et de playlists sont eux gérés en PHP pour créer une répétition avec un effet de hover dessus pour faire apparaitre un bouton lecture.

Au niveau de la page Playlist nous retrouvons, la pochette en dimension almbum avec un bouton lecture.

Enfin, sur la droite, la liste des sons présent dans la playlist est accompagnée du nom de la chansons, du nom du ou des artistes ainsi que la durée de cette dernière. Chaque son possède aussi un hover pour signifier à l’utilisateur qu’il passe sa souris dessus.

Les pages artistes

Présentation

Biographie

Projets similaires