Cloning Amazon, Netflix & Spotify
4.0 (24 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3,838 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Cloning Amazon, Netflix & Spotify to your Wishlist.

Add to Wishlist

Cloning Amazon, Netflix & Spotify

Learn HTML + CSS by recreating the home pages of some amazing companies.
New
4.0 (24 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3,838 students enrolled
Created by Ironhack Bootcamp
Last updated 9/2017
English
Price: Free
Includes:
  • 3 hours on-demand video
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • You will know how to clone the home pages of Amazon, Netflix and Spotify.
  • You will learn some beginner to advanced HTML + CSS.
View Curriculum
Requirements
  • You should be able to use a PC/Mac at a beginner level.
  • We highly recommend that you use Atom as your text editor.
Description

These videos are meant to spark your curiosity and interest in HTML + CSS, this isn’t a comprehensive series of in-depth HTML or CSS tutorials.  We hope that by the end of each lesson you’ll want to dig deeper into the concepts that were taught.

In this course you will learn how Amazon, Spotify and Netflix have built their home pages. Over these videos, you’ll be introduced to HTML + CSS and many of it’s most recent features like flex boxes, image transformations, color gradients and the power Bootstrap framework.

Each video will teach you how Amazon, Spotify and Netflix built each one of the sections within their home pages and below each video, you will have some notes and the code used in the video so you can take your time analyzing it.

Enjoy!

Who is the target audience?
  • Anyone who wants to learn to code.
  • Anyone curious to know how popular websites are created.
Compare to Other HTML Courses
Curriculum For This Course
33 Lectures
03:10:01
+
Introduction
1 Lecture 00:41
Introduction
00:41
+
Netflix
9 Lectures 59:20

To begin writing your first HTML page, all we need is a text editor and a Web browser. I am a big fan of Atom editor provided by GitHub.

Let's create a new file and save it with .html extension, similarly to .doc used by Microsoft Word.

Now, all HTML documents are required to have a certain structure that include the following declaration and elements.

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
  </body>
</html>

Let me explain it to you line-by-line:

  • <!DOCTYPE html> tells the browser the version of HTML we'll be using. In this case, though we're just saying we're going to use the latest version available.
  • <html> tells that we're a starting a new HTML document. By the way, these identifiers (or elements) enclosed in < and > are called tags. There are different kind of tags, such as headings, paragraphs, links, etc. Here we say we're starting an HTML document and down there we're ending it with </html>. Most of the tags have to be closed, except to a few we will see later.
  • Inside the HTML document, we specify the so called <head> tag, which is used as the top of the document for it's title, links to other resources, and other metadata. This section is processed by the browser, but not visible to the users.
  • Finally, we have the <body> tag, which defines what will be visible to the users looking at this page.

The HTML element reference can be found here.

Now save the file and open it in the browser. Nothing interesting, right?

Let's add some more tags:

  <head>
    <meta charset="utf-8">
    <title>Netflix Spain - Watch TV Shows Online, Watch Movies Online</title>
  </head>
  ...
  <body>
    <h1>See what's next.</h1>
  </body>
  • Firstly, we'll add the <title> of the page just like on the Netflix site.
  • Then, we'll add the <meta> tag defining the character encoding of this document, so that the browser would know how to show special characters in different languages.
  • Finally, we'll extend the <body> section with something interesting for the users, the main heading <h1> as on the Web site.
Writing your first HTML page
11:07

Let's add page navigation with a Netflix logo next.

<nav>
  <a href="#">Netflix</a>
</nav>

The <nav> tag defines navigational items on the page. The <a> tag is similar to <link> we've seen earlier, but it can have content and is used in the <body> section, as opposed to the <head> with <link>. <a> tag can be used to link to other pages. For example, we could have a page named about.html and link to it.

Now let's replace the text with an actual Netflix logo. And for that we'll use a new tag, called <img>.

<a href="">
  <img src="img/logo.svg">
</a>  

As you see, <img> tag has an attribute src that links to an actual image. But it's too big, so we'll make it the same size as on the original page. Notice how we nest the img element in CSS inside the nav element, because we don't want other images on the page to get these properties.

nav img {
  width: 167px;
  height: 45px;
}

We'll make a few more adjustments to the navigation and position of the logo. First of all, we'll define a class for an <a> tag so that we can reference it in CSS and set the height to the navigation.

<a class="logo" href="">

And CSS:

nav a {
  display: inline-block;
  line-height: 90px;
}

header nav {
  height: 90px;
}

nav img {
  max-width: 167px;
  max-height: 45px;
  vertical-align: middle;
}

nav .logo {
  margin-left: 3%;
}
  • The display property specifies the box type for an element. The box model is a CSS concept of how elements are positioned on the page.
  • Then we set the height of the <a> tags inside navigation to 90px.
  • Then we align the image inside the navigation vertically in the middle.
  • And finally, add 3% left spacing to our link with a class .logo.

Finally, let's add the Sign in button to the navigation on the right:

<a class="signin" href="https://www.netflix.com/login">
  Sign In
</a>

nav .signin {
  color: #fff;
  float: right;
  background-color: #e50914;
  line-height: normal;
  margin-top: 18px;
  margin-right: 3%;
  padding: 7px 17px;
  font-weight: 400;
  border-radius: 3px;
  font-size: 16px;
  text-decoration: none;
}
  • This time we've linked to an external page and defined the class for this link signin, which we can use further in CSS.
  • Notice the color codes are in the so called HEX format.
  • The float is a new property that tells the element to be positioned on the right.
Adding navigation with SVG logo and sign in button
07:44

The fonts do not look similar to ones on the Netflix site, so let's add them to be applied to entire page, as well as the default font size and colors:

html, body {
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
  color: white;
  background-color: black;
  font-size: 16px;
  margin: 0;
}

* {
  box-sizing: border-box;
}

Notice how we can target multiple elements in CSS by separating them with a comma. The font-family sets the font for the texts on the page. The box-sizing: border-box is something I recommend you use always, as it will include the border and padding in the calculation of the width and height of the elements you style.

 

Adding CSS fonts and styles + box sizing
01:45

Now, we'll add the pitch area.

<section class="pitch">
  <h1 class="pitch__title">See what’s next.</h1>
  <p class="pitch__subtitle">WATCH ANYWHERE. CANCEL ANYTIME.</p>
</section>
    ###li<section> tag to define the section of the page and gave it a class pitch. This allows us to work with these elements as a group in CSS.
  • We also introduced a <p> tag, which is just a paragraph.
  • We also gave the classes to <h1> and <p> tags, prefixing them with the class of a section for better reading..pitch { margin: 0 3%; position: absolute; top: 35%; font-size: 1.8vw; }.pitch__title { font-size: 3em; margin: 0 0 0.2em; font-weight: 700; }

    .pitch__subtitle { margin: 0 0 .5em; }

  • This is another way of specifying margin. Instead of defining each margin (margin-right, etc.), we only set one margin for values top, right, bottom, left. Alternatively, we could condense it further and set the first value for both top and bottom, which is 0, and the second part for left and right, which is 3% as with the logo.
  • position property specifies the positioning method used. It's used in conjunction with top property, which says to have 35% from the top of the page.
  • font-size is defined in ###a href="https://css-tricks.com/viewport-sized-typography/">viewport units, telling to use 1.8% of viewport width. The next font size is defined in em, which means relative to the current font size, 3x in this case.
Adding the heading and tag line
03:19

Next up, we'll add JOIN button with a new button tag:

<p class="pitch__subtitle">...
<button class="btn">JOIN FREE FOR A MONTH</button>

And a corresponding CSS:

.btn {
  font-size: 14px;
  letter-spacing: 1.9px;
  font-weight: 400;
  margin: .5em .5em .5em 0;
  padding: 12px 2em;
  color: #fff;
  background-color: #e50914;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  font-family: Arial,sans-serif;
  border-radius: 2px;
  user-select: none;
  text-align: center;
  border: 0;
}    

How about adding hover effects, meaning when you mouse over the buttons? Well, we have an :hover selector that can be applied to the elements, so let's add it to the both buttons we have:

nav .signin:hover, .btn:hover {
  background: #f40612;
}  

 

Adding the heading’s “join now” button
02:35

Now that we're done with the header, let's move on to the Netflix features (the 3 benefits). First we'll create another navigation with 3 images, headings and links:

<div id="features">
  <nav>
    <div>
      <a href="#">
        <img alt="Cancel anytime" src="img/cancel.svg"/>
        <h2>
          No commitments
          <br/>
          Cancel online at anytime
        </h2>
      </a>

      <a href="#">
        <img alt="Watch anywhere" src="img/watchanywhere.svg"/>
        <h2>
          Watch anywhere
        </h2>
      </a>

      <a href="#">
        <img alt="Pick your price" src="img/pickprice.svg"/>
        <h2>
          Pick your price
        </h2>
      </a>
    </div>
  </nav>
</div>
  • We've used a new tag called <div>, which is used to define a division. We also gave it an id that we can use later in CSS. In contrast to classes, IDs are unique, so there could be only element with the same ID on the page.
  • We've also added alt property to the <img> tag, which helps search engines like Google to identify these images as text.
  • Finally, we've use the <br/> tag, which is used to leave a line break between the elements.

But it doesn't look quite right, so let's style them up:

#features > nav {
  padding-top: 35px;
  background-color: #141414;
  border-bottom: 2px solid #3d3d3d;
}

#features > nav a {
  text-decoration: none;
  text-align: center;
  vertical-align: top;
  font-weight: bold;
  color: #777;
  height: 125px;
  line-height: 20px;
}

