https://github.com/bankole2000/netflix
Netflix homepage clone. Simple HTML CSS JS excercise
https://github.com/bankole2000/netflix
clone css-grid css3 netflix
Last synced: 11 months ago
JSON representation
Netflix homepage clone. Simple HTML CSS JS excercise
- Host: GitHub
- URL: https://github.com/bankole2000/netflix
- Owner: Bankole2000
- Created: 2019-05-22T05:17:53.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-04T20:07:02.000Z (over 2 years ago)
- Last Synced: 2025-03-28T16:43:10.150Z (about 1 year ago)
- Topics: clone, css-grid, css3, netflix
- Language: HTML
- Homepage: https://bankole2000.github.io/netflix
- Size: 1.02 MB
- Stars: 138
- Watchers: 2
- Forks: 64
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Netflix Clone
Clone of the Netflix website as a light HTML CSS and JS excercise - [Take a look](https://bankole2000.github.io/netflix)
[](https://bankole2000.github.io/netflix)
_
"Eating website for fun... nyom nyom nyom"
_
## What it is
A basic warmup exercise. Simple, practice oriented, clone of the Netflix Homepage. Built with:
- HTML
- CSS
- Vanilla JS - ES6
- [Awesomeness](https://www.wikihow.com/Love-Programming) - Strictly for the love of coding :-)
## What it does
- Look pretty, that's about it :-)
## Learning Points
- CSS Grid
- Styling Tables
- Tabs with Javascript
- Positioning
## Some cool stuff
Usually, people tend to run to CSS Frameworks to develop and style tabs and switching tabs. But here's a pretty simple, basic way of creating switchable tab content using Vanilla JS:
```javascript
const tabItems = document.querySelectorAll(".tab-item");
const tabContentItems = document.querySelectorAll(".tab-content-item");
// Select tab content
function selectItem(e) {
removeBorder();
removeShow();
// Add border to current tab
this.classList.add("tab-border");
// Grab content item from DOM
const tabContentItem = document.querySelector(`#${this.id}-content`);
// Add show class
tabContentItem.classList.add("show");
}
function removeBorder() {
tabItems.forEach(item => item.classList.remove("tab-border"));
}
function removeShow() {
tabContentItems.forEach(item => item.classList.remove("show"));
}
// Listen for tab click
tabItems.forEach(item => item.addEventListener("click", selectItem));
```
And for the HTML All you really need is this:
```html
```
> Also (Just a thought), You could advance this by adding some animations to the selector borders etc.
## Features in Development
I might add the other pages on the Netflix website if I ever come back to refactor ^-^
## Contribution
Contributions are highly welcome. Feel free to fork, clone, make pull requests, report issues etc.
## Acknowledgments
- Many thanks to [@bradtraversy](https://github.com/bradtraversy) for his awesome courses - _i will not fail you sensei_
- Thanks to [@torvalds](https://github.com/torvalds) For Making the world a better place
- And To anyone reading this... _You're awesome!_
That being said
_
To the Front... to the Back... End to End... cut no slack. Making ends meet. lol
_