Clone Netflix, Spotify, & Amazon
Adding navigation with SVG logo and sign in button
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
displayproperty 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
floatis a new property that tells the element to be positioned on the right.
The goal of this course is to help you see 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 to build one of the sections within the web page and below each video, you have some notes and the code used so you can take your time analyzing it.
This isn’t meant to be a comprehensive series of tutorials, these videos are meant to spark your curiosity and interest. We hope that by the end of each lesson you’ll want to dig deeper into the concepts that were taught.
Course Features
- Lectures 31
- Quizzes 0
- Skill level Beginner
- Language English
- Students 660
- Certificate No
- Assessments Self
-
Introduction
-
Netflix
-
Spotify
-
Amazon
