Cloning Amazon, Netflix & Spotify

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

3.35 (574 reviews)
Udemy
platform
English
language
Web Development
category
41,595
students
3 hours
content
Sep 2017
last update
FREE
regular price

What you will learn

You will know how to clone the home pages of Amazon, Netflix and Spotify.

You will learn some beginner to advanced HTML + CSS.

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!

Content

Introduction

Introduction

Netflix

Writing your first HTML page
Adding navigation with SVG logo and sign in button
Adding CSS fonts and styles + box sizing
Adding the heading and tag line
Adding the heading’s “join now” button
Adding 3 features with flex box
Adding tabs with a bit of JavaScript
Adding content within the tabs including Font Awesome icon
Adding the final footer section

Spotify

Project introduction
Basic HTML structure
Adding the navigation bar and using the Bootstrap framework
Adding the header background image and gradient
Adding the header carousel, slides and content with the Jumbotron component
Adding custom fonts
Adding a content section with two columns
Adding another section with CSS rotated images
Adding an informational section with an image and inline links
Adding the subscriptions section
Adding the footer
Fixing the width

Amazon

Project introduction
Defining the basic page structure
Adding a simple top banner
Adding the search bar with JavaScript to dynamically change options
Adding the second layer of navigation links
Adding the Bootstrap carousel with sliders
Adding the four product columns
Adding the fist footer
Adding the last footer

BONUS

Is a coding bootcamp for you?
Ironhack info session.

Screenshots

Cloning Amazon, Netflix & Spotify - Screenshot_01Cloning Amazon, Netflix & Spotify - Screenshot_02Cloning Amazon, Netflix & Spotify - Screenshot_03Cloning Amazon, Netflix & Spotify - Screenshot_04

Reviews

Karie
June 10, 2023
The teacher didn't provide any resources like images and code source. He paste pre-coded code then explain, though I am fine with this style of teaching. However, I don't think his explaination is clear enough for beginners. Also, the lesson speed is too fast that you have to pause video frequently if you are going to code along with the video.
Carol
September 9, 2022
Too fast. I'm pausing the videos to copy the code, and many of CSS are not associating with HTML. Can't find the images through the links in the code.
Valluru
June 4, 2022
Everything is fine, But in my view need more explanation about css properties so that we can understand instead of simply coping that.
Harsh
March 24, 2022
Bad course, no materials provided, and even after searching hours on the internet not able to find the images used as the website replicated is an older version
Nathan
March 7, 2022
Uses older and/or different version of the site being replicated, so the reference material was unavailable to me. Images used are not included in the course. The teacher doesn't explain much of what he is doing, but rather just reads it out as he does it.
Kenneth
October 21, 2020
The course is Amazing, but the items, images, and svg are missing and it's kind of difficult to get it from the internet, you could add the file into the course.
Muhammad
July 21, 2020
there are no source files or source code that could help me and he doesn't explain any thing in a good way he just reads what he codes
Daniel
July 10, 2020
So far he's just explaining without much in terms of explanations. I've got plenty of questions without any answers to them.
Harsh
July 10, 2020
I was searching for a course that would teach me how to create a simple webpage along with explaining what each line of code does . This is the course that I had been searching for! Thank you so much
Esteban
April 18, 2020
Really disappointing, it doesn't have the sources and the instructor doesn't explain the markup in a correct way
Matthew
January 22, 2018
This review is for the netflix portion of the course. The netflix importation will be referred to as, the course. This course has brought to light a lot of things I didn't know about CSS. That's been very helpful. However, the instructor does not go into much detail about what he's doing and why. Goes into it a little bit, but not a lot. Also half of his body covers the code editor on the bottom left handed corner. I didn't realize I had an error with the project until two videos later. When I went back to make sure I had everything right, it still didn't seem to work. This however may be a problem on my end with that. That being said however, I copied the source code for all the projects. Imported the javascript, only partially worked. I could go into more detail here, but the point is, not a lot of detail. Source code isn't matching up with what's typed on screen. He goes too fast. I believe that this course is merely meant to be an introduction to the sponsored bootcamp. That way, when you feel like you know a decent bit, but need more, you pay for the bootcamp outside of udemy. I do not know if I'll be continuing this course. If I do, I will make sure to leave a more updated review. Minor Edit: I reread course description. This course is definitely designed to give you a little bit of knowledge so you may consider taking their bootcamp when you finish.
Alice
December 18, 2017
No png or jpeg files given in this course. Had to find pics via search engine and edit files via gimp. Used firefox browser and made changes to html and css to get the landing page to look like the original as close as possible. Teacher could have been more systematic in teaching with going through the html spacing and positioning first then later showing the css part. I think currently it's more time consuming for newbies the way it is currently taught. Four and a half stars for at least the person has to figure out some of it themselves. In the future teaching viewers to set up a live-server public via yarn or node(npm) would cut down the tedious time of alt+tab (refreshing) back and forth to see the updates of the newly typed code.
María
November 21, 2017
Es un buen curso para quien está empezando pero para quien ya tiene conocimientos de html y css se queda corto
Okikiola
November 4, 2017
Very Nice...Although doesn't seem really interesting. I have never been so eager to learn from an online course like the way i learnt from him.
Dom
August 18, 2017
Well produced. it's more a walk through than a code along. There's a lot of copy and paste. It's still useful just to see how some advanced techniques are done and lots of best practices as far as I can tell.

Charts

Price

Cloning Amazon, Netflix & Spotify - Price chart

Rating

Cloning Amazon, Netflix & Spotify - Ratings chart

Enrollment distribution

Cloning Amazon, Netflix & Spotify - Distribution chart
1316864
udemy ID
8/9/2017
course created date
12/2/2019
course indexed date
Bot
course submited by