#features > nav a:hover {
  color: white;
}

#features > nav a img {
  height: 49px;
}

#features > nav a h2 {
  margin: 10px 0 0;
  font-size: 1em;
}
  • Notice how we used here the > selector that denotes that we want to match the first child element inside the features div.

Let's refresh the page and things look the same, but not positioned correctly. We'll fix it with a CSS feature called flex box. Flexbox makes it easy to create responsive/flexible layouts with CSS.

We'll modify our features with more classes we can style later:

<div class="center columns size-80">
  <a class="column" href="#">
    <img alt="Cancel anytime" src="img/cancel.svg"/>
    <h2>
      No commitments
      <br/>
      Cancel online at anytime
    </h2>
  </a>

  <a class="column" href="#">
    <img alt="Watch anywhere" src="img/watchanywhere.svg"/>
    <h2>
      Watch anywhere
    </h2>
  </a>

  <a class="column" href="#">
    <img alt="Pick your price" src="img/pickprice.svg"/>
    <h2>
      Pick your price
    </h2>
  </a>
</div>

And finally add some CSS helpers:

.columns {
  display: flex;
}

.column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.center {
  margin: 0 auto;
}

.size-80 {
  width: 80%;
}
  • Firstly, we've defined the columns to display with flex.
  • Each column is set to flex-grow to 1, which means that the columns will take full width and distributed equally. We also gave it a property of flex-shrink, which makes the columns to shrink if necessary.
  • Notice our new class .center with a new definition of margin auto, which means it will automatically center the element horizontally.
  • Finally, the .size-80 is a helper class that makes it easier for us to apply width of 80% to any element.
Adding 3 features with flex box
07:58

When you click on each feature section, the content of the bottom part changes - so this functionality is called Tabs. Since this behaviour goes beyond the structure (HTML) and appearance (CSS), we'll need a bit of JavaScript.

As we're not covering JavaScript concepts in this tutorial, we'll just quickly skim thru this section:

Place these lines right before the end of the <body> tag.

  ...
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="js/app.js"></script>
</body>

Create a file named app.js under js folder:

$(function() {
  var tabs = $('#features > nav a');
  var tabsContent = $('#features > article > section');

  tabs.click(function(e) {
    e.preventDefault();

    var that = $(this);

    tabs.removeClass('is-selected');
    that.addClass('is-selected');
    tabsContent.removeClass('is-selected');

    tabsContent
      .filter((i, tab) => $(tab).data('id') === that.data('id'))
      .addClass('is-selected');
  });
});

Briefly, the code snippet will compare the IDs of feature navigation elements and the content, and if they match, add the is-selected class, while also removing it from other elements.

Let's test it out by creating a layout for our feature content:

<nav>
  <div class="center columns size-80">
    <a class="column is-selected" href="#" data-id="cancelanytime">
      <img alt="Cancel anytime" src="img/cancel.svg"/>
      <h2>
        No commitments
        <br/>
        Cancel online at anytime
      </h2>
    </a>

    <a class="column" href="#" data-id="watchanywhere">
      <img alt="Watch anywhere" src="img/watchanywhere.svg"/>
      <h2>
        Watch anywhere
      </h2>
    </a>

    <a class="column" href="#" data-id="pickprice">
      <img alt="Pick your price" src="img/pickprice.svg"/>
      <h2>
        Pick your price
      </h2>
    </a>
  </div>
</nav>

<article>
  <section class="is-selected" data-id="cancelanytime">
    About feature 1
  </section>

  <section data-id="watchanywhere">
    About feature 2
  </section>

  <section data-id="pickprice">
    About feature 3
  </section>
</article>
  • We've defined the content of our features in an <article> and respective <section>s.
  • Also, notice how we've used a new data-id attribute in both the tab link and the content, so that our JS code can match them.
  • Finally, we've set the class is-selected to the first feature.

Now, we only lack a bit of CSS:

#features > nav a.is-selected {
  border-bottom: 5px solid #e50914;
  color: white;
}

...

#features > article > section {
  display: none;
  padding: 40px 0;
}

#features > article > section.is-selected {
  display: block;
}
  • By default, we're hiding the feature section with display: none.
  • The is-selected class sets it back to block.

 

Adding tabs with a bit of JavaScript
05:49

Now that we have the functional tabs and placeholders for the features, let's add some real content.

<section class="is-selected center size-70" data-id="cancelanytime">
  <div class="columns">
    <div class="column">
      <h2>
        If you decide Netflix isn't for you - no problem. No commitment. Cancel online anytime.
      </h2>
      <button class="btn btn-large">JOIN FOR A FREE MONTH</button>
    </div>

    <div class="column">
      <img src="img/cancelanytime_withdevice.png"/>
    </div>
  </div>
</section>

And corresponding CSS:

.btn-large {
  padding: 18px 20px;
}
...

#features > article {
  margin-bottom: 120px;
}
...

#features > article h2 {
  font-size: 32px;
  font-weight: 400;
  margin: 60px 0 20px;
}

#features img {
  max-width: 100%;
}
...

.size-70 {
  width: 70%;
}

Next up moving to the second feature:

<section class="center size-80" id="watchanywhere" data-id="watchanywhere">
  <div class="columns">
    <h2 class="column">
      Watch TV shows and movies anytime, anywhere — personalized for you.
    </h2>
    <button class="btn btn-large column is-narrow">JOIN FOR A FREE MONTH</button>
  </div>

  <div class="columns size-90 center">
    <div class="column text-center">
      <img src="img/asset_TV_UI.png"/>
      <h3>Watch on your TV</h3>
      <p>Smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and more.</p>
    </div>

    <div class="column text-center">
      <img src="img/asset_mobile_tablet_UI_2.png"/>
      <h3>Watch instantly or download for later</h3>
      <p>Available on phone and tablet, wherever you go.</p>
    </div>

    <div class="column text-center">
      <img src="img/asset_website_UI.png"/>
      <h3>Use any computer</h3>
      <p>Watch right on Netflix.com.</p>
    </div>
  </div>
</section>

Notice, how we've added an ID for this section so we can use different styles for this element.

#features #watchanywhere h2 {
  font-size: 19px;
  padding-right: 1em;
  margin: 0 0 20px;
}

#features #watchanywhere > div:first-child {
  margin-bottom: 60px;
}

#features #watchanywhere p {
  color: #999;
}

...
.column.is-narrow {
  flex: none;
}
...
.size-90 {
  width: 90%;
}
...
.text-center {
  text-align: center;
}

There are some new terms to be explained:

  • div:first-child is a special selector that targets the first found div element inside the #features #watchanywhere.
  • We've also disabled flex for the is-narrow column, so the button won't extend to columns full-width.

Finally, let's move to the last feature. For that we'd need some icons for showing checkmarks and crosses. We'll use the popular FontAwesome icon library. The so called "font icons" allow us to use vector shaped icons and style them the same way we would style texts. So, let's link this additional resource:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

And now we can add the content with the icons:

