Build Spotify Landing Page (Desktop/Laptop version)

Overview:

The goal of this lab is to help you understand the materials that we went over yesterday, but for a more complicatd case. After completing the lab, you should be able to create any webpage from scratch quickly without any issue at all. (Okay, some issues are fine.)

We're going to be cloning a real life landing page - everyone's favorite music streaming service, Spotify! Go check out www.spotify.com for a preview of what you can build.

Milestone 1: Link style.css file to index.html file

We're done with CodePen, time to run things locally on your own machine. Hopefully you've installed Visual Studio Code.

Create a folder named spotify
In the folder that you just created, create 2 empty files index.html and style.css.
In the index.html, add the following code:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Music for everyone - Spotify</title>
    </head>
    <body>

    </body>
  </html>

Explanation: This is the main skeleton of the HTML file. The <!DOCTYPE html> declaration means that the HTML file is HTML5. An HTML file contains 2 parts:

<head>: where all the metadata and reference links live in. The <meta> specifies the character encoding for the HTML document. The <title> tag defines a title in the browser toolbar, provides a title for the page when it is added to favorites, and displays a title for the page in search-engine results.
<body>: the visual part that will be displayed on the web browser. We will be working in the <body> part most of the time.

In the style.css, add the following code to reset the default styles that have been added by your browser:

  * { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
  }

Also, add this below to set a default font for our visual in the <body> tag:

  body {
    font-family: Circular, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
  }

Explanation: The font-family has 4 values from left to right. The first value Circular will be the main font to be loaded. If this font isn't available, the next font will be loaded, and so forth. The line-height is used to defines the amount of space above and below inline elements. This property usually applies on text.

Now, link the style.css with the index.html file by adding this code into the <head> tag. By doing this, the style you write in style.css file will be applied to the index.html file.

  <link rel="stylesheet" href="style.css" />

Milestone 2: Implement the Structure

The Spotify landing page has 3 different sections from top to bottom.

Navigation bar
Header
Footer

We'll be using a new thing here, what are called HTML5 Semantic Elements. There's no real difference with a div, but these help make your code a bit easier to understand - not only for humans, but also for search engines.

Further Reading: HTML5 semantic elements

In index.html, add the following code inside the <body> tag to add the 3 parent containers:

<nav></nav>
<header></header>
<footer></footer>

Now, give them some styling by giving height and background color to each of the container: In the style.css, add the following code:

 nav { 
   height: 80px; 
   background-color: black; 
 }
 header { 
   height: 805px; 
   background-color: orange; 
 }
 footer { 
   height: 538px; 
   background-color: black; 
 }

Explanation: We give a height and a background-color for each selector to distinguish each container on rendering.

Save and reload the index.html file on your Chrome browser. Now you can see 3 different containers layed out one on top of another.

Milestone 3: Create the top navigation bar

The top navigation bar has four requirements:

Spotify logo on top left
Horizontal list of hyperlinks on top right
Fixed position on top & transparent background (BONUS)

In this milestone, I'll walk you through on how to implement the first two.

The last requirement you can try to implement yourself (hint: google 'fixed position css' and 'transparent background css').

Step 1: Spotify logo on top left There is a trick to get all images on a website:

On Chrome, go to https://www.spotify.com/vn-en/
Right click anywhere on the webpage and choose Inspect
On the Network tab, choose Img as your filter
Click Cmd+R or Ctrl+R to reload the page (this will reload all the images)
Go through the list of image names at the bottom-left panel until you find the Spotify logo
Right click on the image on the bottom-right panel and choose Save...
Now, you have downloaded the Spotify logo in your local computer (If you want to get all the img assets from a website, one quicker way to do it is by using CCS Peeper Chrome plugin: CSS Peeper > Assets > Export All)
Rename it to spotify-logo.svg
In the spotify folder, create another folder named img and put the spotify logo in there. This new folder is the place to store any image that you use for your website.
Add this line of code inside your #navbar to add the Spotify logo

  <img class="spotify-logo" src="img/spotify-logo.svg" alt="spotify-logo">

Save the index.html file and reload the page on Chrome. Notice that the logo doesn't have the right size and right location.

Now, let's take a look back at the Spotify landing page. Do you realize that all the content of the 3 parent containers are always centered in the middle?

Try expanding or shrinking your browser width, notice that the content moves with your resizing to make sure they are still centered horizontally. Let's add this styling to your page!

In the style.css, add the following code below the footer selector:

  .container {
    height: inherit; /* get parent height */
    width: 1170px;   /* add 970px for smaller screen */
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
  }

Note: Depend on your laptop screen, you may need to re-size the container (either 1170px or 970px)

Explanation: Each container has a fixed with of 970px. The auto margin helps to center the .container horizontally. The display is changed from block (default) to flex so that all the content inside the .container becomes flex items.

Go back to your html. Now we need to add a child container inside each parent container to center the content inside. Add a div with class name container inside each parent container. The div in the nav will also wrap around the spotify logo. Yor code should look like this now:

  <nav>
    <div class="container">
      <img class="spotify-logo" src="img/spotify-logo.svg" alt="spotify-logo">
    </div>
  </nav>
  <header>
    <div class="container">
    </div>
  </header>
  <footer>
    <div class="container">
    </div>
  </footer>

Save and reload your index.html page on Chrome. The logo has move a bit more to the right. Let's resize and add the logo

In the style.css, add the following code to the bottom to style the Spotify logo:

  .spotify-logo {
    width: 132px;
    height: 40px;
    margin: 20px 0; 
  }

The above values was gotten by inspecting the original spotify logo. Now, our spotify logo size and position looks more like the original.

Step 2: Horizontal list of hyperlinks on top right

