A

Internship Report on

“Front-End Development ”
Submitted In Partial Fulfilment of the Requirement

For The Award of First Year of Post Graduation in

Master of Computer Applications of

Dr. Babasaheb Ambedkar Technological University, Lonere

Submitted By

MISS. OJASHRI RAJESH CHAUDHARI

PRN Number : 24051702241046
Under The Guidance of

Prof. Dhiraj G. Patil

Department of Master of Computer Applications

HSM’s Shri Sant Gadge Baba

College of Engineering and Technology, Bhusawal

Dr. Babasaheb Ambedkar Technological University, Lonere

2024-2025

i
 HSM’s Shri Sant Gadge Baba

College of Engineering and Technology,

Bhusawal 425203

Certificate

This is to certify that Miss. Ojashri Rajesh Chaudhari has successfully

completed her Technical Seminar- I (MCAS206) on “Front-End
Development” for the partial fulfilment of First year Post Graduation in
Master of Computer Applications as prescribed by Dr. Babasaheb
Ambedkar Technological University, Lonere during academic year 2024-
2025.

Prof. Dhiraj G. Patil Dr. D. D. Patil

Guide H.O.D

Prof. Dr. R. B. Barjibhe

Principal

ii
iii
 LIST OF FIGURES

Figure No. Title of Figure Page No.

3.1.1 Structure of HTML5 5

3.1.2 Basic HTML Tags 7

3.2.1 CSS Inline Style 10

3.2.2 CSS Internal Style 11

3.2.3 CSS External Style 11

3.3.1 Structure of DOM 17

4.1 Feedback Form 18

iv
 LIST OF Tables

Table No. Title of Table Page No.

3.1.1 HTML Image Tags 8

3.1.2 HTML Forms and Input Tags 8

3.1.3 HTML Links Tags 9

3.1.4 HTML List Tags 9

3.1.5 HTML Table Tags 10

v
 INDEX

Chapter
Chapter Page No.
No.
Title Sheet i
Certificate ii
Internship Certificate iii
List of Figures iv
List of Tables v
Index vi
Acknowledgement vii
Abstract viii
1 Introduction 1
1.1 About the company 1
1.2 Vision 1
1.3 Mission 1
1.4 Internship Objective 2
2 Plan of Internship Program 3
3 Technology Used 5
3.1 HTML5 5
3.2 CSS 10
3.3 JavaScript 13
4 Deployed Project 17
5 Conclusion 19
References 20

vi
 ACKNOWLEDGEMENT

I feel great pleasure in submitting this Internship report on “Front-End Development”. I

would like to thank our respected Principal Prof. Dr. R. B. Barjibhe, and H.O.D.,Prof.
Dr. D. D. Patil for opening the doors of knowledge towards the realization of this
Internship

I wish to express true sense of gratitude towards my respected teacher and guide, Prof.
Dhiraj G. Patil who at every discrete step in study of this Technical Seminar-I
contributed his valuable guidance and help me us to solve every problem that arose.

Most likely I would like to express my sincere gratitude towards my family and friends
for always being there when I needed them the most. With all respect and gratitude, I
would like to thank all authors listed and not listed in references whose learning and
concepts are studied and used by me whenever required. I owe my all success to them.

Miss. Ojashri Rajesh Chaudhari

PRN No.: 24051702241046

vii
 ABSTRACT