<section class="center size-70" id="pickprice" data-id="pickprice">
  <div class="text-center">
    <h2>
      Choose one plan and watch everything on Netflix.
    </h2>
    <button class="btn btn-large">JOIN FOR A FREE MONTH</button>
  </div>

  <table>
    <thead>
      <tr>
        <th></th>
        <th>Basic</th>
        <th>Standard</th>
        <th>Premium</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Monthly price after free month ends on 6/27/17</td>
        <td>EUR7.99</td>
        <td>EUR9.99</td>
        <td>EUR11.99</td>
      </tr>
      <tr>
        <td>HD available</td>
        <td><i class="fa fa-times"></i></td>
        <td><i class="fa fa-check"></i></td>
        <td><i class="fa fa-check"></i></td>
      </tr>
      <tr>
        <td>Ultra HD available</td>
        <td><i class="fa fa-times"></i></td>
        <td><i class="fa fa-times"></i></td>
        <td><i class="fa fa-check"></i></td>
      </tr>
      <tr>
        <td>Screens you can watch on at the same time</td>
        <td>1</td>
        <td>2</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Watch on your laptop, TV, phone and tablet</td>
        <td><i class="fa fa-check"></i></td>
        <td><i class="fa fa-check"></i></td>
        <td><i class="fa fa-check"></i></td>
      </tr>
      <tr>
        <td>Unlimited movies and TV shows</td>
        <td><i class="fa fa-check"></i></td>
        <td><i class="fa fa-check"></i></td>
        <td><i class="fa fa-check"></i></td>
      </tr>
      <tr>
        <td>Cancel anytime</td>
        <td><i class="fa fa-check"></i></td>
        <td><i class="fa fa-check"></i></td>
        <td><i class="fa fa-check"></i></td>
      </tr>
      <tr>
        <td>First month free</td>
        <td><i class="fa fa-check"></i></td>
        <td><i class="fa fa-check"></i></td>
        <td><i class="fa fa-check"></i></td>
      </tr>
    </tbody>
  </table>
</section>

And the corresponding CSS:

#features #pickprice h2 {
  font-size: 22px;
  display: inline;
  margin: 0 40px 0 0;
}

table {
  width: 100%;
  margin-top: 20px;
}

table, thead, tbody {
  border-collapse: collapse;
}

thead {
  color: white;
  font-size: 16px;
  text-transform: uppercase;
}

thead th {
  padding: 10px;
}

tbody {
  color: #999;
}

tbody td {
  text-align: center;
  padding: 10px 20px;
}

tbody tr:nth-child(2n) {
  background-color: #222;
}

tbody td:first-child {
  text-align: left;
}

The special tr:nth-child(2n) selector means we will choose every second row and add a background color to it.

Adding content within the tabs including Font Awesome icon
13:41

For the footer we will use an HTML unordered list <ul> and the flex box to position the elements. <footer> itself is an HTML tag that defines the footer of the page.

<footer class="center size-90">
  <p>
    Questions? Call <a href="tel:900 866 617">900 866 617</a>
  </p>

  <ul class="columns flex-wrap">
    <li class="column is-25">
      <a href="https://help.netflix.com/support/412"><span>FAQ</span></a>
    </li>
    <li class="column is-25">
      <a href="https://help.netflix.com"><span>Help Center</span></a>
    </li>
    <li class="column is-25">
      <a href="https://www.netflix.com/yourAccount"><span>Account</span></a>
    </li>
    <li class="column is-25">
      <a href="https://media.netflix.com/"><span>Media Center</span></a>
    </li>
    <li class="column is-25">
      <a href="http://ir.netflix.com/"><span>Investor Relations</span></a>
    </li>
    <li class="column is-25">
      <a href="https://jobs.netflix.com/jobs"><span>Jobs</span></a>
    </li>
    <li class="column is-25">
      <a href="https://www.netflix.com/redeem"><span>Gift Cards</span></a>
    </li>
    <li class="column is-25">
      <a href="https://www.netflix.com/watch"><span>Ways to Watch</span></a>
    </li>
    <li class="column is-25">
      <a href="https://help.netflix.com/legal/termsofuse"><span>Terms of Use</span></a>
    </li>
    <li class="column is-25">
      <a href="https://help.netflix.com/legal/privacy"><span>Privacy</span></a>
    </li>
    <li class="column is-25">
      <a href="https://help.netflix.com/legal/privacy#cookies"><span>Cookie Preferences</span></a>
    </li>
    <li class="column is-25">
      <a href="https://fast.com"><span>Speed Test</span></a>
    </li>
    <li class="column is-25">
      <a href="https://www.netflix.com/es-en/originals"><span>Netflix Originals</span></a>
    </li>
  </ul>
</footer>

And the corresponding CSS:

footer a {
  color: #999;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

footer > p {
  margin: 0 0 30px;
}

footer > ul {
  margin: 0;
  padding: 0;
}

footer > ul > li {
  list-style: none;
  margin: 0 0 16px;
  padding-right: 12px;
  min-width: 100px;
  font-size: 13px;
}

Finally, we'll add the helper classes we used in HTML to style the positioning:

.columns.flex-wrap {
  flex-wrap: wrap;
}

.column.is-25 {
  flex: none;
  width: 25%;
}

Notice we've used the new property of the flex box called flex-wrap: wrap, which makes the elements wrap onto multiple lines if they don't fit the column horizontally.

The last bit on this page is the language selector and the copyright text. For that we'll use the HTML <select> tag and the icon from our FontAwesome library:

<div id="lang-selection">
  <i class="fa fa-globe" aria-hidden="true"></i>
  <select tabindex="0">
    <option value="es">Español</option>
    <option selected value="en">English</option>
  </select>
</div>

<p id="company">Netflix Spain</p>

And the corresponding CSS:

#lang-selection {
  margin-top: 20px;
  border: 1px solid #333;
  border-radius: 2px;
  display: inline-block;
  padding-left: 15px;
}

#lang-selection select {
  background-color: #000;
  border: none;
  color: #999;
  font-size: 14px;
  width: 130px;
  height: 48px;
  text-transform: uppercase;
  font-weight: 300;
}

#company {
  font-size: 13px;
  margin: 24px 0 50px;
}

That's it folks!

Adding the final footer section
05:22
+
Spotify
12 Lectures 01:04:12

In this session we will clone the Spotify landing page. We'll use the concepts of HTML and CSS we've explained in the previous session with the Netflix clone and build upon that. Therefore, if you haven't followed it along, please do so now.

The overall site is pretty similar to Netflix. It also has the navigation in the top, several main sections, and the footer. Additionally, it has some effects with JavaScript, such as carousel, which we will skim through - remember we're mostly focused on learning HTML/CSS and JavaScript is beyond the scope of this material.

 

Project introduction
01:09

In the last session, we've built everything from scratch with CSS. However, because it's so common to create grids, buttons, dropdowns, and other components in CSS and JavaScript, folks from various companies have outsourced their code and created so called HTML/CSS/JS frameworks.

Perhaps the most known and used one is the Twitter's Bootstrap framework and that's what we gonna use in this session.

So, let's create a basic HTML structure with Bootstrap and their provided CSS/JS:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Spotify</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>

  <body>
    <h1>Hello Bootstrap</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

Notice how we've added the new <meta> property named viewport. This is required for building responsive websites. It instructs browser to adjust the page width to the screen (desktop, phone, etc.) and to start with an initial zoom of 1.

Basic HTML structure
03:08

From now on, whenever adding a new component to the page, we'll be following the layout outlined by Twitter Bootstrap framework. For instance, to add a navbar in a Bootstrap fashion:

<header class="navbar navbar-dark navbar-fixed-top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <a href="#">
        <span class="navbar-logo">Spotify</span>
      </a>
    </div>

    <nav class="collapse navbar-collapse" id="navbar-nav" role="navigation">
      <ul class="nav navbar-nav navbar-right nav-main">
        <li class="hidden">
          <a href="#" id="nav-link-Explore">
            Explore
          </a>
        </li>
        <li>
          <a href="#" id="nav-link-premium">
            Premium
          </a>
        </li>
        <li>
          <a href="#" id="nav-link-help">
            Help
          </a>
        </li>
        <li>
          <a href="#" id="nav-link-download">
            Download
          </a>
        </li>
        <li role="separator" class="divider"></li>
        <li>
          <a href="#" id="nav-link-sign-up">
            Sign up
          </a>
        </li>
        <li>
          <a href="#" id="header-login-link">
            Log In
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Notice how the CSS we linked styled the navigation bar and added the default mouse over and other effects. But that's default Bootstrap styles, let's customize them now with our own CSS. As previously, create a css folder with style.css and link it to the page:

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

