Cloning Amazon, Netflix & Spotify

Learn HTML + CSS by recreating the home pages of some amazing companies.
Free tutorial
Rating: 3.9 out of 5 (340 ratings)
21,488 students
Cloning Amazon, Netflix & Spotify
Free tutorial
Rating: 3.9 out of 5 (340 ratings)
21,488 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.
Curriculum
5 sections33 lectures3h 10m total length
  • Introduction
  • 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
  • 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
  • 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
  • Is a coding bootcamp for you?
  • Ironhack info session.

Instructor
JavaScript Coding Bootcamp + UX/UI Design Bootcamp
Ironhack Bootcamp
  • 3.9 Instructor Rating
  • 340 Reviews
  • 21,488 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.