This report highlights the experiences and findings from an internship at Cognifyz
Technologies, where the primary focus was on frontend development to create user-
friendly web applications. The internship aimed to apply modern frontend technologies
and design principles to improve the user experience and functionality of web-based
platforms. The project involved designing and implementing responsive and interactive
user interfaces (UI) that provide a seamless experience across different devices and
screen sizes. Utilizing frameworks such as React.js and tools like CSS, HTML, and
JavaScript, the project sought to deliver a visually appealing and efficient web
application. During the internship, a comprehensive approach was taken, including
requirements gathering, UI/UX design, and implementation. Close collaboration with
backend developers ensured that the frontend aligned with the overall project goals and
delivered a cohesive user experience. Emphasis was placed on optimizing performance,
accessibility, and responsiveness. Various frontend development techniques, including
state management, component-based architecture, and responsive design, were explored
and implemented. The project involved creating reusable components, managing
application state effectively, and ensuring that the UI remained consistent and functional
across different platforms. The report presents the outcomes of the frontend development
project, including key insights gained, challenges encountered, and recommendations for
future improvements. Notable findings include the importance of responsive design in
catering to diverse user needs and the role of efficient state management in maintaining
application performance. Overall, the internship at Cognifyz Technologies provided
valuable hands-on experience in frontend development. It underscored the significance of
user-cantered design and highlighted the potential of modern web technologies in
creating intuitive and efficient web applications.

viii
ix
 Chapter 1
INTRODUCTION

1.1 ABOUT THE COMPANY

At Cognifyz Technologies, we specialize in delivering innovative IT services and
consultancy to empower businesses with cutting-edge solutions. Since our inception, we
have been dedicated to designing intelligent, cost-effective, and user-friendly web
applications that enhance processes and unlock new opportunities. As a leading software
development company, we pride ourselves on our ability to deliver sophisticated
solutions rapidly and within budget, earning the trust of numerous clients.

Our team of experienced professionals collaborates closely with clients to develop

custom solutions that become integral components of their business success. We place a
strong emphasis on digital transformation, ensuring our clients remain competitive in an
increasingly digital world. At Cognifyz Technologies, we are not just about developing
software; we aim to be catalysts for our clients' growth, driving innovation and enhancing
business efficiency.

1.2 VISION

Vison of the Cognifyz Technologies, is to lead the way in digital transformation by

providing our clients with the tools and solutions they need to succeed in the digital era.
We believe in the power of technology to transform businesses and create new
opportunities for growth.

1.3 MISSION

Mission of the Cognifyz Technologies is to help their clients enhance and grow their
businesses while overcoming technology challenges. We strive to deliver value through
extensive research and development investments and strategic industry alliances. Our
goal is to provide innovative, high-quality, and cost-effective products and services that
exceed our clients' expectations.

1
1.4 INTERNSHIP OBJECTIVE

For the particular course I pursued in the field of Front-End Web Development, the
objectives were as follows:

 To learn about the basics of HTMAL, CSS, JavaScript, Bootstrap, GitHub and
how to use them in combination to design a powerful web user interface.
 To learn about the various job opportunities in the field.
 To learn about the use of git which is the industry standard for branch control.
 To learn about design and code bootstrap and make a clean and responsive web
pages.
 To learn about the methods to build static and dynamic web pages using Html,
CSS, and JS and optimizing then for web.

2
 Chapter 2

PLAN OF INTERNSHIP PROGRAM

WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES

DATE DAY MODULE COMPLETED

28/01/2025 Tuesday Introduction to HTML
29/01/2025 Wednesday HTML Tags and Elements
1st WEEK

30/01/2025 Thursday HTML Attributes

31/01/2025 Friday Creating Form
03/02/2025 Monday Semantic HTML
04/02/2025 Tuesday Multimedia Elements

DATE DAY MODULE COMPLETED

05/02/2025 Wednesday Introduction to CSS
06/02/2025 Thursday CSS Selectors and Properties
2nd WEEK

07/02/2025 Friday Styling Text and Fonts

10/02/2025 Monday Layout with CSS
11/02/2025 Tuesday Flexbox
12/02/2025 Wednesday CSS Grid

3
 DATE DAY MODULE COMPLETED
13/02/2025 Thursday Introduction to JavaScript
14/02/2025 Friday Variables and Data Types
WEEK

17/02/2025 Monday Control Structures

18/02/2025 Tuesday Functions
3rd

19/02/2025 Wednesday Objects and Arrays

20/02/2025 Thursday DOM Manipulation

DATE DAY MODULE COMPLETED

21/02/2025 Friday Project setup and basic HTML struc-
ture
24/02/2025 Monday Styling with Bootstrap
WEEK

25/02/2025 Tuesday Adding JavaScript for Dynamic