Now, let's add the logo in SVG format to img folder. Finally, add the corresponding CSS:

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

.navbar-dark {
  background-color: rgba(0,0,0,.6);
}

.navbar-dark .navbar-nav>li>a {
  color: #fff;
  padding: 28px 17px;
  font-weight: 700;
  line-height: 24px;
}

.nav>li>a:focus,
.nav>li>a:hover {
  background-color: inherit;
  color: #9bf0e1;
}

.nav .divider {
  background-color: #d9dadc;
  width: 1px;
  height: 16px;
  margin: 32px 17px;
}

.navbar-logo {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 132px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
  float: left;
  background-image: url('../img/logo.svg');
}

 

Adding the navigation bar and using the Bootstrap framework
06:08

Let's add the main background above the header section.

HTML:

<div class="bg-main">
  <div class="bg-main-img"></div>
</div>

CSS:

.bg-main {
  width: 100%;
  height: 100%;
  background: linear-gradient(50deg, #ff4169 0, #7c26f8 100%);
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}

.bg-main-img {
  display: block;
  background-image: url('../img/bg-albums.png');
  width: 100%;
  height: 100%;
  background-position: center;
}
Adding the header background image and gradient
02:05

To add the carousel slider we will use two Bootstrap components. First is so called jumbotron, which is used to call the extra attention to the content by placing it in the middle and to extend to the entire viewport.

Then, inside jumbotron, we will add the Bootstrap carousel, which uses JavaScript to create beautiful, responsive slider.

So, let's get to HTML part first:

<div class="jumbotron">
  <div class="container">
    <div id="carousel-tour" class="carousel slide" data-ride="carousel" data-interval="false">

      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-tour" data-slide-to="0" class="active js-button-hero-carousel-dots"></li>
        <li data-target="#carousel-tour" data-slide-to="1" class="js-button-hero-carousel-dots"></li>
        <li data-target="#carousel-tour" data-slide-to="2" class="js-button-hero-carousel-dots"></li>
        <li data-target="#carousel-tour" data-slide-to="3" class="js-button-hero-carousel-dots"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox" style="height: 307px;">
        <div class="item active">
          <h1>
            <span class="text-white">
              3 months of Premium for $0.99.
            </span>
          </h1>
          <a href="#" class="btn btn-lg btn-solid js-button-hero-get-premium">
            Learn More
          </a>
          <p class="text-center text-white text-signup">
            Or sign up for our <a href="#" class="js-goto-signup">free service</a>.
          </p>
        </div>

        <div class="item">
          <h1>
            <span class="text-white">
              Premium for your whole family.<br>Just $14.99.
            </span>
          </h1>
          <a href="#" class="btn btn-solid js-button-hero-family">
            LEARN MORE
          </a>
        </div>

        <div class="item">
          <h1>
            <span class="text-white">
              Students get 50% off Premium.
            </span>
          </h1>
          <a href="#" class="btn btn-solid js-button-hero-student">
            LEARN MORE
          </a>
        </div>

        <div class="item">
          <h1>
            <span class="text-white">
              Play Spotify on PlayStation®.
            </span>
          </h1>
          <a href="#" class="btn btn-solid js-button-hero-playstation">
            LEARN MORE
          </a>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control js-button-hero-carousel-left-arrow" href="#carousel-tour" data-slide="prev">
        <span class="icon-prev"></span>
        <span class="sr-only">
          Previous
        </span>
      </a>
      <a class="right carousel-control js-button-hero-carousel-right-arrow" href="#carousel-tour" data-slide="next">
        <span class="icon-next"></span>
        <span class="sr-only">
          Next
        </span>
      </a>
    </div>
  </div>
</div>

And then applying CSS:

.text-white {
  color: white;
}

.jumbotron {
  background: none;
  padding: 100px 0;
  text-align: center;
  margin: 0;
}

.carousel-control.right, .carousel-control.left {
  background: none;
}

.btn {
  padding: 17px 48px;
  font-size: 14px;
  line-height: 1;
  border-radius: 500px;
  padding: 18px 48px 16px;
  transition-property: background-color,border-color,color,box-shadow,filter;
  transition-duration: .3s;
  border-width: 0;
  letter-spacing: 2px;
  min-width: 160px;
  text-transform: uppercase;
  white-space: normal;
}

.jumbotron .btn {
  margin: 20px 10px 30px;
}

.btn-solid {
  color: #fff;
  background-color: #7c25f8;
}
.btn-solid:hover {
  color: #fff;
  background-color: #6207e3;
}

.btn-lg {
  font-size: 16px;
  line-height: 1;
  border-radius: 500px;
  padding: 21px 56px 19px;
}

.item h1 {
  font-weight: 900;
}

.text-signup a {
  color: #fff;
  text-decoration: underline;
}

#carousel-tour {
  margin-top: 50px;
}

Notice how we've added transition-property and transition-duration to the .btn class. This specifies the properties to apply transition effect, in this case background-color,border-color,color,box-shadow,filter and for how long it will last, which is 0.3 second in our case.

Adding the header carousel, slides and content with the Jumbotron component
07:38

What you'd notice is we don't have the same fonts that Spotify has. For that, we'll add their circular-medium.woff2font to our css directory and use the CSS @font-face rule to define our custom font:

@font-face {
  font-family: Circular;
  src: url('circular-medium.woff2');
}

...
body {
  font-family: Circular,Helvetica,Arial,sans-serif;
  ...
}

 

Adding custom fonts
01:28

Now, let's move on to "What's on Spotify" section.

HTML:

<div class="container">
  <a class="btn-scroll" name="whats-on-spotify" href="#whats-on-spotify">
    <span class="btn-scroll-text">LEARN ABOUT SPOTIFY</span>
  </a>
</div>

<div class="jumbotron jumbotron-whats-on bg-white">
  <div class="container">
    <div class="row">
      <div class="col-sm-7 col-sm-push-5 col-md-5 col-md-push-7">
        <h2 class="text-klein-purple">
          What’s on Spotify?
        </h2>
        <div>
          <h3 class="text-klein-purple">
            Music
          </h3>
          <p>
            There are millions of songs on Spotify. Play your favorites, discover new tracks, and build the perfect collection.
          </p>
        </div>
        <div>
          <h3 class="text-klein-purple">
            Playlists
          </h3>
          <p>
            You’ll find readymade playlists to match your mood, put together by music fans and experts.
          </p>
        </div>
        <div>
          <h3 class="text-klein-purple">
            New Releases
          </h3>
          <p>
            Hear this week’s latest singles and albums, and check out what’s hot in the Top 50.
          </p>
        </div>
      </div>

      <div class="col-sm-5 col-sm-pull-7 col-md-6 col-md-pull-5">
        <div class="albums row">
          <img src="https://i.scdn.co/image/6c41981dc659cc8a19a0371f42951d8dec48db7c"
               class="album-img col-sm-6"/>
          <img src="https://i.scdn.co/image/24a63c5c743b4376b7b7d570cf4a83ea017382fd"
               class="album-img col-sm-6"/>
          <img src="https://i.scdn.co/image/017f05aea238929a9b3970743a879c90bfff23ca"
               class="album-img col-sm-6"/>
          <img src="https://i.scdn.co/image/62cbbb3ffd4dd111c11e8f0d2ac0c5dfa1585a1f"
               class="album-img col-sm-6"/>
        </div>
      </div>
    </div>
  </div>
</div>

And the corresponding CSS:

...

.text-klein-purple {
  color: #7c25f8;
}
...
.bg-white {
  background-color: #fff;
}
...
a.btn-scroll {
  text-decoration: none;
  color: white;
  display: block;
  text-align: center;
}

a.btn-scroll:hover {
  color: #9bf0e1;
}

.btn-scroll-text {
  text-transform: uppercase;
  transition: color .3s ease-in-out;
  display: block;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 20px;
}

h2 {
  font-size: 50px;
  line-height: 1;
  margin: 0 0 .75em;
  font-weight: 900;
}

h3 {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.4;
}

