The document outlines a summer training presentation for a Disney Plus Hotstar clone project using HTML, CSS, and JavaScript. It includes an introduction to key topics like web programming, HTML, CSS, JavaScript, and GitHub. It then describes the Disney Plus Hotstar clone project, which recreates the website homepage using a navbar, search box, sliding content carousel, movie cards with hover effects, and video playback on hover. The document concludes with references used in the project research.

1. DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
SUMMER TRAINING PRESENTATION –2023
V SEMESTER
Disney Plus Hotstar Clone Using HTML ,CSS and Javascript

2. Certificate

3. Contents
• Module 1 - Introduction to Web Programming
• Module 2 – Introduction of HTML
• Module 3 – Introduction of CSS
• Module 4 - JavaScript Programming for Web
Applications
• Module 5 – GitHub
• Module 6 - Project Description
• Module 7 - Conclusion
• Module 8 - References

4. Introduction to Web Programming
• The process of creating and maintaining websites.
• Front-end web development uses languages such as HTML,
CSS, and JavaScript to create the visual layout and functionality
of a website.
• HTML provides the structure of the website.
• CSS is used for styling and layout.
• JavaScript allows for dynamic interactions and animations on
the page.
• Back-end web development involves using programming
languages such as Python, Ruby, and Java to create the server-
side logic and database interactions.
• Web programming can be used to create a wide variety of
websites, from simple static sites to complex web applications.

5. Introduction to HTML
What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.

6. • HTML Tages • HTML Pages Structure

7. Introduction of CSS
• CSS stand for(Cascading Style Sheets)
• It is a stylesheet language used to describe the presentation
of a document written in a markup language.
• It is used to add visual formatting to HTML or XML
documents, such as color, layout, and font.
• CSS allows developers to separate the presentation of a
document from its structure, making it easier to maintain and
modify.
• It was first introduced in 1996 and has since become a
standard for web development.

8. Introduction to Javascript
• JavaScript is a programming language.
• It is primarily used to create interactive and
dynamic web pages.
• It also provide validation, animations, and
responsive design to a website.
• It can also be used to create server-side
applications using technologies such as Node.js.
• It was first introduced in 1995 by Brendan Eich
• JavaScript is a client-side scripting language,
which means that the code is executed by the
client's web browser rather than on the server.

9. GitHub
• It is a version control system.
• It is primarily used for software development,
but can be used for any type of project .
• Users can host and review code, manage
projects, and build software.
• It also includes features such as bug tracking,
feature requests, task management, and wikis
for every project.
• It is built on top of the Git version control
system.

10. Project Description
• Project is very similar to the original disney plus website. It is
only one page(homepage) website. It has navbar and search
box with cool click effect same as Disney Plus hotstar has
and it also has a slider or carousel with infinity or endless
effect. Which was very hard for me to make at first. And after
that we also have movie cards. With awesome card hover
effect. And we have much more.

12. Workflow
• First we created navigation bar by making a carousel class.
• Now we will make slider. We'll create these slides with JS but for
styling purpose just create one for now in HTML.

13. • Inside app.js we will select our carousel element and create an empty array to store all slider.
• Now by creating a function createslide for creating a slide.
• In this function . In the start we are increasing or setting our next slideIndex with some if/else
condition . And after that we are creating DOM element that we need for our slide.

14. • Now we will make video play on hover card.
• This effect will work if user click on your site first. If use did not click
on your page first then the video will not play because of google
chrome policy.

15. Conclusion
• Learnt HTML , CSS and Javascript.
• Build some basic projects to improve development skills.
• Learnt some basic concepts of React.js.

16. References
• https://www.w3schools.com/whatis/
• https://dev.to/kunaal438/how-to-create-disney-plus-clone-for-
beginner-in-2021-html-css-js-m3p
• Wagner, Gerd. "Introduction to simulation using JavaScript." 2016
Winter Simulation Conference (WSC). IEEE, 2016.
• [2] Musciano, Chuck, and Bill Kennedy. HTML & XHTML: The
Definitive Guide: The Definitive Guide. " O'Reilly Media, Inc.", 2002.
• [3] Nixon, Robin. Learning PHP, MySQL & JavaScript: With jQuery,
CSS & HTML5. " O'Reilly Media, Inc.", 2014.

17. THANK YOU