A

REPORT
ON
INDUSTRIAL TRAINING ON
WEB DEVELOPMENT
Taken at

In partial fulfillment of the requirement for the award of degree of

Bachelor of Technology
In
Information Technology

(Session 2023-24)

Duration: From August 10, 2023 to September 10, 2023

Submitted to: Submitted by:

Dr. S. K. Singh NAME : BHANU PRATAP
ROLL NO. : 22EJCIT039

Department of Information Technology Jaipur Engineering College &

Research Centre, Jaipur
Rajasthan Technical University
2023-24
Industrial Training Certificate
 CERTIFICATE

This is to certify that the report of the training submitted is the outcome of the practical training
done at “Bharat Intern” in “Web development” is carried out by Bhanu Pratap bearing RTU
Roll No.: 22EJCIT039 under the guidance and supervision of “Santosh Kumar” for the award
of Degree of Bachelor of Technology (B. Tech) in Information Technology from Jaipur
Engineering College & Research Centre, Jaipur (Raj.), India affiliated to Rajasthan
Technical University, Kota during the academic year 2023-2024.

To the best of the my knowledge the report

i) Embodies the work of the candidate.

ii) Has duly been completed.
iii) Fulfills the requirement of the ordinance relating to the bachelor of technology
degree of the Rajasthan technical University and
iv) Is up to the desired standard for the purpose of which is submitted.

Dr. Smita Agarwal Mr. Piyush Gautam Dr. [Link]

Head of Department Assistant Professor & TPO Professor & PTS Coordinator

Information Technology Information Technology Information Technology

JECRC, Jaipur JECRC, Jaipur JECRC, Jaipur

i
 DECLARATION

I hereby declare that the report entitled “Web Development” has been carried out and
submitted by the undersigned to the Jaipur Engineering College & Research Centre, Jaipur
(Rajasthan) in an original work, conducted under the guidance and supervision of Mr. Santosh
Kumar of Bharat Intern Pvt. Ltd, Jaipur.

The empirical findings in this report are based on the data, which has been collected by me. I
have not reproduced from any report of the University neither of this year nor of any previous
year.

I understand that any such reproducing from an original work by another is liable to be punished
in a way the University authorities’ deed fit.

Place: Jaipur BHANU PRATAP

Date: 22EJCIT039

ii
 PREFACE

Bachelor of Technology in Information Technology is the Rajasthan Technical University

course (Approved by AICTE) having duration of 4 years. As a prerequisite of the syllabus
every student on this course has to take professional training from any Industry related to the
stream for 15 days in order to complete his/her studies successfully. And it is required to submit
the project report on the completion of it.

The main objective of this training is to create awareness regarding the application of theories
in the practical world of Information Technology and to give a practical exposure of the real
world to the student.

I, therefore, submit this project report of this training, which was undertaken at Bharat Intern
Pvt. Ltd, Jaipur. It was a good experience to have training in a Reputed Organization in the
Web Development in which company stands at international.

I feel great pleasure to present this project report that this Internship provides me the best
experience to convert my theoretical knowledge into practical knowledge.

iii
 ACKNOWLEDGEMENT

Any serious and lasting achievement or success, one can never achieve without the help,
guidance and co-operation of so many people involved in the work.

It is my pleasant duty to express my profound gratitude and extreme regards and thanks to Mr.
Arpit Agarwal and Dr. V.K. Chandna who gave me an opportunity to take professional
training in Bharat Intern Pvt. Ltd, Jaipur.

I am indebted towards Mr. Santosh Kumar who has allotted this project and his precious time
and advice during the training period, which is imminent to the report.

I would like to express deep gratitude to Dr Smita Agrawal, Head of Department (Information
Technology), Jaipur Engineering College & Research Centre, Jaipur (Rajasthan) without
whose permission the training would not be possible. I would also like to thank Mr. Piyush
Gautam, Training & Placement Officer and Dr. S. K. Singh, PTS Coordinator, Department
of Information Technology JECRC, Jaipur who recommended me for this training.