.jumbotron-whats-on {
  text-align: left;
  padding: 180px 0;
}

.jumbotron p {
  font-weight: 400;
  font-size: 18px;
  margin: 1em 0;
}

.album-img {
  padding: 0;
}

 

Adding a content section with two columns
08:17

The next section are the benefits of the app with some cool phone images. First, HTML:

<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-sm-4 text-left text-white">
        <div>
          <h2>
            It's easy.
          </h2>
        </div>
        <div>
          <h3 class="text-aquamarine">
            Search
          </h3>
          <p>
            Know what you want to listen to? Just search and hit play.
          </p>
        </div>
        <div>
          <h3 class="text-aquamarine">
            Browse
          </h3>
          <p>
            Check out the latest charts, brand new releases and great playlists for right now.
          </p>
        </div>
        <div>
          <h3 class="text-aquamarine">
            Discover
          </h3>
          <p>
            Enjoy new music every Monday with your own personal playlist. Or sit back and enjoy Radio.
          </p>
        </div>
      </div>

      <div class="devices-container">
        <div class="row">
          <div class="col-xs-4">
            <div class="iphone iphone-1">
              <img src="https://d2c87l0yth4zbw-2.global.ssl.fastly.net/i/home/iphone-1a.jpg">
            </div>
          </div>
          <div class="col-xs-4">
            <div class="iphone iphone-2">
              <img src="https://d2c87l0yth4zbw.global.ssl.fastly.net/i/home/iphone-2.jpg">
            </div>
            <div class="iphone iphone-3">
              <img src="https://d2c87l0yth4zbw-2.global.ssl.fastly.net/i/home/iphone-3.jpg">
            </div>
          </div>
          <div class="col-xs-4">
            <div class="iphone iphone-4">
              <img src="https://d2c87l0yth4zbw-2.global.ssl.fastly.net/i/home/iphone-4.jpg">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

And CSS:

.text-aquamarine {
  color: #9bf0e1;
}
...
.iphone {
  width: 358px;
  height: 730px;
  padding: 80px 22px 0;
  margin-bottom: 30px;
  background: url('../img/iphone-klein-purple.png') no-repeat;
  background-size: cover;
}

.iphone-1, .iphone-4 {
  margin-top: 200px;
}

.devices-container {
  margin-top: -350px;
  margin-bottom: -620px;
  margin-right: -100%;
  float: left;
  transform: rotate(30deg) translate3d(0,40px,0);
}

.devices-container img {
  max-width: 100%;
}

As earlier, we've used the CSS transform property, but now a shorter form where we can put a number of transformation properties in a single line. Here, we rotate by 30 degrees and also use CSS 3D transformation to move the images by 40px on y-axis.

Adding another section with CSS rotated images
05:09

Next up, supported devices section. HTML:

<div class="jumbotron jumbotron-devices">
  <div class="container">
    <img class="center-block" src="https://d2c87l0yth4zbw.global.ssl.fastly.net/i/home/all-devices.svg">
    <div>
      <h2>
        <span class="text-white">
          One account. Listen everywhere.
        </span>
      </h2>
    </div>
    <ul class="device-list text-white">
      <li>Mobile</li>
      <li>Computer</li>
      <li>Tablet</li>
      <li>Car</li>
    </ul>
    <ul class="device-list text-white">
      <li>Speaker</li>
      <li><a href="#">PlayStation®</a></li>
      <li>TV</li>
      <li><a href="#">Web Player</a></li>
    </ul>
  </div>
</div>

CSS:

.jumbotron-devices {
  background: #222326;
}

.jumbotron-devices img {
  margin-bottom: 60px;
}

.jumbotron-devices .device-list {
  display: inline;
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
  text-transform: uppercase;
  font-weight: 700;
}

.jumbotron-devices .device-list li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  margin: 1em 0;
}

.jumbotron-devices .device-list li:after {
  content: '-';
  padding-left: 14px;
  color: #7c25f8;
}

.jumbotron-devices .device-list li:last-child:after {
  content: '';
}

.jumbotron-devices .device-list a {
  color: white;
  border-bottom: 1px solid white;
  text-decoration: none;
}

And to fix the overlapping of the previous section, we could add:

.jumbotron {
  ...
  position: relative;
}

 

Adding an informational section with an image and inline links
04:06

This one is pretty straightforward:

<div class="jumbotron jumbotron-subscriptions">
  <div class="container">
    <div class="row">
      <div class="col-md-10">
        <div class="row">
          <div class="col-sm-10 col-lg-8">
            <div>
              <h1>
                <span class="text-white">
                  Go get the music.
                </span>
              </h1>
            </div>
            <div>
              <p class="text-white">
                Listen free.
                <br>
                Or go Premium to play on-demand, anywhere.
              </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-10">
            <div>
              <h3 class="price-title text-aquamarine">Spotify</h3>
              <h3 class="price text-white">
                $0.00 <span class="month text-aquamarine"> / month</span>
              </h3>
              <div class="clearfix"></div>
              <ul class="details-subscriptions text-white">
                <li>
                  Enjoy your favorite albums and artists, with occasional ads.
                </li>
              </ul>
              <a href="#" class="btn btn-solid">
                GET SPOTIFY FREE
              </a>
            </div>

            <div class="clearfix"></div>


            <div class="animated animatedFadeInUp fadeInUp">
              <h3 class="price-title text-aquamarine">
                Spotify Premium
              </h3>
              <h3 class="price text-white">
                $0.99 <span class="month text-aquamarine"> /3 months</span>
              </h3>
              <div class="clearfix"></div>
              <div class="tour-variation">
                <p class="h3-sub text-white"><a href="/us/family/" data-ga-category="home (subscriptions)" data-ga-action="family">Family</a> and <a href="/us/student/" data-ga-category="home (subscriptions)" data-ga-action="student">Student</a> offers available</p>

                <p class="h3-sub text-white">Only $9.99/month after.</p>
              </div>
              <div class="clearfix"></div>

              <ul class="details-subscriptions text-white">
                <li>
                  Play on-demand.
                </li>
                <li>
                  Listen offline.
                </li>
                <li>
                  No ads.
                </li>
                <li>
                  High quality audio.
                </li>
              </ul>
              <a href="#" class="btn btn-solid">
                GET SPOTIFY PREMIUM
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-overflow hidden-xs hidden-sm">
        <div class="animated animatedFadeInUp fadeInUp">
          <div class="nexus">
            <img src="https://d2c87l0yth4zbw.global.ssl.fastly.net/i/home/android-1.jpg" style="display: block;">
          </div>
        </div>
      </div>
    </div>
    <p class="text-center legal text-white">
      Only $9.99/month after. Offer not available to users who already tried Premium. <a class="text-aquamarine" href="#">Terms apply.</a>
    </p>
  </div>
</div>

As you noticed, we've used .grid-overflow class, which we will use to extract the image positioning functionality we used in devices section:

.devices-container {
  margin-top: -350px;
  margin-bottom: -620px;
  transform: rotate(30deg) translate3d(0,40px,0);
}

.grid-overflow {
  margin-right: -100%;
  float: left;
}

And finally add the grid-overflow class to devices-container:

<div class="grid-overflow devices-container">

We're all set to put the last bits of CSS for this section:

.jumbotron h1 {
  font-weight: 900;
}
...


.jumbotron-subscriptions {
  padding: 150px 0 0;
  text-align: left;
}

.jumbotron-subscriptions .btn {
  margin-top: 30px;
  margin-bottom: 70px;
}

.price-title {
  float: left;
  margin: 0;
}

.price {
  float: right;
  margin: 0 0 12px;
}

.month {
  font-size: 20px;
}

.details-subscriptions {
  border: 1px solid white;
  border-left: 0;
  border-right: 0;
  padding: 16px 0;
  padding-left: 0;
  list-style: none;
  font-weight: 700;
  margin-bottom: 0;
}

.details-subscriptions {
  font-size: 24px;
}

.tour-variation p:first-child {
  float: left;
}

.tour-variation p:last-child {
  float: right;
}

.tour-variation a {
  color: #9bf0e1;
  text-decoration: none;
}

.tour-variation a:hover {
  color: #42e3c6;
}

p.legal {
  font-size: 12px;
  margin-top: 8px;
}

p.legal a {
  text-decoration: underline;
}

