An

Industrial Training Report on

WEB DEVELOPMENT
At
Exim Infotek PVT. LTD. , Jaipur
Submitted in partial fulfillment of the requirements for
the award of the degree of
Bachelor of Technology
in
Computer Engineering

(Session 2022-23)

Submitted to: Submitted by:

Ms. SONAM GOUR Vandita Goyal
Assistant Professor PCE21CS178
(Coordinators- Industrial Training) Class: 3CS-C

DEPARTMENT OF COMPUTER ENGINEERING

POORNIMA COLLEGE OF ENGINEERING, JAIPUR
RAJASTHAN TECHNICAL UNIVERSITY, KOTA
SEPTEMBER, 2022
 DECLARATION

I hereby declare that the work which is being presented in the Industrial Training report
titled Web Development in partial fulfillment for the award of the Degree of Bachelor
of Technology in Computer Engineering and submitted to the Department of
Computer Engineering, Poornima College of Engineering, Jaipur, is an authentic
record of my own work carried out at Exim Infotek Pvt. Ltd.> during the session 2022-23.

I have not submitted the matter presented in this report anywhere for the award of any
other Degree.

Signature of the Student

Name: Vandita Goyal
Reg. No.: PCE21CS178
Place: Jaipur
Date: 20/09/2022
 DEPARTMENT OF COMPUTER ENGINEERING
Date: 20/09/2022

CERTIFICATE
This is to certify that Industrial Training report Web Development has been

submitted by Vandita Goyal, PCE21CS178 in partial fulfillment for the

award of the Degree of Bachelor of Technology in Computer Engineering

during the session 2022-23. The industrial training work is found

satisfactory and approved for submission.

Ms. Sonam Gour Dr. Nikita Jain

Assistant Professor Dy. HOD of computer science department
Coordinators- Industrial Training Department of Computer Engineering
 ACKNOWLEDGEMENT

I would like to convey my profound sense of reverence and admiration to my supervisor

Harshit Sharma, It manager for his intense concern, attention, priceless direction,
guidance and encouragement throughout this internship.

I extend my heartiest gratitude to Ms. Sonam Gour, Coordinator-Industrial Training,

who extended their cooperation to steer the topic towards its successful completion.

My special heartfelt gratitude goes to Dr. Surendra Kumar Yadav, Head, Department
of Computer Engineering, Poornima College of Engineering, for unvarying support,
guidance and motivation during the course of this research.

I am grateful to Dr. Mahesh Bundele, Director, Poornima College of Engineering for his
helping attitude with a keen interest in completing this training work in time.

I would like to express my deep sense of gratitude towards management of Poornima

College of Engineering including Dr. S. M. Seth, Chairman Emeritus, Poornima Group
and former Director NIH, Roorkee, Shri Shashikant Singhi, Chairman, Poornima
Group, Mr. M. K. M. Shah, Director Admin & Finance, Poornima Group and Ar. Rahul
Singhi, Director Poornima Group for establishment of institute and providing facilities
my studies.

I am deeply thankful to my parents and all other family members for their blessings and
inspiration. At last, but not least I would like to give special thanks to God who enabled
me to complete my training work on time.

Vandita Goyal

PCE21CS178
 TABLE OF CONTENTS

PAGE
PARTICULARS
NO.
Title Page i
Candidate’s Declaration ii
Certificate by the Department iii
Acknowledgment iv
Table of Contents v-vi
List of Tables vii
List of Figures Vii
Abstract 10
Chapter 1: Introduction 11-13
1.1 About company 11
1.2 Training Platform 11
1.3 Training Starting Date 12
1.4 Training Ending Date 12
1.5 Total Training Duration 12
1.6 Date of Certification 12
1.7 Training Pictures/Images 12
1.8 Conclusion 13
Chapter 2: Technical Training Platform 14-15
2.1 Introduction 14
2.2 Reason for selecting this platform 14
2.3 Profile of university/organization providing the course 14
2.4 Technical profile of instructor 15
2.5 Conclusion 15
Chapter 3: Overview of Technology Learn 16-43
3.1 Introduction 16
3.2 Front-end Development 17
 3.2.1 HTML 18
