A

Mini Project/ Summer Training Report

On

NETFLIX WEBSITE
Submitted in partially fulfilment for the requirement for the award of the
degree of

Bachelor of Technology
in

Computer Science And Engineering

Submitted by

Vivek Kumar

2202840100252

Under the Supervision of

Param Goel

Department of Computer Science & Engineering

UNITED ISTITUTE OF TECHNOLOGY (284)

(Affiliated to Dr. A.P.J. Abdul Kalam Technical University, Lucknow)

 Session-2023-2024

Vision of the Department

To be a center of excellence in the field of Computer Science and Engineering
for producing talented engineers to ethically serve constantly changing needs
of society and industry throughout their career and life.

Mission of the Department

M1. Accomplish excellence with committed faculty by providing

theoretical foundation and practical skills for solving complex engineering
problems in the state-of-the-art trends in Computer science and allied
disciplines.

M2. To foster skills and competency, generating novel ideas, entrepreneurship

and model creations focused towards deep knowledge, interpersonal skills
and leadership.

M3. To develop habitude of research among faculty and students in the area
of Computer Science & Allied disciplines by providing the desired
environment, for addressing the needs of industry and society.

M4. To mould the students with ethical principles in thoughts, expression and
deeds.
Index

S. No Topic Page No.

 1 Introduction ………………………………………………. 4-5

2 Requirement ……………………………………………… 6

3 Conceptual Background …………………………………… 7-10

4 Implementation …………………………………………..... 11

4.1 Coding ………………………………………………… 12-21

4.2 Flow Chart …………………………………………….. 22

5 User Interface ………………………………………….. 23

6 Future Scope …………………………………………. 24

References ………………………………………………….. 25

Introduction:

In the ever-evolving landscape of creating a replica of a renowned platform can serve as an

insightful and educational project. The Netflix clone crafted with HTML and CSS, seeks to
emulate the familiar and intuitive user interface of the globally recognized netflixe website.
This endeavor aims to showcase the prowess of front-end technologies in delivering a
visually appealing, responsive, and user-friendly online streaming experience.
The primary objective of the Netflix Clone project is to recreate the essential features of
the Netflix platform using HTML for structuring content and CSS for styling. Through this
endeavor, we aim to delve into the intricacies of designing a dynamic and engaging user
interface that mirrors the functionality of a real-world e-streaming site.

Netflix is an American subscription video on-demand over-the-top streaming service. The

service primarily distributes original and acquired films and television shows from various
genres, and it is available internationally in multiple languages.

Launched on January 16, 2007, nearly a decade after Netflix, Inc. began its pioneering DVDby-
mail movie rental service, Netflix is the most-subscribed video on demand streaming media
service, with 260.28 million paid memberships in more than 190 countries as of January
2024. By 2022, "Netflix Original" productions accounted for half of its library in the United
States and the namesake company had ventured into other categories, such as video game
publishing of mobile games via its flagship service. As of October 2023, Netflix is the 24th
most-visited website in the world with 23.66% of its traffic coming from the United States,
followed by the United Kingdom at 5.84% and Brazil at 5.64%.
Marc Randolph, co-founder of Netflix

Reed Hastings, co-founder and Executive Chairman

Netflix was founded by Marc Randolph and Reed Hastings on August 29, 1997, in Scotts
Valley, California. Hastings, a computer scientist and mathematician, was a co-founder
He was previously a co-founder of MicroWarehouse, a computer mail-order company as well
as vice president of marketing for Borland. Hastings and Randolph came up with the idea for
Netflix while carpooling between their homes in Santa Cruz, California, and Pure Atria's
]
headquarters in Sunnyvale. Patty McCord, later head of human resources at Netflix, was also
in the carpool group. Randolph admired Amazon and wanted to find a large category of
portable items to sell over the Internet using a similar model. Hastings and Randolph
considered and rejected selling and renting VHS as too expensive to stock and too delicate to
ship. When they heard about DVDs, first introduced in the United States in early 1998, they
tested the concept of selling or renting DVDs by mail by mailing a compact disc to Hastings's
house in Santa Cruz. When the disc arrived intact, they decided to enter the $16 billion
Home-video sales and rental industry. Hastings is often quoted saying that he decided to start
Netflix after being fined $40 at a Blockbuster store for being late to return a copy of Apollo
13. Hastings invested $2.5 million into Netflix from the sale of Pure Atria. Netflix launched as
the first DVD rental and sales website with 30 employees and 925 titles available—nearly all
DVDs published. Randolph and Hastings met with Jeff Bezos, where Amazon offered to
acquire Netflix for between $14 and $16 million. Fearing competition from Amazon,
Randolph at first thought the offer was fair, but Hastings, who owned 70% of the company,
turned it down on the plane ride home