p.legal a:hover {
  color: #42e3c6;
}

.nexus {
  width: 458px;
  height: 873px;
  padding: 60px 24px 0 18px;
  background: url('../img/nexus-klein-purple.png') no-repeat;
  background-size: cover;
  margin-bottom: -50%;
}

.nexus img {
  max-width: 100%;
}

 

Adding the subscriptions section
10:39

The last bit of this page is the footer section.

  <footer role="contentinfo" class="footer footer-highlight-aquamarine">
    <div class="container">
      <nav class="row">

        <div class="col-xs-12 col-md-2">
          <div class="footer-logo">
            <a href="#">Spotify</a>
          </div>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-2">
          <h3 class="nav-title">Company</h3>
          <ul class="nav">

            <li>
              <a href="#" id="nav-link-about">
                About
              </a>
            </li>

            <li>
              <a href="#" id="nav-link-jobs">
                Jobs
              </a>
            </li>

            <li>
              <a href="#" id="nav-link-press">
                Press
              </a>
            </li>

            <li>
              <a href="#" id="nav-link-news">
                News
              </a>
            </li>

          </ul>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-2">
          <h3 class="nav-title">Communities</h3>
          <ul class="nav">

            <li>
              <a href="#" id="nav-link-artists">
                For Artists
              </a>
            </li>

            <li>
              <a href="#" id="nav-link-developers">
                Developers
              </a>
            </li>

            <li>
              <a href="#" id="nav-link-brands">
                Brands
              </a>
            </li>

          </ul>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-2">
          <h3 class="nav-title">Useful links</h3>
          <ul class="nav">
            <li>
              <a href="#" id="nav-link-help">
                Help
              </a>
            </li>

            <li>
              <a href="#" id="nav-link-gift">
                Gift
              </a>
            </li>

            <li class="hidden-xs ">
              <a href="#" id="nav-link-play">
                Web Player
              </a>
            </li>

          </ul>
        </div>

        <div class="col-xs-12 col-md-4 col-social">
          <ul class="nav">
            <li>
              <a href="#">
                <img alt="instagram" src="img/instagram-icon.svg"/>
              </a>
            </li>
            <li>
              <a href="#">
                <img alt="twitter" src="img/twitter-icon.svg"/>
              </a>
            </li>
            <li>
              <a href="#">
                <img alt="facebook" src="img/facebook-icon.svg"/>
              </a>
            </li>
          </ul>
        </div>
      </nav>

      <nav class="row row-small">
        <div class="col-xs-8 col-md-6">

          <ul class="nav nav-small">
            <li>
              <a href="#">Legal</a>
            </li>
            <li>
              <a href="#">Privacy</a>
            </li>
            <li>
              <a href="#">Cookies</a>
            </li>
            <li>
              <a href="#">About Ads</a>
            </li>
          </ul>
        </div>

        <div class="col-xs-4 col-md-6 text-right">
          <a class="market" href="#" title="Click to change">
            <div class="media">
              <div class="media-body media-middle">
                USA
              </div>
              <div class="media-right media-middle">
                <span class="media-object flag-icon flag-icon-us"></span>
              </div>
            </div>
          </a>

          <small class="copyright">© 2017 Spotify AB</small>
        </div>
      </nav>
    </div>
  </footer>

And the CSS:

.footer {
  background-color: black;
  color: white;
  padding: 80px 0 50px;
  text-align: left;
}

.footer-highlight-aquamarine a {
  color: white;
}

.footer-highlight-aquamarine a:hover {
  color: #9bf0e1;
}

.footer-logo a {
  display: block;
  width: 132px;
  height: 40px;
  font: 0/0 a;
  color: transparent;
  border: 0;
  background-image: url('../img/logo.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 50px;
}

.footer .nav-title {
  color: #919496;
  font-size: 12px;
  letter-spacing: .08em;
  margin: 20px 0;
  text-transform: uppercase;
}

.footer .nav li a {
  padding: 3px 0;
  margin: 0 0 12px;
}

.col-social {
  margin-top: 20px;
}

.footer .col-social ul {
  float: right;
}

.footer .col-social li {
  display: inline-block;
}

.footer .col-social li a {
  padding: 15px;
  margin-bottom: 12px;
  background-color: #222326;
  border-radius: 30px;
}

.footer .col-social a:hover {
  background-color: #222326;
}

.col-social a img {
  width: 24px;
  height: 24px;
}

.footer .nav-small a {
  color: #919496;
}

.footer .nav-small li a {
  float: left;
  font-size: 12px;
  font-weight: 400;
  padding: 12px;
  margin: 0;
}

.row-small {
  margin-top: 100px;
}

.footer .nav-small li:first-child a {
  padding-left: 0;
}

.flag-icon-us {
    background-image: url('https://sp-bootstrap.global.ssl.fastly.net/8.0.0/images/flags/us.svg');
}

.flag-icon {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  font-size: 18px;
  height: 1em;
  width: 1.33333333em;
}

.market, .copyright {
  color: #919496;
  font-size: 12px;
}

a.market {
  color: #919496;
  text-decoration: none;
}
Adding the footer
12:29

Fixing the width
01:56
+
Amazon
9 Lectures 01:05:20

In this session we will clone Amazon shopping landing page. We'll mostly use things we've learned in Netflix and Spotify clones, applying the similar techniques and using the frameworks we have seen before - Twitter's Bootstrap and Font Awesome.

Project introduction
00:31

As usually, let's start with defining the bare bones of the HTML page, linking necessary resources and applying default styles.

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more</title>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css"/>
</head>

<body>
  <!-- Main body -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

CSS:

html, body {
  margin: 0;
  font-family: arial,sans-serif;
  min-width: 900px;
  line-height: 14px;
  font-size: 14px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0066c0;
}

a:hover {
  color: #c45500;
}
Defining the basic page structure
03:12

Now we'll add the top banner that takes the full width of the page:

HTML:

<a id="banner" href="#"></a>

CSS:

#banner {
  background: #F6F6F6 url('../img/banner.jpg') no-repeat top left;
  height: 55px;
  background-size: 1920px;
  min-width: 1000px;
  display: block;
}
Adding a simple top banner
01:37

Adding the search bar with JavaScript to dynamically change options
18:32

Now to the nav-main, HTML:

<nav id="nav-main">
  <div class="nav-left">
    <div class="nav-shop">
      <a class="nav-a" href="#">
        Departments
        <i class="fa fa-caret-down" aria-hidden="true"></i>
      </a>
    </div>
  </div>
  <div class="nav-right">
    <a class="nav-a" href="#">
      <span>EN</span>
      <i class="fa fa-globe" aria-hidden="true"></i>
      <i class="fa fa-caret-down" aria-hidden="true"></i>
    </a>

    <a class="nav-a" href="#">
      <span>Hello. Sign in</span>
      Accounts & Lists
      <i class="fa fa-caret-down" aria-hidden="true"></i>
    </a>

    <a class="nav-a" href="#">
      Orders
    </a>

    <a class="nav-a" href="#">
      Try Prime
      <i class="fa fa-caret-down" aria-hidden="true"></i>
    </a>

    <a class="nav-a cart" href="#">
      <span>0</span>
      Cart
    </a>
  </div>
  <div class="nav-fill">
    <ul>
      <li><a href="#">Your Amazon.com</a></li>
      <li><a href="#">Today's Deals</a></li>
      <li><a href="#">Gift Cards & Registry</a></li>
      <li><a href="#">Sell</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </div>
</nav>

And the corresponding CSS:

#nav-main ul {
  list-style-type: none;
  position: relative;
  padding: 0;
  margin: 18px 0 0 0;
}

#nav-main li {
  display: inline-block;
  padding: 10px 9px 0 0;
}

#nav-main a {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

#nav-main .nav-a {
  padding: 7px 10px;
  border: 1px solid transparent;
  display: inline-block;
  position: relative;
}

#nav-main .nav-a:hover {
  border: 1px solid #4f5965;
  border-radius: 3px;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.5);
}

#nav-main .nav-a span {
  display: block;
  margin-left: -2px;
  font-weight: 300;
  color: #ccc;
  font-size: 12px;
}

#nav-main i.fa-caret-down {
  color: #ccc;
  font-size: 11px;
  padding-left: 3px;
}

#nav-main .nav-left {
  height: 55px;
}

