SUMMER TRAINING REPORT

(Term June-July, 2019)

FULL STACK WEB

DEVELOPMENT
SUBMITTED BY

NAME OF STUDENT: SATINDERDEEP SINGH REGISTRATION NO: 11501611

PROGRAMME: B.Tech – Computer Science and Engineering

Course Code: CSE443

Under the Guidance of

Eduonix Learning Solutions

School of Computer Science and Engineering

 ACKNOWLEGMENT

First, I would like to thank Lovely Professional University for giving me the opportunity
to do Summer Training on FULL STACK WEB DEVELEPMENT. Although quite
short, for me this was a great experience I can learn from. It helped me to explore my
skills and increased my interest in web development.
Special thanks to Eduonix Learning Solutions for being so
accommodating and understanding and helping me to learn new
technology.
 DECLARATION

I hereby declare that I have completed my six weeks summer training at Eduonix Learning
Solutions from June 12, 2019 to July 20, 2019 under the guidance of Eduonix Learning
Solutions. I have worked with full dedication during these six weeks of training and my
learning outcomes fulfill the requirements of training for the award of degree of B.Tech - CSE,
Lovely Professional University, Phagwara.

Name: SATINDERDEEP SINGH

Reg. No.: 11501611

(Signature of Student)
 Table of Contents

i. Acknowledgement............................... ii
ii. Declaration ......................................... iii
1. Introduction ....................................................... 1
1.1. About Web Development ....................... 1
1.2. Web Development Languages ............. 2
1.3. Web Development Process ............... 3
2. Skills Required ................................................. 11
3. Technology Learn
3.1. HTML ................................................ 6
3.2. CSS ......................................................... 7
3.3. JavaScript ................................................ 7
3.4. PHP ............................................................ 7
3.5. Bootstrap ......................................... 8
3.6. jQuery............................................... 10
4. Reasons to Choose these Technology .............. 11
5. Learning Outcomes ................................. 12
6. Gantt Chart .................................................13
7. Bibliography ........................................... 14
 INTRODUCTION
Web development is a broad term for the work involved in developing a web site for the
Internet (World Wide Web) or an intranet (a private network). Web development can range
from developing the simplest static single page of plain text to the most complex web-based
internet applications (or just 'web apps') electronic businesses, and social network services. A
more comprehensive list of tasks to which web development commonly refers, may include
web engineering, web design, web content development, client liaison, client-side/server-side
scripting, web server and network security configuration, and e-commerce development.
Among web professionals, "web development" usually refers to the main non-design aspects
of building web sites: writing markup and coding. Most recently Web development has come
to mean the creation of content management systems or CMS. These CMS can be made from
scratch, proprietary or open source. In broad terms the CMS acts as middleware between the
database and the user through the browser. A principle benefit of a CMS is that it allows non-
technical people to make changes to their web site without having technical knowledge.

For larger organizations and businesses, web development teams can consist of hundreds of
people (web developers) and follow standard methods like Agile methodologies while
developing websites. Smaller organizations may only require a single permanent or contracting
developer, or secondary assignment to related job positions such as a graphic designer or
information systems technician. Web development may be a collaborative effort between
departments rather than the domain of a designated department. There are three kinds of web
developer specialization: front-end developer, back-end developer, and full-stack developer.
Web development refers to building website and deploying on the web. Web development
requires use of scripting languages both at the server end as well as at Client end.

Web Development Process

Web development process includes all the steps that are good to take to build an attractive,
effective and responsive website. These steps are shown in the following diagram:
Skills Required:

For being a successful web developer, one should possess the following skills:

• Understanding of client and server-side scripting.

• Creating, editing and modifying templates for a CMS or web development

framework.

• Testing cross browser inconsistencies.

• Conducting observational user testing.

• Testing for compliance to specified standards such as accessibility standards in the

client region.

• Programming interaction with JavaScript, PHP, and JQuery etc.

 TECHNOLOGY LEARNT
During the time period of two months, I have learnt various web development

languages, which were HTML, CSS, JavaScript and PHP.

All these languages, together combined, results in formation of a web page. These

languages are used by web developers for front end developing. Front end web

developing, in simpler words, means developing the page which would be visible

to user, it does not handle the back-end processing and working of a web page.

A brief introduction of all these technologies is provided below:

• HTML