Functionality
4th

26/02/2025 Wednesday Advanced JavaScript features

27/02/2025 Thursday Data persistence and local Storage
28/02/2025 Friday Project evaluation

4
 Chapter 3

TECHNOLOGY USED

3.1 HTML 5

HTML stands for HyperText Markup Language. It is used to design web pages using a
markup language. HTML is the combination of Hypertext and Markup language.
Hypertext defines the link between web pages. A markup language is used to define the
text document within the tag which defines the structure of web pages. This language is
used to annotate (make notes for the computer) text so that a machine can understand it
and manipulate text accordingly. Most markup languages (e.g. HTML) are
humanreadable. The language uses tags to define what manipulation has to be done on the
text.

3.1.1 Elements and Tags:

HTML uses predefined tags and elements which tell the browser how to properly display
the content. Remember to include closing tags. If omitted, the browser applies the effect
of the opening tag until the end of the page.

3.1.2 HTML page structure:

The basic structure of an HTML page is laid out below. It contains the essential building-
block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon
which all web pages are created.

5
 Fig 3.1.1 Structure of HTML5

<!DOCTYPE html>:

This is the document type declaration (not technically a tag). It declares a document as
being an HTML document. The doctype declaration is not case-sensitive.

<html>: This is called the HTML root element. All other elements are contained within it.

<head>: The head tag contains the “behind the scenes” elements for a webpage. Elements
within the head aren’t visible on the front-end of a webpage. HTML elements used inside
the element include:

<style>: This html tag allows us to insert styling into our webpages and make
them appealing to look at with the help of CSS.
<title>: The title is what is displayed on the top of your browser when you visit a
website and contains title of the webpage that you are viewing.
<script>: This tag is used to add functionality in the website with the help of
JavaScript.
<meta>: This tag encloses the meta data of the website that must be loaded every
time the website is visited. For eg:- the metadata charset allows you to use the
standard UTF-8 encoding in your website. This in turn allows the users to view
your webpage in the language of their choice. It is a self closing tag.
<link>: The ‘link’ tag is used to tie together HTML, CSS and JavaScript. It is self
closing

<body>: The body tag is used to enclose all the visible content of a webpage. In other
words, the body content is what the browser will show on the front-end.

An HTML document can be created using any text editor. Save the text file using .html
or .htm. Once saved as an HTML document, the file can be opened as a webpage in the
browser.

3.1.3 Determining when to use specific HTML tags

HTML tags should be used according to their specific functions when required as per the
requirement of the webpage.

The following are the different categories of HTML tags

6
 Basic HTML Tags

Fig 3.1.2 Basic HTML Tags

 Html Text Formatting Tags

Fig 3.1.3 HTML Text Formatting Tag

7
 HTML Image Tags

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

Defines a container for multiple image

<picture>
resources

Table 3.1.1 HTML Image Tags

 HTML Forms and Input Tags

Tags Description

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<button> Defines a clickable button

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-

down list

<option> Defines an option in a drop-down list

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<datalist> Specifies a list of pre-defined options for input

controls

Table 3.1.2 HTML Forms and Input Tags

8
 HTML Links Tags

Tags Description

<a> Defines a hyperlink

<link> Defines the relationship between a document and an

external resource (most used to link to style sheets)

<nav> Defines navigation links

Table 3.1.3 HTML Links Tags

 HTML List Tags

Tags Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term/name in a description list

<dd> Defines a description of a term/name in a description

list

Table 3.1.4 HTML List Tags

 HTML Table Tags

Tags Description

<table> Defines a table

<caption Defines a table caption

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

9
 <thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

<col> Specifies column properties for each column within a

element

<colgroup> Specifies a group of one or more columns in a table

for formatting

Table 3.1.5 HTML Table Tags

3.2 CSS (CASCADING STYLE SHEET):