#nav-main .nav-left .nav-shop {
  float: left;
  width: 192px;
  padding: 4px 12px 0 15px;
}

#nav-main .nav-left .nav-shop a {
  margin-top: 16px;
}

#nav-main .nav-fill a {
  font-weight: 500;
  color: #ccc;
}

#nav-main .nav-fill a:hover {
  text-decoration: underline;
}

#nav-main .nav-right {
  padding-right: 6px;
}

#nav-main .nav-right a {
  margin-top: 6px;
}

#nav-main .nav-right .cart {
  background: transparent url(../img/cart.png) no-repeat 11px 11px;
  background-size: 39px;
  padding: 7px 20px 7px 50px;
}

#nav-main .nav-right .cart span {
  color: #f08804;
  margin-left: -20px;
  font-size: 16px;
  font-weight: 700;
}

 

Adding the second layer of navigation links
10:18

To add the slides to the page, we'll be using the same Bootstrap Caoursel component we've used in other clones.

HTML:

<section id="promo">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div id="promo-carousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="img/slide_1.jpg">
            </div>
            <div class="item">
              <img src="img/slide_2.jpg">
            </div>
            <div class="item">
              <img src="img/slide_3.jpg">
            </div>
            <div class="item">
              <img src="img/slide_4.jpg">
            </div>
            <div class="item">
              <img src="img/slide_5.jpg">
            </div>
            <div class="item">
              <img src="img/slide_6.jpg">
            </div>
            <div class="item">
              <img src="img/slide_7.jpg">
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#promo-carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#promo-carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

CSS:

@media (min-width: 1200px) {
  .container {
    width: 1560px;
  }
}

#promo .col-lg-12 {
  padding: 0 22px 10px 22px;
}

#promo .carousel {
  margin-top: -2px;
}

###pBootstrap grid system to make it wider, as on the original website.

Adding the Bootstrap carousel with sliders
03:38

Now we can add the featured products of the page, HTML:

<section id="products">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="col-lg-3">
          <div class="col text-center" id="welcome">
            <h2>Welcome</h2>
            <p>Sign in for the best experience</p>
            <button class="btn">Sign in securely</button>
            <div class="footer">
              New to Amazon? <a href="#">Start here</a>
            </div>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="col" id="amazon-basics">
            <h2>Explore AmazonBasics</h2>
            <a href="#" class="thumbnail text-center">
              <img src="img/product_1.jpg" alt="Product 1">
              <span class="caption">Home</span>
            </a>
            <a href="#" class="thumbnail text-center">
              <img src="img/product_2.jpg" alt="Product 2">
              <span class="caption">Bluetooth</span>
            </a>
            <a href="#" class="thumbnail text-center">
              <img src="img/product_3.jpg" alt="Product 3">
              <span class="caption">Pets</span>
            </a>
            <a href="#" class="thumbnail text-center">
              <img src="img/product_4.jpg" alt="Product 4">
              <span class="caption">Computer</span>
            </a>
            <div class="footer">
              <a href="#">Shop all AmazonBasics</a>
            </div>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="col" id="dress">
            <h2>The dress shop</h2>
            <div class="row text-center">
              <a href="#"><img src="img/dress.png"></a>
            </div>

            <div class="footer">
              <a href="#">Shop women's dresses</a>
            </div>
          </div>
        </div>
        <div class="col-lg-3">
          <div>
            <a href="#"><img src="img/product_5.jpg" alt="Product 5"></a>
          </div>
          <div class="col" id="deal-day">
            <h2>Deal of the day</h2>
            <h3>$163.99</h3>
            <small>List: <s>$425.00</s> (47% off)</small>
            <a href="#"><img src="img/product_6.jpg" alt="Product 6"></a>
            <div class="footer">
              <a href="#">Shop all deals</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

And the CSS:

.col-lg-3 {
  padding: 0 7px;
}

.text-center {
  text-align: center;
}

h2 {
  color: #111;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  padding-bottom: 15px;
}

h3 {
  color: #111;
  font-size: 28px;
  font-weight: 500;
}

.btn {
  height: 29px;
  padding: 2px 20px;
  background: linear-gradient(to bottom,#f7dfa5,#f0c14b);
  border-color: #a88734 #9c7e31 #846a29;
  color: #111;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  font-size: 13px;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
  border-radius: 3px;
}

.btn:hover {
  border-color: #a88734 #9c7e31 #846a29;
  background: linear-gradient(to bottom,#f5d78e,#eeb933);
  color: #111;
}

#products {
  padding: 0 0 60px 0;
}

#products .col {
  background: rgba(19,19,4,.04);
  padding: 15px;
  min-height: 578px;
  position: relative;
}

#products h2 {
  margin: 0;
}

#products img {
  max-width: 100%;
}

#products .thumbnail {
  display: inline-block;
  padding: 0;
  border: none;
  margin: 8px;
  background: none;
}

#products .thumbnail:hover {
  text-decoration: none;
}

#products .thumbnail .caption {
  padding: 0;
  margin: 12px 0 4px 0;
  display: inline-block;
  color: #111;
  font-size: 13px;
}

#products #welcome {
  padding-top: 80px;
}

#products #welcome h2 {
  font-size: 26px;
}

#products #welcome p {
  font-size: 13px;
  color: #111;
  margin-bottom: 60px;
}

#products #welcome .btn {
  width: 100%;
}

#products #amazon-basics img {
  max-width: 151px;
}

#products #dress img {
  max-width: 200px;
}

#products #deal-day {
  margin-top: 20px;
  position: relative;
  min-height: 250px !important;
}

#products #deal-day h2 {
  margin-bottom: 15px;
}

#products #deal-day h3 {
  margin: 0;
  line-height: 26px;
}

#products #deal-day img {
  max-width: 88px;
  position: absolute;
  right: 30px;
  top: 50px;
}

#products .footer {
  position: absolute;
  bottom: 0;
  border-top: 1px solid #e7e7e7;
  width: 90%;
  padding: 17px 0 17px;
  font-size: 13px;
  color: #555;
}

 

Adding the four product columns
12:58

Amazon's footer is huge, so we'll break it into 3 components, the "top", "middle" and "bottom". Let's start with the top that has the "Back to top" link:

<header>
  <a id="nav-top"></a>
  ...
</header>

<footer>
  <div class="top text-center">
    <a href="#nav-top">Back to top</a>
  </div>
</footer>

CSS:

footer a {
  color: #fff;
}

footer .top {
  background: #37475a;
}

footer .top a {
  padding: 17px;
  width: 100%;
  display: inline-block;
}

footer .top a:hover {
  color: #fff;
  text-decoration: none;
}

footer .top:hover {
  background: #485769;
}

Now, we can move to the middle part of the footer together with the store selector:

...
<div class="middle">
  <div class="center">
    <ul>
      <li><h3>Get to Know Us</h3></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#">About Amazon</a></li>
      <li><a href="#">Investor Relations</a></li>
      <li><a href="#">Amazon Devices</a></li>
    </ul>
    <ul>
      <li><h3>Make Money with Us</h3></li>
      <li><a href="#">Sell on Amazon</a></li>
      <li><a href="#">Sell Your Services on Amazon</a></li>
      <li><a href="#">Sell on Amazon Business</a></li>
      <li><a href="#">Sell Your Apps on Amazon</a></li>
      <li><a href="#">Become an Affiliate</a></li>
      <li><a href="#">Advertise Your Products</a></li>
      <li><a href="#">Self-Publish with Us</a></li>
      <li><a href="#">Become an Amazon Vendor</a></li>
      <li><a href="#">Sell Your Subscription on Amazon</a></li>
      <li><a href="#">› See all</a></li>
    </ul>
    <ul>
      <li><h3>Amazon Payment Products</h3></li>
      <li><a href="#">Amazon Rewards Visa Signature Cards</a></li>
      <li><a href="#">Amazon.com Store Card</a></li>
      <li><a href="#">Amazon.com Corporate Credit Line</a></li>
      <li><a href="#">Shop with Points</a></li>
      <li><a href="#">Credit Card Marketplace</a></li>
      <li><a href="#">Reload Your Balance</a></li>
      <li><a href="#">Amazon Currency Converter</a></li>
    </ul>
    <ul>
      <li><h3>Let Us Help You</h3></li>
      <li><a href="#">Your Account</a></li>
      <li><a href="#">Your Orders</a></li>
      <li><a href="#">Shipping Rates & Policies</a></li>
      <li><a href="#">Amazon Prime</a></li>
      <li><a href="#">Returns & Replacements</a></li>
      <li><a href="#">Manage Your Content and Devices</a></li>
      <li><a href="#">Amazon Assistant</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </div>

  <ul class="copy text-center">
    <li><a href="#" class="logo"></a></li>
    <li><a href="#" class="select"><i class="fa fa-globe" aria-hidden="true"></i> English</a></li>
    <li><a href="#" class="select"><i class="flag-icon-us"></i>United States</a></li>
  </ul>