3.2.2 CSS 43
Chapter 4: Project Description 63-70
4.1 Introduction 63
4.2 Project Description 63
4.3 Project Analysis and Design 64
4.4 Code Used 65
4.5 Outcomes 70
Chapter 5: Conclusion 73-75
5.1 Introduction 73
5.2 Lessons Learned 74
5.3 Future Scopes 75
Chapter 6: References 76
 ABSTRACT
The main objective of this internship was WEBSITE DEVELOPMENT. Several
programming languages are used to develop a web based application or software. Some
of them are only used for the UI and the front-end development of the application, some
are used for the back-end designing of the software. For example- HTML3, HTML4,
HTML5, CSS, Bootstrap Framework etc. are some programming languages to develope
the front-end of an application. PHP, SQL, Java etc. are used for the back-end.
Frameworks are basically structured programming by using Model, View, and Controller.
It is also called as MVC. If we develop web based application that is very useful for us
because we can access it from anywhere of the world. It is very helpful for our daily life.
That is why I choose subject of my report is "WEBSITE DEVELOPMENT". Working at
Exim Infotek Pvt. Ltd. added huge experiences in my upcoming career. Solving real life
problems was another key issue. This report takes us through all the details of Front-end
WEBSITE DEVELOPMENT knowledge and experience gathered during this internship
period.
 INTRODUCTION
 Introduction To The Company
Exim Infotek (India) Private Limited is a New Delhi based professionally
managed & specialized company in the field of International Trade Information
and directories.It was established in 1989 as an IT company proud to be serving and
providing web solutions to Japan Used Automobile Industry. They enjoy the goodwill of
100s of clients from Japan and are associated with prestigious Associations and trade
Organisations like JUMVEA, SLAAJ , SLBCJ and many more. . One of the main aims
of the company is to provide latest and reliable International Trade Information,
Market Reports, Trade Directories & Yellow Pages to the exporters and importers
all over the world. Exim Infotek administer TQM (Total Quality Management)
and firmly believe in Giving Value For Money.

 Website : https://www.eximgroup.com
 Industries : IT Services and IT Consulting

 Company size : 30-50 employees

 Headquarters : JAIPUR, Rajasthan

 Type : Privately Held

 Founded : 1989

 Founder : Mr. P K Bansal

 Training Platform
Exim Infotek Pvt. Ltd. , Jaipur

 Training Starting Date

20 july 2022
 Training ending date
5 august 2022

 Total Training duration

15 days

 Date of certification
5 august 2022

 Training images

 Conclusion
In the present era of Web development, a good page design is essential. A bad design
will lead to the loss of visitors which can lead to a loss of business. In general, a good
page layout satisfys the basic elements of a good page design. This includes colour
contrast, text organization, and font selection, style of a page, page size, graphics
used, consistency, etc. In order to create a well-designed page for a specific audience.
The developer needs to organized and analyse the users' statistics and the background
of the users. Although it can be hard to come up with a design that is well suited to all
of the users, there will be a design that is appropriate for most of the audience. The
better the page design, the more hits a page will get. That implies an increase in
accessibility and a possible increase in business.
 Technical Training Platform

 Introduction
Exim Infotek (India) Private Limited is a New Delhi based professionally
managed & specialized company in the field of International Trade Information
and directories. One of the main aims of the company is to provide latest and
reliable International Trade Information, Market Reports, Trade Directories &
Yellow Pages to the exporters and importers all over the world. Exim Infotek
administer TQM (Total Quality Management) and firmly believe in Giving Value
For Money.

 Reason for selecting this platform

Exim Infotek (india) Private Limited is a private unlisted company
It is majorly in Community, personal & Social Services business from last 26 years and
currently, company operations are active. They enjoy the goodwill of 100s of clients from
Japan and are associated with prestigious Associations and trade Organisations like
JUMVEA, SLAAJ , SLBCJ and many more. One of the main aims of the company is
to provide latest and reliable International Trade Information, Market Reports,
Trade Directories & Yellow Pages to the exporters and importers all over the
world. Exim Infotek administer TQM (Total Quality Management) and firmly
believe in Giving Value For Money.

 Profile of organization providing the course

 Website : https://www.eximgroup.com
 Industries : IT Services and IT Consulting

 Company size : 30-50 employees

 Headquarters : JAIPUR, Rajasthan

 Type : Privately Held

  Founded : 1989

 Founder : Mr. P K Bansal

 Annual Turnover : Rs. 1-2 crore

 Address : P. N. 12, Heera Nagar, DCM, Ajmer Road, Jaipur-302021,

Rajasthan, India

 Email-ID : [email protected]

 Technical profile of instructor

 Name : Harshit Sharma
 Post : IT Manager
 Contact Number : 8696929033
 Email-ID : [email protected]

 Conclusion
I would like to express my heartfelt gratitude to Exim Infotek Pvt. Ltd. and Mr
Harshit Sharma (Training coordinator) for giving us the opportunity to work under their
guidance and help us gain immensely enriching professional experience.
 Overview of Technology Learnt
3.1 Introduction
Web development, also known as website development, refers to the tasks associated
with creating, building, and maintaining websites and web applications that run online on
a browser. It may, however, also include web design, web programming, and database
management.

Web development is closely related to the job of designing the features and functionality
of apps (web design). The term development is usually reserved for the actual
construction of these things (that is to say, the programming of sites).

The basic tools involved in web development are programming languages called HTML
(Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript. There are,
however, a number of other programs used to “manage” or facilitate the construction of
sites that would otherwise have to be done “from scratch” by writing code. A number of
content management systems (CMS) fall into this category, including WordPress,
Joomla!, Drupal, TYPO3, and Adobe Experience Manager, among others.

There are three main types of web development: front-end development, back-end
development, and full-stack development.

Front-end development involves the “client-facing” side of web development. That is to

say usually, front-end web development refers to the portion of the site, app, or digital
product that users will see and interact with.

If Front-End Developers are responsible for how a digital product looks, Back-End
Developers are focused on how it works. A Back-End Developer creates the basic
framework of a website before maintaining it and ensuring it performs the way it should,
including database interactions, user authentication, server, network and hosting
configuration, and business logic.

A Full-Stack Developer is someone familiar with both front- and back-end development.
Full Stack Developers usually understand a wide variety of programming languages and
because of their versatility, they might be given more of a leadership role on projects than
developers who specialize.

3.2 Front-end development

Front-end development involves the “client-facing” side of web development. That is to
say usually, front-end web development refers to the portion of the site, app, or digital
product that users will see and interact with. A Front-End Developer, therefore, is
responsible for the way a digital product looks and “feels,” which is why they are often
also referred to as Web Designers.

Front-End Web Developers focus on translating website design and visual ideas into
code. A front-end Software Developer takes the design ideas created by others on web
development teams and programs them into reality, acting as a bridge between design and
technology.

Front-End Developers will usually need to possess a solid understanding of programming

languages, including HTML, CSS, and JavaScript, as well as frameworks like React,
Bootstrap, Backbone, AngularJS, and EmberJS. Responsibilities of a Front-End
Developer would include creating responsive websites (that look and function well on
any device), conducting website testing and fixing any bugs detected along the web
development process, and ensuring site structure follows SEO best practices.

Front-End Development Jobs

Unlike back-end development, there are a number of job titles that cover different skill
sets and experience levels within front-end development, including:

 Front-End Developer
 Front-End Engineer
  CSS/HTML Web Developer
 Front-End Web Designer (this usually denotes a role that involves more visual
and interaction design requirements)
 Front-End User Interface Developer (covering interaction design skills)
 Mobile Front-End Web Developer
 Front-End SEO Expert (usually denoting a Developer with experience
incorporating SEO strategy)
 Front-End Accessibility Expert
 Front-End Dev Ops
 Front-End QA (involving unit testing, functional testing, user testing, and A/B
testing)


3.3 HTML
It was first developed in the late 1980s by Tim Berners-Lee, a British computer
scientist who was working at CERN (the European Organization for Nuclear
Research) in Switzerland.

Berners-Lee developed HTML as a way to facilitate the sharing of scientific

information between researchers at CERN. He saw the potential for using the
internet as a platform for collaborative research, and created HTML as a way to
create and structure documents that could be shared online.

The first version of HTML, HTML 1.0, was released in 1993. It consisted of a
small set of elements, including headings, paragraphs, lists, and links. Over the
years, HTML has undergone several revisions, with new versions being released
to add new features and capabilities.

The current version of HTML is HTML5, which was released in 2014. HTML5
introduced many new features and capabilities, including the ability to play
audio and video natively in the browser, improved support for mobile devices,
and new elements for creating interactive content.

HTML has become the standard markup language for creating web content, and
is used by millions of websites and web developers around the world. It is a
fundamental building block of the modern internet, and continues to evolve and
improve with new versions and updates.
3.3.1 What is HTML?

It is used to structure and format the content on the web, including text, images,
and other multimedia elements.
HTML consists of a series of elements, or tags, which are used to mark up the
content of a web page. These elements are used to define the structure and
layout of the content, as well as to add formatting, such as bold or italic text, and
to create links to other web pages or resources.
HTML elements are typically represented by tags that are enclosed in angle
brackets, such as <p> for a paragraph or <div> for a division. Some elements
have an opening tag and a closing tag, with the content being placed in between.
For example, the paragraph element has an opening tag of <p> and a closing tag
of </p>, with the content of the paragraph being placed in between.
HTML tags are classified into several categories, including:
Structural tags: These tags define the structure and layout of the content on the
page, such as headings, paragraphs, and divisions.
Formatting tags: These tags are used to apply formatting to the content, such as
bold or italic text, and to create lists.
Link tags: These tags are used to create links to other web pages or resources.
Image tags: These tags are used to display images on the web page.
Form tags: These tags are used to create forms for user input, such as text boxes
and buttons.
In addition to these basic tags, HTML also supports a wide range of additional
elements and attributes that can be used to add more functionality and
customization to your web pages. This includes elements for adding tables,
forms, audio and video, and more.
HTML is typically written in a text editor, and the resulting code is saved with
a .html or .htm file extension. The code is then viewed in a web browser, which
interprets the HTML and displays the resulting content to the user.
HTML is a fundamental building block of the modern internet, and is used by
millions of websites and web developers around the world. It is an essential skill
for anyone interested in creating web content or building web applications.
Example –
1.A basic HTML page structure with a title and a body:
<!DOCTYPE html>
<html>
<head>
 <title>Page Title</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
2,Adding a heading and a paragraph to the body of the page:
<body>
<h1>Hello World</h1>
<p>This is a paragraph</p>
</body>
Creating a hyperlink:
Copy code
<a href="https://www.example.com">Click here to visit Example.com</a>
Adding an image to the page:
Copy code
<img src="image.jpg" alt="A description of the image">
Creating an ordered list:
Copy code
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

3.4 CSS
Cascading Style Sheets (CSS) is a stylesheet language used for describing the look and
formatting of a document written in HTML (Hypertext Mark-up Language). CSS was
developed in the mid-1990s as a way to provide a more flexible and standardized way to
style web pages.
CSS was first proposed in 1994 by Halon Wimp Lie, a researcher at CERN (the
European Organization for Nuclear Research). Lie wanted to create a way to separate
the content of a web page (the HTML) from its presentation (the styles). He proposed
using a stylesheet language that could be applied to any HTML document, allowing web
designers to easily change the look and feel of their websites without having to rewrite
the HTML.

The first version of CSS (CSS1) was published in 1996 and provided a basic set of
styles for things like text, colours, and layout. In the years that followed, additional
versions of CSS were released, with CSS2 being published in 1998 and CSS3 being
released in stages beginning in 1999.

Today, CSS is an essential part of the web design process, and is used to control the
layout and appearance of websites across the internet. It is supported by all modern web
browsers, making it a widely adopted and reliable tool for web designers.

3.4.1 CSS syntax

CSS (Cascading Style Sheets) is a stylesheet language used for describing the
look and formatting of a document written in HTML. It is used to add style and
layout to web pages.

The basic syntax for CSS consists of a set of rules that define how elements in
an HTML document should be displayed. Each rule has a selector that specifies
which element or elements the rule applies to, and a declaration block that
contains one or more declarations. Each declaration consists of a property and a
value, separated by a colon.

Here is an example of a simple CSS rule:

Copy code

h1 {

colour: blue;

font-size: 18px;

}
In this example, the selector is "h1" and the declaration block consists of two
declarations, one for the "colour" property and one for the "font-size" property.
The values for these properties are "blue" and "18px", respectively. This rule
will apply to all h1 elements in the HTML document and set their colour to blue
and their font size to 18 pixels.

You can also use multiple selectors to apply the same style to multiple elements
at once. For example:

Copy code

h1, h2, h3 {

colour: blue;

font-size: 18px;

This rule will apply to all h1, h2, and h3 elements in the HTML document and
set their colour to blue and their font size to 18 pixels.

You can also use class and ID selectors to apply styles to specific elements with
a specific class or ID attribute. For example:

Copy code

. warning {

colour: red;

font-weight: bold;

#main-content {

width: 80%;

margin: 0 auto;

}
 In this example, the first rule applies to any element with the class "warning"
and the second rule applies to the element with the ID "main-content".

There are many more features and possibilities in CSS, but these are the basic
concepts.

3.4.2 ID Selector

CSS selectors are used to select elements in an HTML document and apply styles
to them. The CSS selectors are as follows:
Element selector: selects elements based on the element's tag name. For example,
the following CSS rule selects all p elements and sets their font size to 18px:
p{
font-size: 18px;
}
Class selector: selects elements based on the element's class attribute. Class
selectors are denoted by a . followed by the class name. For example, the
following CSS rule selects all elements with the class highlight and sets their
background colour to yellow:
. highlight {
background-colour: yellow;
}
ID selector: selects an element based on the element's ID attribute. ID selectors
are denoted by a # followed by the ID value. For example, the following CSS
rule selects the element with the ID header and sets its font size to 24px:
#header {
font-size: 24px;
}
Attribute selector: selects elements based on the presence of a specific attribute
or attribute value. For example, the following CSS rule selects all input elements
with a type attribute equal to text and sets their border to 1px solid black:
Copy code
 input[type="text"] {
border: 1px solid black;
}
Pseudo-class selector: selects elements based on their state or position in the
document. For example, the following CSS rule selects all a elements that are
being hovered over by the mouse and sets their color to red:
Copy code
a:hover {
color: red;
}
Pseudo-element selector: selects a part of an element and applies styles to it. For
example, the following CSS rule selects the first letter of all p elements and sets
it to be 3 times the size of the rest of the text:
Copy code
p::first-letter {
font-size: 3em;
}

3.4.3 CSS comments

In CSS (Cascading Style Sheets), a comment is a line or block of text that is not
interpreted by the browser. Comments are used to add notes or explanations to
the code, or to temporarily disable a line of code without deleting it.
Here are some examples of CSS comments:
Single-line comment:
Copy code
/* This is a single-line comment */
Multi-line comment:
Copy code
/* This is a
multi-line comment. It can span
multiple lines. */
 Commenting out a line of code:
Copy code
body {
/* color: red; */
background-color: lightblue;
}
In the example above, the color property has been commented out, so the text
color will not be set to red. Only the background-color property will be applied.
It's important to use comments in your CSS code to help make it more readable
and easier to understand for yourself and others who may work on the code in the
future.

3.4.4 CSS Styles

Cascading Style Sheets (CSS) is a stylesheet language used for describing the
look and formatting of a document written in HTML, XML, or other markup
language. It is used to add style and layout to web pages, and to control the
display of content across multiple devices.

Here are a few examples of how CSS can be used to style and layout a web
page:

1. Changing the color of text:

Copy code

h1 {

color: blue;

2. Adding a background color to a section:

Copy code
section {

background-color: lightgray;

3. Changing the font size of all paragraphs:

Copy code

p{

font-size: 18px;

4. Aligning an image to the right of a paragraph:

Copy code

p{

text-align: justify;

img {

float: right;

margin: 0 0 10px 10px;

5. Creating a navigation bar with a horizontal list of links:

Copy code
nav {

display: flex;

nav ul {

list-style: none;

margin: 0;

padding: 0;

nav li {

flex: 1;

text-align: center;

nav a {

display: block;

padding: 10px;

text-decoration: none;

}
 These are just a few examples of the many things that can be done with CSS. It
is a powerful tool for styling and layout on the web.

PROJECT DEVELOPMENT
4.1 Introduction
A project is an in-depth investigation if a topic worth learning more about. The
investigation is usually undertaken by a small group of students within a class, sometimes
by a whole class, and occasionally by an individual child. The key feature of a project is
that it is a research effort deliberately focused on finding answers to questions about a
topic posed either by the children, teacher, or the teacher working with the children. The
goal of a project is to learn more about the topic rather than to seek the right answers to
questions posed by the teacher

4.2 Project Description

1.1 What is a Product Landing Page?

A product landing page is a post-click page on a website designed specifically to
promote or sell products or persuade visitors to convert to a product-related offer. In
terms of design, it’s similar to a traditional landing page. It includes conversion-focused
elements, such as a compelling headline, convincing copy, social proof, and more to get
visitors to click the CTA button.

The only thing that differentiates a product landing page from a traditional landing page
is that companies use them to sell products only. Visitors land your product landing pages
after clicking on a paid ad, by clicking one of your social media posts, through a link on
your email newsletter, or after clicking on organic search results.
4.3 Project Analysis and Design
Build trust and anticipation
The headline on a product landing page isn’t like the headline on other pages. Since you
only arrive on a product landing page by clicking through an advertisement, this headline
has to first match the message of its referring advertisement.

Translate your product features

When it comes to advertising products, it’s tempting to tout all its new and powerful
features. In most cases, this would be a mistake.

Shows visitors all they need to see

On your product landing page, the right media can make all the difference.
4.4 Code Used
4.4.1 Project 1
4.4.2 Project 2
4.5 Outcome

4.5.1 Project 1
4.5.2 Project 2
 CONCLUSION

5.1 Introduction
As we all know, our country is a developing country and it dreams to be a developed
country soon. Hence the government of India has taken many necessary project to
fulfilling the concept of digital India. Day by day our job sector is getting more and more
competitive. As a result every other company is searching for experienced candidates.

Finally, I can claim it's internship that helps me gain experience. Thanks to Matrix
computers, I gained so much more in-depth knowledge of technical skills and personal
skills This project helped me gather theoretical and practical knowledge about HTML4/5,
CSS.

Now I am confident and competent in frontends. For those students who are willing to
work in web development, there are huge opportunities available. To give them the scope
for online work and development of website, most private and public organizations
employ web designers. With the rapid emergence of the digital industry, web
development professionals ' demand is growing, and in the coming days this has already
availed so many job opportunity for newcomers.

My internship company gave me a good scope to learn and discover my potentials. I am

very grateful to them.. I was fortunate for getting the chance to meet the real life software
development environment

5.2 Lessons Learned

5.2.1 HTML
• Basic HTML (Tags, Element, Attributes, Paragraphs, Headings, Line Breaks,
Horizontal Rule, Lists, Table, Color Codes, Font, Text Linking, Email, Images,
Background, Comments, Meta, Media, Charset)

• Basic concept (WWW& HTTP, HTTPS, Client Server Communication)

• HTML Forms (Input, Text Fields, Password, Checkbox, Combo Box, Radio, Text
Areas, Files, Buttons)

• HTML5 features

5.2.2 CSS

• Basic CSS (selector, internal, external, Inline, Class, Id, Background, font, Text,
Padding, Margin, Border, list CSS, hovering and elements)

• Advance CSS (border-radius, opacity, cursor, layers, position, display, float, gradient,
and multiple-column)

• Concept of Menus (single menu, dropdown menu)

• Template, design using CSS

5.3 Future Scopes

I gained so much experience from this Internship. If I did not had this experience it would
be very hard for me to find a suitable job. As we know finding work can be a challenge in
this competitive world. In my career opportunity, this internship will support me. And my
future scopes will be after a good internship:

• I can work in IT Farm.

• Working as a software engineer is possible.

• Can pursue career in web design

References
1. www.w3schools.com
2. www.tutorialspoint.com
3. www.userguiding.com