Last but not the least, I am grateful to my beloved parents whose blessings and inspirations are
always with me. I am heartily thankful to those people who are involved directly or indirectly
in this project for encouraging me whenever I needed their help in spite of their busy schedule.

Bhanu Pratap

22EJCIT039

iv
 COMPANY PROFILE

Bharat Intern is a fast growing fully governed by young and energetic Technocrats, dedicated
to Open Source technologies and Web Development basic, App development, Machine
Learning, etc. Bharat Intern have achieved the status of center of excellence wherein there is
latest technology, innovative developing methodology, state of the art infrastructure and
individual needs of employees are identified and executed professionally, efficiently &
ethically. Bharat Intern is a new or relatively small company. At Bharat Intern, we firmly believe
that beginning with strength is the ultimate secret to success. Therefore, we are committed to equipping
college students with the essential skills, experience, and knowledge required to kick-start their careers
and reach their aspirations. Our internship programs are expertly crafted to assist students in not just
starting strong, but finishing even stronger, enabling them to distinguish themselves in the cut-throat job
market and accomplish their ambitions.

High end Business & Training Services:

Bharat Intern provides training by in-house experts or certified trainers or corporate developers
in areas related to Web Development Basic, Android Apps Development, Full Stack Web
Development, Machine Learning, Data Science, etc.

Bharat Intern is structured around its Customers, in which customers are the focus of the
organization. Customers lie at the heart of our strategy. We encourage our customers to self-
manage, identifying for themselves where their needs lie. Following are the few courses
available in various areas like security, certificate courses, development, database
management, etc.

 Web Application Development

 Android Apps Development
 Machine Learning
 Data Science
 Full Stack Web Development

Technical Support Services:

Our goal is to empower the next generation of tech leaders. Our internship program offers
hands-on experience in different fields. Their goal is to empower the next generation of tech
leaders. Internship program offers hands-on experience in different fields.

v
 Chapter Index
S. No. TITLE PAGE NO.

Certificate i

Declaration ii

Preface iii

Acknowledgement iv

Company Profile v

1. Introduction 1

1.1 Purpose 1

1.2 Scope 2

1.3 Features 3

2. History of HTML 5

3. What is HTML? 7

3.1 What comes under HTML? 7

3.2 Characteristics of HTML 8

4. Key Technologies 9

4.1 HTML 9

4.2 CSS 9

5. Other Projects On Front End Web Development 11

vi
 5.1 Netflix 11

5.2 Amazon 11

5.3 Flipkart 11

5.4 Portfolio 11

6. Netflix 13

Conclusion 22

Future Scope 23

References 24

vii
 CHAPTER 1
INTRODUCTION
1.1 PURPOSE
Front-end web development plays a crucial role in shaping the user experience and overall
functionality of a website. It encompasses the design and implementation of the user interface,
ensuring that the website is not only visually appealing but also intuitive and easy to navigate.
In a world where online presence is integral to businesses and individuals alike, the purpose of
front-end web development extends beyond aesthetics to include several key aspects.

1. User Experience (UX):

Front-end development is primarily focused on creating a positive and seamless user
experience. This involves designing user interfaces that are intuitive, responsive, and engaging.
A well-designed front end ensures that users can easily navigate through a website, find the
information they need, and perform desired actions without confusion or frustration.

2. Visual Design:
The visual appeal of a website is often the first impression users have. Front-end developers
are responsible for creating visually pleasing layouts, choosing color schemes, and
incorporating graphics that align with the brand identity. A visually appealing website can
enhance user trust, increase engagement, and leave a lasting positive impression.

3. Responsiveness:
Front-end developers ensure that websites are responsive across various devices and screen
sizes. With the increasing use of smartphones and tablets, it is essential for websites to adapt
to different resolutions. Responsive design not only improves the user experience but also
positively affects search engine rankings as search engines favor mobile-friendly websites.