Initially, Netflix offered a per-rental model for each DVD but introduced a monthly
subscription concept in September 1999. The per-rental model was dropped by early 2000,
allowing the company to focus on the business model of

Requirement :

Hardware Requirements:

• Memory (RAM): A computer with sufficient RAM (4GB or more) will ensure smooth

development and testing .

• Storage Space: Ensure you have enough disk space to store , development environment,

libraries, and project files. Several gigabytes of free space should

• Computer: Any modern computer with a decent processor and sufficient RAM
 should be suitable for front-end development.
• Display: A monitor with a resolution that allows you to comfortably
view and design web pages.
• Input Devices: Keyboard and mouse or other input devices for

interacting with your computer be adequate.

Software Requirements:

1. Homepage:
• Display a featured product section.
• Show different product categories.
• Include promotional banners.
2. Product Catalogue:
• Showcase a variety of products with images, titles, prices,
and brief descriptions.
• Allow users to browse products by category.
• Implement pagination or infinite scrolling for large product catalogues.
3. Product Details:
• Display detailed information for each product on a dedicated page.
• Include product images, description, price, and customer reviews.
4. Search and Filtering:
• Implement a search bar for users to find specific products.
• Allow users to filter products based on criteria like
category, price range, and customer ratings.
5. User Authentication:
• Enable user registration and login functionality.
• Provide a user profile section with order history.
6. Shopping Cart:
• Allow users to add products to a shopping cart.
• Display the contents of the shopping cart, including item
details and total price.
• Implement the ability to modify the quantity or remove items
from the cart.
7. Checkout Process:
• Implement a secure checkout process with multiple steps
(e.g., address entry, payment details).
 • Provide order summary and confirmation before
finalizing the purchase.
8. Responsive Design:
• Ensure that the application is responsive and provides a
seamless experience on various devices, including desktops,
tablets, and mobile phones.
9. Header and Footer:
• Design a consistent header containing the logo, navigation
menu, and search bar.
• Include a footer with links to important sections, policies,
and contact information.
10. CSS Styling:
• Apply a clean and visually appealing design using CSS.
• Consider using a CSS preprocessor (e.g., Sass or Less)
for improved maintainability.
11. Icons and Images:
• Utilize appropriate icons for actions (e.g., add to cart, checkout).
• Use high-quality product images to enhance the visual appeal.

Device support:
Netflix can be accessed via a web browser, while Netflix apps are available on various
platforms, including Blu-ray players, tablet computers, mobile phones, smart TVs, digital
media players, and video game consoles, with the app being available on Xbox 360,
PlayStation 3, Xbox One, PlayStation 4, Xbox Series X/S and PlayStation 5 consoles.
 Maximum
Web DRM allowed
Operating System
Browser system video
resolution

4K (device
Microsoft must fulfil
Microsoft Windows 10 or later PlayReady
Edge hardware
requirements)

MacOS 10.11 through MacOS Apple

10.15 Safari FairPlay 1080p

Apple
MacOS 11 or later FairPlay 4K
Safari
which normally give production companies future revenue opportunities from syndication,
merchandising, etc

Over the years, Netflix output ballooned to a level unmatched by any television network or streaming
service. According to Variety Insight, Netflix produced a total of 240 new original shows and movies in
2018, then climbed to 371 in 2019, a figure "greater than the number of original series that the entire
U.S. TV industry released in 2005." The Netflix budget allocated to production increased annually,
reaching $13.6 billion in 2021 and projected to hit $18.9 billion by 2025, a figure that once again
overshadowed any of its competitors. As of August 2022, original productions made up 50% of
Netflix's overall library in the United States.