CSS (Cascading Style Sheets) is used to apply styles to web pages. Cascading Style
Sheets are fondly referred to as CSS. It is used to make web pages presentable. The
reason for using this is to simplify the process of making web pages presentable. It
allows you to apply styles on web pages. More importantly, it enables you to do this
independently of the HTML that makes up each web page. Styling is an essential
property for any website. It increases the standards and overall look of the website that
makes it easier for the user to interact with it.

There are three types of CSS which are given below:

 Inline CSS: Inline CSS contains the CSS property in the body section attached
with the element known as inline CSS.

Fig 3.2.1 CSS Inline Style

10
  Internal or Embedded CSS: The CSS ruleset should be within the HTML file in
the head section i.e the CSS is embedded within the HTML file.

Fig 3.2.2 CSS Internal Style

 External CSS: External CSS contains a separate CSS file that contains only style
property with the help of tag attributes.

Fig 3.2.3 CSS External Style

3.2.1 Targeting things in CSS

To apply style to an element in CSS, first the element must be targeted by using
selector. The following are the different types of selectors:
1. Tag: Selects all the tags of the same type.

11
 Example:
html {}
h1 {}
p {}
2. Class (.): Select an element with the matching class.
Example:
.nav {}
.contact {}
.masthead {}
3. ID (#): Select an element with the matching ID.
Example:
#profile {}
#nav {}
4. Space (Descendant): Select an element that’s a descendant of another element.
Example:
ul li {}
nav a {}
5. Child (>): Select an element directly inside another element.
Example:
ul > li {}
h1 > span {}
footer > .social {}
6. Adjacent sibling (+): Select an element directly beside another element.
Example:
h1 + p {}
hr + p {}
li + li {}
7. General sibling (~): Select an element that’s at the same level.
Example:
p ~ p {}
h1 ~ p {}
dd ~ dt {}

12
3.2.2 Some basic properties of CSS

 color
 background-color
 background-image
 display (inline, block, inline-block, flexbox)
 height
 width
 margin
 padding
 border
 border-radius
 font
 font-family
 font-style
 font-weight
 position (absolute, relative, fixed)
 z-index
 float
 text-align
 box-sizing
 grid

3.3 JAVASCRIPT

JavaScript (JS) is a light-weight object-oriented programming language which is used by

several websites for scripting the webpages. It is an interpreted, full-fledged
programming language that enables dynamic interactivity on websites when applied to an
HTML document. It was introduced in the year 1995 for adding programs to the
webpages in the Netscape Navigator browser. Since then, it has been adopted by all other
graphical web browsers. With JavaScript, users can build modern web applications to
interact directly without reloading the page every time. The traditional website uses js to
provide several forms of interactivity and simplicity.

3.3.1 Application of JavaScript

13
JavaScript is used to create interactive websites. It is mainly used for:

 Client-side validation,
 Dynamic drop-down menus,
 Displaying date and time,
 Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm
dialog box and prompt dialog box),
 Displaying clocks etc.

3.3.2 Basics of ES6

ECMAScript 2015 was the second major revision to JavaScript. It is also known as ES6
or ECMAScript 6. The new features in ES6 are:

 The let and const keywords

 Arrow Functions
 The ... Operator
 For/of
 Map Objects
 Set Objects
 Classes
 Promises
 Symbol
 Default Parameters
 Function Rest Parameter
 String.includes()
 String.startsWith()
 String.endsWith()
 Array.from()
 Array keys()
 Array find()
 Array findIndex()
 New Math Methods
 New Number Properties
 New Number Methods
 New Global Methods

14
  Object entries
 JavaScript Modules

3.3.3 JavaScript DOM

The objects that make up a web document’s structure and content are represented as data
by the Document Object Model (DOM).
The Document Object Model (DOM) is a programming interface for web documents. It
serves as a representation of the page so that programs can alter the document structure,
appearance and content. Programming languages like JavaScript can communicate with a
page by interacting with the nodes and objects that the DOM uses to represent the
document. DOM representation allows a web page to be manipulated. It is a
representation of the web page that is object-oriented and can be changed using a
scripting language like JavaScript.
It is called an Object Model because documents are modelled using objects and the model
takes into account not only the structure of a document but also its behaviors and the
objects that make up its constituent parts, such as the HTML tag elements and attributes.

