SECOND YEAR INDUSTRIAL TRAINING SEMINAR REPORT

INDUSTRIAL TRAINING
FRONTEND DEVELOPMENT

Submitted in partial fulfilment of the Degree of Bachelor of Technology

Rajasthan Technical University

By

DIVYANSH
SHARMA
(PIET23CI017)

DEPARTMENT OF COMPUTER ENGINEERING

POORNIMA INSTITUTE OF ENGINEERING & TECHNOLOGY, JAIPUR
(Academic Year 2024-25)

i
 CERTIFICATE

This is to certify that Second Year Industrial Training Seminar Report entitled “Hotstar Clone”
has been submitted by “DIVYANSH SHARMA (PIET23CI017)” for partial fulfilment of the
Degree of Bachelor of Technology of Rajasthan Technical University. It is found satisfactory and
approved for submission.

Date: 23/8/2024

Dr. PAYAL BANSAL Dr. Dinesh Goyal

Head, Director,
Dept. of Comp Engg PIET, Jaipur
PIET, Jaipur

ii
Company Certificate

iii
 DECLARATION

I hereby declare that the Industrial Training Seminar report entitled “HOTSTAR CLONE" was
carried out and written by me under the guidance of Dr. Madhav Sharma & Ms. Payal Bansal,
Assistant Professor, Department of Computer Engineering, Poornima Institute of Engineering &
Technology, Jaipur. This work has not been previously formed the basis for the award of any degree
or diploma or certificate nor has been submitted elsewhere for the award of anydegree or diploma.

Place: Jaipur Divyansh Sharma

Date:23/08/2024 PIET23CI017

iv
 ACKNOWLEDGEMENT

A project of such a vast coverage cannot be realized without help from numerous sources and
people in the organization. I am thankful to Dr. Dinesh Goyal, Director, PIET for providing
me a platform to carry out such a training successfully.

I am also very grateful to Dr. Payal Bansal (HOD, CI) for his kind support.

I would like to take this opportunity to show my gratitude Dr. Madhav Sharma & Ms.
Payal Bansal who helped me in successful completion of my Second Year Industrial Training.
They have guided, motivated & were source of inspiration for me to carry out the necessary
proceedings for the training to be completed successfully.

I am also grateful to the Ms. Kanishka Mishra for his guidance and support.

I am thankful to Mr. Shiryansh Sharma for his kind support and providing me expertise of the
domain to develop the project.

I would also like to express my hearts felt appreciation to all of my friends whose direct or indirect
suggestions help me to develop this project [and to entire team members for their valuable
suggestions.

Lastly, thanks to all faculty members of Computer Engineering department for their moral support
and guidance.

Submitted By: Divyansh Sharma

v
 ABSTRACT

Front-end web development is increasingly gaining significance in our digital lives. It finds a
wide range of applications in various domains, including e-commerce, social media, online
education, and entertainment platforms. In the future, front-end technologies are expected to
evolve rapidly, integrating more advanced features and providing enhanced user experiences.
This project involves the development of a web application using HTML, CSS, and JavaScript,
aimed at replicating the user interface and core functionalities of a popular streaming platform.
This project not only demonstrates proficiency in front-end web development but also provides
a comprehensive understanding of building complex web applications. The project serves as a
practical application of web development skills and lays the groundwork for further
enhancements and customizations.

Keywords: Front-end Development, HTML, CSS, JavaScript, User Interface, Web Application.

Implementation Software and Tools: Visual Studio Code, Git, Chrome Dev Tools, HTML, CSS,
JavaScript.

vi
 TABLE OF CONTENTS

Description Page No.

Title i
Certificate ii
Company Certificate iii
Declaration iv
Acknowledgement v
Abstract vi
Table of Contents vii
List of Abbreviations viii
Chapter 1 Introduction 1
1.1 Introduction
1.2 Significance of Training
1.3 Company Profile
Chapter 2 Technology Specification 4
2.1 Language Learned
2.2 Tools used in Project
Chapter 3 Project Description 12
3.1 Project Title
3.2 Project Overview
3.3 Project Objective
3.4 Technologies Used
3.5 Project Structure
3.6 Key Features
3.7 Conclusion
Chapter 4 Project Snapshots 15
Chapter 5 Limitations and Learning Outcomes 20
5.1 Limitations
5.2 Learning Outcomes
Chapter 6 Future Scope 21
Chapter 7 Refrences 22

vii
 List of Abbreviations

1) HTML- Hyper Text Markup Language