Film and television deals

Netflix has exclusive pay TV deals with several studios. The deals give Netflix exclusive streaming
rights while adhering to the structures of traditional pay TV terms.

Distributors that have licensed content to Netflix include Warner Bros., Universal Pictures, Sony
Pictures Entertainment and previously The Walt Disney Studios. Netflix also holds current and back-
catalog rights to television programs distributed by Walt Disney Television, DreamWorks Classics,
Kino International, Warner Bros. Television and Paramount Global Content Distribution , along with
titles from other companies such as Hasbro Entertainment and Funimation. Formerly, the streaming
service also held rights to select television programs distributed by NBCUniversal Televisio n
Distribution, Sony Pictures Television and 20th Century Fox Television .

Netflix negotiated to distribute animated films from Universal that HBO declined to acquire, such
as The Lorax, ParaNorman, and Minions.

Netflix holds exclusive streaming rights to the film library of Studio Ghibli (with the exception
of Grave of the Fireflies) worldwide except in the U.S. and Japan as part of an agreement signed with
Ghibli's international sales holder Wild Bunch in 2020.

Conceptual Background

The conceptual background of an Amazon clone using HTML and CSS involves
understanding the fundamental principles of web development, the structure of an e -
commerce platform, and the role of HTML and CSS in creating a user interface.

1. Web Development Basics:

 • Understanding the basics of web development, including the client -
server architecture, HTTP/HTTPS protocols, and how web browsers
interpret HTML, CSS, and JavaScript.
2. HTML (HyperText Markup Language):
• HTML is the foundational markup language used to structure
content on the web. In the context of an Amazon clone, HTML is
employed to create the skeletal structure of web pages, defining
elements like headers, navigation, product listings, and footers.
3. CSS (Cascading Style Sheets):
• CSS is a stylesheet language that complements HTML by defining
the presentation and layout of web pages. In the Amazon clone, CSS
is used for styling elements, creating a visually appealing design, and
ensuring a consistent user interface.
4. Responsive Design:
• Responsive design is a crucial concept, especially for an e -commerce
site like Amazon. It involves creating a layout that adapts and looks
good on various devices and screen sizes. Media queries in CSS are
used to implement responsive design, ensuring a seamless experience
on desktops, tablets, and mobile devices.
5. User Interface Design Principles:
• Incorporating principles of user interface (UI) design to create an
intuitive and user -friendly experience. This includes considerations
for navigation, visual hierarchy, and the placement of key elements
like search bars, product details, and checkout buttons.
6. Product Catalog Structure:
• Understanding the structure of a product catalog, including product
listings, details pages, and the organization of products into
categories. HTML is used to create these structures, while CSS styles
enhance the visual presentation.
Implementation

4.1 Coding:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Netflix India - Watch TV Shows Online, Watch Movies Online</title>

<link rel="stylesheet" href="style.css">

 <link rel="stylesheet" href="stylesheet.css">

</head>

<body>

<div class="main">

<nav>

<span><img width="54" src="assets/images/logo.svg" alt=""> <img

width="240px" src="Netflix1.png" alt=""></span>

<div>

<button class="btn">English</button>

<a href="sign-up page\sing-up.html" rel="noopener noreferrer"

type="button" style="text-decoration: none; color: rgb(250, 245, 245);">

<button class="btn btn-red-sm">Sign Up</button>

</a>

<a href="Log_in\LOGIN_PAGE.html" rel="noopener noreferrer"

type="button" style="text-decoration: none; color: white;">

<button class="btn btn-red-sm">Sign In</button></a>

</nav>

<div class="box">

</div>
 <div class="hero">

<span>Enjoy big movies, hit series and more from ₹ 149.</span>

<span>Join today. Cancel anytime.</span>

<span>Ready to watch? Enter your email to create or restart your
membership.</span>

