VISVESVARAYA TECHNOLOGICAL UNIVERSITY

BELAGAVI – 590018,Karnataka

AN

INTERNSHIP REPORT

ON

“FRONTEND WEB DEVELOPMENT”

Submitted in partial fulfillment for the award of the degree in

BACHELOR OF ENGINEERING
IN
COMPUTER SCIENCE & ENGINEERING
Submitted by:
SUSHIL BANIYA
1BH19CS109

Under the guidance of

Internal Guide External Guide
Mr. SUDHAKAR K Mr. SAHEEL RAMJI
(Assistant Professor) (Managing Director)

Department of Computer Science & Engineering

BANGALORE TECHNOLOGICAL INSTITUTE
(An ISO 9001:2015 Certified Institute)
Kodathi, Off-Sarjapura Road, Bangalore - 560035.
2022-2023

V
 BANGALORE TECHNOLOGICAL INSTITUTE
(An ISO 9001:2015 Certified Institute)

(Affiliated to Visvesvaraya Technological University, Belagavi)

Department of Computer Science & Engineering

CERTIFICATE

It is certified that the internship work entitled “FRONTEND WEB

DEVELOPMENT” carried out by SUSHIL BANIYA (1BH19CS109) was bonafide
student of BANGALORE TECHNOLOGICAL INSTITUTE, Bangalore in partial
fulfillment for the award of Bachelor of Engineering in Computer Science and
Engineering of the Visvesvaraya Technological University, Belagavi during the
academic year 2022-23. It is certified that all corrections/suggestions indicated for
Internal Assessment have been incorporated in the report submitted to the Department
of Computer Science and Engineering. The intership report has been approved as it
satisfies the academic requirements in respect of internship work prescribed for the said
degree.

Mr.Sudhakar k Mrs. Saranya S

Internship Guide, Internship Co-ordinator,
Department of CSE Department of CSE
.

Dr. Sohan Kumar Gupta, Dr. H S Nanda

H.O.D, Principal
Department of CSE

External Viva
Name of the examiners Signature with date
1.

2.

V
Address Contacts
Nepalgung-10, Banke 081-520361/9858042433
[email protected]/
ninjaininfosys.com

V
 Acknowledgement

Any achievement, be it scholastic or otherwise does not depend solely on the individual
efforts but on the guidance, encouragement and cooperation of intellectuals and elders.I
would like to take this opportunity to thank them all.

I heartily extend my words of gratitude to my guide, Mr.Sudhakar K, for her valuable

advice, encouragement and suggestion given to me in the course of my internship work.
I convey my gratitude to her for having constantly monitored the development of the
internship work and setting up precise deadlines.

I am grateful to internship coordinator, Mrs. Saranya S, for her kind support, guidance
and motivation extended for my internship work.

I would like to express my immense gratitude to Head of Department Dr. Sohan

Kumar Gupta, for his unfailing encouragement and suggestion given to me in course
of my work.

I would like to take this opportunity to express my gratitude to the Principal, Dr. H S
Nanda, for giving me this opportunity to enrich my knowledge. I am grateful to the
President Dr. A Prabhakar Reddy and Secretary, Sri. C L Gowda for having me with
a great infrastructure and well-furnished labs.

Finally, a note of thanks to the Department of Computer Science and Engineering, both
teaching and non-teaching staff for their co-operation extended to me.

Last but not the least, I acknowledge the support and feedback of our parents, guardians
and friends, for their indispensable help at all times.

SUSHIL BANIYA USN: 1BH19CS109

V
 ABSTRACT

TCR Innovation is a professional SOFTWARE DEVELOPMENT & WEBSITE

DESIGNING company located at Navi Mumbai, Maharashtra, India. Our skills and
experience on use of various web tools and technology makes us one of the best web
design company in India. Along with that we have the best website developers and
designers all over India. As the search engine of growth in the Indian business context,
we provide customized software solutions and trained staffing solutions to boost
profitability. We design and develop IT software packages to suit business enterprises,
entrepreneurs, educational Institutions, schools and colleges. We have a dream to
digitalize all over India. To realize this, we aim to harness & simplify IT solutions that
encompass software & accounting technologies, and make it accessible to even the
smallest business enterprise. We breathe life into an organization by sourcing, training
& providing skilled staffing solutions to modernize your business ecosystem. This
project is to provide classifieds information. The website will provide different kinds
of facilities to the user like blood donate, blood request, search for the blood which is
on stock. Admin have its own user name and password and can learn about the
infrastructure, facilities, rules, regulations on the particular colleges/organizations.
Those who want to view the information they can without registration also. This project
is implemented using HTML, CSS, and JavaScript as for front-end an. In existed
system, users have to go that particular site and user learned it. Here, there is no
guarantee that user gets all the information without registration and firstly they should
register with their email address. There is website without responsive and I also add
geo-location and related video of that particular college/organizations.In line with our
vision and mission, we aim to empower the lives of students based in Tier-II and Tier-
III towns by upskilling in modern technological and entrepreneurial domains and
benefit from these programs to become a productive and proactive part of the corporate
space. Through rigorous and immersive training along with simulated real-life technical
exposure through live projects, we train the candidate to be among the most fulfilled
and develop their all-round capability as well. With AI-based software at its core, This
company offers a connected ecosystem accessible from anywhere and by anyone.

