Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Cloning Amazon, Netflix & Spotify

Learn HTML + CSS by recreating the home pages of some amazing companies.

Created byIronhack Bootcamp

Last updated 9/2017

English

What you'll learn

You will know how to clone the home pages of Amazon, Netflix and Spotify.
You will learn some beginner to advanced HTML + CSS.

Course content

5 sections • 33 lectures • 3h 10m total length

Introduction0:41

Writing your first HTML page11:07
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.
Adding navigation with SVG logo and sign in button7:44
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 CSS fonts and styles + box sizing1:45
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 the heading and tag line3:19
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’s “join now” button2:35

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 3 features with flex box7:58

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 tabs with a bit of JavaScript5:49

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 content within the tabs including Font Awesome icon13:41

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 the final footer section5:22

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!

Project introduction1:09
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.

Basic HTML structure3:08

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.

Adding the navigation bar and using the Bootstrap framework6: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 header background image and gradient2:05

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 carousel, slides and content with the Jumbotron component7:38

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 custom fonts1:28
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 a content section with two columns8:17

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 another section with CSS rotated images5:09

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 an informational section with an image and inline links4:06

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 the subscriptions section10:39

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 footer12:29

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;
}

Fixing the width1:56

Project introduction0:31
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.

Defining the basic page structure3:12

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;
}

Adding a simple top banner1:37

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 the search bar with JavaScript to dynamically change options18:32

Adding the second layer of navigation links10:18

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 Bootstrap carousel with sliders3:38

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 four product columns12:58

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 fist footer10:46

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 last footer3:48

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

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 this course is for:

Anyone who wants to learn to code.
Anyone curious to know how popular websites are created.

Cloning Amazon, Netflix & Spotify

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 1min

Netflix9 lectures • 59min

Spotify12 lectures • 1hr 4min

Amazon9 lectures • 1hr 5min

BONUS2 lectures • 1min

Requirements

Description

Who this course is for: