FRONT-END DEVELOPMENT

An Internship Report submitted to the Department of

INFORMATION TECHNOLOGY
AND
ARTIFICIAL INTELLIGENCE & DATA SCIENCE
By

I.ANISH
(20KB1A1222)

Under the esteemed Guidance of

Andhra Pradesh State Council of Higher Education

(APSCHE) and Edunet Foundation

DEPARTMENT OF IT and AI&DS

N.B.K.R INSTITUTE OF SCIENCE AND TECHNOLOGY

(Autonomous)
VIDYANAGAR-524413, TIRUPATI DISTRICT ,AP

2023-24

(DURATION : 6 WEEKS)
 s

Website: www.nbkrist.org Ph: 08624-228 247

Email: [email protected] Fax :08624-228 257

N.B.K.R. INSTITUTE OF SCIENCE & TECHNOLOGY

(Autonomous)

(Approved by AICTE: Accredited by NBA: Affiliated to JNTUA,

Ananthapuramu)An ISO 9001-2000 Certified Institution

Vidyanagar -524 413, Tirupathi District, Andhra Pradesh, India

BONAFIDE CERTIFICATE

This is to certify that the INTERNSHIP work entitled “FRONT-END

DEVELOPMENT” is Bonafide work done by I.ANISH (20KB1A1222) in

online mode from “Andhra Pradesh State Council of Higher

Education(APSCHE) and Edunet Foundation” and submitted to the

Department of IT and AI&DS. This work has been carried out under my

supervision.

INTERNSHIP ASSOCIATE HEAD OF THE DEPARTMENT

Mrs. P.CHANDRAKALA Dr. A.NARAYANA RAO
Assistant Professor Professor
Department of IT and AI&DS Department of IT and
AI&DS N.B.K.R.I.S.T N.B.K.R.I.S.T

NBKRIST
 ACKNOWLEDGEMENT:

The satisfaction that accompanies the successful completion of project

would he incomplete without the people who made it posable because of
their constant guidance and encouragement crowned our efforts with
success.
We convey our special thanks to Dr. Y. Venkata Rami Reddy,
Chairman of N.B.K.R. Institute of Science and Technology, for
providing excellent infrastructure in our campus for the completion of the
internship.
We convey our special thanks to Sri N. Ram Kumar Reddy,
Correspondent of N.B.K.R. Institute of Science and Technology, for
providing excellent infrastructure in our campus for the completion of the
internship.
We are grateful to Dr. V. Vijaya Kumar Reddy, Director of
N.B.K.R Institute of Science and Technology for allowing us to avail all
the facilities in the college.
We express our sincere gratitude to Dr. A. Narayana Rao ,
Professor, Head of Department, IT & AIDS for providing exceptional
facilities for successful completion of our internship.
We express our sincere gratitude to our Internship Associate, Mrs.
P. Chandrakala, Assistant Professor, Department of IT & AIDS, for
guiding us towards successful completion of internship.
We would like to convey our heartful thanks to Staff members, Lab
technicians and our friends, who extended their cooperation in making
this internship a successful one.
We would like to thank one and all who have helped us directly and
indirectly to complete this internship successfully.

(INTERNSHIP ASSOCIATE)
Mrs. P. Chandrakala

NBKRIST
 INDEX

Sl.NO PARTICULARS PAGE NO.

1 INTRODUCTION 1-3

2 BASICS 4-9

3 PROJECT 10 - 11

4 LETTER OF COMPLETION 12

5 CERTIFICATE 13

6 CONCLUSION 14

NBKRIST
 1. INTRODUCTION

Web development refers to the process of creating and maintaining websites and web
applications. It involves a combination of technical skills, including programming languages
such as HTML, CSS, and JavaScript, as well as knowledge of web design principles, user
experience, and web hosting. The goal of web development is to create dynamic and
interactive websites that are accessible to users on a variety of devices, including desktops,
laptops, tablets, and mobile phones. Web development can range from creating simple static
pages to complex web applications with multiple functions and features,

