Git Product home page Git Product logo

netflix-ui-landingpage's Introduction

NETFLIX-UI-Landing-page


NETFLIX LANDIG PAGE DEVELOPED USING HTML,CSS,BOOTSTRAP AND JAVASCRIPT

๐Ÿš€ Tech and Tools Used

  • HTML,CSS ,Bootstrap and Javascript
  • VSCode

Netflix UI Landing Page

This is a Netflix UI Clone build on HTML, CSS, and JavaScript.

[ In development Phase ] [ Hacktoberfest-Accepted ]

Visit this website ๐Ÿš€

Join Us On Discord โšก

So, here you go! Star this Repo and fork it to start contributing for Hacktober Fest 2021. ๐Ÿคฉ Excited?

Contribution is fun! ๐Ÿงก

  • Create issues and start
  • Add features
  • Enhance the UX

๐Ÿ“Œ Tech Stack

HTML CSS JS Bootstrap

Contributing Guidelines

Basics of Git and GitHub

Git & GitHub

Before we proceed, it's better to know the difference between Git and Github. Git is a version control system (VCS) that allows us to keep track of the history of our source code , whereas GitHub is a service that hosts Git projects.

We assume you have created an account on Github and installed Git on your System.

Now enter your name and E-mail (used on Github) address in Git, by using following command.

$ git config --global user.name "YOUR NAME" $ git config --global user.email "YOUR EMAIL ADDRESS" This is an important step to mark your commits to your name and email.


Fork a project

You can make a copy of the project to your account. This process is called forking a project to your Github account. On Upper right side of project page on Github, you can see -

Click on fork to create a copy of project to your account. This creates a separate copy for you to work on.

Clone the forked project

You have forked the project you want to contribute to your github account. To get this project on your development machine we use clone command of git.

$ cd Desktop

$ git clone https://github.com/ahmadsohail404/Netflix-UI-LandingPage.git
Now you have the project on your local machine.


Add a remote (upstream) to original project repository

Remote means the remote location of project on Github. By cloning, we have a remote called origin which points to your forked repository. Now we will add a remote to the original repository from where we had forked.

$ cd <your-forked-project-folder> $ git remote add upstream https://github.com/ahmadsohail404/Netflix-UI-LandingPage.git
You will see the benefits of adding remote later.


Synchronizing your fork

Open Source projects have a number of contributors who can push code anytime. So it is necessary to make your forked copy equal with the original repository. The remote added above called Upstream helps in this.

$ git checkout main $ git pull upstream main $ git push origin main
The last command pushes the latest code to your forked repository on Github. The origin is the remote pointing to your forked repository on github.


Create a new branch for a feature or bugfix

Usually, all repositories have a main branch that is regarded to be stable, and any new features should be developed on a separate branch before being merged into the main branch. As a result, we should establish a new branch for our feature or bugfix and go to work on the issue.

$ git checkout -b <feature-branch> This will create a new branch out of master branch. Now start working on the problem and commit your changes.

$ git add --all $ git commit -m "<commit message>" The first command adds all the files or you can add specific files by removing -a and adding the file names. The second command gives a message to your changes so you can know in future what changes this commit makes. If you are solving an issue on original repository, you should add the issue number like #35 to your commit message. This will show the reference to commits in the issue.


Push code and create a pull request

You now have a new branch containing the modifications you want in the project you forked. Now, push your new branch to your remote github fork.

$ git push origin <feature-branch> Now you are ready to help the project by opening a pull request means you now tell the project managers to add the feature or bug fix to original repository. You can open a pull request by clicking on green icon -

Remember your upstream base branch should be main and source should be your feature branch. Click on create pull request and add a name to your pull request. You can also describe your feature.

Congratulations! You've already made your first contribution.๐Ÿฅณ

Good Luck for your journey

Our Valuable Contributors :)

Project Maintainer and Admin: Sohail Ahmad


๐Ÿ“ฌ Contact Us

If you want to contact me, you can reach through below handles.

YouTube LinkedIn Gmail

ยฉ 2021 Sohail Ahmad and contributors
This project is licensed under the MIT license.

forthebadge

netflix-ui-landingpage's People

Contributors

aditya-singh9 avatar ahmadsohail404 avatar amritanshu02 avatar atanbhardwaj avatar himanshuchandola-zz avatar iamhrithikraj avatar imobasshir avatar jerryp28 avatar kavinvalli avatar lunlunchin avatar mbmanu avatar muskan-creator avatar nayyyhaa avatar omeiirr avatar pccoder-2000 avatar saitarun2002 avatar shivam2003-dev avatar simmiggrwl avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

netflix-ui-landingpage's Issues

cursor pointer is not visible on sign-in & need help buttons

  1. Go to the home screen
  2. Click on the "Sign In" button
  3. On the sign-in page, white hovering over the sign-in button and need help option.
  4. Cursor pointer is missing which causes accessibility issues.

PFA the SS
Actual

  1. No cursor on "Sign In" button.
    image

  2. No cursor on "Need Help" option.
    image

Expected
Curson pointer should be there on "Sign-in" button and "Need Help" option.

FAQ section

The UI of the faq section is not at all similar to the original site. Can I work on it?

Bug in FAQs section

in the faqs section, an open faq closes only when the user clicks on some other faq and not when the user clicks on the same faq again(even though the symbol changes on doing that)

Better folder structure

The folder structure could be more organised with assets in one folder, styles in one folder, etc.

Size of email div container

Need to reduce the size of email div container to be exactly matching with the original website. Plus the "GET STARTED" text needs to be in lowercase. Let me know if I can work on these issues!

Add Need Help page

There is no need help page on the website.
As it is there on the Netflix site

Scroll to top button when user starts scrolling.

It will be good if there is a scroll to top arrow button which when pressed will make the page go to the top. It will appear only when user starts scrolling and disappears when user is at the top of the page.

font-weight

Font-weight for the h4 text (Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and more and all these texts) should be reduced to match it with the original website

UI is breaking on small screens

UI is breaking on a small(320 x 568) dimension screen. PFA the SS

SS:

  1. In homepage, X-scroll is overflowing.
    image

  2. Sign Up page: Social media buttons are distorted and sign-up message is not in center.
    image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.