A Summer Internship Report On

Building One Page Website

(INDUSTRY DEFINED PROJECT)

Submitted In Partial Fulfillment for the course of

SUMMER INTERNSHIP-2022

Bachelor of Engineering
In
Information Technology

Prepared By

Shaikh Saif Ali Abrar (190260116026)

Industry Guide Faculty Guide

Vivek Patel Prof. Kiran Patel

Department of Information Technology

Kalol Institute of Technology & Research Centre

Gujarat Technological University
2022
 Acknowledgement
We have taken efforts in this project. However, it would not have been
possible without the kind support and help of many individuals and
organizations. We would like to extend my sincere thanks to all of them.

We are highly indebted to (company guide ) for his guidance and constant
supervision as well as for providing necessary information regarding the
project. We take this opportunity to thank all my friends and colleagues
who started me out on the topic and provided extremely useful review
feedback and for their all-time support and help in each and every aspect
of the course of my project preparation. We are grateful to my college Kalol
Institute of Technology And Research Centre, Kalol for providing me all
required resources and good working environment.

I would like to express my gratitude towards Head of Department, Prof.

Shilpa Serasiya and our Principal Dr. Mitesh Popat for giving their co-
operation and encouragement which help me in this project.

Shaikh Saif Ali Abrar

(190260116026)
 COLLEGE CERTIFICATE

CERTIFICATE
This is to certify that the Project work entitled “Building One
Page Website” is a bonafide work carried out by Shaikh Saif Ali
Abrar (190260116026) under my guidance in partial fulfillment for
the course of SUMMER INTERNSHIP of Information
Technology Engineering (7th Semester) in Kalol Institute of
Technology &Research Centre of Gujarat Technological University,
Ahmadabad during the Academic Year 2022.
Date of submission:

Head of the Dept. (IT Dept) Assistant Professor (IT Dept)

Prof. Shilpa Serasiya Prof. Kiran Patel

COMPANY'S OFFER LETTER

4 | P ag e
COMPANY’S CETIFICATE
 ABSTRACT

Recently the e-commerce platform is playing an important role in some areas; its activities are a subset of e-business
activities. The aim of this paper is to build and develop a reliable website based on the e-commerce theories,
developing effective well designed web pages. This website will sell computer products include (hardware and
software). For implement the selling online website, it needs to use current technologies to achieve this goal. As a first
stage, it should setting up online ecommerce store with easy-to-use. Then improve the customer experience, and lastly
implement the Direct Online Sale between business to consumer by implement electronic payment methods. All these
techniques should be based on deliberated plan according to strategy of electronic commerce with implement the
current technology to ensure a good revenue to the company.

INTRODUCTION

Internship Title :

Web Designing

Project Name :

Building One Page Website

In this internship we are going to work on dynamic webpage designing. Use html,css and javascript web
framework which is very popular and one of the most important part of full stack web development. In this
internship we will going to work on real time ecommerce web page.
 lOMoARcPSD|15715826

A Report On Web Designing

TABLE OF CONTENTS
Page

Internship Certificate provided by the Institute…………... I

Recommendation…………………………………………. II
Declaration………………………………………………... III
Acknowledgement……………………………………….... IV
About Company/Industry/Institute………………………... V
Table of Contents………………………………………….. VI
Abstract……………………………………………………. VII
Figure Index……………………………………………….. VIII

Chapter 1 Introduction (1-8)

1.1 Introduction…………………………………………… 01
1.2 Objective…………………………………………….... 02
1.2.1 To gain skills and knowledge…………………. 02
1.2.2 To get filled work experience…………………. 02
1.2.3 To enhance our communication skills…………. 02
1.2.4 To link theory with practice……………………. 03
1.2.5 To build a network……………………………... 03
1.3 Tools and Technology used……………………………. 04

Chapter 2 Training Work Undertaken………………..... (9-11)

2.1 Training Attended……………………………………... 09

2.2 Roles and Responsibility……………………………… 09
2.3 Work Environment……………………………………. 10
 lOMoARcPSD|15715826

A Report On Web Designing

Chapter 3 Results and Discussion……………………… (12-16)

