An

Industrial Training Report

On

“Web Development”
Submitted
In partial fulfillment of the requirement for the award of degree of
Bachelor of Technology
In
Computer Science & Engineering

(Session 2020-2021)

Submitted to: Submitted by:

Dr. Vijeta Kumawat Anuj Godara
Assistant Professor (17EJCCS028)
Dept. of CSE, JECRC VII Semester

Department of Computer Science & Engineering

Jaipur Engineering College & Research Centre, Jaipur
Rajasthan Technical University, Kota
March – 2021
 Table of Contents

S.no Content Page Number

Candidate’s Declaration 1
Bonafide Certificate 2
Preface 3
Vision and Mission 4
Program Outcomes (Pos) 5
Program Education Objectives (PEOs) 7
Program Specific Outcomes (PSOs) 8
Course Outcomes (COs) 8
Mapping: COs and Pos 9
Acknowledgement 10
Abstract 11
Internship Certificate 12
1. Introduction 13
1.1 Web Development 13
1.2 Web Development Overview 13
1.3 Why is Web Development so important 15
2. Three Types of Web Developers 15
2.1 The Front-End Developer 16
2.2 The Back-End Developer 16
2.3 The Full-Stack Developer 17
3 What is HTML 18
3.1 HTML Tags 18
4 What is CSS 19
4.1 Why use CSS 19
4.2 CSS solved a big problem 20
4.3 Types of CSS 20
4.4 Properties of CSS 21
5 Conclusion 24
6 Future Scope 25
7 References 26
 Figure Index

S.no Title Page Number

1 Web Development 14
2 CSS Code 19
3 Types of CSS 20
4 HTML code of home page 23
 CANDIDATE’S DECLARATION

I hereby declare that the report entitled “Web Development” has been carried out and submitted
by the undersigned to the Jaipur Engineering College & Research Centre, Jaipur (Rajasthan) in
an original work, conducted under the guidance and supervision of Dr. Vijeta Kumawat.

The empirical findings in this report are based on the data, which has been collected by me. I
have not reproduced from any report of the University neither of this year nor of any previous
year.

I understand that any such reproducing from an original work by another is liable to be punished
in a way the University authorities’ deed fit.

Date: Anuj Godara

Place: Jaipur 17EJCCS028

i
 BONAFIDE CERTIFICATE

This is to certify that the report of the industry training submitted is the outcome of the
internship work entitled “Web Development” carried out by Anuj bearing Roll No.: 27 and
Enrollment No.: 17EJCCS028 carried under my guidance and supervision for the award of
Degree in Bachelor of Technology of Jaipur Engineering College & Research Centre, Jaipur
(Raj.), India during the academic year 2020-2021.

To the best of the my knowledge the report

i) Embodies the work of the candidate.

ii) Has duly been completed.
iii) Fulfills the requirement of the ordinance relating to the bachelor of technology
degree of the Rajasthan technical University and
iv) Is up to the desired standard for the purpose of which is submitted.

Dr. Sanjay Gaur Dr. Vijeta Kumawat

Head of Department Professor / Assistant Professor
Computer Science Computer Science & Engineering
& Engineering

JECRC, Jaipur JECRC, Jaipur

Place:

Date:

2
 PREFACE

Bachelor of Technology in Computer Science & Engineering is the Rajasthan Technical

University course (Approved by AICTE) having duration of 4 years. As a prerequisite of the
syllabus every student on this course has to make a report on industry training in order to
complete his studies successfully. And it is required to submit the report on the completion of
it.

The main objective of this report is to create awareness regarding the application of theories in
the practical world of Computer Science & Engineering and to give a practical exposure of the
real world to the student.

I, therefore, submit this industry training report on “Web Development”, which was
undertaken at JECRC, Jaipur. I feel great pleasure to present this industry training report.

3
 VISION OF CSE DEPARTMENT

To become renowned Centre of excellence in computer science and engineering and make
competent engineers & professionals with high ethical values prepared for lifelong learning.

MISSION OF CSE DEPARTMENT

1. To impart outcome-based education for emerging technologies in the field of computer

science and engineering.
2. To provide opportunities for interaction between academia and industry.

3. To provide platform for lifelong learning by accepting the change in technologies

4. To develop aptitude of fulfilling social responsibilities.

4
 Program Outcomes (PO)

