Frontend Developer

Progress Report Industrial

Training Project
Undertaken at QSpiders

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE AWARD OF

THE DEGREE OF

BACHELOR OF TECHNOLOGY
(CSE)

SUBMITTED BY
Name: Prateek Baisla
E No.: 211160203008

SUPERVISED BY

Name of internal supervisor Name of external supervisor

and Designation. and Designation.
Shweta Kumari Mr. Hemant
(Asst. Professor) (Senior Developer)

February 2024
 ABSTRACT:

During this internship at QSpiders , the primary focus was on the development of a Netflix

Clone Project , aiming to delve into the intricacies of web development . Throughout the

internship, various programming languages essential for crafting web-based applications and

software were explored. Notably , HTML, CSS, and JavaScript were employed for frontend

development, alongside frameworks like Bootstrap to enhance user interface design. Backend

functionalities were implemented using languages such as PHP and Java . The project

emphasized the significance of web-based applications in modern life, offering unparalleled

accessibility and convenience. This report provides a detailed account of the intern's journey at

QSpiders , highlighting the acquisition of knowledge and practical experiences in website

design and development through the Netflix Clone Project. Through hands-on engagement ,

the intern tackled challenges, honed skills, and gained valuable insights, paving the way for

future career aspirations.

 TABLE OF CONTENTS

ABSTRACT....................................................................................................................................#

LIST OF TABLES ..........................................................................................................................#

INTRODUCTION........................................................................................................................ #

LIST OF ABBREVIATIONS .........................................................................................................#

INTRODUCTION (About the company) .................................................................................#

FEATURES ................................................................................................. #

TEAM DECRIPTION........................................................................................................... #

TRAINING ATEENDEDS..................................................................................................... #

ENVIROMENT OF WORK................................................................................... #

PROBLEMS................................................................................................................................... #

SOLUTIONS……………………………………………………………………………….#

HTML CODE ......................................................................................................................... #

CSS CODE............................................................................................................................... #

REFERENCES ..............................................................................................................................#
 INTRODUCTION

About The Company:

QSpiders , established in 2003 and headquartered in Bengaluru , India, stands as a prominent

entity in the software training sector . Operating primarily in the B2C space within the

Education market segments , QSpiders offers a comprehensive range of software testing

training courses tailored to meet the evolving needs of professionals worldwide . With a

mission to bridge the gap between industry demands and educational curricula , QSpiders

provides a platform where aspiring individuals can hone their skills and embark on successful

career journeys.

Led by Founder and CEO, Girish Ramanna, QSpiders is committed to delivering high-quality

training programs facilitated by top industry experts . The institute boasts a substantial

employee count, with 3,066 employees as of November 23, 2024, reflecting its dedication to

excellence in education . Despite being unfunded , QSpiders has achieved significant

milestones, recording an annual revenue of $15.7M as of March 31, 2021.

In a fiercely competitive landscape , QSpiders ranks 16th among 133 competitors , further

solidifying its position as a leading player in the industry . The institute 's commitment to

innovation and quality education has garnered recognition , with a vast network of training

centers globally. QSpiders continues to empower students and professionals alike, nurturing

talent and facilitating career growth in the ever-evolving software testing domain.
 Features:

1.1 User Registration and Authentication: Users can sign up for an account, log in
securely, and manage their profile settings, including preferences and viewing
history.

1.2 Browse Content: The platform allows users to explore a vast library of
movies, TV shows, documentaries, and other content, categorized based on genres,
popularity, and recommendations.

1.3 Search Functionality: Users can search for specific titles or

genres using keywords, facilitating easy navigation and content
discovery.

1.4 Streaming Video Playback: The Netflix clone enables smooth streaming of
high- quality video content, supporting different resolutions and playback options
based on user preferences and internet connection speed.

1.5 Customized Recommendations: Using algorithms similar to Netflix's recommendation

engine , the clone suggests personalized content based on user viewing history, ratings, and
preferences.

1.6 Multiple Profiles: Users can create multiple profiles within a single account,
allowing each member of the household to have their personalized viewing
experience and recommendations.

1.7 Watchlist: Users can add titles to their watchlist for easy access later, ensuring
they can keep track of content they plan to watch.

1.8 Continue Watching: The platform remembers where users left off in a video,
allowing them to resume playback from the same point across different devices.
 Team Description:
The team at our organization comprises a diverse group of individuals, each bringing unique

skills and expertise to the table. At the helm is our esteemed Manager, Mr. Nithin G R, whose

leadership and guidance steer the team towards success . Alongside him, I am fortunate to