4. Cross-Browser Compatibility:
Different users prefer different web browsers, such as Chrome, Firefox, Safari, or Edge. Front-
end developers need to ensure that the website functions consistently and looks good across
various browsers. This involves testing and addressing compatibility issues to provide a
consistent experience for all users.

1
5. Performance Optimization:
Front-end development involves optimizing website performance by minimizing page load
times. This includes compressing images, using efficient coding practices, and reducing
unnecessary scripts. Faster-loading websites not only improve user satisfaction but also
contribute to better search engine rankings.

6. Interactivity and Dynamic Content:

Modern websites often incorporate dynamic content and interactive elements. Front-end
developers use technologies such as JavaScript, HTML5, and CSS3 to create dynamic features
like sliders, forms, and real-time updates. These interactive elements enhance user engagement
and make the website more functional and interesting.

7. Accessibility:
Front-end developers play a crucial role in making websites accessible to users with
disabilities. This involves implementing features such as alternative text for images, keyboard
navigation, and ensuring compatibility with screen readers. An accessible website is inclusive
and aligns with ethical and legal considerations.

8. Integration with Back-End:

Front-end and back-end development work hand in hand to ensure the overall functionality of
a website. Front-end developers collaborate with back-end developers to integrate the user
interface with the server-side logic, databases, and other back-end processes.

1.2. SCOPE
Front-end web development plays a crucial role in creating the user interface and overall user
experience of websites and web applications. As technology continues to advance and online
presence becomes increasingly important for businesses and individuals, the scope of front-
end web development is both expansive and promising.

In today's digital age, a visually appealing and user-friendly website is often the first point of
contact between businesses and their target audience. Front-end developers are responsible for
designing and implementing the layout, visual elements, and interactive features that users

2
engage with directly. With the constant evolution of web technologies, the demand for skilled
front-end developers is high, and this trend is expected to continue.

The advent of responsive design, which ensures a seamless user experience across various
devices, has further expanded the scope of front-end development. Mobile optimization and
the rise of progressive web apps contribute to the demand for developers who can create
interfaces that are not only aesthetically pleasing but also functional and accessible on diverse
platforms.

In conclusion, the scope of front-end web development is vast, encompassing the creation of
visually appealing, responsive, and accessible user interfaces. As businesses continue to
prioritize their online presence, the demand for skilled front-end developers is expected to
remain strong, offering ample opportunities for those in the field. Continuous learning and
adaptation to emerging technologies will be essential for professionals to thrive in this dynamic
and evolving industry.

1.3 FEATURES
Front-end web development involves creating the visual and interactive elements of a
website that users directly interact with. The features of front-end web development are
diverse and crucial for delivering a positive user experience:

User Interface (UI) Design: Front-end developers are responsible for designing the
overall look and feel of a website, including layout, color schemes, typography, and
visual elements. A well-designed UI enhances user engagement and satisfaction.

Responsive Design: Front-end developers ensure that websites are accessible and
functional across various devices and screen sizes. Responsive design allows content to
adapt seamlessly to different resolutions, providing a consistent experience on desktops,
tablets, and smartphones.

Cross-Browser Compatibility: Front-end developers must ensure that websites work

consistently across different web browsers such as Chrome, Firefox, Safari, and Edge.

3
This involves testing and optimizing code to address variations in rendering and
performance.

Web Performance Optimization: Optimization techniques, image compression, and

efficient resource loading, are employed to enhance website speed and performance. Fast-
loading pages contribute to a better user experience and improved search engine rankings.

4
 CHAPTER 2
HISTORY OF HTML

The history of front-end web development is marked by significant technological

advancements and evolving standards. Here's a brief overview of key milestones and
developments:

1. HTML and the Birth of the Web (1990): The World Wide Web was introduced by Sir Tim
Berners-Lee in 1991. Hypertext Markup Language (HTML) emerged as the standard for
creating and structuring web documents. Early websites were primarily text-based and lacked
the sophisticated front-end elements we see today.

2. Introduction of CSS (1996): Cascading Style Sheets (CSS) was introduced to separate the
structure (HTML) from the presentation (CSS) of web pages. This allowed for more flexible
and efficient styling, paving the way for better-designed websites.