2) CSS- Cascading Style Sheets
3) JS- Javascript
4) VS Code- Visual Studio Code
5) WCAG- Web Content Accessibility Guidelines
6) HTTP- Hyper Text Transfer Protocol
7) BEM- Block Element Modifier
8) CDN- Content Delivery Network
9) DOM - Document Object Model
10) API - Application Programming Interface
11) HTTPS - Hypertext Transfer Protocol Secure
12) URL - Uniform Resource Locator
13) UI - User Interface
14) UX - User Experience
15) JSON - JavaScript Object Notation

viii
 Chapter 1
Introduction

1.1 Introduction

Front-end web development involves transforming data into a graphical interface, allowing users
to view and interact with information through digital means using HTML and CSS. Also known
as client-side development, it encompasses the creation of HTML, CSS, and JavaScript for
websites or web applications, enabling users to directly engage with them. One of the main
challenges in front-end development is the ever-evolving nature of the tools and techniques used
to create the front end of a website. As a result, developers must continuously stay updated on the
latest advancements in the field.

1.2 Significance of Training

Engineering is still considered as the best career choice for science students but it is equally
challenging to stand out in the race. One has to be versatile and well trained to be a preferred
candidate for a high-paying job position. That is why it is important for the students to go for
practical training. Rajasthan Technical University (RTU) has introduced a new subject Industrial
Training under PSIT category to expose students to industries work culture and get trained in
technology companies currently using. Industrial training plays a crucial role in engineering
education, bridging the gap between theoretical knowledge and practical application. Here are
some key points highlighting its significance:

1. Skill Enhancement: Industrial training helps engineering students hone their skills by
exposing them to the latest technologies, methodologies, and industry best practices. This
ensures they are well-prepared for future career challenges.
2. Real-World Experience: By immersing students in a real work environment, industrial
training provides firsthand understanding of industry operations. This experience is

Page No. 1
 invaluable, offering insights into the day-to-day functioning of companies and enhancing
students’ adaptability to professional settings.
3. Real-World Experience: By immersing students in a real work environment, industrial
training provides firsthand understanding of industry operations. This experience is
invaluable, offering insights into the day-to-day functioning of companies and enhancing
students’ adaptability to professional settings.
4. Professional Development: Industrial training fosters the development of essential
professional skills such as work ethics, communication, and management. These skills
are critical for a successful transition from academic life to the professional world.
5. Industry-Relevant Knowledge: Students gain exposure to the latest advancements in their
field, which is crucial for staying updated with industry trends. This knowledge not only
builds confidence but also helps in tackling complex projects more effectively
6. Networking Opportunities: During industrial training, students have the chance to
interact with professionals in their field, which can lead to valuable networking
opportunities. These connections can be beneficial for future job prospects and career
growth.

1.3 Company Profile

Bussibees Ed. Tech Pvt. Ltd. is a premier Information Technology training company dedicated to
delivering top-notch education that effectively bridges the gap between theoretical knowledge and
practical application. Our commitment is to empower students with the essential skills and
knowledge they need to excel in their chosen careers.

Mission: Our mission is to empower students with the essential skills and knowledge they need to
excel in their chosen careers. We aim to provide an educational experience that is both practical
and relevant, ensuring that our students are well-prepared for the demands of the modern
workforce.

Goals: Our goal is not just to educate but to equip students with the tools to become self-reliant
professionals. By integrating the latest technologies and modern teaching methodologies, we strive
to make education both practical and relevant.

Page No. 2
Services Offered:

 IT Training Programs: Comprehensive courses covering various aspects of Information

Technology, including programming, web development, cybersecurity, and more.

 Practical Workshops: Hands-on workshops that allow students to apply their knowledge
in real-world scenarios.

 Career Development: Guidance and support for students to help them navigate their
career paths and achieve their professional goals.

 Customized Training Solutions: Tailored training programs designed to meet the

specific needs of students and industry requirements.

Contact Information

 Office Address: Baba Vidhan Sabha Nagar, Patrakar Rd, near Orient Residency, Jaipur,
Rajasthan.

 Phone: +91 86190 03586

 Email: info@bussibees.com

 Website: http://www.bussibees.com/

Page No. 3
 Chapter 2
Technology Specifications

2.1 Language Learned

2.1.1 HTML

HTML (Hyper Text Markup Language) is the standard markup language used to create and
structure content on the web. It's not a programming language, but rather a markup language that
tells a web browser how to display content. HTML uses a series of elements (also called tags) to
structure the content of a webpage.

Here are some key aspects of HTML technology specification:

1. Document Structure

 Doctype Declaration: Specifies the HTML version being used. For HTML5, it
is <!DOCTYPE html>.

 HTML Element: The root element of an HTML document, encapsulated