3.3.4 The need for DOM:

The web pages are organised using HTML, behaviour is added using JavaScript. The
HTML document cannot be immediately understood by JavaScript when it is loaded into
the browser. Consequently, a related document is produced (DOM). The DOM essentially
represents the same HTML document in a new way by utilising objects. JavaScript can
readily interpret DOM; for example, it can understand object h1 in DOM but not tags
(<h1>H</h1) in HTML documents. Now, JavaScript can use several functions to access
each of the objects (h1, p, etc.).

3.3.5 Structure of DOM:

The structure of DOM can be compared to that of a tree or forest (multiple trees). The
tree-like representation of a document is also referred to as a “structural model”. There are
nodes at the ends of the tree's branches, and each node has objects in it. Nodes have the
option of adding event listeners, which are activated when a specified event occurs. The
ability to generate the same structure model with precisely the same objects and
connections using any two DOM implementations is known as structural isomorphism,
and it is a key characteristic of DOM structure models.

15
 Fig 3.3.1 Structure of DOM

3.3.6 Methods of DOM:

 write(“string”): Writes the given string on the document.
 getElementById(): returns the element having the given id value.
 getElementsByName(): returns all the elements having the given name value.
 getElementsByTagName(): returns all the elements having the given tag name.
 getElementsByClassName(): returns all the elements having the given class name.

Chapter 4
DEPLOYED PROJECT

16
Feedback Form with validation
The main task was to design a user-friendly feedback form and implement robust client-
side validation logic. The goal was to check the correctness and completeness of user
inputs such as Name, Email, Password, and Feedback before the data is submitted to the
server. This validation improves data integrity, enhances user experience, and reduces the
chance of invalid data entries reaching the backend.

 HTML Form: Includes labelled input fields for Name, Email, Password, and
Feedback.
 Real-time Input Validation: Implemented using vanilla JavaScript for
immediate error detection.
 Dynamic Error Messaging: Custom error messages are shown under each field
when invalid input is detected.
 Validation Rules Implemented:
 All fields are required and cannot be left empty.
 Email format is validated using regular expressions.
 Password must be between 6 to 20 characters to ensure security
and usability.
 Focus Shift: The form automatically places the cursor on the first invalid input
field to guide user correction.
 Success Handling: Upon valid input, a confirmation alert message is shown and
the form fields are reset.

17
Fig 4.1 Feedback Form

Chapter 5

18
 CONCLUSION

My internship at Cognifyz Technologies was a pivotal experience in my career

development, providing me with hands-on experience in frontend development. Working
on a variety of web applications, I developed a deep understanding of creating user-
friendly interfaces using technologies like React.js, CSS, HTML, and JavaScript. This
role involved designing and implementing responsive layouts, optimizing performance,
and ensuring cross-browser compatibility, which enhanced my ability to build engaging
and efficient web applications. Through this internship, I gained practical experience in
frontend development workflows and best practices. I collaborated closely with mentors
and team members, which improved my problem-solving skills and taught me the
importance of clear communication and teamwork in software development. This
experience not only solidified my technical expertise but also highlighted the significance
of user experience design and agile methodologies in delivering high-quality web
applications. Overall, the internship at Cognifyz Technologies has equipped me with
valuable skills and insights into frontend development, laying a strong foundation for my
future career in web development.

19
 REFERENCES

[1] Martin, Sarah. HTML, CSS, and JavaScript. The Definitive Guide to Squarespace, 2014.
[2] Duckett, Jon. Web design with HTML, CSS, JavaScript and jQuery set. Vol. 1. IN: Wiley, 2014.
[3] Goodman, Danny. Dynamic HTML: The definitive reference: A comprehensive resource for
HTML, CSS, DOM & JavaScript. "O'Reilly Media, Inc.", 2002.
[4] https://www.w3schools.com/tags/ref_byfunc.asp
[5] Duckett, Jon. HTML & CSS: design and build websites. Vol. 15. Indianapolis, IN: Wiley, 2011

20