3.1 Discussion…………………………………………… 12
3.2 Learning Outcome……………………………………. 12
3.2.1 HTML………………………………………... 12
3.2.2 CSS…………………………………………… 13
3.2.3 Bootstrap……………………………………... 13
3.2.4 JavaScript…………………………………….. 13
3.3 Result…………………………………………………. 14

Chapter 4 Conclusion and Future Scope……………… (17-18)

4.1 Conclusion………………………………………… 17
4.2 Future Scope………………………………………….. 18

References………………………………………………... 18
 lOMoARcPSD|15715826

A Report On Web Designing

Abstract

Website Design and learning HTML were the main objective

of this internship. To develop a web based application there are
several programming languages that are in use. Some of them
are only used for the frontend and backend design of the
software. For example, HTML3, HTML4, HTML5, CSS,
Bootstrap, JavaScript etc. There are also some other
programming languages that are used to develop the dynamic
functions of the software or application. For example- PHP,
Java etc. Nowadays there are also some frameworks that use
vastly. 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 in the world. It is very
helpful for our daily life. That is why I choose subject of my
report as “WEB DESIGN”. Training in Universal Informatics
added huge experiences in my upcoming career. Solving real
life problems was another key issue. This report takes us
through all the details of WEBSITE DESIGN knowledge and
experience gathered during this internship period.
 lOMoARcPSD|15715826

A Report On Web Designing

FIGURE INDEX

Figure No. Title of Figure Page

Figure1.3.1 Sublime Text Editor 07

Figure 1.3.2 JQuery 08

Figure 3.1 Time Table using HTML 14

Figure 3.2 Table list using HTML 14

Figure 3.3 Click on image button 15

Figure 3.4 Website Layout 15

Figure 3.5 Periodic Table 16

 lOMoARcPSD|15715826

A Report On Web Designing

CHAPTER 1
INTRODUCTION

1.1 Introduction
As a full-time student at MIT group of Institutes, I was
provided an opportunity to undertake an internship at
Universal Informatics. The degree towards I am currently
studying is a Bachelor of Engineering in Computer
Science and Technology. The course at UI was quite
challenging for me for a few reasons: Firstly, the
programming languages and development tools I was
using were new for me, hence I had to quickly integrate
not only with my new living environment but also
academically. This was very beneficial for me as at the
end I could compare what I’ve learnt with what I already
knew and find a connection between the two.
This report is a description of my 4 weeks internship
carried out as a compulsory component of the course at
UI. In the following chapter details of tools and
technology used and an overview is given. Afterwards, I
explain my role and tasks as a trainee and give specific
technical details about my main tasks. Finally, a
conclusion is drawn from the experience.
 lOMoARcPSD|15715826

A Report On Web Designing

1.2 Objective
The objective of the web design is to handle the entire
design of a website. The software keeps track of all the
information about the entire website. The system contains
database where all the information will be stored safely.

1.2.1 To gain skills and knowledge

This internship provided us essential skills and knowledge
one requires in the field of web designing. The crucial
tools used during the tenure helped us in gaining
knowledge about programming languages.

1.2.2 To get field work experience

By taking this training we enhanced our knowledge in
Web designing and got insight in how the websites are
designed using HTML and CSS.

1.2.3 To enhance our communication skills

By interacting with my trainee and classmates I got to
learn a lot. It helped me to enhance my communicative
skills and represent my work with confidence. It boosted
my confidence to design more webpages and create some
great designs just for fun.
 lOMoARcPSD|15715826

A Report On Web Designing

1.2.4 To link theory with practice

First we learned the theory aspect and then we put that
into practice. By doing the practical work, our concept
got clearer and it was easy to code into HTML once we
got familiar with it. By putting our theoretical knowledge
into practical, coding became more fun.

1.2.5 To build a network

By learning how to code in HTML and CSS it is easy to
build and design our own websites with all the changes
we want. We also got to know about how websites are
designed initially and the logic behind that.
 lOMoARcPSD|15715826

A Report On Web Designing

1.3 Tools and Technology Used

Various tools and technology were used during our internship
training.
Some of them are listed below:
1. HTML5
HTML stands for Hyper Text Mark-up Language. It is
used to design web pages using mark-up language. HTML
is the combination of Hypertext and Mark-up language.
Hypertext defines the link between the web pages. Mark-
up language is used to define the text document within tag
which defines the structure of web pages. HTML5 is the
fifth and current version of HTML. It has improved the
mark-up available for documents and has introduced
application programming interfaces (API) and Document
Object Model (DOM).
Below example illustrate the HTML5 content:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p> This is a paragraph. </p>
</body>
</html>