have Mr . Hemant as my mentor , whose wisdom and experience have been invaluable

throughout my journey. Together, we form a cohesive unit, leveraging the power of effective

communication and collaboration to overcome any challenges that come our way. With a

shared vision and a commitment to excellence , we tackle projects with enthusiasm and

determination , driving towards our collective goals. The synergy within our team fosters an

environment of innovation and productivity, where every member's contribution is valued and

respected . Together , we are not just colleagues but a supportive network , propelling each

other towards individual and collective growth.

 Introduction:
This chapter secured the approach of internship program and gives the data about Where
internship has been connected to accept accountability this program.

Training Attended

We know that there are many languages and skills needed to build a project, I used all the
languages like JavaScript , PHP* C++. HTML, C# and more. The server combines the result
and execute PHP codes containing various form of data like Image, Test etc., PI IP code can
also be implemented using a command-line interface (C LI) is used to apply the independent
applications for graphical use. The training that 1 underwent at Twelve technology is shown
below;

• jQuery
• HTML5, HTML4
• JavaScript
• CSS3, CSS2
• MySQL
• Boot strap
 Environment of Work:

Frontend Developer The main job of a frontend developer is to work at the client si
designing web pages and graphics that is s accessible by the user.

Backend Developer The responsibility of a back-end developer is to develop I he rear end

a website that interacts with the server. This type of web developer specializes in the
languages like PHP. ruby. ASP.Net, Java, Cold Fusion, and Perl ]6|>

The job profiles for the webdeveloper includes:

• Frontend web developer.

• Backend webdeveloper.
• Developer of web applications
• Analyst for Design and layout Analyst for.
• Senior web a na I yst.
• Web market ing ana lyst.
 Problems and their Solutions
Issues based an development can be faced as the result it requires more vocabulary
of ibrin markups, methods, objects. modifiers, and many ways io build software or
plan. And it's not just web development issues that have more solution that can be easy
and quick.
Problems

I faced so many problems to create while working with CSS. It's very easy, but sometimes it
doesn't match my expectations and is placed in the right place. Web design is not a simple task.
To come up with a unique web design it takes a lot of creativity , brainstorming * cooperation of
the group and uniqueness . A web designer goes through a lol of obstacles in regular basis. Only
the web designs that were in the process of constant development and recursive thinking can
satisfy the target market and clients. Tilts creates a challenging environment for designing
websites.
On the opposite, web designers lace some other obstacles . Such tasks include maintaining a
website that is sensitive enough to be viewed and accessed on all phones. Websites sometimes
take lime to toad, so making website loading faster is one of the toughest challenges for web
design to provide a better user experience.
There is another issue that happens most often. Clients lace issues with the website and complain
it the the developer. Build when developers cheek the website it look absolutely fine to them.
These issues can be caused by out dated web servers or when clients make incorrect changes to
them. Finding the sources of these issues can be time consuming and developer had to tackle this
in a daily basis.

Solutions

Web development really Ls so fascinating and at the same lime tough to me, I will learn and
understand several goals with interest through internship training as if after studying I could
understand web development and it is so interesting then all the other languages to me. During
nty training period , I solved the CSS and other problems . Clean software eliminates
unforeseen errors that can impact the had of site. Automated website monitoring solutions
frequently enable developers to view the websites of their customers in real, time and set alerts
to notify them when potential issues arise. Not only does this allow developers to recognise
an issue before the customer does it, it also gives them the opportunity to address it in many
situations before the problem affects the business of the customer.
 Outcome of learning

4.2.1 HTML
■ Basle HTML (Tags. Element, Attributes. Paragraphs* Headings. Line Breaks. Horizontal
Rule , Lisis , Table . Color Codes , Font . Text Linking , Email , Images . Background ,
Comments, Mem. Media. Charsei)
• Basie concept (WWW IITTP, 11TTPS, Client Server Communication)
• HTML Forms (Inpul, Text Fields, Password, Checkbox, Combo Box, Radio, Text
Areas, Files, Buttons)
• HTML 5 features

4.2.2 CSS
• Basic CSS (sc lector, interna I, external. 1 n line. C Eass, I d, Backgrou nd. Ibnl, T
ext, Padding, Margin, Border, list CSS, hovering and elements)
• Advance CSS (borderradius, opacity, cursor, layers. posh ion, display, float,
gradient, and muhiple-eoluinn)
• Concept of Menus (single menu, dropdown menu)
• Template, design using CSS div.