1.1 HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language) 10 ^ 9 standard markup language used to

create web pages and other information that can be displayed in a web browser. It provides a
means to describe the structure and content of a web document, using a set of markup tags
and attributes. HTML documents are plain text files that contain HTML code, which is
interpreted by a web browser to display the document in a user-friendly way. HTML tags are
used to define different elements of the web page such as headings, paragraphs, lists, links,
images, and more. HTML has evolved over time and the latest version, HTML5, includes
new tags and attributes to support multimedia, improved semantic meaning, and increased
accessibility for people with disabilities

HISTORY

HTML has its roots in the early days of the World Wide Web. It was first proposed by
Tim Berners-Lee, the creator of the World Wide Web, in 1989 as a way to standardize the
way that web content was marked up. The first version of HTML was created in 1991, and
since then it has undergone several revisions and updates to keep up with the rapidly evolving
web.

HTML was designed to be a simple markup language, easy for people to learn and use,
and its popularity grew quickly as the World Wide Web became more widespread. Early
versions of HTML, were limited in their capabilities, but with each new version, HTML has
gained new tags, attributes, and capabilities to make it more powerful and flexible.

HTML has common applications in web development, Content creation, E-Commerce,

News and information, Marketing and Advertising, Education and Training, Personal Blogs
and Portfolios etc.

NBKRIST 1
1.2 CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) is a stylesheet language used to describe the look and
formatting of a web page written in HTML. It provides a way to separate the presentation of a
web page from its content, making it easier to maintain and update the design of a website.

CSS allows web developers to define styles for elements such as text, fonts, colors, and
layout, and apply these styles consistently across a website. This allows for a consistent look
and feel across all pages, making it easier for users to navigate and interact with the website.
CSS also provides advanced layout and formatting options, including responsive design for
different screen sizes, animations, and transitions.

CSS is a separate language from HTML and is typically stored in its own file or in a
<style> tag within an HTML document. The CSS code is then applied to the HTML content,
which is rendered by a web browser to display the final web page. CSS has evolved over time
and the latest version, CSS3, includes new features and capabilities for styling and formatting
web content.

HISTORY

CSS was first proposed in 1996 as a way to separate the presentation of a web page
from its content. The goal was to make it easier to maintain and update the design of a
website, without having to make changes to the HTML code every time the design needed to
be updated

The first version of CSS was released in 1996, and since then it has undergone several
revisions and updates to keep up with the rapidly evolving web. Early versions of CSS had
limited capabilities, but with each new version, CSS has gained new features and capabilities
to make it more powerful and flexible.

CSS has become an integral part of web development, and is now widely used to create
complex and sophisticated designs for websites. CSS is also used for styling mobile
applications and web-based software, and it has been designed to work well with other web
technologies, such as HTML and JavaScript.

Today, CSS is a cornerstone of modern web development, and is used by web

developers around the world to create beautiful and functional websites. The latest version of
CSS, CSS3, was released in 1999 and it continues to be widely adopted by web developers.
CSS has common applications in Web Design and Development, User Interface Design etc.

1.3 JAVASCRIPT
NBKRIST 2
 JavaScript is a high-level, dynamic, and interpreted programming language that is used
primarily for creating mteractive web pages and web applications. It is a client-ade language
which means that it runs on the user's browser rather than on the server, allowing for dynamic
changes to be made to the web page without the need for a page reload, JavaScript is often
used in combination with HTML and CSS to create responsive and interactive weh pages that
can respond to user actions, such as mouse clicks and keyboard imput. It is also increasingly
used in server-side programming through technologies like Nodejs JavaScript is a versatile
language that can be used for a variety of tasks, including web development, mobile app
developement, game development, and more.

HISTORY

JavaScript was created in 1995 by Brendan Eich while he was working at Netscape
Communications Corporation. At the time, web development was in its early stages, and there
was a need for a scripting language that could add interactivity and dynamic elements to web
pages.