Output of the above program

 lOMoARcPSD|15715826

A Report On Web Designing

2. CSS3
Cascading Style Sheets, fondly referred to as CSS, is a
simply designed language intended to simplify the
process of making web pages presentable. CSS allows
you to apply styles to web pages. More importantly, CSS
enables you to do this independent of the HTML that
makes up each web page.
There are three types of CSS which are given below:
 Inline CSS
 Internal or Embedded CSS
 External CSS
Below example illustrate the CSS3 content:

<!DOCTYPE html>
<html>
<head>
<title> HTML 5 Demo</title>
<style>
.intern {
font-size:40px;
font-weight:bold;
color:green;
}
body {
text-align:center;
}
</style>
</head>
<body>
<div class = "intern">Hello World!</div>
<aside>
<div>This is Insiya Badshah</div>
</aside>
</body>
</html>
 lOMoARcPSD|15715826

A Report On Web Designing

Output of the above program

3. JavaScript
JavaScript is a lightweight, cross-platform and
interpreted scripting language. It is well-known for the
development of web pages, many non-browser
environments also use it. JavaScript can be used
for Client-side developments as well as Server-side
developments.
Features of JavaScript:
 According to a recent survey conducted by Stack
Overflow, JavaScript is the most popular language
on earth.
With advances in browser technology and
JavaScript having moved into the server with
Node.js and other frameworks, JavaScript is capable
of so much more.
 Functions in JS are objects. They may have
properties and methods just like another object.
They can be passed as arguments in other
functions.
 Can handle date and time.
 Performs Form Validation although the forms are
created using HTML.
 No compiler needed.
 lOMoARcPSD|15715826

A Report On Web Designing

4. Sublime text
Artfully run by a one-man development team, the secret
to sublime’s success lies in the program’s vast array of
keyboard shortcuts - such as the ability to perform
simultaneous editing (making the same interactive
changes to multiple selected areas) as well as quick
navigation to files, symbols, and lines. And when you’re
spending 8+ hours with your editor each day, those
precious few seconds saved for each process really do
add up.

Fig.1.3.1 Sublime Text Editor

5. JQuery
JavaScript has long been considered an essential front-
end language by developers, although it’s not without its
problems: riddled with browser inconsistencies, its
somewhat complicated and unapproachable syntax meant
that functionality often suffered.
That was until 2006, when jQuery – a fast, small, cross-
platform JavaScript library aimed at simplifying the
front-end process – appeared on the scene. By
abstracting a lot of the functionality usually left for
developers to solve on their own, jQuery allowed greater
 lOMoARcPSD|15715826

A Report On Web Designing

scope for creating animations, adding plug-ins, or even

just navigating documents.
And it’s clearly successful – jQuery was by far the most
popular JavaScript library in existence in 2015, with
installation on 65% of the top 10 million highest-
trafficked sites on the web.

Fig 1.3.2 JQuery

 lOMoARcPSD|15715826

A Report On Web Designing

Chapter 2
Training work undertaken

2.1 Training Attended

According to RGPV University, the III Semester of
B.Tech CS must involve an internship program. The
students require at least 2 weeks of internship program
for attaining a successful career in the related fields.
There are more attendant and requirement is need to
build a project. We know that, we can mix all languages
like C++, C, HTML, PHP, JavaScript and more. The
web server combines the results of the interpreted and
executed HTML code, which maybe any type of data,
including images, with the generated web page. The
training that I attended In Universal Informatics
included:
 HTML5
 CSS
 Bootstrap
 JavaScript
 Ajax
 JQuery

2.2 Roles and Responsibility

As an intern my responsibilities at Universal Informatics
Pvt Ltd. was to cover all aspects of creating web
 lOMoARcPSD|15715826

A Report On Web Designing

application to become a web developer. For this required

