Cloning Amazon, Netflix & Spotify

Learn HTML + CSS by recreating the home pages of some amazing companies.
Free tutorial
Rating: 3.7 out of 5 (377 ratings)
24,324 students
Cloning Amazon, Netflix & Spotify
Free tutorial
Rating: 3.7 out of 5 (377 ratings)
24,324 students
You will know how to clone the home pages of Amazon, Netflix and Spotify.
You will learn some beginner to advanced HTML + CSS.

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.
Course content
5 sections33 lectures3h 10m total length
  • Introduction
    00:41
  • Writing your first HTML page
    11:07
  • Adding navigation with SVG logo and sign in button
    07:44
  • Adding CSS fonts and styles + box sizing
    01:45
  • Adding the heading and tag line
    03:19
  • Adding the heading’s “join now” button
    02:35
  • Adding 3 features with flex box
    07:58
  • Adding tabs with a bit of JavaScript
    05:49
  • Adding content within the tabs including Font Awesome icon
    13:41
  • Adding the final footer section
    05:22
  • Project introduction
    01:09
  • Basic HTML structure
    03:08
  • Adding the navigation bar and using the Bootstrap framework
    06:08
  • Adding the header background image and gradient
    02:05
  • Adding the header carousel, slides and content with the Jumbotron component
    07:38
  • Adding custom fonts
    01:28
  • Adding a content section with two columns
    08:17
  • Adding another section with CSS rotated images
    05:09
  • Adding an informational section with an image and inline links
    04:06
  • Adding the subscriptions section
    10:39
  • Adding the footer
    12:29
  • Fixing the width
    01:56
  • Project introduction
    00:31
  • Defining the basic page structure
    03:12
  • Adding a simple top banner
    01:37
  • Adding the search bar with JavaScript to dynamically change options
    18:32
  • Adding the second layer of navigation links
    10:18
  • Adding the Bootstrap carousel with sliders
    03:38
  • Adding the four product columns
    12:58
  • Adding the fist footer
    10:46
  • Adding the last footer
    03:48
  • Is a coding bootcamp for you?
    00:12
  • Ironhack info session.
    00:15

Instructor
JavaScript Coding Bootcamp + UX/UI Design Bootcamp
Ironhack Bootcamp
  • 3.7 Instructor Rating
  • 377 Reviews
  • 24,324 Students
  • 1 Course

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.