Hypertext Markup Language (HTML) is the standard markup language for

creating web pages and web applications. With Cascading Style Sheets (CSS) and

JavaScript it forms a triad of cornerstone technologies for the World Wide Web.

Web browsers receive HTML documents from a web server or from local storage

and render them into multimedia web pages. HTML describes the structure of a

web page semantically and originally included cues for the appearance of the

document.

HTML elements are the building blocks of HTML pages. With HTML constructs,

images and other objects, such as interactive forms, may be embedded into the

rendered page. It provides a means to create structured documents by denoting

 structural semantics for text such as headings, paragraphs, lists, links, quotes and

other items. HTML elements are delineated by tags, written using angle brackets.

Tags such as <img /> and <input /> introduce content into the page directly.

Others such as <p>...</p> surround and provide information about document text

and may include other tags as sub-elements. Browsers do not display the HTML

tags, but use them to interpret the content of the page.

HTML can embed programs written in a scripting language such as JavaScript

which affect the behavior and content of web pages. Inclusion of CSS defines the

look and layout of content.

A sample HTML program to print ‘Hello World!':

<!DOCTYPE html>
<html>

<body>
<h1>Hello World!</h1>
</body>

</html>

• CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the

presentation of a document written in a markup language. Although most often

used to set the visual style of web pages and user interfaces written in HTML, the

language can be applied to any HTML document and is applicable to rendering in

speech, or on other media. Along with HTML and JavaScript, CSS is a

cornerstone technology used by most websites to create visually engaging

webpage, user interfaces for web applications, and user interfaces for many mobile

applications.

CSS is designed primarily to enable the separation of presentation and content,

including aspects such as the layout, colors, and fonts. This separation can

improve content accessibility, provide more flexibility and control in the

specification of presentation characteristics, enable multiple HTML pages to share

formatting by specifying the relevant CSS in a separate .css file, and reduce

complexity and repetition in the structural content.

Changes to the graphic design of a document (or hundreds of documents) can be

applied quickly and easily, by editing a few lines in the CSS file they use, rather

than by changing markup in the documents.

The CSS specification describes a priority scheme to determine which style rules

apply if more than one rule matches against a particular element. In this so-called

cascade, priorities (or weights) are calculated and assigned to rules, so that the

results are predictable.

 A sample HTML program with CSS:

<!DOCTYPE html>
<html>
<head>
<style>
#xyz { color: red; }
</style>
</head>
<body>
<p id="xyz" style="color: blue;"> To demonstrate specificity </p>
</body>
</html>

• JavaScript

JavaScript, often abbreviated as JS, is a high-level, dynamic, weakly typed, object-

based, multi-paradigm, and interpreted programming language. Alongside HTML

and CSS, JavaScript is one of the three core technologies of World Wide Web

content production. It is used to make webpage interactive and provide online

programs, including video games. The majority of websites employ it, and all

modern web browsers support it without the need for plug-ins by means of a built-

in JavaScript engine. Each of the many JavaScript engines represent a different

implementation of JavaScript.

As a multi-paradigm language, JavaScript supports event-driven, functional, and

imperative (including object-oriented and prototype-based) programming styles. It

has an API for working with text, arrays, dates, regular expressions, and basic

manipulation of the DOM, but does not include any I/O, such as networking,

storage, or graphics facilities, relying for these upon the host environment in

which it is embedded.

Initially only implemented client-side in web browsers, JavaScript engines are

now embedded in many other types of host software, including server-side in web

servers and databases, and in non-web programs such as word processors and PDF

software, and in runtime environments that make JavaScript available for writing

mobile and desktop applications, including desktop widgets.

Although there are strong outward similarities between JavaScript and Java,

including language name, syntax, and respective standard libraries, the two

languages are distinct and differ greatly in design; JavaScript was influenced by

programming languages such as Self and Scheme.

• PHP

PHP is a server-side scripting language designed primarily for web development

but also used as a general-purpose programming language. Originally created by

Rasmus Lerdorf in 1994, the PHP reference implementation is now produced by

The PHP Development Team. PHP originally stood for Personal Home Page, but

it now stands for the recursive acronym PHP: Hypertext Preprocessor.

PHP code may be embedded into HTML or HTML5 markup, or it can be used in

combination with various web template systems, web content management

systems and web frameworks. PHP code is usually processed by a PHP interpreter

