Skip to content
/ Netflix-Clone Public template

Clone of the Netflix website as a light HTML CSS and JS exercise- Take a look

License

Notifications You must be signed in to change notification settings

VGandhi27/Netflix-Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Netflix Clone

Clone of the Netflix website as a light HTML CSS and JS exercise - Take a look

Practice

"It's going to be HARD but hard does not man IMPOSSIBLE."

What it is

A basic warmup exercise. Simple, practice oriented, clone of the Netflix Homepage. Built with:

  • HTML
  • CSS
  • Vanilla JS - ES6
  • Awesomeness - 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
  • CSS Flex

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:

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:

<!-- Content Pretty Long so I'll add later -->
<!-- But this is the basic gist -->
<div class="tab-item">
  <!-- Selectors for the different tab content -->
</div>
<div class="tab-content-item">
  <!-- Content of each tab item -->
</div>
<!-- Simply add more selectors and corresponding 
tab content for each selector -->

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. ^-^

Contribution

Contributions are highly welcome. Feel free to fork, clone, make pull requests, report issues etc.

Acknowledgments

  • Many thanks to @David J. Malan for his awesome courses
  • Many thanks to @Brian Yu for his awesome courses
  • Thanks to Harvard CS50 Courses.
  • And To anyone reading this... You're awesome!

That being said

"The way to succeed is to double your failure rate."

Contact Me

You can reach me at https://vidushigandhi.vercel.app/ Feel free to contact me for any Query related to this repository.

Releases

No releases published

Packages

No packages published