<div class="hero-buttons">

<input type="text" placeholder="Email Address"> <button

 class="btn btn-red">Get Started &gt;</button>

</div>

</div>

<div class="separation"></div>

</div>

<section class="first">

<div>

<span>Enjoy on your TV</span>

<span>Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu -ray
players and more.</span>

</div>

<div class="secImg">

<img
src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/tv.png" alt="">

<video src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/
video -tv-in- 0819.m4v"

autoplay loop muted></video>

</div>
 </section>

<div class="separation"></div>

<section class="first second">

<div class="secImg">

<img src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/
desktop/mobile- 0819.jpg" alt="">
 </div>

<div>

<span>Download your shows to watch offline</span >

<span>Save your favourites easily and always have something to watch.</span >

</div>

</section>

<div class="separation"></div>

<section class="first third">

<div>

<span>Watch everywhere</span >

<span>Stream unlimited movies and TV shows on your phone, tablet, laptop,

and TV.</span>

</div>

<div class="secImg">

<img
src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/tv.png" alt="">

<video src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/
video -devices- in.m4v"

autoplay loop muted></video>

 </div>

</section>
<div class="separation"></div>

<section class="first second">

<div class="secImg">
 <img src="https://occ-0-2849-
3646.1.nflxso.net/dnm/api/v6/19OhWN2dO19C9txTON9tvTFtefw/AAAABVr8nYuAg0xDpXDv
0VI9HUoH7r2aGp4TKRCsKNQrMwxzTtr-
NlwOHeS8bCI2oeZddmu3nMYr3j9MjYhHyjBASb1FaOGYZNYvPBCL.png?r=54d"

alt="">

</div>

<div>

<span>Create profiles for kids</span >

<span>Send children on adventures with their favourite characters in a space

made just for them—free with

your membership.</span>

</div>

</section>

<div class="separation"></div>

<section class="faq">

<h2>Frequently Asked Questions</h2>

<div class="faqbox">

<span>What is NetFlix</span>

<svg width="24" height="24" viewBox="0 0 24 24" fill="white"

xmlns="http://www.w3.org/2000/svg">
 <path d="M12 4V20" stroke="#141B34" stroke-width="1.5"
strokelinecap="round" stroke-linejoin="round" />

<path d="M4 12H20" stroke="#141B34" stroke-width="1.5"

strokelinecap="round" stroke-linejoin="round" />
</svg>

</div>

<div class="faqbox">
 <span>How much does Netflix cost?</span>

<svg width="24" height="24" viewBox="0 0 24 24" fill="white"

xmlns="http://www.w3.org/2000/svg">

<path d="M12 4V20" stroke="#141B34" stroke -width="1.5" stroke-

linecap="round" stroke-linejoin="round" />

<path d="M4 12H20" stroke="#141B34" stroke -width="1.5" stroke-

linecap="round" stroke-linejoin="round" />

</svg>

</div>

<div class="faqbox">

<span>What can I watch on Netflix?</span>

<svg width="24" height="24" viewBox="0 0 24 24" fill="white"

xmlns="http://www.w3.org/2000/svg">

<path d="M12 4V20" stroke="#141B34" stroke -width="1.5" stroke-

linecap="round" stroke-linejoin="round" />

<path d="M4 12H20" stroke="#141B34" stroke -width="1.5" stroke-

linecap="round" stroke-linejoin="round" />

</svg>

</div>

<div class="faqbox">

<span>Where can I watch?</span>

<svg width="24" height="24" viewBox="0 0 24 24" fill="white"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 4V20" stroke="#141B34" stroke-width="1.5"
strokelinecap="round" stroke-linejoin="round" />

<path d="M4 12H20" stroke="#141B34" stroke-width="1.5" stroke-

linecap="round" stroke-linejoin="round" />
 </svg>

</div>

</section>

<div class="separation"></div>

<footer>

<div class="questions">

Questions? Call 009-800-919-1694

</div>

<div class="footer">

<div class="footer-item">

<a href="faq">Investor Relations</a >

<a href="faq">Jobs</a>

<a href="faq">Ways to Watch</a >

