Clone Netflix, Spotify, & Amazon
Writing your first HTML page
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.
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