Program Outcomes
1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering
fundamentals, and an engineering specialization to the solution of complex engineering
problems.
2. Problem analysis: Identify, formulate, research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex engineering problems
and design system components or processes that meet the specified needs with
appropriate consideration for the public health and safety, and the cultural, societal, and
environmental considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and
research methods including design of experiments, analysis and interpretation of data,
and synthesis of the information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools including prediction and modeling to complex
engineering activities with an understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal and cultural issues and the consequent
responsibilities relevant to the professional engineering practice.
7. Environment and sustainability: Understand the impact of the professional
engineering solutions in societal and environmental contexts, and demonstrate the
knowledge of, and need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities
and norms of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend
and write effective reports and design documentation, make effective presentations, and
give and receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the
5
 engineering and management principles and apply these to one’s own work, as a
member and leader in a team, to manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change.

6
 PROGRAM EDUCATIONAL OBJECTIVES (PEOs)

The PEOs of the B.Tech (CSE) program are:

1. To produce graduates who are able to apply computer engineering knowledge to

provide turn-key IT solutions to national and international organizations.
2. To produce graduates with the necessary background and technical skills to work
professionally in one or more of the areas like – IT solution design development and
implementation consisting of system design, network design, software design and
development, system implementation and management etc. Graduates would be able to
provide solutions through logical and analytical thinking.
3. To able graduates to design embedded systems for industrial applications.

4. To inculcate in graduates effective communication skills and team work skills to enable
them to work in multidisciplinary environment.
5. To prepare graduates for personal and professional success with commitment to their
ethical and social responsibilities.

7
 PROGRAM SPECIFIC OUTCOMES (PSOs)

• PSO1: Ability to interpret and analyze network specific and cyber security issues,
automation in real word environment.
• PSO2: Ability to Design and Develop Mobile and Web-based applications under realistic
constraints.

COURSE OUTCOMES (CO)

On completion of the course:

CO-1: To identify and analyze latest technology and complex engineering problems through
research methodology in Computer Science & engineering.

CO-2: To Explore and justify latest industrial trends.

CO-3: To develop Presentation skills, technical report writing, and professional ethics for life-
long learning.

8
 MAPPING OF COS WITH POS:

L/ P P P P P P P P P P P P
Sem. Subject Code T/ CO O O O O O O O O O O O O
P 1 2 3 4 5 6 7 8 9 10 11 12
CO-1 To identify and
analyze latest
technology and
complex engineering
P 3 3 3 3 3 2 2 2 1 2 1 3
problems through
research methodology
in Computer Science
& engineering.
7CS7-
VII Industry
30
CO-2: To Explore and
Training P justify latest industrial 3 3 2 2 2 2 1 2 1 2 1 3
trends.
CO-3: To develop
Presentation skills,
technical report
P 3 2 2 2 2 2 1 2 1 2 2 3
writing, and
professional ethics for
life-long learning.

9
 ACKNOWLEDGEMENT

“Any serious and lasting achievement or success, one can never achieve without the help, guidance

and co-operation of so many people involved in the work.”

It is my pleasant duty to express my profound gratitude and extreme regards and thanks to Mr.
Arpit Agarwal, Dr. V.K. Chandna, Dr. Sanjay Gaur, Prof. R.K. Mangal, Dr. Nilam
Choudhary who gave me an opportunity to take this industry training report.

I am indebted towards my supervisors who have allotted this industry training and his precious
time and advice during the period, which is imminent to the report.

I would like to express deep gratitude to Dr. Sanjay Gaur, Head of Department (Computer
Science & Engineering), Jaipur Engineering College & Research Centre, Jaipur (Rajasthan)
with whose support the industry training report has been made possible.

Last but not the least, I am heartily thankful to my friends and all those people who are involved
directly or indirectly in this industry training report for encouraging me whenever I needed
their help in spite of their busy schedule.

Anuj Godara
17EJCCS028

10
 ABSTRACT

Web Development is a rapidly growing technology enabling businesses make successful

approach to users using online platform, has exhibited an impressive development recently
with the help of the rapid increase in the internet user and people trust on the internet, getting
reivews about the restaurant. Together with many other disciplines, website development have
been widely in progress. Websites are important feature to reach users and establish your
business and attracting people to reach out to you .

11
INTERNSHIP CERTIFICATE

12
 INTRODUCTION

1. Web Development

Web programming, also known as web development, is the creation of dynamic web applications.
Examples of web applications are social networking sites like Facebook or e-commerce sites like
Amazon.

The good news is that learning web development is not that hard!

In fact, many argue it’s the best form of coding for beginners to learn. It’s easy to set up, you get
instant results and there’s plenty of online training available.

A lot of people learn web coding because they want to create the next Facebook or find a job in
the industry. But it’s also a good choice if you just want a general introduction to coding, since it’s
super easy to get started. No matter whether you’re looking for a career or just want to learn coding,
learning how to develop for the web is for you. It’s one of the smartest decisions you will ever
make!