core knowledge about designing tools like HTML, CSS,
Bootstrap, JavaScript, etc. and backend scripting
language like PHP. The main responsibility was to
ensure that the web application designed must appeal to
the desired target audience and, as a result, catches their
attention and also include a working knowledge of
different web browsers. While learning about web
development I also gained knowledge about front end
designing. During my internship period I mostly worked
with designing “Training Management System” web
application as well as other mini projects too.

2.3 Work environment

Front end Developer generally works at client side
dealing with the web page design, graphics that is
accessible to the user.

Back end Developer is a person who is responsible for

the back end development that interacts with the server.
This type of web developer specializes in the languages
like PHP, Ruby, ASP.Net, Java and Perl.

The job profiles for the web developer includes:

 Front end web developer.
 Back end Web Developer.
 Web Application Developer.
 Design and Layout Analyst
 lOMoARcPSD|15715826

A Report On Web Designing

 Senior web Analyst.

 Web Marketing Analyst.
 lOMoARcPSD|15715826

A Report On Web Designing

Chapter 3
Result and Discussion
3.1 Discussion
During entire training session we discussed about how to
analysis the project and how to work on it as per the
requirement of client. The projects done during the
internship are based on the tags of programming language
HTML & CSS.

3.2 Learning Outcome

3.2.1 HTML
 Basic Concept (WWW & HTTP, client server
communication)
 Basic HTML (tags, element, attributes, paragraphs,
headings, line breaks, lists, table, color codes, font, text
linking, email, images, background, comments, media,
charset)
 HTML Forms (input, text fields, password, checkbox,
combo-box, radio box, text areas, files, buttons)
 HTML5 features
 lOMoARcPSD|15715826

A Report On Web Designing

3.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 Menu (single menu, drop-down menu)
 Template design using CSS div.

3.2.3 Bootstrap
 Grid System
 Typography
 Tables, forms, buttons, images
 Dropdown, button group
 Navigation element
 Bootstrap plug-ins (Transition, Modal, Dropdown, Tab,
tooltip, Alert, Button)

3.2.4 JavaScript
 Basic JavaScript (syntax, enable, location, operators,
variables, events, alert, confirm, prompt, POP up, date,
print)
 JavaScript string (strings, length, split, search, replace)
 lOMoARcPSD|15715826

A Report On Web Designing

3.3 Result
Following are the screenshots of the result of the
projects done during the internship period.

Project-1

Fig 3.1 Time table using HTML

Project-2

Fig 3.2 Table list using HTML

 lOMoARcPSD|15715826

A Report On Web Designing

Project-3

Fig 3.3 Click on Button using HTML and CSS

Project-4

Fig 3.4 Website Layout

 lOMoARcPSD|15715826

A Report On Web Designing

Project-5

Fig 3.5 Periodic Table using HTML and CSS

 lOMoARcPSD|15715826

A Report On Web Designing

CHAPTER 4
CONCLUSION AND FUTURE SCOPE

4.1 Conclusion
In conclusion, I can say that this internship was a great
experience. Thanks to this project, I acquired deeper
knowledge concerning my technical skills, but I also personally
benefited. Currently HTML is a common part of web
applications, and it is one of the most popular language for web
designing used by professionals worldwide. If we surf internet,
we can see millions of websites designed with HTML and CSS.
I learned to live in a different environment from the one I am
used to. Indeed, I grew more independent in work and also in
everyday life. I realized that I could do more things than I
thought, like learning new things by myself.
There are huge opportunities available for the students who
want to work in this field. Many private and public
organizations hire web designer for their online work and
website development. With the rapid advent of online industry,
the demand of web development professionals is increasing,
and this has created a huge job opportunity for the aspirants in
the upcoming days.
Also, an experienced person in this field can also work as a
freelancer; there are many online companies which provide
online projects to the individuals.
 lOMoARcPSD|15715826

A Report On Web Designing

4.2 Future Scope

If someone has no experience in this field, finding work can be
a real challenge. A successful internship can help an individual
turn an experience into a career opportunity. So as a successful
internship some future scopes are:
 To work in IT company.
 Can work as a Software Engineer.
 Can work as a Web Designer.
 Can work as a Web Developer.
 Can work as a QA Tester.

References
-http://www.w3schools.com
-http://www.wikipidea.com
-http://www.w3.org/standards/semanticweb/
-http://developer.mozilla.org/en/docs
-http://sioc-project.org/ontology
-http://janastu.org