---
# System prepended metadata

title: Netflix Clone

---

`author:` Alex Mwaura

# Netflix Clone

![](https://i.imgur.com/R30dMfL.png)

### Learning Objectives


- [x] learn how to start a project from scracth
- [x] learn design tricks using figma
- [x] How to add dependencies
- [x] How to work with event listeners
- [x] connect and fetch data from server
- [x] Work with media queries



### Student Tasks
- [ ] Build Html structure
    #### coverage
    - [ ] html structure
    - [ ] header
    - [ ] nav
    - [ ] a
    - [ ] section
    - [ ] h1
    - [ ] div
    - [ ] img 
- [ ] style using css
    #### coverage
    - [ ] css rules
    - [ ] css selectors
    - [ ] css variables
    - [ ] media queries
- [ ] connect js
- [ ] connect to json-server
    - [ ] DOM
    - [ ] DOM events | js events
    - [ ] fetch
    - [ ] CRUD operations
    

### Resources


#### header

step 1 html, header
```html=

<!-- HEADER -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Netflix clone</title>
	<link rel="stylesheet" type="text/css" href="/index.css">
</head>


<body>
	<header>
		<div class="netflixLogo">
			<a href="">
				<img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/logo.PNG?raw=true">
			</a>
		</div>
			<nav class="main-nav">
				<a href="#home">Home</a>
		        <a href="#tvShows">TV Shows</a>
		        <a href="#movies">Movies</a>
		        <a href="#originals">Originals</a>
		        <a href="#">Recently Added</a>
		        </a>
			</nav>
	</header>

	<!-- Main Container -->

	<section class="main-container">
		<div class="trending">
			<h1>Trending Now</h1>
			<div class="box">
				<img src="https://www.gstatic.com/tv/thumb/v22vodart/23342/p23342_v_v8_ab.jpg">
			</div>
		</div>
    </section>
</body>
</html>
    
```

step 2 css

```
/*Css Variables*/

/*Css Variables*/

:root {
	--primary:  #141414;
	--light:  #f3f3f3;
	--dark:  #686868;
}

html, body {
	width:  100vw;
	min-height: 100vh;
	margin:  0;
	background-color: var(--primary);
	color: var(--light);
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	line-height: 1.4;
}

header {
	padding: 20px 20px 0 20px;
	position: fixed;
	top: 0;
	display: grid;
	grid-gap: 5px;
	grid-template-columns: 1fr 4fr 1fr;
	grid-template-areas: "nt mn mn sb . . .";	
	background-color: var(--primary);
	width: 100%;
	margin: 0px 0px 0px 30px;
}

.main-nav {
	grid-area: mn;
	padding: 0 30px 0 20px;
}

.main-nav a {
	color: var(--light);
	text-decoration: none;
	margin: 5px;
}

.main-container {
	padding: 50px;
}

.box {
	display: grid;
	grid-gap:  20px;
	grid-template-columns: repeat(6, minmax(100px, 1fr));
}

.box img {
	border-radius: 2px;
}

```

db.json file to have

```json=
{
  "films": [
    {
      "id": "2",
      "title": "Manos: The Hands Of Fate",
      "runtime": "118",
      "capacity": 50,
      "showtime": "06:45PM",
      "tickets_sold": 44,
      "description": "A family gets lost on the road and stumbles upon a hidden, underground, devil-worshiping cult led by the fearsome Master and his servant Torgo.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/47781/p47781_v_v8_ac.jpg"
    },
    {
      "id": "3",
      "title": "Time Chasers",
      "runtime": "93",
      "capacity": 50,
      "showtime": "09:30PM",
      "tickets_sold": 31,
      "description": "An inventor comes up with a time machine, but must prevent its abuse at the hands of an evil C.E.O.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/23342/p23342_v_v8_ab.jpg"
    },
    {
      "id": "4",
      "title": "The Touch Of Satan",
      "runtime": "101",
      "capacity": 40,
      "showtime": "09:00PM",
      "tickets_sold": 31,
      "description": "A young man meets a farm girl who is actually a witch.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/43468/p43468_v_v8_aa.jpg"
    },
    {
      "id": "5",
      "title": "Santa Claus Conquers The Martians",
      "runtime": "96",
      "capacity": 50,
      "showtime": "03:30PM",
      "tickets_sold": 45,
      "description": "The Martians kidnap Santa Claus because there is nobody on Mars to give their children presents.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/4232/p4232_v_v8_aa.jpg"
    },
    {
      "id": "6",
      "title": "Track Of The Moon Beast",
      "runtime": "112",
      "capacity": 30,
      "showtime": "10:30PM",
      "tickets_sold": 16,
      "description": "A young man is transformed into a hideous 'moon beast' due to a meteor fragment lodged in his body.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/39804/p39804_v_v8_ab.jpg"
    },
    {
      "id": "7",
      "title": "The Skydivers",
      "runtime": "94",
      "capacity": 30,
      "showtime": "07:30PM",
      "tickets_sold": 22,
      "description": "A woman seeks revenge on her former lover, who owns a skydiving business.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/40518/p40518_v_v8_aa.jpg"
    },
    {
      "id": "8",
      "title": "The Killer Shrews",
      "runtime": "115",
      "capacity": 40,
      "showtime": "08:30PM",
      "tickets_sold": 32,
      "description": "On an isolated island, a small group of people are terrorized by giant voracious shrews in the midst of a hurricane.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/1466/p1466_v_v8_ab.jpg"
    },
    {
      "id": "9",
      "title": "Project Moon Base",
      "runtime": "99",
      "capacity": 40,
      "showtime": "07:30PM",
      "tickets_sold": 22,
      "description": "A saboteur posing as a scientist strives to destroy the world's first space station.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/46755/p46755_v_v8_aa.jpg"
    },
    {
      "id": "10",
      "title": "The Giant Spider Invasion",
      "runtime": "122",
      "capacity": 50,
      "showtime": "10:00PM",
      "tickets_sold": 44,
      "description": "Giant spiders from another dimension invade Wisconsin.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/42171/p42171_v_v8_ab.jpg"
    },
    {
      "id": "11",
      "title": "Catalina Caper",
      "runtime": "104",
      "capacity": 30,
      "showtime": "06:00PM",
      "tickets_sold": 12,
      "description": "A group of swingin' teens take time out from having fun in the sun to try to foil a group of crooks searching for a stolen scroll.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/58122/p58122_v_v8_aa.jpg"
    },
    {
      "id": "12",
      "title": "Secret Agent Super Dragon",
      "runtime": "104",
      "capacity": 30,
      "showtime": "07:00PM",
      "tickets_sold": 20,
      "description": "A series of murders in Michigan lead an American secret agent to Amsterdam, where he uncovers a plot to imperil the world with a potent new drug.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/93417/p93417_v_v8_aa.jpg",
      "showing_id": "12"
    },
    {
      "id": "13",
      "title": "Wild Rebels",
      "runtime": "100",
      "capacity": 40,
      "showtime": "09:00PM",
      "tickets_sold": 31,
      "description": "A stock car driver goes undercover as the wheel man for a motorcycle gang.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/45367/p45367_v_v8_aa.jpg"
    },
    {
      "id": "14",
      "title": "Danger: Diabolik",
      "runtime": "111",
      "capacity": 50,
      "showtime": "08:00PM",
      "tickets_sold": 40,
      "description": "International man of mystery Diabolik and his lover pull off heist after heist, all while European cops led by Inspector Ginko and envious mobsters led by Ralph Valmont are closing in on them.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/11850/p11850_v_v8_aa.jpg"
    },
    {
      "id": "15",
      "title": "Village Of The Giants",
      "runtime": "98",
      "capacity": 50,
      "showtime": "04:45PM",
      "tickets_sold": 33,
      "description": "Delinquent teen-agers ingest a substance and grow thirty feet tall, then proceed to take over a small town.",
      "poster": "https://www.gstatic.com/tv/thumb/v22vodart/37991/p37991_v_v8_aa.jpg"
    }
  ]
}

```