4.2.5 Bootstrap
* Environment Setup
• Grid System
■ Typography
• Tables, Forms, Buttons. Images
* Drop down, Button, group
* Navigation Element
• Bool strap plug-ins I Transit ion. Modal. Drop down. Tab. Tool lip. Alert, Button)
Live Preview
On the opposite , web designers lace some other obstacles . Such tasks include maintaining a

website that is sensitive enough to be viewed and accessed on all phones. Websites sometimes take lime

to toad, so making website loading faster is one of the toughest challenges for web design to provide a

better user experience.

There is another issue that happens most often. Clients lace issues with the website and complain

it the the developer . Bui when developers cheek the website it look absolutely fine to them. These

issues can be caused by out dated web servers or when clients make incorrect changes to them. Finding

the sources of these issues can be time consuming and developer had to tackle this in a daily basis.

Solutions

Web development really Ls so fascinating and at the same lime tough to me, I will learn and understand

several goals with interest through internship training as if after studying I could understand web

development and it is so interesting then all the other languages to me. During nty training period , I

solved the CSS and other problems . Clean software eliminates unforeseen errors that can impact the

had of site. Automated website monitoring solutions frequently enable developers to view the websites

of their customers in real, time and set alerts to notify them when potential issues arise. Not only does

this allow developers to recognise an issue before the customer does it, it also gives them the

opportunity to address it in many situations before the problem affects the business of the customer.
 HTML CODE

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netflix India – by Prateek Baisla</title>
<link rel="stylesheet" href="Prateek.css">
</head>

<body>

<div class="main">
<nav>
<span><img width="53" src="logo.svg" alt=""></span>
<div>
<button class="btn">English</button>
<button class="btn btn-red-sm">Sign In</button>
</div>
</nav>
<div class="box">
</div>
<div class="hero">
<span>Enjoy big movies, hit series and more from ₹ 199 only.</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/AAAABVr8nYuAg0xDpXDv0VI9HUoH7r
2aGp4TKRCsKNQrMwxzTtr-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" 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>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" stroke-
linecap="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 7291092797- Prateek Baisla55
</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>
<a href="faq">Help center Contact us Privacy
cookie Preferences corporate Speed test Legal Notices Media Center
Privacy
Cookie Prefrences Corporate</a>
<a href="faq">O</a>
</div>
</div>
</footer>
</body>

</html>
 CSS Code

@import
url('https://fonts.googleapis.com/css2?family=Martel+Sans:wght@600&family=Poppins:wght@
300;400;700&display=swap');

* {
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
}

body {
background-color: black;
}

.main {
background-image: url("bg.jpg");
background-position: center center;
background-size: max(1200px, 100vw);
background-repeat: no-repeat;
height: 644px;
position: relative;
}

.main .box {
height: 644px;
width: 100%;
opacity: 0.69;
position: absolute;
top: 0;
background-color: black;
}

nav {
max-width: 60vw;
justify-content: space-between;
margin: auto;
display: flex;
align-items: center;
height: 100px;
}

nav img {
color: red;
width: 130px;
position: relative;
z-index: 10;
}

nav button {
position: relative;
 z-index: 10;
}

.hero {
font-family: 'Martel Sans', sans-serif;
height: calc(100% - 100px);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
position: relative;
gap: 23px;
padding: 0 30px;
}

.hero> :nth-child(1) {
font-family: 'Poppins', sans-serif;
font-weight: bolder;
font-size: 48px;
text-align: center;
}

.hero> :nth-child(2) {
font-weight: 400;
font-size: 24px;
text-align: center;
}

.hero> :nth-child(3) {
font-weight: 400;
font-size: 20px;
text-align: center;
}

.separation {
height: 7px;
background-color: rgb(46, 44, 44);
position: relative;
z-index: 20;
}

.btn {
padding: 3px 8px;
font-weight: 400;
color: white;
background-color: rgba(248, 243, 243, 0.021);
border-radius: 4px;
border: 1px solid white;
cursor: pointer;

}
.btn-red {
background-color: red;
color: white;
padding: 3px 24px;
font-size: 20px;
border-radius: 4px;
font-weight: 400;
}

.btn-red-sm {
background-color: rgba(26, 50, 207, 0.66);
color: white;
}

.hero-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}

.main input {
padding: 7px 101px 8px 14px;
color: white;
font-size: 12px;
border-radius: 4px;
background-color: rgba(23, 23, 23, 0.7);
border: 1px solid rgba(246, 238, 238, 0.5);
}

.first {
display: flex;
justify-content: center;
max-width: 70vw;
margin: auto;
color: white;
justify-content: center;
align-items: center;
}

.secImg {
position: relative;
}

.secImg img {
width: 555px;
position: relative;
z-index: 10;
}