3. JavaScript Emergence (1995-1997): JavaScript, initially developed by Netscape, was

introduced to add interactivity and dynamic elements to web pages. This marked a significant
shift from static HTML pages to more dynamic and engaging web experiences.

4. DOM and AJAX (late 1990s-early 2000s): The Document Object Model (DOM) provided
a way to dynamically manipulate HTML and XML documents. Asynchronous JavaScript and
XML (AJAX) enabled seamless data exchange between the browser and server, facilitating
smoother and more responsive user interfaces.

5. JQuery Dominance (2006-2010): jQuery, a JavaScript library, gained widespread adoption

due to its simplicity and cross-browser compatibility. It simplified common tasks, making it
easier for developers to create interactive and animated web elements.

6. Responsive Web Design (2010): With the proliferation of mobile devices, Ethan Marcotte
coined the term "responsive web design." This approach involves designing websites to adapt
to various screen sizes and resolutions, ensuring a consistent user experience across devices.

5
7. CSS3 and HTML5 (2010): The release of CSS3 and HTML5 brought about a wealth of
new features and capabilities. CSS3 introduced advanced styling options, transitions, and
animations, while HTML5 provided enhanced semantic elements and improved support for
multimedia.

8. JavaScript Frameworks and Libraries (2010): The rise of JavaScript frameworks such as
Angular, React, and [Link] revolutionized front-end development. These tools facilitated the
creation of complex, single-page applications (SPAs) and improved the overall organization
and maintainability of code.

9. Web Components and Progressive Web Apps (2010): Web Components, a set of web
platform APIs, allowed developers to create reusable and encapsulated custom elements.
Progressive Web Apps (PWAs) emerged, combining the best of web and mobile apps for
improved user experiences, even in offline scenarios.

10. Modern Tools and Build Systems (2010): Front-end development saw the adoption of
modern build tools like web pack, package managers like npm, and task runners like Gulp.
These tools streamlined workflows, enhanced code organization, and improved performance.

11. Web Assembly (2017): Web Assembly, a binary instruction format, was introduced to
improve the performance of web applications. It allows developers to run code at near-native
speed in the browser, opening the door to more complex and resource-intensive applications
on the web.

The history of front-end web development reflects a continuous evolution driven by

technological advancements, changing user expectations, and the need for more dynamic and
interactive web experiences. The field continues to evolve rapidly, with ongoing developments
in web standards, frameworks, and tools.

6
 CHAPTER 3
WHAT IS HTML?

HTML, or HyperText Markup Language, is the foundational language of the World Wide
Web, serving as the standard markup language for creating and structuring web documents.
Developed by Sir Tim Berners-Lee in the early 1990s, HTML remains a cornerstone
technology that enables the creation of static and dynamic web pages.

3.1 What comes under HTML?

1. Structure and Elements: HTML provides a structured approach to organizing content on

the web. It uses a system of elements represented by tags, each serving a specific purpose.
Elements are composed of opening tags, content, and closing tags, and they define the structure
of a web page.

2. Document Object Model (DOM): HTML documents are rendered into a hierarchical
structure known as the Document Object Model (DOM). The DOM represents the document
as a tree of objects, allowing developers to manipulate the content and structure of a page
dynamically using scripting languages like JavaScript.

3. Semantic Markup: HTML incorporates semantic elements that convey meaning to both
browsers and developers. Examples include `<header>`, `<nav>`, `<main>`, `<article>`,
`<section>`, `<footer>`, and others. Semantic markup enhances accessibility and search engine
optimization by providing clear context for the content.

4. Hyperlinks and Navigation: HTML includes `<a>` (anchor) elements for creating
hyperlinks. Links connect web pages, enabling users to navigate seamlessly between different
sections of a website or across various websites on the internet.

5. Forms: HTML provides form elements (`<form>`, `<input>`, `<select>`, etc.) for collecting
user input. Forms are crucial for interactive web applications, allowing users to submit data,
login credentials, and perform various online transactions.