by <html> tags.

 Head Element: Contains meta-information about the document, such

as <title>, <meta>, <link>, and <style> tags.

 Body Element: Contains the content of the document, including text, images, links, and
other media, encapsulated by <body> tags.

2. Semantic Elements

Page No. 4
  Headings: <h1> to <h6> tags used to define headings, with <h1> being the highest level.

 Paragraphs: <p> tags used to define paragraphs.

 Lists: <ul> for unordered lists, <ol> for ordered lists, and <li> for list items.

 Links: <a> tags used to create hyperlinks.

 Tables: <table>, <tr>, <th>, and <td> tags used to create tables.

3. Forms and Input

 Form Element: <form> tag used to create a form for user input.

 Input Types: Various input types such as <input type="text">, <input

type="password">, <input type="email">, <input type="submit">, etc.

 Labels: <label> tags used to define labels for input elements.

 Text Areas: <textarea> tags used for multi-line text input.

 Buttons: <button> tags used to create clickable buttons.

4. Multimedia Elements

 Images: <img> tags used to embed images.

 Audio: <audio> tags used to embed audio files.

 Video: <video> tags used to embed video files.

 Canvas: <canvas> tags used for drawing graphics via scripting (usually JavaScript).

5. Metadata

 Meta Tags: <meta> tags used to specify metadata such as character set, author,
description, and viewport settings.

 Link Tags: <link> tags used to link external resources like stylesheets.

6. HTML5 Specific Features

Page No. 5
 New Semantic Elements: Elements like <article>, <section>, <nav>, <aside>,
and <footer> introduced to improve the semantic structure of web pages.

 Form Enhancements: New input types (date, color, range, etc.) and attributes
(placeholder, required, pattern, etc.) for better form handling.

 Multimedia Support: Native support for audio and video elements without the need for
external plugins.

 APIs and DOM Enhancements: Integration with various APIs like Geolocation, Web
Storage, and Web Workers for enhanced functionality.

2.1.2 CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a
document written in HTML or XML.

==

Here are the key aspects of its technology specification:

1. Syntax and Structure

 Selectors: Patterns used to select the elements you want to style. Examples include
element selectors, class selectors, ID selectors, attribute selectors, and pseudo-classes.

 Properties and Values: CSS rules are made up of properties and values. For
example, color: blue; sets the text color to blue.

Page No. 6
 Declarations and Rulesets: A declaration consists of a property and a value, and a ruleset
consists of one or more declarations enclosed in curly braces {}.

2. Box Model

 Content: The actual content of the element.

 Padding: Space between the content and the border.

 Border: The border surrounding the padding and content.

 Margin: Space outside the border.

3. Layout Techniques

 Display Property: Controls the layout behavior of an element (block, inline, inline-
block, none).

 Positioning: Specifies the positioning method (static, relative, absolute, fixed, sticky).

 Flexbox: A layout model for creating flexible and responsive layouts.

 Grid: A powerful layout system for creating complex, responsive grid-based layouts.

4. Styling Text

 Font Properties: font-family, font-size, font-weight, font-style, font-variant.

 Text-Properties: color, text-align, text-decoration, text-transform, line-height, letter-

spacing.

5. Backgrounds and Borders

 Background-Properties: background-color, background-image, background-

position, background-size, background-repeat, background-attachment.

 Borders: border-width, border-style, border-color, border-radius.

6. Responsive Design

Page No. 7
  Media Queries: Apply styles based on device characteristics like width, height,
orientation, and resolution.

 Responsive Units: Use relative units like percentages, em, rem, vw, and vh.

7. CSS Transitions and Animations

 Transitions: Create smooth transitions between property changes using transition-

property, transition-duration, transition-timing-function, and transition-delay.

 Animations: Define keyframes and apply animations using @keyframes, animation-

name, animation-duration, animation-timing-function, animation-delay, animation-
iteration-count, and animation-direction.

8. CSS Variables

 Custom Properties: Declare and use CSS variables for reusable values using --variable-
name and var(--variable-name).

2.1.3 JAVASCRIPT

JavaScript allows scripting on your website and makes it completely dynamic in nature. It
provides front end scripting for your website and is a high-level dynamic interpreted
programming language.

Here are some fundamental JavaScript topics that every beginner should learn:

1. Variables and Data Types

 Variables: Declaring variables using var, let, and const.

 Data Types: Understanding different data types such as strings, numbers, booleans,
arrays, and objects.

2. Operators

 Arithmetic Operators: +, -, *, /, %.

Page No. 8
 Comparison Operators: ==, ===, !=, !==, >, <, >=, <=.

 Logical Operators: &&, ||, !.