In the index.html file, add a list of hyperlinks into the #navbar. It should look like this:

  <div class="container"> 
    <img class="spotify-logo" src="img/spotify-logo.svg" alt="spotify-logo">
    <ul>
      <li><a href="">Premium</a></li>
      <li><a href="">Help</a></li>
      <li><a href="">Download</a></li>
      <li><a>|</a></li>
      <li><a href="">Sign up</a></li>
      <li><a href="">Log In</a></li>
    </ul>  
  </div>

Notice that this is an unordered vertical list of hyperlinks. <ul>, <li> and <a> have default styling that we need to change. Let's do that.

Let's start with the <ul> in the navbar. Let's remove all the list bullet points, make it a flex container, and apply some flex properties to its content. In the style.css file, add the following:

  nav ul {
    width: 484px;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: auto;
  }

Hyperlink <a> has a default style: blue color and underlined. Let's change the style for all the hyperlinks in the navigation bar:

  nav a {
    color: white;
    text-decoration: none;
  }

This css code changes the style of all hyperlinks in the <nav> container to white color and no underline.

Next, we need to change the default style for list items. Add the following to the bottom of the style.css:

  nav li {
    font-weight: bold;
  }

The display: inline; changes the direction of the list from vertical to horizontal, and margin: 15px; adds extra space between each of the hyperlink.

There is one more thing left to do. Let's add an effect when the mouse is hover to a navigation link:

  nav a:hover {
    color: #1db954;
  }

Now you got the horizontal navigation links on the top right. The top bar should look like below:

Note: It doesn't look exactly the same as the Spotify original navigation bar because we haven't added opacity and fixed position to our navbar yet, which we will do it later.

If you inspect each individual list item on Spotify navigation bar, you will realize that we write way less code to space each element because flexbox took care of all the element alignments for us.

Milestone 4: Create the header with hero banner

The header needs to satisfy the following requirements:

Linear-gradient background
Bubble background image
Center large white text
Green Spotify button
The small text underneath the heading (BONUS)

In this milestone, I'll walk you through the top four. The last one requirement is left as a challenge to the reader again.

Step 1 - Linear-gradient background

On the Spotify original page, locate your mouse inside the banner. Right-click and select 'Inspect' to open the Chrome Developer Tools
On the Elements tab, look for a div "wrap" i.e. <div class="wrap"> (Click on Cmd+F or Ctrl+F and type in 'wrap')
Click on the div to open the corresponding Styles on the right panel, and look for the selector .wrap

  .index-homepage .wrap {
    background-color: #f037a5;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(-60%,#f037a5),color-stop(140%,#fae62d));
    background: linear-gradient(#f037a5 -60%,#fae62d 140%);
  }

Here you only need the 3rd declaration: background: linear-gradient(#f037a5 -60%,#fae62d 140%);

Copy the 3rd declaration and replace it with the background-color: orange; in the header selector in your style.css file. The selector now should look like this:

  header { 
    height: 805px; 
    background: linear-gradient(#f037a5 -60%,#fae62d 140%);
  }

Save and reload your page on Chrome. Now you should get the same gradient background.

Step 2 - Bubble background image

Using the same trick to get all the images. This time, you want to look for a svg image named hero-burst.svg
Download and save it to your img directory (same place as where you saved your spotify logo)
This time, instead of using img tag, we will use a div and background-image to accomplish this. Add a div with class hero-img inside the header. Make sure that it wraps around the .container. The code should looks like this:

  <header>
    <div class="hero-img">
      <div class="container">
      </div>
    </div>
  </header>

In style.css, add the following code to add in the image:

  .hero-img {
    height: inherit;
    margin: 0 auto;
    background-image: url(img/hero-burst.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

For more information on CSS background properties: https://www.w3schools.com/css/css_background.asp.

Save and reload your page on Chrome. The image now covers the the entire container.

Step 3 - Center large white text

In index.html file, add an h1 heading inside the header .container, and give it an id="title"

  <header>
    <div class="hero-img">
      <div class="container">
        <h1 id="title">Free music. Millions of songs.</h1>
      </div>
    </div>
  </header>

Next, we need to style the #title text. Open your style.css and add the following to the bottom:

  #title {
    width: inherit;
    color: white;
    text-align: center;
    font-size: 80px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.15;
    margin-bottom: 20px;
  }

Save and reload the page. The title text should be white and centered horizontally.

Add this to style.css to center the header content vertically:

  header .container {
    flex-direction: column;
    justify-content: center;
  }

This selector will make sure that the styling only applies to .container inside the header.

Step 4 - Green Spotify button

In index.html file, add a button tag below the h1 tag and give it a name class="btn-spotify"

  <button class="btn-spotify">get spotify free</button>

Give it some styles

  .btn-spotify {
    width: 260px;
    margin: 0 auto;
    color: white;
    background-color: #1db954;
    padding: 18px 42px 18px;
    border: 0px;
    border-radius: 500px;
    margin-top: 16px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    transition-duration: .3s;
  }

You can use the ColorZilla plugin for Chrome to get the right green color for the button.

Try googling for the properties that you don't know, for example: 'transition-duration css'. Usually, Google first result will take you to W3Schools.

Add some effect when mouse is hovered

  .btn-spotify:hover {
    cursor: pointer;
    background-color: #1ed760;
  }

Your final result should look like this:

That should be it for your first lab! If you get up to this point, you can start calling yourself a web designer who can litterally create a replica of any website from scratch!

Rocket Zone

Some of the requirements listed above were designated BONUS - go back and implement those. If you've finished all of those, the most useful page to implement next is going to be the "Sign Up" page: https://www.spotify.com/vn-vi/signup/.

Nearly every web application will need a sign up page that looks very similar to this. Checkout forms and sign up forms are a rite of passage for every front-end developer. Work on this one!

PrimeTimeTran/spotify.md