7
6. Multimedia Integration: HTML supports multimedia elements such as `<img>` for
images, `<audio>` for audio files, and `<video>` for video content. These elements enhance
the visual and auditory aspects of web pages.

7. Version Evolution: HTML has undergone several revisions, with HTML5 being the latest
major version. HTML5 introduced new features, including native support for audio and video,
semantic elements, improved form elements, and enhanced APIs for web development.

8. Accessibility: HTML plays a vital role in creating accessible web content. Semantic
markup, proper use of headings, and other accessibility features ensure that websites can be
easily navigated and understood by individuals with disabilities.

9. Cross-Browser Compatibility: HTML is designed to be interpreted consistently across

different web browsers, ensuring a uniform user experience regardless of the platform or
device used to access the web page.

3.2 Characteristics of HTML

Hyperlinks: HTML provides the <a> (anchor) element for creating hyperlinks. This allows
users to navigate between different pages on the same site or across the internet.

Lists: HTML supports ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>),
enabling the organization of content into structured lists.

Forms: HTML includes form elements (<form>, <input>, <select>, <textarea>, etc.) for
creating interactive forms. Forms are used to collect user input, such as text, checkboxes, radio
buttons, and submit buttons.

Multimedia Integration: HTML provides elements for embedding multimedia content,

including <img> for images, <audio> for audio files, and <video> for video content.

Attributes: HTML elements can have attributes that provide additional information about an
element or control its behavior. Attributes are added within the opening tag of an element.

Cross-Browser Compatibility: HTML is designed to be interpreted consistently across various

web browsers, ensuring a uniform display and functionality regardless of the browser used.

8
 CHAPTER 4
KEY TECHNOLOGY

4.1 HTML
HTML, or HyperText Markup Language, is the foundational language of the World Wide Web,
serving as the standard markup language for creating and structuring web documents.
Developed by Sir Tim Berners-Lee in the early 1990s, HTML remains a cornerstone
technology that enables the creation of static and dynamic web pages.
HTML is the backbone of the web, providing a standardized and structured way to create and
organize content. Its continuous evolution, emphasis on semantic markup, and support for
multimedia and interactivity contribute to its enduring significance in web development. As
the internet landscape evolves, HTML remains a fundamental language shaping the digital
experiences of users worldwide.
4.2 CSS
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation and
formatting of a document written in HTML or XML. CSS plays a crucial role in web
development by separating the structure and content of a web page from its visual design,
allowing developers to control the layout and appearance of elements on the page. Here are
key aspects and features of CSS:
1. Style Rules: CSS consists of style rules that define how HTML elements should be
displayed. A style rule typically consists of a selector and a declaration block. The selector
targets HTML elements, and the declaration block contains property-value pairs specifying the
desired styles.
p{
color: blue;
font-size: 20px;
}
2. Selectors: Selectors determine which HTML elements are affected by a style rule. They can
target specific elements, classes, IDs, or even more complex criteria, allowing for fine-grained
control over styling.
- Element Selector: `p` targets all `<p>` elements.
- Class Selector: `.highlight` targets all elements with `class="highlight"`.

9
 - ID Selector: `#header` targets the element with `id="header"`.
