Learn how to create a stunning Spotify clone project using HTML and CSS with our beginner-friendly tutorial. Follow our step-by-step guide for designing a web page from scratch.
Table of Contents
The popularity of music streaming services has been on the rise in recent years, with Spotify being one of the most popular platforms. Spotify allows users to access a vast library of music from different genres and artists. In this tutorial, we will guide you through the process of creating a Spotify clone project using HTML and CSS. Even if you have no prior web development experience, our step-by-step guide will help you create a stunning web page. We will cover everything from designing the layout to creating UI elements and styling the page. By the end of this tutorial, you will have a good understanding of how to create a web page using HTML and CSS.
Let's start making an amazing Spotify clone project using HTML, and CSS step by step.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Spotify clone project.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is a block of HTML code that represents the structure of a web page.
The <!DOCTYPE html> declaration at the beginning tells the browser that the document is an HTML5 document. The <html> tag is the root element of the HTML page and contains all other elements.
The <head> section contains meta information about the document, such as the page title and character encoding. The <meta> tags provide additional information, such as the viewport width. The <link> tag references an external stylesheet file, styles.css, that contains rules for styling the HTML elements on the page.
The <body> section contains the main content of the HTML document. It contains a <div> element with a class of "App", which is used to group related content together. The <div> element contains two child <div> elements with classes of "App__top-bar" and "App__nav-bar".
The "App__top-bar" div contains an "App__header" div with a "App__song-navigation" div that includes two child divs, "App__song-navigation-prev" and "App__song-navigation-next", each with an SVG image. There is also a "button" element with a class of "App__user" that contains a nested structure of "div" and "span" elements, and an SVG image.
The "App__nav-bar" div contains an "App__logo" div that contains an SVG image, and an "App__categories-nav" div that contains two "App__category-item" divs. Each "App__category-item" div contains a nested structure of "div" and "span" elements and an SVG image.
This is the basic structure of our Spotify clone using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the Spotify clone website is in place, the next step is to add styling to the website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our Spotify clone website.
This is CSS code that styles an app's user interface. It sets up the font, sizing, and positioning for various elements of the app.
The first line imports a font from Google Fonts, which is used throughout the app.
The * selector sets the default styling for all elements on the page. It sets the margin and padding to 0 and uses the box-sizing property to make sure that any padding or borders added to an element are included in its total width and height. It also sets the font family to be the imported Google Font.
The .App class sets up the layout and some basic styling for the app. It specifies the width and height to be 100vw and 100vh respectively, meaning that the app will take up the full width and height of the viewport. It sets the background color to dark gray and hides any overflow in both the x and y directions. It also defines a grid layout for the app with two rows and two columns. The top row contains the navigation bar and the main view, while the bottom row contains the now playing bar. The grid-template-areas, grid-template-columns, and grid-template-rows properties are used to define the layout of the grid.
The .App__top-bar, .App__nav-bar, and .App__now-playing-bar classes set up the styling for the top bar, navigation bar, and now playing bar respectively.
The .App__logo class centers the app logo on the navigation bar. The .App__categories-nav, .App__category-item--selected, and .App__category-item classes define the styling for the navigation items in the navigation bar.
The .App__playlists-nav class sets up the styling for the playlists section of the navigation bar.
The .App__main-view class defines the styling for the main view of the app, including its background color, maximum height, and scrolling behavior.
The .App__header class sets up the styling for the header of the main view, which contains the app logo, user profile, and song navigation buttons.
The .App__song-navigation-prev and .App__song-navigation-next classes define the styling for the previous and next song navigation buttons respectively.
The .App__user class defines the styling for the user profile section of the header, including the user's profile picture and username.
The .App__top-gradient class sets up a gradient background for the top of the main view.
The .App__header-placeholder class creates a placeholder for the header so that the rest of the content doesn't overlap it.
Finally, the .App__section and .App__quick-links-container classes define the styling for various sections of the app.
This will give our Spotify clone website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.App {
--vertical-nav-width: 232px;
--now-playing-bar-height: 11vh;
width: 100vw;
height: 100vh;
background-color: darkgray;
overflow-x: hidden;
overflow-y: hidden;
display: grid;
grid-template-areas: "nav-bar main-view" "now-playing-bar now-playing-bar";
grid-template-columns: auto 1fr;
grid-template-rows: 1fr auto;
position: relative;
scrollbar-width: none;
font-size: 16px;
}
.App::-webkit-scrollbar {
display: none;
}
.App .test {
border: 1px solid magenta;
}
.App__top-bar {
grid-area: main-view;
height: 60px;
z-index: 2;
}
.App__nav-bar {
grid-area: nav-bar;
width: var(--vertical-nav-width);
height: 100%;
min-height: 100%;
background-color: #000;
padding-top: 24px;
padding-bottom: var(--now-playing-bar-height);
}
.App__logo {
display: grid;
place-items: center;
}
.App__categories-nav {
color: #c4c4c4;
padding: 18px 12px;
}
.App__category-item--selected {
color: #fff;
background-color: rgba(50, 50, 50, 0.6);
border-radius: 5px;
}
.App__category-item {
padding: 5px 16px;
display: flex;
flex-direction: row;
align-items: center;
margin: 5px 0;
}
.App__category-item .icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
margin-right: 10px;
}
.App__category-item .icon svg {
width: 24px;
height: 24px;
}
.App__playlists-nav {
color: #c4c4c4;
padding: 18px 12px;
}
.App__now-playing-bar {
grid-area: now-playing-bar;
background-color: #181818;
border-top: 1px solid #202020;
height: var(--now-playing-bar-height);
z-index: 4;
}
.App__main-view {
grid-area: main-view;
background-color: #121212;
position: relative;
z-index: 1;
max-height: calc(100vh - var(--now-playing-bar-height));
overflow-x: hidden;
overflow-y: scroll;
scrollbar-width: none;
}
.App__main-view::-webkit-scrollbar {
display: none;
}
.App__header {
width: 100%;
height: 60px;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 16px 32px;
}
.App__song-navigation {
display: flex;
flex-direction: row;
}
.App__song-navigation-prev, .App__song-navigation-next {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
display: grid;
place-items: center;
margin-right: 16px;
cursor: not-allowed;
}
.App__song-navigation-prev svg, .App__song-navigation-next svg {
color: #fff;
}
.App__user {
border: 0;
display: flex;
flex-direction: row;
align-items: center;
height: 32px;
border-radius: 16px;
padding: 1px;
background-color: #000;
}
.App__figure {
width: 25px;
height: 25px;
background-color: #2a2a2a;
border-radius: 50%;
margin-right: 8px;
margin-left: 2px;
display: grid;
place-items: center;
}
.App__username {
color: #fff;
font-size: 0.9em;
margin-right: 8px;
}
.App__expand-arrow {
transform: rotateZ(180deg);
margin-right: 8px;
}
.App__top-gradient {
height: 332px;
width: 100%;
margin-top: -60px;
background-image: linear-gradient(rgba(0, 0, 0, 0.6) 0%, #121212 100%);
background-color: #5028f0;
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
.App__header-placeholder {
height: 60px;
width: 100%;
}
.App__section {
padding: 16px 32px;
color: #fff;
}
.App__quick-links-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 24px;
margin-top: 16px;
}
.App__quick-link {
background-color: #30294b;
height: 80px;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
}
.App__quick-link-featured-img {
height: 80px;
width: 80px;
border-radius: 4px 0 0 4px;
background-color: #efefef;
box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);
margin-right: 16px;
background-image: linear-gradient(to bottom right, blue, white);
}
.App__quick-link-featured-img:nth-of-type(1) {
font-size: 2em;
display: grid;
place-items: center;
}
.App__section-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.App__section-header span {
color: #686868;
font-size: 0.8em;
}
.App__section-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
column-gap: 24px;
margin-top: 16px;
grid-template-rows: 1fr;
grid-auto-rows: 0;
/* set height to 0 for autogenerated grid rows */
overflow-y: hidden;
/* hide grid items that overflow */
}
.App__section-grid-item {
background-color: #242424;
width: 100%;
height: auto;
min-height: 150px;
padding: 10%;
border-radius: 4px;
}
.App__section-grid-item .featured-image {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 4px;
background-image: linear-gradient(to bottom right, blue, white);
background-size: cover;
margin-bottom: 16px;
box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);
}
.App__section-grid-item:nth-of-type(1) .featured-image {
background-image: url("https://i.scdn.co/image/239649cd6dfd2296632d269b115d1e147695a0a8");
}
.App__section-grid-item:nth-of-type(2) .featured-image {
background-image: url("https://i.scdn.co/image/1ec33564b0c0c1db64babdcf678a5246a4605c6f");
}
.App__section-grid-item:nth-of-type(3) .featured-image {
background-image: url("https://i.scdn.co/image/50a4653e91a472a85b6759225ffd5a2f71d8a9ba");
}
.App__section-grid-item:nth-of-type(4) .featured-image {
background-image: url("https://i.scdn.co/image/8feb7ba9f991af98307ae1de9c491c43754765dc");
}
.App__section-grid-item:nth-of-type(5) .featured-image {
background-image: url("https://i.scdn.co/image/15488d6d07e4d31d388be232f921569bd32d1ac3");
}
.App__section-grid-item h3 {
margin-bottom: 8px;
}
.App__section-grid-item span {
color: #686868;
font-size: 0.8em;
}
.function{
display: flex;
/* align-items: center; */
justify-content: center;
width: auto;
background-color: rgb(27, 27, 27);
}
.function .music{
width: 20vw;
height: 11vh;
display: flex;
align-items: center;
margin-left: 0.5vh;
background-color: transparent;
}
.function .music img{
width:10vh;
height: 10vh;
border: 0px solid;
border-radius: 2vh;
}
.function .music .details{
display: flex;
flex-direction: column;
justify-content: center;
color: white;
font-family: 'Inter', sans-serif;
margin-left: 2vh;
padding-bottom: 1vh;
background-color: transparent;
}
.function .music .details .name{
/* display: flex; */
/* justify-content: left; */
font-size: 3vh;
/* background-color: brown; */
justify-content: left;
display: flex;
background-color: transparent;
font-weight: bold;
padding-left: 0px;
}
.function .music .details .artist{
font-size: 2vh;
background-color: transparent;
}
.function .music .love{
background-color: transparent;
}
.function .music .love img{
/* filter: invert(); */
background-color: transparent;
padding: 0px;
margin-left: 2vh;
margin-right: 2vh;
width: 4vh;
height: 4vh;
/* background-color: ; */
/* fill: red; */
}
.function .playback{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 1vh;
width: 60vw;
height: 4vh;
background-color: transparent;
}
.function .playback .upper{
width: 50vw;
background-color: transparent;
height: 6vh;
margin-top: 3vh;
margin-bottom: 1vh;
display: flex;
align-items: center;
justify-content: center;
}
.function .playback .upper img{
width: 3vh;
height:3vh;
margin-left: 1vh;
margin-right: 1vh;
background-color: transparent;
filter: invert();
}
.function .playback .upper img.pause{
width: 4vh;
height: 4vh;
}
.function .playback .lower{
width: 50vw;
background-color: transparent;
/* height: 5vh; */
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', sans-serif;
font-size: 1.5vh;
color: white;
}
.function .playback .lower .line{
width: 50vh;
height: 1vh;
background-color: white;
border: 0px 0px 0px 0px solid;
border-radius: 1vh;
}
.function .playback .lower .text{
background-color: transparent;
margin-left: 1vh;
margin-right: 1vh;
}
.function .control{
width: 20vw;
height: 11vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: transparent;
}
.function .control .images{
display: flex;
justify-content: center;
background-color: transparent;
align-items: center;
}
.function .control .images img{
width: 3vh;
height: 3vh;
background-color: transparent;
filter: invert();
margin-left: 1vh;
margin-right: 1vh;
}
.function .control .images .line{
width: 13vh;
height: 1vh;
background-color: white;
border: 0px 0px 0px 0px solid;
border-radius: 1vh;
padding-left: 1vh;
padding-right: 1vh;
} Final Output:
See the Pen Spotify Clone Project by Faraz (@codewithfaraz) on CodePen.
Conclusion:
In conclusion, we have covered the entire process of creating a Spotify clone project using HTML and CSS. We started by setting up our project, creating the basic structure, and linking CSS to HTML. We then designed the layout of our Spotify clone project by creating the header, navigation menu, main content, and footer sections. Next, we created UI elements such as the play button, volume slider, and progress bar. Finally, we styled the pages with colors and added visual appeal to our project.
With the help of our beginner-friendly tutorial, you should now have a good understanding of how to create a web page using HTML and CSS. This tutorial is just a starting point, and you can build upon it to create more complex web pages or even build your own web applications. We hope that you found this tutorial informative and useful. If you have any questions or feedback, feel free to leave them in the comments section. Thank you for reading!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