3. Control Structures

 Conditional Statements: if, else if, else, switch.

 Loops: for, while, do...while.

4. Functions

 Function Declaration: Defining functions using the function keyword.

 Function Expressions: Assigning functions to variables.

 Arrow Functions: Using the => syntax for shorter function expressions.

5. Objects and Arrays

 Objects: Creating and manipulating objects with properties and methods.

 Arrays: Creating arrays and using array methods

like push(), pop(), shift(), unshift(), map(), filter(), and reduce().

6. DOM Manipulation

 Selecting Elements: Using methods like getElementById(), querySelector(),

and querySelectorAll().

 Modifying Elements: Changing content and styles using properties

like innerHTML, textContent, and style.

 Event Handling: Adding event listeners using addEventListener().

7. Asynchronous JavaScript

 Callbacks: Functions passed as arguments to other functions.

 Promises: Handling asynchronous operations with then() and catch().

Page No. 9
  Async/Await: Writing asynchronous code that looks synchronous.

8. Error Handling

 Try…Catch: Handling errors using try, catch, and finally blocks.

 Throwing Errors: Creating custom errors using the throw keyword.

9. Storing and Achieving Data Using JSON

 JSON Basics: Understanding JSON (JavaScript Object Notation) as a lightweight data

interchange format.

 Storing Data: Converting JavaScript objects to JSON strings using JSON.stringify().

 Retrieving Data: Parsing JSON strings back into JavaScript objects using JSON.parse().

11. Making Basic API Calls and Handling Responses

 Fetch API: Using the Fetch API to make HTTP requests.

 GET Requests: Fetching data from a server.

 POST Requests: Sending data to a server.

 Handling Responses: Parsing JSON responses and handling errors.

2.2 Tools used in Project

2.2.1 Code Editor – Visual Studio Code

Visual Studio Code, commonly referred to as VS Code, is a free and open-source code editor
developed by Microsoft. It has gained immense popularity among developers due to its
lightweight, highly customizable, and feature-rich nature. Visual Studio Code, commonly
referred to as VS Code, is a free and open-source code editor developed by Microsoft. It has
gained immense popularity among developers due to its lightweight, highly customizable, and
feature-rich nature. It features a clean and user-friendly interface with a minimalistic design,
providing a distraction-free environment for coding. One of VS Code's standout features is its
Page No. 10
 extensive library of extensions. Developers can install extensions to add new languages,
frameworks, tools, and integrations, customizing the editor to their specific needs. It comes with
built-in Git support, allowing developers to manage version control directly within the editor.
This includes features like diff viewing, commit management, and branch handling. VS Code
includes an integrated terminal, enabling developers to run commands and scripts without
leaving the editor. VS Code includes an integrated terminal, enabling developers to run
commands and scripts without leaving the editor.

2.2.2 Browser developer tools

Browsers are essential tools for web development, offering a range of features and capabilities
that help developers create, test, and debug web applications. Browsers render HTML and CSS
to display web pages as intended. This allows developers to see how their code translates into a
visual interface. Ensuring that web pages look and function correctly across different browsers
(e.g., Chrome, Firefox, Safari, Edge) and devices.

Page No. 11
 Chapter 3
Project Description

This project is a clone page inspired from a website Netflix.

3.1 Project Title: Hotstar Clone Frontend

3.2 Project Overview

The Hotstar Clone project aims to replicate the core functionalities and user experience of the
popular streaming platform, Disney+ Hotstar. This project will involve developing a web
application that allows users to stream a variety of content, including movies, TV shows, and live
sports. The application will be built using HTML, CSS, and JavaScript.

3.3 Project Objectives

 User Interface: Design a visually appealing and user-friendly interface that mimics
Disney+ Hotstar. Various sections on the homepage displaying different categories of
content, such as “Trending Now,” “Recommended for You,” and “New Releases.”
Individual cards for each piece of content, displaying the title, thumbnail, and a brief
description. 
 Content Streaming: Implement features to stream video content. An embedded video
player with controls for play, pause, volume, and fullscreen. 
 Search and Recommendations: Develop a search functionality and recommendation
system. A search bar that allows users to search for content by title, genre, or keywords.

3.4 Technologies Used

 HTML5: For structuring the web pages and content. se semantic HTML5 elements. to improve
the readability and accessibility of the web pages. Embed video content using the <video>
element, providing controls for playback.
 CSS3: For styling the web pages and ensuring a responsive design. Use CSS animations

Page No. 12
 and transitions to enhance the user experience with smooth visual effects.
 JavaScript: For adding interactivity and dynamic content. Implement event listeners to