3. Properties and Values: CSS properties define the visual aspects of an element, while values
specify the desired settings for those properties. Common properties include `color`, `font-
size`, `margin`, `padding`, and `background-color`.
4. Box Model: The box model is a fundamental concept in CSS that describes how elements
are rendered on the page. It includes properties like `width`, `height`, `margin`, `padding`, and
`border`, determining the size and spacing of an element.
5. Layout and Positioning: CSS provides tools for controlling the layout of web pages.
Techniques like Flexbox and Grid layout enable developers to create responsive and complex
page structures. The `position` property allows elements to be positioned relative to their
normal position in the document flow.
6. Responsive Design: CSS is essential for creating responsive web designs that adapt to
different screen sizes and devices. Media queries allow developers to apply different styles
based on the characteristics of the device, such as screen width or orientation.
7. Transitions and Animations: CSS supports transitions and animations to add dynamic and
interactive elements to web pages. This includes smooth transitions between states and
keyframe-based animations.
8. Selectors and Specificity: CSS follows a specificity hierarchy to determine which styles
should be applied when multiple conflicting rules target the same element. Understanding
specificity is crucial for writing maintainable and predictable stylesheets.
9. CSS Preprocessors: Developers often use CSS preprocessors like Sass or Less to enhance
the capabilities of CSS. These preprocessors introduce features such as variables, nesting, and
functions to make stylesheets more modular and maintainable.
In summary, CSS is a powerful styling language that enables web developers to control the
visual presentation of HTML documents. It encompasses a wide range of features for styling,
layout, responsiveness, and animation, making it an integral part of modern web development.

10
 CHAPTER 5
Other Projects on Front End Web Development

5.1 Netflix:
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.

5.2 Amazon:
[Link], Inc. is an American multinational
technology company focusing on e-commerce, cloud
computing, online advertising, digital streaming, and
artificial intelligence. It is considered one of the Big
Five American technology companies, alongside
Alphabet, Apple, Meta and Microsoft.

5.3 Flipkart:
Flipkart is a leading online shopping destination in
India. It offers a wide selection of products, including:
Mobiles, Fashion, Electronics, Home appliances,
Groceries. The company was co-founded in 2013, by
Banwari Lal Mittal and Ravi Kant Sharma with the
name Sasta Sundar Health buddy in Kolkata.

5.4 Portfolio:
A portfolio's meaning can be defined as a collection of financial assets and investment
tools that are held by an individual, a financial institution or an investment firm. To
develop a profitable portfolio, it is essential to become familiar with its fundamentals and
the factors that influence it.

11
12
 CHAPTER 6
Netflix
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.

HTML code of Netflix

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netflix Clone</title>
<link rel="stylesheet" href="[Link]
integrity="sha512-
z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbb
KuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="header">
</div>
<div class="photo-background">
<div class="navbar">
<img src="[Link]" class="logo">
<div class="option">
<select name="language" class="english">
<option value="English">English</option>
<option value="Hindi">Hindi</option>
</select>
</div>
<button class="sign-in">Sign In</button>
</div>
</div>
<div class="body-content">
<h1>Unlimited Movies,TV shows and more</h1>
<p>Watch anywhere, Cancel anytime.</p>
<h3>Ready to watch? Enter your email to create or restart your membership.</h3>

<input type="text" placeholder="Email address" class="address">

<button class="start">Get Started > </button>
</div>
<div class="box1">

13
 <div class="content1">
<div class="text">
<h2>Enjoy on your TV</h2>
<p>Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and
more.</p>
</div>
<div class="img">
<img src="[Link]">
</div>
</div>
</div>
<div class="box2">
<div class="content2">
<div class="text">
<h2>Download your shows to watch offline</h2>
<p>Save your favourites easily and always have something to watch.</p>
</div>
</div>
<div class="img2">
<img src="[Link]">
</div>
</div>
<div class="box1">
<div class="content1">
<div class="text">
<h2>Watch everywhere</h2>
<p>Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV.</p>
</div>
<div class="img3">
<img src="[Link]">
</div>
</div>
</div>
<div class="box2">
<div class="content2">
<div class="text">
<h2>Create profiles for kids</h2>
<p>Send children on adventures with their favourite characters in a space made just for them—
free with your membership.</p>
</div>
</div>
<div class="img2">
<img src="[Link]">
</div>
</div>
<div class="last2">
<div class="frequently">
<h2>Frequently Asked Questions</h2>

14
 <div class="chase">