1.1 Web Development Overview

There are two broad divisions of web development – front-end development (also called client-
side development) and back-end development (also called server-side development).

Front-end development refers to constructing what a user sees when they load a web application –
the content, design and how you interact with it. This is done with three codes – HTML, CSS and
JavaScript.

HTML, short for Hyper Text Markup Language, is a special code for ‘marking up’ text in order to
turn it into a web page. Every web page on the net is written in HTML, and it will form the
backbone of any web application. CSS, short for Cascading Style Sheets, is a code for setting style
rules for the appearance of web pages. CSS handles the cosmetic side of the web. Finally,
Javascript is a scripting language that’s widely used to add functionality and interactivity to web
pages.

Back-end development controls what goes on behind the scenes of a web application. A back-end
often uses a database to generate the front-end.

Back-end scripts are written in many different coding languages and frameworks, such as…

• PHP
• Ruby on Rails
• ASP.NET
• Perl
• Java
• Node.js
• Python

Without going into more detail, that’s really all there is to web development. So now, here are the
best ways to start learning it.

Fig.1 Web Development

14
1.2 Why Is Web Development so Important?

Website development is a way to make people aware of the services and/or products you are
offering, understand why your products are relevant and even necessary for them to buy or use,
and see which of your company's qualities set it apart from competitors. Displaying this
information with high-quality images and thought-out presentation will have a large influence on
customers, and it is important to strive towards making your product as relatable and appealing as
possible. Additionally, with website development you can:

1. Communicate with your visitors effectively. Interacting with your audience is vital when it
comes to generating more business. It is viable to make a website that enables you to get in touch
with your customers and prospects, and you can produce valuable content for the audience
associated with the industry or business you're in. Afterwards, post the content on your blog, share
it on social media networks and respond to customers' comments and feedback promptly. This will
show your clients the extent to which you’re concerned about their satisfaction and responsive to
their needs.

2. Improve your connectivity. A website will facilitate things like expanding your reach and
attracting more visitors to your business. Planning to make a responsive website design for your
site will help make it accessible to an extensive range of users spanning several devices, such as
tablets or smartphones. This will increase both your site's exposure and organic traffic.

3. Prove your reliability. A website offers a straightforward method of showing the credibility of
a business, and the way a person represents his business online is vital for attracting more
customers or visitors. Therefore, your website design should be handled in the best possible way,
because a professional presentation speaks volumes as testimony to your business. With the help
of website development, you can add your skills, credentials, experience, expertise and more in a
single place. These details help you earn the trust and confidence of your visitors and serve as a
reference point for customers interested in your business, making it easy for you to produce leads.

2. Three Types of Web Developers

For many outside the field of web development, it is not commonly known that there are several
different types of web developers that exist. Within the developer world, we literally have dozens

15
of titles that distinguish us from the rest based on our skillset and what we can create with it.
Overall, web developers can be summed up into three general types with each one fulfilling a
unique need in the process of creating websites for the whole world to see.

Before continuing, it is important to note that web development and web design are two different
fields. Web design focuses on the designing the visual and look of a website using design software
while web development focuses on creating it by writing code (programming) and other
development methods.

2.1 The Front-End Developer

The front-end developer is responsible for creating the look, feel, and interactive components of a
website. They are often mistaken as the only role in web development as well as confused with the
role of a web designer. How text, images, and colors are displayed on a website when you view
them on a phone, tablet, or computer is what the front-end developer creates. Ever see a button
change color when you hover over it or a popup appear when you click on something on a page?
That’s what the front-end developer creates. They make sure everything you see is organized,
aesthetically pleasing, and functional.

To accomplish all this, the front-end developer generally writes in (but not limited to) the following
programming languages:

• HTML
• CSS
• JavaScript
• JQuery
• React
• AngularJS

2.2 The Back-End Developer

The back-end developer has one of the most crucial roles in web development. They create and
maintain what’s under the hood to keep your website running and functioning properly. A back-

16
end developer writes what is called server-side code to make sure data flows back and forth from
a website’s front-end (what the user sees and interacts with) to the back-end (the server, database
etc.). The best example of this would be an online store. Prices and product images are stored on
a database hosted on a server. When it comes time to update prices or initiate an automated holiday
sale, product information and prices are updated on the database which then displays on the
website. When you checkout and process a transaction, all that works because the back-end
developer madeit so. They write the code that makes all those easy to use (most of the time)
functions possible.

A back-end developer can program in a variety of programming languages depending on what

needs to be done.

Typical programming languages a backend developer writes in include:

• Java
• PHP
• Ruby and Ruby On Rails
• C#
• MySQL
• MongoDB

2.3 The Full-Stack Developer