</div>
</footer>

CSS:

footer .center {
  margin: 0 auto;
  max-width: 1080px;
}

footer ul {
  margin: 30px 40px 30px 0;
  display: inline-block;
  vertical-align: top;
  list-style: none;
}

footer .middle {
  background: #232f3e;
}

footer .middle h3 {
  color: #fff;
  font-weight: 700;
  margin-bottom 10px;
  padding: 0;
  font-size: 16px;
}

footer .middle li {
  position: relative;
}

footer .middle .logo {
  background: transparent url('../img/logo.png') no-repeat 0 0;
  background-size: 76px;
  width: 76px;
  height: 23px;
  display: block;
  border: none !important;
  margin-right: 60px;
  position: absolute;
  top: -14px;
  left: -120px;
}

footer .middle a {
  color: #ddd;
  font-size: 13px;
  display: block;
  padding: 5px 0;
}

footer ul.copy {
  display: inline-block;
  width: 100%;
}

footer ul.copy li {
  display: inline-block;
  margin-right: 20px;
  color: #999;
  font-size: 11px;
}

footer .middle .copy {
  border-top: 1px solid #3a4553;
  padding: 30px 20px 20px 20px;
}

footer .middle .copy a {
  padding: 10px 30px 10px 10px;
  color: #ccc;
  border: 1px solid #848688;
  border-radius: 3px;
}

footer .middle .copy a:hover {
  text-decoration: none;
  border-color: #8D9096;
}

footer .middle .fa-globe {
  margin-right: 5px;
}

footer .middle .flag-icon-us {
  background-image: url('https://sp-bootstrap.global.ssl.fastly.net/8.0.0/images/flags/us.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 1em;
  width: 1.33333333em;
  margin-right: 7px;
  background-position: 0 2px;
}
Adding the fist footer
10:46

Finally, we can wrap it up with the bottom footer:

..
  <div class="bottom">
    <div class="center">
      <ul>
        <li><a href="#">Amazon Music<br/><span>Stream millions<br> of songs</span></a></li>
        <li><a href="#">AmazonFresh<br/><span>Groceries & More<br> Right To Your Door</span></a></li>
        <li><a href="#">Amazon Web Services<br/><span>Scalable Cloud<br> Computing Services</span></a></li>
        <li><a href="#">East Dane<br/><span>Designer Men's<br> Fashion</span></a></li>
        <li><a href="#">Prime Now<br/><span>FREE 2-Hour Delivery<br> on Everyday Items</span></a></li>
      </ul>

      <ul>
        <li><a href="#">Amazon Drive<br/><span>Cloud storage<br> from Amazon</span></a></li>
        <li><a href="#">AmazonGlobal<br/><span>Ship Orders<br> Internationally</span></a></li>
        <li><a href="#">Audible<br/><span>Download<br> Audio Books</span></a></li>
        <li><a href="#">Fabric<br/><span>Sewing, Quilting<br> & Knitting</span></a></li>
        <li><a href="#">Prime Photos<br/><span>Unlimited Photo Storage<br> Free With Prime</span></a></li>
        <li><a href="#">Woot!<br/><span>Deals and <br> Shenanigans</span></a></li>
      </ul>

      <ul>
        <li><a href="#">6pm<br/><span>Score deals<br> on fashion brands</span></a></li>
        <li><a href="#">Home Services<br/><span>Handpicked Pros<br> Happiness Guarantee</span></a></li>
        <li><a href="#">Book Depository<br/><span>Books With Free<br> Delivery Worldwide</span></a></li>
        <li><a href="#">Goodreads<br/><span>Book reviews<br> & recommendations</span></a></li>
        <li><a href="#">Shopbop<br/><span>Designer<br> Fashion Brands</span></a></li>
        <li><a href="#">Zappos<br/><span>Shoes &<br> Clothing</span></a></li>
      </ul>

      <ul>
        <li><a href="#">AbeBooks<br/><span>Books, art<br> & collectibles</span></a></li>
        <li><a href="#">Amazon Inspire<br/><span>Free Digital Educational<br>  Resources</span></a></li>
        <li><a href="#">Box Office Mojo<br/><span>Find Movie<br> Box Office Data</span></a></li>
        <li><a href="#">IMDb<br/><span>Movies, TV<br> & Celebrities</span></a></li>
        <li><a href="#">TenMarks.com<br/><span>Math Activities<br> for Kids & Schools</span></a></li>
        <li><a href="#">Souq.com<br/><span>Shop Online in<br> the Middle East</span></a></li>
      </ul>

      <ul>
        <li><a href="#">ACX <br/><span>Audiobook Publishing<br> Made Easy</span></a></li>
        <li><a href="#">Amazon Rapids<br/><span>Fun stories for<br>  kids on the go</span></a></li>
        <li><a href="#">ComiXology<br/><span>Thousands of<br> Digital Comics</span></a></li>
        <li><a href="#">IMDbPro<br/><span>Get Info Entertainment<br> Professionals Need</span></a></li>
        <li><a href="#">Warehouse Deals<br/><span>Open-Box<br> Discounts</span></a></li>
        <li><a href="#">Subscribe with Amazon<br/><span>Discover & try<br> subscription services</span></a></li>
      </ul>

      <ul>
        <li><a href="#">Alexa<br/><span>Actionable Analytics<br> for the Web</span></a></li>
        <li><a href="#">Amazon Restaurants<br/><span>Food delivery from<br> local restaurants</span></a></li>
        <li><a href="#">CreateSpace<br/><span>Indie Print Publishing<br> Made Easy</span></a></li>
        <li><a href="#">Junglee.com<br/><span>Shop Online<br> in India</span></a></li>
        <li><a href="#">Whispercast<br/><span>Discover & Distribute<br> Digital Content</span></a></li>
      </ul>

      <ul>
        <li><a href="#">Amazon Business<br/><span>Everything For<br> Your Business</span></a></li>
        <li><a href="#">Amazon Video Direct<br/><span>Video Distribution<br> Made Easy</span></a></li>
        <li><a href="#">DPReview<br/><span>Digital<br> Photography</span></a></li>
        <li><a href="#">Kindle Direct Publishing<br/><span>Indie Digital Publishing<br> Made Easy</span></a></li>
        <li><a href="#">Withoutabox<br/><span>Submit to<br> Film Festivals</span></a></li>
      </ul>

      <ul class="copy text-center">
        <li><a href="#">Conditions of Use</a></li>
        <li><a href="#">Privacy Notice</a></li>
        <li><a href="#">Interest-Based Ads</a></li>
        <li>© 1996-2017, Amazon.com, Inc. or its affiliates</li>
      </ul>
    </div>
  </div>
</footer>

CSS:

footer .bottom {
  background: #131a22;
}

footer .bottom ul {
  margin-right: 0;
}

footer .bottom li {
  margin-bottom: 15px;
}

footer .bottom a {
  color: #ddd;
  font-size: 11px;
  line-height: 11px;
}

footer .bottom a span {
  color: #999;
  font-size: 10px;
}

And we're done

Adding the last footer
03:48
+
BONUS
2 Lectures 00:35
Is a coding bootcamp for you?
00:17

Ironhack info session.
00:17
About the Instructor
Ironhack Bootcamp
4.0 Average rating
23 Reviews
3,838 Students
1 Course
JavaScript Coding Bootcamp + UX/UI Design Bootcamp

Ironhack is a 5-star coding bootcamp that has graduated over 800 students since 2013. The vast majority of students started with zero coding experience and after 9-weeks they all learned the coding skills to start a new career in tech as a junior developer. Today, close to 90% of our students are actively working as computer programmers, making on average 30-50% more money than in their previous jobs. And we're proud of that.