handle user interactions, such as clicks, form submissions, and keyboard inputs.

3.5 Project Structure

3.5.1 HTML Structure:

 Head Section: Includes meta tags for character set and viewport settings, links to
external CSS files, and the page title.

 Body Section:

 Navigation Bar: Contains the Disney+ logo, navigation links (TV, Movies,
Sports, Premium), a search box, and a login button.

 Carousel: A container for the carousel to display featured content.

 Video Card Container: A grid layout for video cards, each containing an
image and a video element that plays on hover.

 Recommended Section: A horizontally scrollable list of recommended

movies.

 Popular Shows Section: A horizontally scrollable list of popular shows.

 New Releases Section: A horizontally scrollable list of new releases.

 Footer: Contains copyright information and links to terms of use, privacy

policy, and FAQ.

3.5.2 CSS Styling:

 Global Styles: Reset margins and paddings, set box-sizing, and define font styles.

 Navigation Bar: Styles for the navigation bar, including the logo, navigation links,
search box, and buttons.

 Carousel: Defines the layout and appearance of the carousel, including the slider
Page No. 13
 and slide content.

 Video Card: Styles for the video cards, including hover effects to display videos.

 Sections: Styles for the different sections (recommended, popular shows, new
releases) and their respective cards.

 Footer: Styles for the footer and its links.

3.5.3 JavaScript Logic:

 Carousel Functionality: Handles the automatic sliding of the carousel items and
manual navigation using previous and next buttons.

 Video Card Hover Effect: Switches between the image and video elements on
hover, providing a preview of the video content.

3.6 Key Features

 The home page will showcase featured content prominently, such as the latest releases,
exclusive content, and editor’s picks. This section will use a carousel or slider to display
multiple items in a visually appealing manner.
 Display a list of trending movies and TV shows based on user engagement and popularity.
This section will be updated regularly to reflect the latest trends.
 Organize content into various categories and genres, such as Action, Drama, Comedy,
and more. Each category will have its own section on the home page, allowing users to
browse content easily.
 Include a search bar at the top of the page, allowing users to search for content by title,
genre, or keywords.

3.7 Conclusion
Creating a Hotstar clone frontend is a challenging but rewarding project that allows you to
showcase your web development skills. Make sure to prioritize user experience, design, and
performance to deliver a high-quality streaming platform replica.

Page No. 14
 Chapter 4
Project Snapshots

Page No. 15
HTML Code

Page No. 16
CSS Code

Page No. 17
Javascript Code

Page No. 18
Page No. 19
 Chapter 5
Limitations and Learning Outcomes

5.1 Limitations
 High-quality images and videos can slow down the application, especially on slower
networks, leading to a poor user experience.
 Without a robust backend, features like user authentication and personalized
recommendations are limited.
 As the application grows, managing and maintaining the codebase can become complex,
especially with increasing features and content.
 Ensuring consistent behavior and appearance across different browsers can be
challenging due to variations in how browsers interpret HTML and CSS.

5.2 Learning Outcome

 Gained a deep understanding of HTML5 for structuring web pages and CSS3 for styling
and responsive design.
 Enhanced skills in JavaScript for adding interactivity and dynamic content. Used
JavaScript to manipulate the Document Object Model (DOM), handle events, and
implement features like search functionality and content filtering.
 Improved debugging and testing skills using browser developer tools. Identified and
fixed issues related to layout, interactivity, and performance across different browsers
and devices.

Page No. 20
 Chapter 6
Future Scope

 Allow users to customize their interface, such as changing themes, font sizes, and layout
preferences.
 Integrate voice search functionality to allow users to search for content using voice
commands.
 Use machine learning algorithms to provide more accurate and personalized content
recommendations based on user behaviour and preferences.
 Add support for subtitles and closed captions in multiple languages also add support for
multiple languages to cater to a global audience. Allow users to control the playback speed
of videos.
 Allow users to leave reviews and ratings for movies and TV shows, and display these
reviews on content pages.
 Integrate with payment gateways to handle subscriptions and transactions securely.
 Use analytics tools to track user behaviour and gather insights to improve the application.
 Provide more advanced filtering options, such as filtering by release year, rating, language,
and more. Implement collaborative filtering techniques to recommend content based on the
preferences of similar users.

Page No. 21
 Chapter 7
References

 What is HTML (w3schools.com)

 Front-End Development - GeeksforGeeks
 Wikipedia
 Introduction to HTML, CSS, JavaScript & How websites work? | Web Development
Tutorials #1 | CodeWithHarry

Page No. 22