JavaScript was designed to be a simple and easy-to-lean language that could be used by
web developers without extensive training in computer programming. It was initially used to
create basic effects, such as rollover images and pop-up windows, but as the web evolved, so
did JavaScript

Over time, JavaScript has become one of the most widely used programming languages
in the world, and is now a critical component of modern web development JavaScript has
evolved to include advanced features, such as support for object-oriented programming, and
has been standardized by the European Computer Manufacturers Association (ECMA)

Today, JavaScript is used to create complex web applications and games, and is widely
supported by modern web browsers. It is a critical component of many popular web
frameworks, such as React and Angular, and is used by web developers around the world to
create dynamic and interactive weh pages and applications.

Common Applications are Web Development, Service-side Development, Browser

Automation, Game Development, Chatbots, Slideshows and Carousels, Background
Processes, Virtual and Augmented Reality.

NBKRIST 3
 2. BASICS

2.1 HTML

2.1.1. FEATURES

Text content: HTML allows you to add text content to a web page, including
headings, paragraphs, lists, and more.

Media elements: HTML supports various types of media, such as images. videos,
and audio, which can be embedded into a web page

Links: HTML allows you to create hyperlinks that can connect to other web pages or
resources on the internet.

Forms: HTML provides a way to create forms that can be used to gather data
from users, such as text inputs, checkboxes, and more.

Tables: HTML allows you to create tables to display data in a tabular format.

Semantic elements: HTML includes semantic elements, such as header, footer,

article, and section, that describe the content of a web page.

Styles: HTML allows you to add styles to a web page using Cascading Style Sheets
(CSS) to control the layout and presentation of the page.

Scripting: HTML allows you to add JavaScript to a web page, which can be used to
create dynamic and interactive elements.

Accessibility: HTML provides features that help make web pages accessible to people
with disabilities, such as alternate text for images and descriptive link text.

2.1.2 GENERAL SYNTAX

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title> </head>

NBKRIST 4
 <body>
<h1>Welcome to my website </h1>
<p>This is a sample web page created using HTML </p>
</body>

</ html >

2.2 CSS

2.2.1 FEATURES

Style Separation: CSS allows you to separate the presentation style of a document
from its content, making it easier to maintain and update

Layout Control: CSS provides a wide range of layout and formatting options,
including the ability to position elements, control their size and spacing, and create
complex layouts.

Text and Font Control: CSS allows you to control the appearance of text, such as font
size, font family, color, and text alignment.

Box Model: CSS provides a box model for controlling the size, padding, borders,
and margins of elements.

Backgrounds and Borders: CSS allows you to add and control background images and
colors, as well as define and style borders around elements.

Animations and Transitions: CSS provides the ability to create animations and
transitions, allowing you to add dynamic visual effects to your web pages.

Responsiveness: CSS provides tools for creating responsive designs that adjust to the
size and orientation of different devices, such as smartphones and tablets.

2.2.2 GENERAL SYNTAX

selector {
property: value;
property: value; }

NBKRIST 5
2.3 JAVASCRIPT

2.3.1 FEATURES

Dynamic typing: JavaScript supports dynamic typing, which means that the type of a
variable can change at runtime

Object-Oriented: JavaScript is an object-oriented language, allowing you to organize

your code into objects and classes.

Functions: Functions are first-class citizens in JavaScript, meaning they can be stored
in variables, passed as arguments, and returned as values.

Event-Driven: JavaScript is event-driven, which means that it allows you to write

code that is executed in response to user interactions, such as mouse clicks or form
submissions.

Cross-Platform: JavaScript is a cross-platform language, meaning it can run on

multiple platforms and devices, such as web browsers, servers, and mobile devices.

Asynchronous: JavaScript is inherently asynchronous, meaning it can handle multiple

tasks in parallel without blocking the execution of other code. Interoperable: JavaScript
can be easily integrated with other technologies, such as HTML and CSS, making it a
versatile language for web development.

2.3.2 GENERAL SYNTAX

//How to create variables:

var x;
let y:

//How to use variables:

x=5
y=6
let z = x + y

NBKRIST 6
2.4 OPERATORS

 Arithmetic Operators

 Assignment Operators

 Comparison Operators

 Logical Operators

 Bit-wise Operators

 Type Operators

ARITHMETIC OPERATORS:

Operator Name Example

+ Addition x+y
- Subtraction x–y
* Multiplication x*y
/ Division x/y
% Remainder x%y
++ Increment (increments by 1) ++x or x++
-- Decrement (decrements by 1) --x or x--
** Exponential (Power) x**y

ASSIGNMENT OPERATORS:
Operator Name Example
= Assignment Operator a = 7 ; // 7
+= Addition Assignment a += 5 ; a = a + 5
-= Subtraction Assignment a -= 2 ; a = a - 5
*= Multiplication Assignment a *= 3 ; a = a * 3
/= Division Assignment a /= 2 ; a = a / 2
%= Remainder Assignment a%2;a=a%2
**= Exponentiation Assignment a ** = 2 ; a = a**2

NBKRIST 7
COMPARISON OPERATORS:
Operator Description Example
== Equal to: returns true if the operands are equal x == y
!= Not equal to: returns true if the operands are not equal x != y
=== Strict equal to: true if the operands are equal and of x === y
same type
!== Strict not equal to: true if the operands are equal but of x !== y
different type or not equal at all
> Greater than: true if left operand is greater than the right x>y
operand
>= Greater than or equal to: true if left operand is greater x >= y
than or equal to the right operand
< Less than: true if the operand is less than the right operand x<y
<= Less than or equal to: true if the left operand is less than or x <= y
equal to the right operand

LOGICAL OPERATORS:

Operator Description Example

&& Logical AND: true if both the operands are x && y
true,else returns false
|| Logical OR: true if either of the operands are true; x || y
returns false if both are false
! Logical NOT: true if the operand is false and vice- !x
versa.

BITWISE OPERATORS:

Operator Description
& Bitwise AND
| Bitwise OR
^ Bitwise XOR
~ Bitwise NOT
<< Left Shift
>> Sign-propagating right shift
>>> Zero-fill right shift

NBKRIST 8
TYPE OPERATORS:

Operator Description
typeof Returns the type of a variable
instanceof Returns true if an object is an instance of an object type

NBKRIST 9
 3. PROJECT

3.1 PROJECT-1

Problem Statement:

• To develop an interactive and responsive Portfolio Website using Frontend tools.

Abstract:
The aim is to showcase my web development proficiency in the Portfolio Site Project.
Through the use of HTML, CSS, and JavaScript, I've crafted a responsive and visually
appealing platform. The focus on seamless navigation and interactive design ensures an
optimal user experience across devices. Leveraging modern techniques like CSS animations,
the portfolio not only highlights my skills but also blends aesthetics with functionality. This
report provides insights into the development process, challenges overcome, and the synthesis
of a polished, professional online presence.

Result:

NBKRIST 10
NBKRIST 11
 4. LETTER OF COMPLETION

NBKRIST 12
 5. CERTIFICATE

NBKRIST 13
 6. CONCLUSION

In conclusion, my internship experience with HTML, CSS, and JavaScript has been
incredibly valuable and rewarding. I have gained hands-on experience in developing and
designing responsive websites, using various front-end technologies and libraries. I have also
learned how to collaborate with team members, troubleshoot issues, and communicate
effectively in a professional setting.

Throughout my internship. I have been challenged and pushed out of my comfort zone,
but I have grown both personally and professionally as a result. I am grateful for the
opportunity to have worked with such a talented and supportive team, and I am excited to
continue building my skills and knowledge in web development.

verall, this internship has been a great steppingstone towards my future career goals,
and I am confident that the skills and experience I have gained will serve me well in my
future endeavours. I am excited to take what I have learned and apply it to new projects and
challenges, and I am grateful for the invaluable experience and skills I have gained through
this internship.

NBKRIST 14