.secImg video {
 position: absolute;
top: 51px;
right: 0;
width: 555px;
}

section.first>div {
display: flex;
flex-direction: column;
padding: 34px 0;
}

section.first>div :nth-child(1) {
font-size: 48px;
font-weight: bolder;
}

section.first>div :nth-child(2) {
font-size: 24px;

.faq h2 {
text-align: center;
font-size: 48px;
}

.faq {
background: black;
color: white;
padding: 34px;
}

.faqbox:hover {
background-color: #414141;
color: white;
}

.faqbox svg {
filter: invert(1);
}

.faqbox {
transition: all 1s ease-out;
font-size: 24px;
display: flex;
justify-content: space-between;
background-color: #2d2d2d;
padding: 24px;
max-width: 60vw;
margin: 34px auto;
 cursor: pointer;
}

footer {
color: white;
max-width: 60vw;
margin: auto;
padding: 60px;
}

footer .questions {
padding: 34px 0;
}

.footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
color: white;
}

@media screen and (max-width: 1300px) {

nav{
max-width: 90vw;
}

.first {
flex-wrap: wrap;
}

.secImg img {
width: 305px;
}

.secImg video {
width: 305px;
}

.hero> :nth-child(1) {
font-size: 32px;
}

.hero> :nth-child(2) {
font-size: 18px;
}

.hero> :nth-child(3) {
font-size: 18px;
}
 .hero-buttons {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}

.faq h2 {
text-align: center;
font-size: 32px;
}

footer {
max-width: 90vw;
padding: 75px 0;
}

.footer-item{
align-items: center;
}

@media screen and (max-width: 1300px) {

.footer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
}

.footer a {
font-size: 14px;
color: white;
}

.footer-item {
display: flex;
flex-direction: column;
gap: 23px;
}
CONCLVTION AND THE FUTURE SCOPE
1.9 Conclusion
As we -all know, our country is a developing country and it dreams to be a developed country
soon.. Day by day our job sector is getting more and more competitive. As a result every
oilier company is searching for experienced candidates.

Finally. I can claim it's internship that helps me gain experience. Thanks to Tec live
technology
Ltd. I gained so much more in-depth knowledge of technical skills and persona! skills This
project helped me gather theoretical and practical knowledge about IITML4/5. CSS. PHP,
MYSQL and other programming language. Beforehand I was confident about
designing and developing Irontend of websites. Now I am also confident and compel
cm irt backbends.

For (hose students who arc willing to work in web development, there arc huge opportunities
available . To give them the scope for online work and development of website , most private
and public organizations employ web designers . With the rapid emergence of the digital
industry , web development professionals " demand is growing , and in the coming days this
lias already availed so many job opportunity tor newcomers,

My internship company gave me a good scope to learn and discover my pot ent inis. I am very
grateful to them. Now I am able to develop web and mobile applications . I was fortunate for
getting the chance to meet the real life so fl ware development environment.

1.10 Future Scopes

I gained so much experience from this Internship , If I did not had this experience it would be
very hard for me to find a suitable job. As we know finding work can be a challenge in this
competitive world. In toy career opportunity, this internship will support me. And rny future
scopes will be after a good internship:

I can work in an IT firm.

 Challenges

During the design of the code, different types of problems have to be met. Also widespread; *

Syntax error.

• Fatal error.
• Find out the problem and try Io solve that.

PHP
* Control. Structures (if, else, else if, while, do-while, for, for each, break, continue,
switch)
• Include (require, include, require_ once. indude_ once)
• Function (User-defined Function, Function arguments, returning values, variables function)
* Array (array declaration, merging, sorting, deleting, inserting)

Javascript

• Basic JavaScript (Syntax. Enable. Localion, Operators, Variables. Events. Alert. Confirm,
Prompt, POP up, Date, print)
• JavaScript String (Strings. Length. Split. Search, Replace)
• JavaScript advanced (get Element by Id. Inner HTML, Get table, index. DOM.

manipulation. Regular Expression)

 Reference

1. www.quora.com
a. https: '• ww. quo ra .com i opic W li ;h - Arc-1 iencfii s-o I'-a-1 )c\ elopers- How -good-
A re-Oppo riu hit ies-iii-l he-u urrent-market
2,. " http:www, mage- peop lexonV*
hl Ip: www. rmgc-puop lexom
3.
a. https://w
r ^ w gtiefconliiae.orgZlink/<lgteiJs/15-1 l3<OOf?redir 15-1099>04LasA
B
h. ss w v, ,>i ri l link. cdu

cT www.mindLools.com I IY PL RLIN K