implemented as a module in the web server or as a Common Gateway Interface

(CGI) executable. The web server software combines the results of the interpreted

and executed PHP code, which may be any type of data, including images, with

the generated web page. PHP code may also be executed with a command-line

interface (CLI) and can be used to implement standalone graphical applications.

PHP (PHP: Hypertext Preprocessor) is a scripting language that helps people

make web pages more interactive by allowing them to do more things.

A website programmed with PHP can have pages that are password protected.

A website with no programming cannot do this without other complex things.

Standard PHP file extensions are: .php .php3 or .phtml, but a web server can be set

up to use any extension.

Its structure was influenced by many languages like C, Perl, Java, C++, and even

Python. It is considered to be free software by the Free Software Foundation.

 A sample PHP program with HTML:

<?php
echo "Hello, World!";
?>

It is common to put PHP code inside a HTML document, for example:

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<?= '<p>Hello World</p>'; ?>
</body>
</html>

• Bootstrap
Bootstrap is a powerful front-end framework for faster and easier web development. It
includes HTML and CSS based design templates for common user interface components
like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals,
Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions.
The biggest advantage of using Bootstrap is that it comes with free set of tools for
creating flexible and responsive web layouts as well as common interface components.
Additionally, using the Bootstrap data APIs you can create advanced interface
components like Scrollspy and Typeaheads without writing a single line of JavaScript.
Here are some more advantages, why one should opt for Bootstrap:
Save lots of time — You can save lots of time and efforts using the Bootstrap
predefined design templates and classes and concentrate on other development work.

Responsive features — Using Bootstrap you can easily create responsive designs.
Bootstrap responsive features make your web pages to appear more appropriately on
different devices and screen resolutions without any change in markup.

Consistent design — All Bootstrap components share the same design templates and
styles through a central library, so that the designs and layouts of your web pages are
consistent throughout your development.

Easy to use — Bootstrap is very easy to use. Anybody with the basic working
knowledge of HTML and CSS can start development with Bootstrap.

Compatible with browsers — Bootstrap is created with modern browsers in mind and
it is compatible with all modern browsers such as Mozilla Firefox, Google Chrome,
Safari, Internet Explorer, and Opera.

Open Source — And the best part is, it is completely free to download and use.

• JQUERY
jQuery is a fast, lightweight, and feature-rich JavaScript library that is based on the
priciple "write less, do more". It's easy-to-use APIs makes the things like HTML
document traversal and manipulation, event handling, adding animation effects to a web
page much simpler that works seamlessly across all the major browsers. jQuery also
gives you the ability to create an Ajax based application in a quick and simple way.
Companies like Google, Microsoft and IBM are using the jQuery for their applications.
The biggest advantage of jQuery comes from its selectors that allow you to traverse the
DOM tree of an HTML document's structure in an efficient manner.
Additionally, using the jQuery inbuilt methods you can create animations and effects
like sliding transition, showing or hiding an element, etc. with a single line of code.
Here are some more advantages, why one should opt for jQuery:
Save lots of time — You can save lots of time and efforts by using the jQuery inbuilt
effects and selectors and concentrate on other development work.
Simplify common JavaScript tasks — jQuery considerably simplifies the common
JavaScript tasks. Now you can easily create feature rich and interactive web pages with
fewer lines of codes, a typical example is retrieving the information from a server and
updates the page without refreshing.

Easy to use — jQuery is very easy to use. Anybody with the basic working knowledge
of HTML, CSS and JavaScript can start development with jQuery.

Compatible with browsers — jQuery is created with modern browsers in mind and it
is compatible with all major modern browsers such as Mozilla Firefox, Google Chrome,
Safari, Internet Explorer, and Opera.

Absolutely Free — And the best part is, it is completely free to download and use .
 Reason to choose this technology

Web design and development is the challenging field and it’s rewarding too. In this field, we
need to implement our imagination and creativity skills to develop attractive website based on
the client business and their preference. Probably most of the web developers chose web
design field because they are very passionate in doing design and develop. Both the skills and
personal experience of the designer will help developer to develop stunning web applications.