<span class="bhanu1">What is Netflix?</span>
<i class="fa-solid fa-plus bhanu2"></i>
</div>
<div class="chase">
<span class="bhanu1">How much does Netflix cost?</span>
<i class="fa-solid fa-plus bhanu2"></i>
</div>
<div class="chase">
<span class="bhanu1">Where can I watch?</span>
<i class="fa-solid fa-plus bhanu2"></i>
</div><div class="chase">
<span class="bhanu1">How do I cancel?</span>
<i class="fa-solid fa-plus bhanu2"></i>
</div><div class="chase">
<span class="bhanu1">What can I watch on Netflix?</span>
<i class="fa-solid fa-plus bhanu2"></i>
</div>
<div class="chase">
<span class="bhanu1">Is Netflix good for kids?</span>
<i class="fa-solid fa-plus bhanu2"></i>
</div>
</div>
<h3>Ready to watch? Enter your email to create or restart your membership.</h3>

<div class="portion">
<input type="text" placeholder="Email address" class="address">
<button class="start">Get Started > </button>
</div>
</div>
<div class="last">
<div class="question">Questions? Call
<a href="#">000-800-919-1694</a>
</div>

<div class="cat">
<ul class="first">
<li><a href="#">FAQ</a></li> <br>

<li><a href="#">Media Centre</a></li> <br>

<li><a href="#">Ways to Watch</a></li> <br>

<li><a href="#">Cookie Preferences</a></li> <br>

<li><a href="#">Speed Test</a></li> <br>

</ul>
<ul class="sec">

15
 <li><a href="#">Help Centre</a></li> <br>

<li><a href="#">Investor Relations</a></li> <br>

<li><a href="#">Terms of Use</a></li> <br>

<li><a href="#">Corporate Information</a></li> <br>

<li><a href="#">Legal Notices</a></li> <br>

</ul>
<ul class="third">
<li><a href="#">Account</a></li> <br>

<li><a href="#">Jobs</a></li> <br>

<li><a href="#">Privacy</a></li> <br>

<li><a href="#">Contact Us</a></li> <br>

<li><a href="#">Only on Netflix</a></li> <br>

</ul>
</div>
<div class="option">
<select name="language" class="english">
<option value="English">English</option>
<option value="Hindi">Hindi</option>
</select>
</div>
<div class="para">
<p>Netflix India</p>
</div>
</div>

</body>
</html>

CSS code of Netflix