V
Contents
CHAPTER 1 1
INTERNSHIP OBJECTIVES 1
1.1 Importance of Internship 1
CHAPTER 2 2
Introduction 2
CHAPTER 3 5
COMPANY PROFILE 5
3.1 About the company 5
3.2 Mission 6
3.3 Vision 6
3.4 Objectives 6
3.5 Services Provided 7
CHAPTER 4 12
About Company Division 12
4.1 Ground Floor 12
4.2 First Floor 12
4.3 Second Floor 12
CHAPTER 5 13
ORGANISATION STRUCTURE 13
CHAPTER 6 13
TASK PERFORMED 13
6.1 INTRODUCTION 13
Chapter 6 14
TECHNOLOGIES 14
6.1 HTML 14
6.3 JAVASCRIPT 14
CHAPTER 7 16
SYSTEM REQUIREMENT SPECIFICATIONS 16
7.1 System Configurations 16
7.2 Hardware Requirements 16
7.3 Software Requirements 16

V
Chapter 8 17
Task performed 17
8.1 Modules 17
CHAPTER 9 22
SCREENSHOTS of project 22
CHAPTER 10 25
WORK SCHEDULE 25
10.1 First Week: 25
10.2 Second Week: 26
10.3 Third Week: 26
10.4 Fourth Week: 27
CHAPTER 11 28
OBJECTIVES/ADVANTAGES 28
CHAPTER 12 29
CHALLENGES 29
CHAPTER 12 30
CONCLUSION 30
CHAPTER 13 32
APPENDIX-PHOTO GALLERY 32
CHAPTER 14 36
REFRENCES NOTES 36

V
 Table of Figures

Fig 5.1: Organisation Structure ......................................................... 13

Fig 9.1: User Home Page………............................................................ 21
Fig 9.2: Service Page……………….......................................................... 21
Fig 9.3: Contact Page……..…………….................................................... 22
Fig 9.4.1: Admin Home Page.............................................................. 23
Fig 9.4.2: Facilities……….List............................................................... 23

V
FRONTEND WEB DEVELOPMENT 2022-2023

CHAPTER 1
INTERNSHIP OBJECTIVES

1.1 Importance of Internship

 Internships are generally thought of to be reserved for college students looking
to gain experiences in a particular field. However, a wide array of people can
benefit from Training Internships in order to receive real world experience and
develop their skills.

 An objective for this position should emphasize the skills you already possess
in the area and your interest in learning more about the particular field.

 Internships are utilized in a number of different career fields, including

architecture, engineering, healthcare, economics, advertising and many more.

 Some internship is used to allow individuals to perform scientific research while

others are specially designed to allow people to gain first-hand experience
working.

 Utilizing internships is a great way to build your resume and develop skills that
can be emphasized in your resume for future jobs. When you are applying for a
Training Internship, make sure to highlight any special skills or talents that can
make you stand apart from the rest of the applicants so that you have an
improved chance of landing the position.

 Develop communication, interpersonal and other critical skills in the job

interview process.

 Identify, write down, and carry out performance objectives (mutually agreed
upon by the employer, the MCC experiential learning supervisor, and the
student) related to their job assignment.

 Learn to appreciate work and its function in the economy. Assess interests and
abilities in their field of study.

Department of CSE, BTI, Bangalore-035 Page 1

FRONTEND WEB DEVELOPMENT 2022-2023

CHAPTER 2
INTRODUCTION

Front-end web development, also known as client-side development, refers to the

development of the user interface (UI) and user experience (UX) of a website or web
application. This involves creating and implementing the visual and interactive
elements that users see and interact with on the front-end of a website.

Front-end developers use a combination of HTML, CSS, and JavaScript to build and
design the layout, typography, colors, and other visual elements of a website. They also
create interactive elements such as buttons, forms, and menus, and ensure that the
website is responsive and accessible across various devices and browsers.

In addition to the technical skills required for front-end development, front-end

developers also need to have a good understanding of user experience (UX) design
principles and be able to work closely with UX designers to create a website that is both
visually appealing and easy to use.

Front-end development is the practice of creating user interfaces for websites or

applications that users interact with. It involves designing and implementing the visual
and interactive components of a website or application, such as buttons, forms, menus,
and other graphical elements.

Front-end development is an essential part of web development, and it requires a good

understanding of web design principles, HTML, CSS, and JavaScript programming
languages. The front-end developer must also be familiar with various front-end
frameworks, libraries, and tools such as React, Angular, Vue.js, Bootstrap, and jQuery,
to name a few.

In summary, front-end development is responsible for creating the visual and

interactive components of a website or application that users interact with. It involves
the use of various programming languages, tools, and frameworks to ensure that the
user experience is intuitive, seamless, and visually appealing.

HTML (Hypertext Markup Language) is used to create the structure of web pages,
defining the layout and content of the page. CSS (Cascading Style Sheets) is used to
style and format the content, including fonts, colors, and positioning. JavaScript is used

Department of CSE, BTI, Bangalore-035 Page 2

FRONTEND WEB DEVELOPMENT 2022-2023

to add interactivity and dynamic features to the website or application, such as

animations, form validation, and client-side data processing.

Front-end developers must also be familiar with responsive design principles, which
involve designing websites that adapt to different screen sizes and devices, and
accessibility best practices, which ensure that websites are usable by people with
disabilities.

In addition to technical skills, front-end developers must have a strong sense of design
and aesthetics, and be able to work collaboratively with other members of the
development team, such as back-end developers, designers, and project managers.

Overall, front-end web development is a critical aspect of web development, as it

directly impacts the user experience and can greatly influence the success of a website
or web application.

HyperText Markup Language

HyperText Markup Language (HTML) is the backbone of any website development

process, without which a web page does not exist. Hypertext means that text has links,
termed hyperlinks, embedded in it. When a user clicks on a word or a phrase that has a
hyperlink, it will bring another web-page. A markup language indicates text can be
turned into images, tables, links, and other representations. It is the HTML code that
provides an overall framework of how the site will look. HTML was developed by Tim
Berners-Lee. The latest version of HTML is called HTML5 and was published on
October 28, 2014 by the W3C recommendation. This version contains new and efficient
ways of handling elements such as video and audio files.

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) controls the presentation aspect of the site and allows
your site to have its own unique look. It does this by maintaining style sheets that sit on
top of other style rules and are triggered based on other inputs, such as device screen
size and resolution. The CSS can be added externally, internally, or embedded in the
HTML tags.

JavaScript

JavaScript is an event-based imperative programming language (as opposed to HTML's

declarative language model) that is used to transform a static HTML page into a

Department of CSE, BTI, Bangalore-035 Page 3

FRONTEND WEB DEVELOPMENT 2022-2023

dynamic interface. JavaScript code can use the Document Object Model (DOM),
provided by the HTML standard, to manipulate a web page in response to events, like
user input.

Using a technique called AJAX, JavaScript code can also actively retrieve content from
the web (independent of the original HTML page retrieval), and also react to server-
side events as well, adding a truly dynamic nature to the web page experience.

WebAssembly

WebAssembly, supported by all the major browsers (i.e. from the major vendors
Google, Apple, Mozilla and Microsoft), is the only alternative to JavaScript for running
code in web browsers (without the help of plug-ins, such as Flash, Java or Silverlight;
all being discontinued, as browsers are dropping plug-in support). Prior to its adoption,
there was asm.js (a subset of JavaScript; and thus strictly works in all browsers), that's
also used as a compiler target with efficient support in browsers such as Internet
Explorer 11; and for such browsers that do not support WebAssembly directly, it can
be compiled to asm.js and those browsers supported that way. Generally speaking
programmers do not program in WebAssembly (or asm.js) directly, but use languages
such as Rust, C or C++ or in theory any language, that compile to it.

Goals for development

The developer of the front end keeps these points in mind, utilizing available tools and
techniques to reach this end.

Accessibility

With continuing development for mobile devices, such as smart phones and tablets,
designers need to ensure that their site comes up correctly in browsers on all devices.
This can be done by creating a responsive web design using stylesheets in CSS.

Performance

Performance goals are chiefly concerned with render time, manipulating the HTML,
CSS, and JavaScript to ensure that the site opens up quickly.

Speedy development

This technology enables speedy development and saves time.

Department of CSE, BTI, Bangalore-035 Page 4

FRONTEND WEB DEVELOPMENT 2022-2023

CHAPTER 3
COMPANY PROFILE

3.1 About the company

"TCR Innovation is a professional SOFTWARE DEVELOPMENT &

WEBSITE DESIGNING company located at Navi Mumbai, Maharashtra, India. Our
skills and experience on use of various web tools and technology makes us one of the
best web design company in India. Along with that we have the best website developers
and designers all over India."

TCR Innovation is an IT technical solution provider. Our dedicated technical

professionals offer our clients services in the field of IT Consultancy, Software
Development, Web/Mobile Application Development, Project-based Solutions and IT
System Maintenance. TCR focuses on making the world a little smarter every day.
TCR Innovation was established in 2012 to provide information technology solution
for small, medium to large-sized business. Our mission from the very first day has been
to establish professional relationship with our clients, to provide effective and reliable
information technology solutions for their need. The team TCR is equipped with highly
developed skills having good experience not only in the field of IT but also in business
process across over a range of industrial, tourism, educational, agricultural, physical
infrastructure and many more sector.At TCR Innovation we guarantee rapid, reliable
and robust information technology solutions that works for the betterment of your
business.

Department of CSE, BTI, Bangalore-035 Page 5

FRONTEND WEB DEVELOPMENT 2022-2023

3.2 Mission
 To Bridge the gap and make quality education accessible for all. Holistic
development of the street children to bring them into the mainstream

 To build a self-sustainable ecosystem by enhancing and promoting vocational

skills for a better livelihood.

 To create a chain of change by developing social leaders within the community.

3.3 Vision
They have a dream to digitalize India. To realize this, we aim to harness &
simplify IT solutions that encompass software & accounting technologies, and make it
accessible to even the smallest business enterprise. We breathe life into an organization
by sourcing, training & providing skilled staffing solutions to modernize your business
ecosystem.

3.4 Objectives
 An internship is a period of work experience offered by an organization for a
limited period of time.

 Once confined to medical graduates, the term is now used for a wide range of
placements in businesses, non-profit organizations and government agencies.

 They are typically undertaken by students and graduates looking to gain relevant
skills and experience in a particular field.

 Employers benefit from there placements because they often recruit employees
from their best interns, who have known capabilities, thus saving time and
money in long run.

 Internships are usually arranged by third-party organizations which recruit

interns on behalf of industry groups.

 Rules vary from country to country about when interns should br regarded as
employees. The system can be open to exploitation by unscrupulous employers.

 Internships for professional careers are similar in some ways, but not as rigorous
as apprenticeships for professions, trade, and vocational jobs.

Department of CSE, BTI, Bangalore-035 Page 6

FRONTEND WEB DEVELOPMENT 2022-2023

 The lack of standardization and oversight leaves the term “internship” open to
broad interpretation.

 Interns may be high school students, college and university students, or post-
graduate adults.

 These positions may be paid or unpaid and are temporary.

3.5 Services Provided

3.5.1 Website Development

In the website industry, web development tends to be classified as the coding

and writing of the HTML or source code – rather than the creation of the look and feel
of the website.

Our web development team looks beyond the visual effect of the website and
takes other factors into consideration such as the user-friendliness of the website, ease
of maintenance and adhering to the best practices and website development standards.
We also take into account the search engine friendliness and optimization of the website
– and of course, we make sure that the website serves and meets its main objectives.

Content Management System (CMS) Of Website: Our focus has been on the
development and refining of a reusable software framework that is easy to use, reliable
and easily updated. In the world of web development, this is referred to as a Content
Management System, or CMS, and it complements a website by providing webmasters
and website owners with the tools to manage their website’s content themselves. The
CMS makes it easy for the webmaster to manage the website’s navigation, SEO, content
and other assets such as images and videos. For us, owning the framework means that
we can develop websites around our customer’s unique requirements and ensures not
only improved security, but also a quicker turnaround when updating, enhancing or
debugging the websites.

3.5.2 Software Development

We can also develop from the simplest website to the most complex web-based
applications and recommend the configuration that best meets your objectives. Online
Innovations can offer you comprehensive online solutions which incorporate the latest
technology.

Department of CSE, BTI, Bangalore-035 Page 7

FRONTEND WEB DEVELOPMENT 2022-2023

Since our establishment in 2012, our team have acquired a wealth of experience
by being exposed to (what must be) all of the key business processes – from small to
enterprise level businesses. Software development is one of the main task we do at
Ninja Infosys “we have developed audit software, school management system software,
store management software, and many more.” Our expert developers are always there
for the development of the software you need.

3.5.3 It Consultant

As IT Consultant TCR Innovation is the foremost IT company that consistently

focuses on encouraging different profitable/ non-profitable both small & large
organizations on how best to use information technology in achieving their bussiness
objectives. As IT consultant we mainly anchor on economizing precious resources, time
& affluence of our clients(organizations) under worthy consulting fee.

TCR Innovation uses the experience & expertise to plan your project appropriately
avoiding common delays and unclear requirements. We provide professional service
and advice, enhance the customer services and productivity help to tackle most of IT
challanges.

3.5.4 Digital Marketing

Digital marketing is advertising delivered through digital channels. Channels such

as social media, mobile applications, email, web applications, search engines, websites,
or any new digital channel.Online Digital marketing That We Provide:

 Search Engine Optimization(SEO)

 Search Engine Marketing(SEM)

 Content Marketing

 Social Media Marketing(SMM)

 Email Marketing Strategies SEO “Search Engine Optimization”

 Keyword Recognization and Integration

 Link Building

 Website Structure and Architecture Optimization

 Competitor Analysis and Ranking

Department of CSE, BTI, Bangalore-035 Page 8

FRONTEND WEB DEVELOPMENT 2022-2023

 Optimized Content Strategy

 Regular Optimization

Search engine marketing (SEM)

Our Search Engine Marketing service is a broad approach that incorporates

Search Engine Optimization, Pay-Per-Click(PPC) Advertising Campaigns, and Search
Reputation Management. It includes:

Keyword Analysis & Strategy:

 AdCopy Creation

 Keyword Bidding

 Competitor Analysis

 Click Through Rate (CTR) Analysis

 Website Architecture Optimization

 Google Adwords & Analytics

Content Marketing

Content marketing is done through many medias and we have expert team for
providing content marketing for your business.

 Post content to Facebook and Instagram.

 Videos and Youtube contents.

 Publication in Mass Media.

Social Media Marketing (SMM)

Social Media Marketing is the go-to option to increase your brand awareness
and improve customer relationship. We develop exclusive content to build an emotional
connection with the audience through Instagram, Facebook, LinkedIn, etc. We have the
best team for creating your Social Media Marketing.

E-Mail Marketing:

The main objective of email newsletters – the conversion of site visitors that left
their contacts into customers and motivate existing customers to repeat purchases .

Department of CSE, BTI, Bangalore-035 Page 9

FRONTEND WEB DEVELOPMENT 2022-2023

3.5.5 Domain Registration

A domain name is simply a human readable form of an IP address. In function

it is the destination that you type into a web browser in order to visit a website, such a
www.google.com. Metaphorically, it is very similar to how you would scroll to a
contact in your cell phone rather than manually dialing the person by entering their full
phone number; the phone number would be an IP address and the saved contact would
be a domain name.

Domain is just like " Address to your home" i.e. with unique domain people can
easily reach to you. We provide best domain name to you so that people could easily
recognize and reach to you

Q. How do I buy a domain name?

A. It’s easy to get a new domain. Here are the steps:

 Decide on a domain name extension. The extension is the part at the end of the
domain name — .net, .biz, .org or .com, .gov, .mil for example.

 Think about what you'd like on the other side of the dot. It could be your
business name or your specialty.

 Just give us a call or message us with the domain name you have thought about.
We’ll tell you if that particular domain is available and show other you may like
better.

 Once Domain name is taken; you will be now the proud owner of your very
own domain. As long as it's registered to you, no one else may use it.

Hosting

Hosting is the "space of your home" i.e with hosting you get to save more &
more data securely. Two Types of Hosting is available:

Either You own your home or stay in rent: Dedicated and Shared Hosting.

Dedicated Hosting

Dedicated hosting is the equivalent of owning your own home. It is entirely

yours, and no one else can use it without your expressed permission. For dedicated
hosting, the server is dedicated to powering a single domain giving you the most power,
bandwidth, and memory.

Department of CSE, BTI, Bangalore-035 Page 10

FRONTEND WEB DEVELOPMENT 2022-2023

Dedicated hosting is not for everyone and generally provides more resources
than the average business requires. Dedicated hosting is ideal for very large companies
that regularly experience a high volume of internet traffic or sales, or require a large
amount of disk space. Dedicated hosting grants you the greatest flexibility,
customization, and security of the three types of hosting but is also the most expensive.

Shared Hosting

Shared web hosting is the most affordable type of domain hosting available. Its
affordability is due to the fact that you share a server with various companies who also
want a low-cost web hosting plan. Each company that shares this server has its own
specified amount of storage space that is defined by the hosting package. Depending on
the size of the server, you could possibly have thousands of websites hosted on the same
platform, with each user receiving an allotment of the total available bandwidth,
memory and power.

3.5.6 Graphics Designing

Have you ever found yourself spotting shapes in the clouds? That is because
people are hard-wired to recognize patterns, even when there are none. It’s the same
reason that we often think we know where to click when first experiencing a website—
and get frustrated if things aren’t where we think they should be. Choosing the right
user interface design pattern is crucial to taking advantage of this natural pattern-
spotting, and this is where you need a good graphics designer. We are proud to inform
you that we can design the best out of best patterns for you.

Graphic design is the process of visual communication and problem-solving

through the use of typography, photography, iconography and illustration. The field is
considered a subset of visual communication and communication design. Graphic
designers create and combine symbols, images and text to form visual representations
of ideas and messages.

Department of CSE, BTI, Bangalore-035 Page 11

FRONTEND WEB DEVELOPMENT 2022-2023

CHAPTER 4
ABOUT COMPANY DIVISION

4.1 Ground Floor

The Ground Floor of TCR Innovation consist of three division. In first division,
the receptionist reside which deals with the customer.Each flat area ranges from 1600
to 2170 square feet designed in such a way that there is maximum light and ventilation
inside the flat .Per floor with two lifts and one staircase for conveniance. The unit boasts
of the major amenities like hall,walking tracks and apartment.

4.2 First Floor

In second division, the employees reside in which they work in isolation .Here
all the employees have their own computer provided by the company. Here employees
sit next to each other and help each other in task.

4.3 Second Floor

In third division, the manager resides who manages the company. TCR
Innovation Company has planned to expand its business network to reach large section
of potential clients living in remote areas.The Company opened five branches during
the year which raised total number of branches to ten. The company has a wide network
of correspondene that plays a vital role in facilitating its trade.

Department of CSE, BTI, Bangalore-035 Page 12

FRONTEND WEB DEVELOPMENT 2022-2023

CHAPTER 5
ORGANISATION STRUCTURE

CHAPTER 6
TASK PERFORMED

6.1 INTRODUCTION
The system has various modules:

a) Admin

b) Sign Up

c) Login

d) Order Pages (Order Manufacturer, Order Design & Order Engine)

e) Delivery

f) Payment

g) Feedback

Admin

Admin has full control of the system he/she can perform all tasks possible to bring
changes in a web application.

The admin will perform various function. Some of them are listed below:

➢ Sign Up and Login Page: View all the signups and logins.

➢ Order Pages (3): View all the orders done by customers.

➢P
Figure 5.1: ORGANISATION STRUCTURE

Department of CSE, BTI, Bangalore-035 Page 13

FRONTEND WEB DEVELOPMENT 2022-2023

CHAPTER 6
TECHNOLOGIES

6.1 HTML
HTML is the standard markup language for documents designed to be displayed
in a web browser. It can be assisted by technologies such as Cascading Style Sheets
(CSS) and scripting languages such as JavaScript. HTML describes the structure of web
pages using mark-up. HTML elements are represented by tags. HTML tags label pieces
of content such as “heading”, “paragraph”, “table”, and so on.

Key advantages of learning HTML:

 create Web site

 Become a web designer

 Understand web

 Learn other languages

6.2 CSS

CSS is a style sheet language used for describing the presentation of a document written
in a markup language such as HTML. CSS is a cornerstone technology of the World
Wide Web, alongside HTML and JavaScript.

Advantages of learning CSS:

CSS saves time

Pages load faster

Easily maintenance

Superior styles to HTML

Multiple device compatibility

6.3 JAVASCRIPT
JavaScript is a dynamic computer programming language. It is lightweight and most
commonly used as a part of web pages, whose implementation allow client-side script

Department of CSE, BTI, Bangalore-035 Page 14

FRONTEND WEB DEVELOPMENT 2022-2023

to interact with the user and make dynamic pages. It is an interpreted programming
language with object-oriented capabilities.

Advantages of learning JavaScript:

 Less server interaction

 Immediate feedback to the visitors

 Increased interactivity

 Richer interfaces

Department of CSE, BTI, Bangalore-035 Page 15

FRONTEND WEB DEVELOPMENT 2022-2023

CHAPTER 7
SYSTEM REQUIREMENT SPECIFICATIONS

7.1 System Configurations

The software requirements specification can produce at the culmination of the
analysis task. The functional and performance of the sites helps the user to know about
the information of particular college/organizations. With the help of sites, information
is easily available to the user through one click and also, they got live location of that
particular organizations.

7.2 Hardware Requirements

Processor: Intel core i3

Memory: 4GB RAM

Hard Disk: 512GB-1TB

7.3 Software Requirements

Operating System: Windows, Linux

Coding Languages: HTML, CSS, JavaScript and Bootstrap

Text Editor: Visual Studio Code

Database: MySQL

Package: XAMPP

Department of CSE, BTI, Bangalore-035 Page 16

FRONTEND WEB DEVELOPMENT 2022-2023

CHAPTER 8
TASK PERFORMED

8.1 Modules
 The system has various modules:

 Academic Programs

 Student Services

 Facilities Management

 Budgeting and Financial Management

 Personal Management

1. Academic Program

One key aspect of university management is academic program management, which

involves overseeing the development and implementation of academic programs,
including curriculum design, course scheduling, and faculty hiring and development.
University administrators must also ensure that academic programs meet accreditation
standards and stay up-to-date with industry trends and emerging technologies.

2. Student Services

Another important area of university management is student services, which include

admissions, financial aid, housing, student activities, and career services. University
administrators must work to ensure that these services are accessible and meet the needs
of a diverse student body, and they must also develop strategies to promote student
success and retention.

3. Facilities Management

Facilities management is another critical aspect of university management, involving

the planning, construction, and maintenance of campus buildings and infrastructure.
University administrators must ensure that facilities meet safety and accessibility
standards and are equipped with the latest technologies and resources.

Department of CSE, BTI, Bangalore-035 Page 17

FRONTEND WEB DEVELOPMENT 2022-2023

4. Budgeting and Financial Management

Budgeting and financial management is also a key area of university management, as

administrators must balance the need to invest in academic programs and facilities with
the need to manage costs and operate within budget constraints. This involves
developing long-term financial plans, securing funding from external sources, and
managing endowments and other financial assets.

5. Personal Management

Finally, personnel management is a critical aspect of university management, as

administrators must hire and develop faculty and staff members who can effectively
contribute to the success of the institution. This involves developing hiring and
retention strategies, providing professional development opportunities, and ensuring
compliance with labor laws and regulations.

In summary, university management is a complex and multifaceted field that involves

the coordination and administration of academic programs, student services, facilities
management, budgeting, and personnel management. Effective university management
requires a broad range of skills and expertise, including strategic planning, financial
management, personnel management, and communication and collaboration skills.

Department of CSE, BTI, Bangalore-035 Page 18

FRONTEND WEB DEVELOPMENT 2022-2023

Codes for Admin Login (Back-end):

<?php
session_start();
$db=new PDO('mysql:host=localhost;dbname=bb','root','');
if(isset($_POST['sub']))
{
$un=$_POST['un'];
$ps=$_POST['ps'];
$q=$db->prepare("SELECT * FROM admin_login where uname=
'$un' && password= '$ps'");
$q->execute();
$res=$q->fetchALL(PDO::FETCH_OBJ);
if($res)
{
$_SESSION['un']=$un;
header("location:admin-home.php");
}
else
{
echo "<script>alert('wrong User')</script>";
}
// Prepare statement
$stmt = $conn->prepare($SELECT);
$stmt -> bind_param("s", $username);
$stmt -> execute();
$stmt -> bind_result($username);
$stmt -> store_result();
$rnum = $stmt->num_rows;

Department of CSE, BTI, Bangalore-035 Page 19

FRONTEND WEB DEVELOPMENT 2022-2023

$un=$_SESSION['un'];
session_destroy();
header('Location:login.php');

$stmt->close();
$stmt = $conn->prepare($INSERT);
$stmt->bind_param("ss", $username, $apassword);
$stmt->execute();
}else{
echo '<script> alert( "Incorrect Password")</script>';
<script>
location.replace("http://127.0.0.1:8887/5%20loginpage.htm");
</script>
<?php
}
}else{
echo '<script> alert( "Invalid Email!")</script>';
?>
}
$stmt->close();
$conn->close();
}
}
}else{
echo "All field are required";
die();
}
?>

Department of CSE, BTI, Bangalore-035 Page 20

FRONTEND WEB DEVELOPMENT 2022-2023

1. Admin login Page

Through this page the admin can login the page and admin can do anything inside
the backend of database.

2. Services Page

In this project three different services have available. If any person wants do donate
the blood, then needs to fill the form for donation and then able to donate the blood.

If any person needed the blood the he/she needs to fill the form for blood need and
request for the required blood group. And we have donor search page also, it will very
helpful for the any person who needs blood. Through this page we can search the
required blood and if its available then we can fill the form for needed blood

3. Contact page

Through this page any person can give the feedback to the owner and contact for more
details.

Department of CSE, BTI, Bangalore-035 Page 21

FRONTEND WEB DEVELOPMENT 2022-2023

CHAPTER 9
SCREENSHOTS OF PROJECT

Figure 9.1: User Home page

Figure 9.2: Service page

Department of CSE, BTI, Bangalore-035 Page 22

FRONTEND WEB DEVELOPMENT 2022-2023

Figure 9.3 : Contact Pages

Department of CSE, BTI, Bangalore-035 Page 23

FRONTEND WEB DEVELOPMENT 2022-2023

Figure 9.4: Admin Home page

Figure 9.5: Facilities list

Department of CSE, BTI, Bangalore-035 Page 24

FRONTEND WEB DEVELOPMENT 2022-2023

CHAPTER 10
WORK SCHEDULE

The Work Schedule for my internship in this company is 4 weeks. In these Four
weeks, I learned so many things here and it helps to enhance and develop my design
skills, which will be useful for my upcoming job opportunity.

10.1 First Week:

DATE DAY NAME OF TOPIC/MODULE COMPLETED

Introduction to Company. How internet works,

10/06/22 Saturday Introduction to HTML, Completion of HTMLand
advance HTML5

CSS, CSS3,CSS Grid and CSS

12/06/22 Monday Layout:Introduction basic HTML tags,
intermediate HTML tags Advanced HTML tags

Bootsstraps:Introduction to Bootstrap installation

13/06/22 Tuesday of Bootstrap Grid system, Forms Buttons, Icons
integration

Introduction to SaaS:Introduction to SaaS

14/06/22 Wednesday
Installation Variables Nesting

Project:Create a sample portfolio webpage with

15/06/22 Thursday
header and footer which should be responsive.

16/06/22 Friday Complete creation of portfolio using animation.

Department of CSE, BTI, Bangalore-035 Page 25

FRONTEND WEB DEVELOPMENT 2022-2023

10.2 Second Week:

DATE DAY NAME OF TOPIC/MODULE COMPLETED

Javascript:Introduction, number
17/06/22 Saturday ,String,Boolean,Comparison, Variables, Exercise:
make a calculator, control flow.

Javascript:Functions, Arrays,
19/06/22 Monday Objects,Loops,Keywords,Section outline
documents.

OOPS:Inheritance,Constructors,Destructors and
Encapsulation.

DOM Manipulation:Introduction , DOM

20/06/22 Tuesday
selectors.

Design project:Minor project discussion using

HTML, CSS and Javascript.

21/06/22 Wednesday DOMManipulation:Introduction, DOM selectors.

Design project:Minor project discussion using

22/06/22 Thursday
HTML,CSS and Javascript.

10.3 Third Week:

DATE DAY NAME OF TOPIC/MODULE COMPLETED

23/06/22- Friday- Design Project: Minor Project discussion using

24/06/22 Saturday HTML, CSS and Javascript

Department of CSE, BTI, Bangalore-035 Page 26

FRONTEND WEB DEVELOPMENT 2022-2023

10.4 Fourth Week:

DATE DAY NAME OF TOPIC/MODULE COMPLETED

Designing of Login page, Registration page using

26/06/22 Monday
Bootstrapping, CSS

Designing of Background verification using

27/06/22 Tuesday
Bootstrapping, CSS

Designing of Induction page, Employee page

28/06/22 Wednesday
using Bootstrapping, CSS

Execute the pages and pages connect with

19/06/22 Thursday
MYSQL database in XAMPP.

30/06/22- Friday- Design Project: Major Project Discussion

01/07/22 Monday Completion of Project

Department of CSE, BTI, Bangalore-035 Page 27

FRONTEND WEB DEVELOPMENT 2022-2023

CHAPTER 11
OBJECTIVES/ADVANTAGES

Internships offer many advantages for young individuals looking to expand their
starting careers or any professional courses. Internships offer us the opportunity to try
out our profession, build our resume, and meet people who can help us in our career.

 It provides the opportunity how to work any project within a group as team.

 It also provides good environment while performing any tasks given by the
organization.

 We gain the experience to do certain task in a certain period of time.

 While performing any task we get proper guidance and also the effort of team