• In web development, there is huge career opportunity for skilled and talented
professionals. The factors like job role, job location and experience will determine the
salary package of the web designers and developers.
• Web designer can create attractive website using various tool and resources to satisfy
the client requirements. We need to focus on various creative areas and tools to
develop a website. We need to also implement our own imagination skills to be a
skilled developer. Though web design and development is a challenging career, it can
be learned with ease.
• We can also work as a freelance developer. Website is most effective and efficient
tool to promote our business targeting the global customer base. In general, website
with attractive interface and good quality content will perform better compared to
mere static website. We can include more multimedia content to improve website
appearance and navigation.
• Most promising and profitable, web development is most trending field of interest.
Nowadays, most of the work is done online, which requires a trustworthy website,
which requires a web developer with vast knowledge and skills but still well
experienced and knowledgeable web developers can make a great profit.
 Learning Outcomes

After completion of extensive two months summer training on the course of Web
Development, I had a brief and thorough knowledge of various terms and technologies related
to Web Development. It in itself is a very wide subject with numerous opportunities to grab, to
excel in the field of web developing all we need is to explore our imagination and think
outside the box. As we all know nowadays everything is going online, from the simplest thing
to the most complex jobs in the world, everything takes place on internet and for those to
happen, we need a steady platform, which is provided by a reliant web site.
A website is not limited; we can extend its use up to no limit and reach great outcomes. I,
through the course of two months of web development, was able to learn some of the
technologies which played a vital role in web development.
The very first technology or in simpler words language I learnt was HTML, which extends to
Hyper Text Markup Language, this is the most basic technology used for the development of
web pages. We start from the most basic but most important and reach to the level of
perfection, so in web development we need to start from HTML, and steadily need to reach to
perfection.
HTML is used for the development of web pages and web applications, from very basic web
pages containing just a form or table to the most advanced web pages which includes great
amount of animation and various other parameters can be created using HTML. It can be
paired up with other languages in order to create more efficient web pages. In conclusion, I
would say that through the course I was able to grab efficient and useful knowledge which
would definitely help me in future, in this era of internet.
Now HTML can be easily paired up with several other technologies for creation of great web
pages. Out of many available, I was able to get knowledge of CSS, JavaScript, and PHP. All
these languages play great amount of role for the formation of a web page.
First, I would talk about CSS. Now CSS expands to Cascading Style Sheet, this language
cannot be used alone as it is necessary for it to be paired up with HTML. This language is not
used for creating any webpage but for providing various attributes to it, in simpler words we
can say, to provide styling to the web page. CSS can be used to from the very simple, like
changing font of text, to achieve complex jobs, like defining transitions for slideshow on a web
page, and various other parameters. No one would like to look at static web pages with very
less or no animations and with less amount of styling. So to make a page look more attractive
and effective CSS is used. When we use web application or website or any interface, we don’t
want it to look unattractive and unappealing, we always want it to be catchy, therefore to
achieve such we need to use CSS. HTML paired up with CSS can result in the formation of
attractive and appealing web pages. I was able to learn CSS up to some extent during training.
Next on our list we have JavaScript, this language is a bit complex from the two discussed
above. Sometimes we need to program our website, we cannot introduce several functions
with HTML and CSS, but are possible with the help of JavaScript, it enables user to define
various functions which enhances usability. JavaScript, termed as JS, is a programming
language, just like C, C++ and most certainly Java.
It improves the functioning of webpage, as we can do great amount of programming for our
website. JS is also used in combination with HTML. Alone JS cannot withstand responsibility
of designing an entire web page, it needs to be paired up with JavaScript.
JS is programmed under script tag in HTML. Overall, if we want our website to be more
effective then HTML, CSS and JS are combined.
Last, we have PHP, which is Hypertext Processor. All the above discussed technologies and
languages are for the design and functioning of the web page, but sometimes we fall in need of
providing the website with a database which can store vital information.
HTML, CSS and JS do not have ability to store into databases, they can only be used for front
end, for what the user sees. But PHP, we can say is used for back end. Why back end because
the process of storing data in a database is not visible to the user. PHP with combination to
other discussed technologies is paired up to create the complete and final website.
PHP, again, is used in combination with all other languages. It very efficiently handles the task
of storing important user data into database for reference.
So, in conclusion I would say that I was able to grab knowledge about these important web
technologies which are important for a front-end web developer.
After the completion of training, I was able to create a simple basic yet working website. The
most important outcome of the training was that now I am having a sound knowledge of
various important technologies for web development and I have strong belief that these will
always help me in future.
• GANTT CHART