The full-stack developer is a unique developer type as they can program and work on both front-
end and back-end parts of a website. They can literally create an entire functioning, dynamic
website themselves (if they choose) as they understand both ends of web development. Full-stack
developers tend to have prowess in coding in multiple programming languages and their
knowledge and experience tend to be a mile-wide. Because of this, they generally work well with
both the front-end and back-end developer during the development process.

While they understand and can do the job of both front-end and back-end developers, many full-
stack developers typically do not have mastery in either role. Some usually are better at either front

17
or back-end development. There are full-stack developers that have mastery over both ends of
development but they are rare and hard to come by. The diverse knowledge of a full-stack
developer helps speed up the web development process and troubleshoot any problems that may
occur on the front or back-end of a site.

3. What is HTML

• HTML stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.

3.1 HTML Tags

HTML tags are like keywords which defines that how web browser will format and display the
content. With the help of tags, a web browser can distinguish between an HTML content and a
simple content. HTML tags contain three main parts: opening tag, content and closing tag. But
some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to
right. HTML tags are used to create HTML documents and render their properties. Each HTML
tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per your code requirement.

• All HTML tags must enclosed within < > these brackets.
• Every tag in HTML perform different tasks.

18
 • If you have used an open tag <tag>, then you must use a close tag </tag> (except some
tags)

4. What is CSS?

• CSS stands for Cascading Style Sheets

• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files

4.1 Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.

CSS Code of website

Fig.2 CSS code

19
4.2 CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a
nightmare for web developers. Development of large websites, where fonts and color information
were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

4.3 Types of CSS

There are three types of CSS which are given below:

• Inline CSS
• Internal or Embedded CSS
• External CSS

Fig.3 Types of CSS

20
Inline CSS:
Inline CSS contains the CSS property in the body section attached with element is known as inline
CSS. This kind of style is specified within an HTML tag using the style attribute

Internal or Embedded CSS:

This can be used when a single HTML document must be styled uniquely. The CSS rule set should
be within the HTML file in the head section i.e the CSS is embedded within the HTML file.

External CSS:
External CSS contains separate CSS file which contains only style property with the help of tag
attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css
extension and should be linked to the HTML document using link tag. This means that for each
element, style can be set only once and that will be applied across web pages.

4.4 Properties of CSS:

Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS
which has the least priority. Multiple style sheets can be defined on one page. If for an HTML tag,
styles are defined in multiple style sheets then the below order will be followed.

• As Inline has the highest priority, any styles that are defined in the internal and external
style sheets are overridden by Inline styles.
• Internal or Embedded stands second in the priority list and overrides the styles in the
external style sheet.
• External style sheets have the least priority. If there are no styles defined either in inline or
internal style sheet then external style sheet rules are applied for the HTML tags.

21
Use of some frameworks

In this project I have used:

• Bootstrap
• Jquery

Bootstrap
Bootstrap is a free and open-source CSS framework directed at responsive, moblie-first front-end
web development. It contains CSS and (optionally) Javascript-based design templates for
typography, forms, buttons, navigation, and other interface components.

Jquery

jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make
it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require
many lines of JavaScript code to accomplish, and wraps them into methods that you can call with
a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like
AJAX calls and DOM manipulation.

The jQuery library contains the following features:

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

22
Code for the Home page of the website

Fig.4 HTML code of home page

We have used HTML, CSS for making a static website for restaurant which contains home page,
contact page, about page.
We have used navbar for the logo and buttons for other pages.
We have used jumbotron for the picture of the restaurant and the menu page contains all the menu
items of the restaurant. By contacting to the restaurant manager people can book their tables in the
restaurant easily and can check the ambience of the restaurant online easily.

OUTPUT: -

We have successfully made a working website for the restaurant by using HTML, CSS. By
accessing the website people can check the restaurant online and can book their tables by
contacting to the restaurant manager whose contact is provided on the website. Website contains
all the important information about the restaurant including its menu.

23
 CONCLUSION

• We have successfully made a working website for a restaurant.

• We have successfully developed the website using HTML, CSS and using the knowledge
of web development in the practical manner. This website making needed the knowledge
of HTML, CSS and using the other frameworks like bootstrap and jquery.

24
 FUTURE SCOPE

For any business, a website matters more than anything, when it comes to reaching out to customers
online. A website is the representation of the business online. These days, every business realizes the
need for having a website and are putting in efforts to design and develop the best site for taking their
products or services online. This is where we can see a great deal of scope for web development and
design.

25
 REFERENCES

[1] https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/

[2] https://www.codeconquest.com/what-is-coding/web-programming/

[3] https://www.w3schools.com/html/html_intro.asp

26