<a href="faq">Terms of Use</a >

</div>

<div class="footer-item">

<a href="faq">Help Centre</a >

<a href="faq">Account</a>
 <a href="faq">Speed Test</a>

<a href="faq">Legal Notices</a>

</div>

<div class="footer-item">

<a href="faq">Media Centre</a>

 <a href="faq">Privacy</a>

<a href="faq">Cookie Preferences</a >

<a href="faq">Corporate</a >

</div>

<div class="footer-item">

<a href="faq">Contact Us</a>

<a href="faq">Speed Test</a >

<a href="faq">Legal Notices</a>

<a href="faq">Only on Netflix</a>

</div>

</div>

</footer>

</body>

</html>

FlowChart-

+------------------------ +
}

| Start |

+------------------------ +

|
v

| User Visits Website |

 + +

Display Homepage

+ +

| sign up|

+ +

/ \

| Registration Page|

\ /

+ +

| Product Details Page |

 |

+ +

| Login Page |

|
 v

+ +

End
User Interfaces

Front Page
Chapter-6

Future Scope

Netflix, one of the original streaming channels, is a latecomer to the ad space. Streaming
channels like HBO Max, Peacock, and more have understood that there is a limit to how much
streamers are willing to spend to watch content. They are often willing to make a trade: watch
ads (with a reasonable limit) in exchange for a reduced subscription cost. These streaming
channels offer an array of options so viewers can choose a plan and an ad load that’s right for
them.

Netflix has selected an entirely different approach, focusing on providing a wealth of original
content in an ad-free environment. As their content costs have ballooned to many billions of
dollars, Netflix has had to hike prices to keep up. But their bet on content has not proven to be
entirely successful. With large media companies like Disney staking their claim in the streaming
world, premium content isn’t only found on Netflix as it had been in the past. Consumers are
making cuts to their streaming spending, and this past quarter, Netflix was on the chopping
block.

So does this mean that when you settle in to binge your favorite Netflix show this weekend,
you’ll be inundated with ad breaks? Not at all. This is a solution that will take a while for Netflix
to implement and one they will probably roll out slowly. Analysts expect that they may not
begin testing advertising until as early as 2024, and even then it will likely be limited in scope.
What’s important to highlight though, is that Netflix isn’t going to be activating ads for
everyone. For those who don’t want to watch ad breaks during Stranger Things, they don’t have
to
 References

Creating an Netflix clone using HTML and CSS involves leveraging your knowledge of web
development, HTML for structure, and CSS for styling. While there may not be specific
references for an Amazon clone project using these technologies, you can refer to general
web development documentation, tutorials, and resources.

1. Mozilla Developer Network (MDN) - HTML Documentation:

• MDN provides comprehensive and reliable documentation
for HTML, covering elements, attributes, and best practices.
2. Mozilla Developer Network (MDN) - CSS Documentation:
• MDN CSS Documentation
• MDN's CSS documentation is a valuable resource for learning
about CSS properties, selectors, and layout techniques.
3. W3Schools - HTML Tutorial:
• W3Schools HTML Tutorial
• W3Schools offers beginner-friendly tutorials on HTML, covering topics
like forms, images, and links.
4. W3Schools - CSS Tutorial:
• W3Schools CSS Tutorial
• W3Schools provides practical CSS tutorials, including
information on styling, layout, and responsive design.
5. CSS Tricks:
CSS Tricks
• CSS Tricks is a website that offers a wide range of articles,
tutorials, and tips for CSS, helping you enhance your styling skills.
6. Codecademy - Learn HTML:
• Codecademy - Learn HTML
• Codecademy's interactive platform offers hands -on learning
experiences for HTML, making it an excellent resource for
beginners.
7. Codecademy - Learn CSS:
• Codecademy - Learn CSS
• Codecademy's CSS course complements their HTML course
and provides a solid foundation for styling web pages.
8. GitHub - Open Source HTML and CSS Templates:
• GitHub - HTML and CSS Templates
• Explore open-source HTML and CSS templates on GitHub
to understand project structures and coding conventions.