member on that field.

 This project helps the manufacturer to maintain the details of orders and choices
made by customer.

 Internship are a great way to apply the knowledge from classroom to the
realworld experiences. It helps in exploring different career paths and exploring
our interests in different fields so that we can pursue that later.

 It gives us experience in the field we want to pursue and also in building our
resume as most organizations nowadays would prefer to have employees with
some professional experience.

 Having an internship helps in building networks in the workplace. It is a great

platform to meet professionals who can guide us to the right career path.

 The path of internship introduces students to a real-life work environment which

helps them in learning how a workplace operates.

Internships are temporary. They can last from few weeks to twelve months, with
varying works hours but they can lead to long-term benefits, such as job opportunities
in the company and increased knowledge about the industry. In automobile ordering
system project, admin can easily get the details of each and every order whenever

Department of CSE, BTI, Bangalore-035 Page 28

FRONTEND WEB DEVELOPMENT 2022-2023

required. This project helps to manage the orders and proceed with the same, which is
less time consuming as well as require low cost.

CHAPTER 12
CHALLENGES

During internship all faces various problem in different ways. The biggest
challenge is being at the bottom of totem pole. The most common challenge is that the
intern has never worked in a structured environment and so is unaware of the protocols.
It takes time to understand how the work environment operates and how the intern fits
within that environment.

 Sometimes performances remain unnoticed if we don’t tell anyone about

it.

 While providing any minor projects among the individuals, we expected

new things but turn into the same repeated work which has already been
done by seniors or mentors.

 During internship we had fear of asking question to the respective guide

about the particular projects.

 Without the proper step-to-step guide of mentor, we face various error

while doing projects.

 Some students were not friendly to participate in the project and ignore all
the important part of the project.

 For major project we had unstable team members who doesn’t response
and corporate with each other.

 Mentor was not always available for a single team member.

 For major project, time was limited to complete that project and face
various error while doing because of limited period of time.

 Less chance to get recognized from the projects completed, and less
opportunities after internship completion.

We faced various problems but with the proper guidance of mentor we were
able to overcome these obstacles and complete our internship in the company. Mentor

Department of CSE, BTI, Bangalore-035 Page 29

FRONTEND WEB DEVELOPMENT 2022-2023

suggested and taught us that we should build a strong understanding among our
coworkers. The main challenge we faced was to connect database and the server.

CHAPTER 12
CONCLUSION

I have learned various types of technologies required for theme, product and layout
design. My main focus had been on front-end designing and also back-end development
which leads to a full stack development. With the help of this internship I have gained
significant amount of knowledge I hope it will be helpful for my future carrer.

Making this project was sometime difficulties gave very valuable knowledge. The team
of puranobooks has always helped me to sharpen my knowledge and to acquire new
skills.

Throughout my time of internship, I have acquired lots of new experiences. I got

chances to use different development tools, research on them and use them. Overall in
this period of internship all my theoretical knowledge gained from college had gained
a practical experience.

Once the on-boarding and training phase wraps up, the new staff member should be
ready to engage in a rewarding long-lasting career. The full cycle recruiting process can
indeed be a gruelling experience for all parties involved. But, will the addition of a new,
reliable employee for the firm, it is also a much needed and appreciated part of nurturing
a successful business. Even for owners of small enterprises, for peace of mind in hiring
the best candidate for a job, following the steps of the recruitment life cycle is well
worth the time and effort and is a proven method of reducing turnovers within a
company, saving both time and money in the long run.

Department of CSE, BTI, Bangalore-035 Page 30

FRONTEND WEB DEVELOPMENT 2022-2023

Department of CSE, BTI, Bangalore-035 Page 31

FRONTEND WEB DEVELOPMENT 2022-2023

CHAPTER 13
APPENDIX-PHOTO GALLERY

Department of CSE, BTI, Bangalore-035 Page 32

FRONTEND WEB DEVELOPMENT 2022-2023

Department of CSE, BTI, Bangalore-035 Page 33

FRONTEND WEB DEVELOPMENT 2022-2023

Department of CSE, BTI, Bangalore-035 Page 34

FRONTEND WEB DEVELOPMENT 2022-2023

Department of CSE, BTI, Bangalore-035 Page 35

FRONTEND WEB DEVELOPMENT 2022-2023

CHAPTER 14
REFRENCES NOTES

1. Dave W. Mercer, Allan Kent, Steven Nowicki, David Mercer, ―Beginning PHP5‖,
3rd edition, Wrox publications.

2. Vikram Vaswani, ―MySQL(TM): The Complete Reference‖, 6th edition, Mc Graw

Hill Education publications.

3. Luke Welling, ―PHP and MySQL Web Development Book‖, 5th edition, Pearson
India publications.

4. Larry Ullman, ―PHP and MySQL for Dynamic Web Sites‖, 4th edition, Pearson
India publications.

Weblinks

1. To learn about the software required to use, we used, www.wikipidea.org

2. For more examples for learning, we referred, www.tutorialpoint.com

3. For learning the PHP and MySQL integration, we referred,

www.w3schools.com

Department of CSE, BTI, Bangalore-035 Page 36