*{
margin: 0;
font-family: Arial;
border: border-box;
}
body {

16
 overflow-x: hidden;
}
body {
background-color: black;
color: white;
}
.header {
background-image: url("[Link]");
width: 100%;
height: 740px;
background-color: #807a7a;
opacity: 0.4;
}
.photo-background {
height: 140px;
position: absolute;
top: 15px;
}
.logo {
padding-left: 100px;
}
.navbar {
display: flex;
justify-content: space-evenly;
align-items: center;
padding-bottom: 500px;
}
.navbar img {
padding-top: 30px;
padding-right: 550px;
}
.english {
background-color: rgba(0, 0, 0, 0.58);
color: white;
padding: 4px 16px 4px 16px;
width: 125px;
height: 35px;
font-weight: 700;
border: none;
border: 1px solid white;
margin-left: 130px;
}
.sign-in {
background-color: #E50914;
color: white;
width: 85px;
height: 35px;
font-weight: 700;

17
 border: none;
border-radius: 5px;
margin-left: 60px;
}
.sign-in:hover {
cursor: pointer;
background-color: #8b0a10;
}
.body-content {
position: absolute;
top: 50%;
left: 20%;
text-align: center;
}
.body-content h1 {
font-size: 50px;
line-height: 40px;
font-weight: 700;
}
.body-content p {
font-size: 25px;
padding-top: 20px;
padding-bottom: 20px;
font-weight: 400px;
}
.body-content h3 {
font-size: 23px;
padding-bottom: 17px;
}
.address {
width: 400px;
height: 18px;
border: 0.2px solid white;
background-color: rgba(0, 0, 0, 0.386);
color: white;
font-size: 20px;
font-weight: 600;
padding: 18px;
border-radius: 4px;
}
.start {
width: 200px;
height: 55px;
border: none;
background-color: #E50914;
color: white;
font-size: 25px;
font-weight: 800px;

18
 border-radius: 6px;
}
.box1 {
height: 650px;
width: 100%;
border-top: 6px solid rgba(255, 255, 255, 0.189);
border-bottom: 6px solid rgba(255, 255, 255, 0.189);
}
.content1 {
display: flex;
width: 100%;
align-items: center;
}
.text {
margin-left: 100px;
padding-right: 80px;
padding-left: 10px;
}
.text h2 {
font-size: 55px;
font-weight: 700;
padding-bottom: 15px;
}
.text p {
font-size: 25px;
}
.img {
margin-right: 32px;
}
.box2 {
height: 650px;
width: 100%;
border-top: 6px solid rgba(255, 255, 255, 0.189);
border-bottom: 6px solid rgba(255, 255, 255, 0.189);
display: flex;
flex-direction: row-reverse;
}
.content2 {
display: flex;
flex-direction: row-reverse;
padding-top: 250px;
}
.img2 {
height: 50px;
padding-top: 80px;
}
.last2 {
height: 1080px;

19
 width: 928px;
padding-left: 300px;
text-align: center;
}
.frequently h2 {
padding-top: 75px;
font-size: 50px;
}
.chase {
height: 84px;
background-color: #585757;
margin-top: 25px;
align-items: center;
font-size: 27px;
}
li {
list-style-type: none;
}
i{
font-size: 50px;
padding-left: 200px;
}
button {
background-color: aqua;
}
h3 {
padding-top: 50px;
}
.portion {
padding-top: 40px;
}
.last {
height: 500px;
width: 100%;
border-top: 6px solid rgba(255, 255, 255, 0.189);
padding-left: 10px;
}
.question {
padding-top: 60px;
margin-left: 130px;
color: #FFFFFFB3;
}
.question a {
color: #FFFFFFB3;
}
.cat {
height: 276px;
width: 895px;

20
 padding-top: 40px;
display: flex;
justify-content: space-evenly;
font-weight: 500;
}
.cat a {
color: #FFFFFFB3;
}
.para {
padding-left : 130px;
padding-top: 30px;
color: #FFFFFFB3;
}
.bhanu1 {
float: left;
margin-left: 20px;
margin-top: 27px !important;

.bhanu2 {
float: right;
margin-right: 18px;
}

.bhanu1, .bhanu2 {
margin-top: 18px;
}

21
 CONCLUSION

Front-end web development is the artistic and interactive facet of web creation, shaping the
user's online experience. It involves crafting visually appealing and user-friendly interfaces
using languages like HTML, CSS, and JavaScript.

As the gateway to digital content, front-end development plays a pivotal role in ensuring
websites are not only functional and accessible but also engage users seamlessly across various
devices.

The emergence of frameworks and libraries like React, Angular, and [Link] has empowered
front-end developers to build complex and efficient single-page applications. Responsive
design techniques ensure seamless user experiences across various devices, reflecting the
importance of adaptability in the ever-changing landscape of web technologies.

Web accessibility has become a central focus, emphasizing the need for inclusive design
practices that cater to users with diverse abilities. The incorporation of semantic HTML and
adherence to accessibility standards contribute to creating websites.

22
 FUTURE SCOPE

Front-end web development is the practice of creating the visual and interactive components
of a website that users interact with directly in their web browsers. It encompasses a wide range
of technologies and skills, all aimed at enhancing the user experience and making websites
both functional and visually. The major future aspects are as follows:

 Progressive Web Apps

 Voice User Interfaces (VUI)

 Responsive and Adaptive Design

 Web Accessibility

 Real-time Web Applications

 AI and Machine Learning Integration

23
 References

1. Research Papers
[1]. How croft, Debra and Carroll, John, "A Proposed Methodology for Web Development"
(2000). ECIS 2000 Proceedings. 73.

[2]. P. Crichton, The Rational Unified Process, Reading, Mass., 1999.

2. Other Sources

[3] [Link]

[4] [Link]

[5] [Link]

3. Books

[6] HTML & CSS: Design and Build Web Sites: By Jon Docket

24