4-Week Internship

Of
WEB- DEVELOPMENT
SUBMITTED TO:-
HOD
CSE (AI/ML) DEPARTMENT

SUBMITTED BY:
PRIYANJAN RAJ (22157147037)
 ACKNOWLEGEMENT

Every internship big or small is successful largely due to theeffort

of a number of wonderful people who have always given their
valuable advice or lent a helping hand. I sincerely appreciate the
inspiration; support and guidance of all those people who have been
instrumental in making this project a success.

I, Priyanjan Raj, the student of GEC AURANGABAD,BIHAR,

(Computer Science And Engineering (AI/ML), is extremely grateful
to Motion Cut for the confidence bestowed in me and entrusting my
training entitled “Web Development”. At this juncture I feel deeply
honored in expressing my sincere thanks to all CSE department
Professors and Internship incharge for making the resources
available at right time and providing valuable insights leading for
the successful completion of my training.
CERTIFICATION
 DECLARATION

I hereby declare that the Training Report entitled (“4- WEEK

INTERNSHIP ON WEB DEVELOPMENT”)
is an authentic record of my own work as requirements of 4
Weeks Training during the period from 05/09/2023 to
05/12/2023 for the award of degree of B. Tech.(COMPUTER
SCIENCE AND ENGINEERING (AI/ML) ), GEC.
Aurangabad, Bihar, under the guidance of all CSE department
Professors and Motion Cut instructors.

PRIYANJAN RAJ
CSE (AI/ML) /3RD SEM
(22157147037)
 CONTENTS

1. INTRODUCTION OF WEBSITE

2. WEBSITE DEVELOPMENT

3. ADVANTAGES OF DEVELOPING A WEBSITE

4. WEB DEVELOPER

5. HOW A WEBSITE IS DEVELOPED

6. HTML

7. CSS

8. JAVASCRIPT

9. BOOTSTRAP

10. RESPONSIVENESS

11. GIT-HUB

12. MAJOR PROJECTS

13. CONCLUSION
1. INTRODUCTION OF WEBSITE

Fig 1: website overview

A website (also written as a web site) is a collection of web
pages and related content that is identified by a common
domain name and published on at least one web server.
Websites are typically dedicated to a particular topic or
purpose, such as news, education, commerce, entertainment
or social, networking. Hyperlinking between web pages
guides the navigation of the site, which often starts with
a home page. As of December 2022, the top 5 most visited
websites are google, search, YouTube, Twitter,Facebook,
Instagram.

All publicly accessible websites collectively constitute

the World Wide Web. There are also private websites that
can only be accessed on a private network, such as a
company's internal website for its employees.
 # IMPORTANT TERMS RELATED TO WEBSITE:

• INTERNET: The Internet (or internet)is the global system of

interconnected computer networks that uses the Internet
protocol suite to communicate between networks and devices. It
is a network of networks that consists of private, public,
academic, business, and government networks of local to global
scope, linked by a broad array of electronic, wireless,
and optical networking technologies. The Internet carries a vast
range of information resources and services, such as the
interlinked hypertext documents and applications of the World
Wide Web (WWW), electronic mail, telephony, and file sharing.

• WWW: The World Wide Web (WWW), commonly known

as the Web, is an information system enabling documents and
other web resources to be accessed over the Internet.

• NETWORK: A network is a group of two or more computers or

other electronic devices that are interconnected for the purpose
of exchanging data and sharing resources.
• DATABASE: A database is an organized collection of data stored
and accessed electronically. Small databases can be stored on a file
system, while large databases are hosted on computer clusters or
cloud storage.

• SEO: Search engine optimization is the process of improving the

quality and quantity of website traffic to a website or a web page
from search engines. SEO targets unpaid traffic rather than direct
traffic or paid traffic.

• SERVERS: Servers are the physical storage space for your data.
Typically servers are shared by thousands of small websites which is
why many servers cost as little per month to rent.

• URL: A URL or “Uniform Resource Locator” is your way of telling

a browser which file you would like to visit on a server. The prefix of
all URLs is https.

• COOKIES: Cookies are small amounts of data that allows your

browser to remember static information. This information could be
things like your name, number, and email address. It is most
commonly shown when your browser asks you if you would like to
use “Auto Fill”. Cookies can be deleted and information can be
forgotten, but more people rely on cookies to remember their
passwords and login details.
• IP ADDRESS: An Internet Protocol address is a unique numerical
label assigned to each device connected to the Internet, including
computers, phones, tablets, servers, cars, and more. A quick Google
search for “what is my IP address” will bring up the IP address
associated with your internet connection.

• SERVER-SIDE: In the client–server model, server-side refers to

programs and operations that run on the server.

• CLIENT-SIDE: The Client-side is everything in a web application

displayed or occurring on a client's (end user's) device, including
what they see – images, text, and videos.

• DOM: The Document Object Model (DOM) is a programming

interface for XML and HTML documents that treats each element
on a document as an object. It allows developers and programs to
read, access, and update the document’s content.

• GIT: The global information tracker (GIT) is a distributed version

control system (VCS) that tracks changes to any set of files. It’s
primarily used to coordinate collaborative software and
development projects
 2. WEBSITE DEVELOPMENT

Web development refers to the creating, building, and maintaining of

websites. It includes aspects such as web design, web publishing, web
programming, and database management. It is the creation of an
application that works over the internet i.e. websites.

The word Web Development is made up of two words, that is:

• Web: It refers to websites, web pages or anything that works over

the internet.
• Development: It refers to building the application from scratch.

Web Development can be classified into two ways:

• Frontend Development
• Backend Development

Fig 2: Technologies related to web development

3. ADVANTAGES OF DEVELOPING A WEBSITE

• It Shows Your Professionalism: Another reason why a

website is important for your business is that there is a large
portion of the market that won't even consider you as an
option when they are looking to buy, if you don't have one.

• It Gives You Ease Of Access: Having a website makes it very

easy for people to find you, read up about your company,
discover what you do, and answer a bunch of questions they
have on your business.

• It Gives You Opportunities Abroad: By getting a website it

makes it possible for anyone in the world to find your
business. If you have a product that can be easily sold online
you can dramatically increase your customer base by selling
online.

• It's an Easily Accessible Data Center: Another great reason

why a website is important is that it can also act as a data
center for your own employees, customers, and your
prospects.
• It Provides Self Service Customer Support: Another advantage
of having a website is that it can improve your customer support
and as a result improve your overall customer service. A website
can do this if you post support Q&As on your website or create a
forum where users can ask each other questions about your
product and other users can answer these questions. These
answers to common problems or questions are then available on
the internet if other customers search in a search engine for a
solution to this problem.

• Saves Cost: A brick-and-mortar store needs considerable

investment to buy or rent a commercial center. Apart from that,
furniture, interiors, and staff come as an additional cost, which
can’t be ignored.

• Online Presence 24/7: Having a website means customers are

always able to find you – anytime, anywhere. Even outside of
business hours, your website continues to find and secure new
customers. It offers the user convenience as they can access the
information they need in the comfort of their own home, with no
added pressure to buy. Plus, as most companies nowadays have
their own website, there’s every chance you could be losing
customers to your competitors by staying offline
4. WEB DEVELOPER
A web developer is a programmer who develops World
Wide Web applications using a client–server model. The
applications typically use HTML, CSS, and JavaScript in the
client, and any general-purpose programming language in
the server. HTTP is used for communications between
client and server. A web developer may specialize in
client-side applications (Front-end web development),
server-side applications (back-end development), or both
(full-stack development).

Prerequisite
There are no formal educational or license requirements
to become a web developer. However, many colleges and
trade schools offer coursework in web development.
There are also many tutorials and articles which teach
web development, often freely available on the web - for
example, on JavaScript.
Even though there are no formal requirements, web
development projects require web developers to
have knowledge and skills such as:
• Using HTML, CSS, and JavaScript
• Programming/coding/scripting in one of the many
server-side languages or framework.
• Understanding server-side/client-side architecture and
communication of the kind mentioned above
• Ability to utilize a database.
 5. HOW A WEBSITE IS DEVELOPED:

A fully responsive and functional website is made in two parts which

are:

• FRONT-END:
* Everything you see on a website, like buttons, links, animations, and
more, were created by a front end web developer. It is the front end
developer's job to take the vision and design concept from the client and
implement it through code.

* Each component on the page from the logo to the search bar, buttons,
overall layout and how the user interacts with the page was created by a
front end developer. Front end developers are in charge of the look and
feel of the website.

* Front end developers also have to make sure the website looks
good on all devices (phones, tablets, and computer screens).

* The three main languages you need to know well are HTML, CSS, and
JavaScript. From there you can focus on frameworks, libraries, and other
useful tools.
• BACK-END:

* Back-end development means working on server-side software,

which focuses on everything you can’t see on a website. Back-end
developers ensure the website performs correctly, focusing on
databases, back-end logic, application programming interface
(APIs), architecture, and servers. They use code that helps browsers
communicate with databases, store, understand, and delete data.

* On a team, back-end developers collaborate with front-end

developers, product managers, principal architects, and website
testers to build the structure of a website or mobile app. Back-end
developers must be familiar with many kinds of tools and
frameworks, including languages such as Python, Java, and Ruby.
They make sure the back-end performs quickly and responsively to
front-end user requests.

* Back-end developers are required to have technical expertise,

analytical thinking, and excellent collaboration skills. As a back-end
web developer, you should be able to work independently to design
the web infrastructure.
Here’s what many back-end developers do on a day-to-day basis:

• Build and maintain websites: A back-end developer’s main

responsibility is to use various tools, frameworks, and languages to
determine how best to develop intuitive, user-friendly prototypes and
turn them into websites. This requires an understanding of cross-
platform functionality and compatibility.

• Write high-quality code: To produce sustainable web applications,

developers must write clean and easily maintainable code.

• Perform quality assurance (QA) testing: Create and oversee testing

schedules to optimize user interface and experience, ensuring optimal
display on various browsers and devices.

• Perform quality assurance (QA) testing: Create and oversee testing

schedules to optimize user interface and experience, ensuring optimal
display on various browsers and devices.

• Assess efficiency and speed: Once a website is up and running, and

during updates and edits, developers need to assess its performance
and scalability, adjusting code as necessary.
• Troubleshoot and debug: Be able to troubleshoot
issues and resolve them, while communicating
them to project managers, stakeholders, and QA
teams.

• Troubleshoot and debug: Be able to troubleshoot

issues and resolve them, while communicating
them to project managers, stakeholders, and QA
teams.

• Train and support: Maintain workflows with

client teams to ensure ongoing support, along
with leading training and mentorship for junior
developers.
6. HTML

* What is HTML ?

HTML stands for Hyper Text Markup Language. It is used to

design web pages using the markup language. HTML is the
combination of Hypertext and Markup language. Hypertext
defines the link between the web pages and markup language
defines the text document within the tag that define the structure
of web pages.

* What is HTML used for ?

HTML is used to create the structure of web pages that are
displayed on the World Wide Web (www). It contains Tags and
Attributes that are used to design the web pages. Also, we can
link multiple pages using Hyperlinks

Fig 3: HTML boiler plate

 Tag Description

<!DOCTYPE> Defines the document type

<html> Defines an HTML document

<head> Contains metadata/

information for the
document

<title> Defines a title for the document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a thematic change in

the content

<form> Defines an HTML form for user

Input
<button> Defines a clickable
button

<select> Defines a drop-down list

<optgroup> Defines a group of related

options in a drop-down
list

<option> Defines an option in a drop-

down list

<label> Defines a label for an

<input> element

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term/name in a

description list
<style> Defines style information
for
a document

<div> Defines a section in a

document

<span> Defines a section in a

document

<header> Defines a header for a

document or section

<footer> Defines a footer for a

document or section

<main> Specifies the main content

of a document

<section> Defines a section in a

document

<article> Defines an article

<aside> Defines content aside from

the page content

<details> Defines additional details

that the user can view or
hide

<summary> Defines a visible heading for

a <details> element
7. CSS(Cascading Style Sheet):

CSS (Cascading Style Sheets) is used to apply styles to web pages.

Cascading Style Sheets are fondly referred to as CSS. It is used to make
web pages presentable. The reason for using this is to simplify the
process of making web pages presentable. It allows you to apply styles
on web pages. More importantly, it enables you to do this
independently of the HTML that makes up each web page

Why we learn CSS?

Styling is an essential property for any website. It increases the

standards and overall look of the website that makes it easier for the
user to interact with it. A website can be made without CSS, as styling
is MUST since no user would want to interact with a dull and shabby
website. So for knowing Web Development, learning CSS is
mandatory.

Fig 4: CSS basic code

There are three types of CSS which are given below:

• Inline: Inline CSS contains the CSS property in the body section
attached with the element known as inline CSS.

• Internal or Embedded: 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: External CSS contains a separate CSS file that contains

only style property with the help of tag attributes.

How CSS is different from HTML?

• HTML is used to define a structure of a web page whereas CSS is
used to style the web pages by using different styling features.
• HTML consists of tags inside which text is enclosed and CSS
consists of selectors and declaration blocks.
• CSS has comparatively higher backup and support than HTML.
• We cannot use HTML inside a CSS sheet but we can use CSS
inside an HTML document.
• CSS can be internal or external depending upon the requirement.
Why is CSS used in HTML?

• Saves a lot of time: Because CSS style definitions are stored in

external CSS files, updating only one file can modify the entire
website.
• Pages load faster: CSS doesn’t require you to write HTML tag
attributes all of the time. A tag’s rule can be written once and applied
to all instances of the tag. As a result, CSS uses less code, resulting
in speedier download times.
• Easier Website maintenance: CSS makes website maintenance
much easier. If we need to make a global change to the file, we can
simply alter the style, which will update all of the elements on the
web page.
• Multiple device compatibility: We can use CSS with older
language versions because it is compatible with them. CSS makes it
possible to optimize material for several devices.
• Base for web development: HTML and CSS is the basic skill that
every web developer should know. It is the basic skill that is required
for building a website.
• Increases user experience of the website: A website with a simple
yet beautiful UI would help the users to go through the website
easily. It is used to make the user interface better.
• More career opportunities: Since CSS is a basic requirement while
learning Web Development, therefor there are abundant career
opportunities for it. As a freelancer, you can land up to many
projects.
CSS Syntax

A CSS style rule is made of three parts:

1. Selector: A selector is an HTML tag at which a style will be applied.
This could be any tag like , or etc.
2. Property: A property is a type of attribute of HTML tag. Put simply,
all the HTML attributes are converted into CSS properties. They could
be color, border, bgcolor etc.
3. Value: Values are assigned to properties. For example, color property
can have the value either red or #F1F1F1 etc.

The format or syntax of CSS is:

selector-{property}:

Example:You can define a heading as follows:

h1 {color:red:font-size:15px};

Here h1 is a selector , color and font-size are properties and the given
value red, and 15px are the value of that property.

• The selector is normally the HTML element you want to style.

• Each declaration consists of a property and a value.
• The property is the style attribute you want to change.
 CSS Selectors

You can define selectors in various simple ways based on your comfort.
Let me put these selectors one by one. Three types of CSS Selectors
1. The Element selectors
2. The ID Selectors
3. The Class Selectors

The Element selectors

A CSS declaration always ends with a semicolon, and declaration groups
are surrounded by curly brackets: example –
p {color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each
line, like this:
p { color:red; text-align:center; }

The ID selectors
The id selector is used to specify a style for a single, unique element. The
id selector uses the id attribute of the HTML element, and is defined with
a "#". Example –
Imagine within the body element of our html page, we have the following
paragraph element
<p id=“welcome to the gec”> css document </p>
Welcome to the 1st CSS Document
We can then create a CSS rule with the id selector: #welcome { color:red;
text-align:center.
CSS GRID

CSS's grid system is responsive. The columns will re-arrange

automatically depending on the screen size: On a big screen
it might look better with the content organized in three
columns, but on a small screen it might be better if the
content were stacked on top of each other.
For example:

Fig 5: Grid template

Code for above grid is:

<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4 on a medium screen, and
3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8 on a medium screen, and
9 on a large screen.</p>
</div>
</div>
 CSS FLEX

CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3

web layout model. It is in the W3C's candidate recommendation stage.
The flex layout allows responsive elements within a container to be
automatically arranged depending on viewport size.

Fig 6: CSS Flex basic design

Code for above flex is:

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div

Fig 7: CSS flex items overview

Code for above flex items is:

<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
8. JAVASCRIPT

• JavaScript, often abbreviated as JS, is a programming language

that is one of the core technologies of the World Wide Web,
alongside HTML and CSS. As of 2022, 98% of websites use
JavaScript on the client side for webpage behavior, often
incorporating third-party libraries.

• JavaScript is a high-level, often just-in-time compiled language

that conforms to the ECMAScript standard.[It has dynamic
typing, prototype-based object-orientation, and first-class
functions.

• You don't have to get or download JavaScript.

JavaScript is already running in your browser on your computer,
on your tablet, and on your smart-phone.
JavaScript is free to use for everyone.

• The example below "finds" an HTML element (with

id="demo"), and changes the element content (innerHTML) to
"Hello JavaScript":

document.getElementById("demo").innerHTML = "Hello
JavaScript";
 SOME EXAMPLES OF JAVASCRIPT:

You can use an alert box to display data;

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<script>
window.alert();
</script>

</body>
</html>

Calculate the product of two numbers, and return the result;

let x = myFunction(4, 3);

function myFunction(a, b) {
return a * b;
}
9. BOOTSTRAP

What Bootstrap Package Includes?

Scaffolding: Bootstrap provides a basic structure with Grid System,

link styles, and background. This is covered in detail in the section
Bootstrap Basic Structure.

CSS: Bootstrap comes with the feature of global CSS settings,

fundamental HTML elements styled and enhanced with extensible
classes, and an advanced grid system. This is covered in detail in the
section Bootstrap with CSS.

Components: Bootstrap contains over a dozen reusable components

built to provide iconography, dropdowns, navigation, alerts, pop-
overs, and much more. This is covered in detail in the section Layout
Components.

JavaScript Plugins: Bootstrap contains over a dozen custom jQuery

plugins. You can easily include them all, or one by one. This is
covered in details in the section Bootstrap Plugins.

Customize: You can customize Bootstrap's components, LESS

variables, and jQuery plugins to get your very own version.
10. RESPONSIVENESS

2Responsive Web Design In this study, the goal is to show a reason

why modern websites need to be responsive. An outline of the
evolution of the characteristics of websites and the process of
designing a website is given.

Statistically, the usage of handheld devices and discussion of the

advancement of mobile devices are main reasons for the essentiality
of responsiveness in web design. Besides, Cascading Style Sheets
(CSS) has been one of the critical forces constantly pushing the
boundary of the World Wide Web.

It has affected responsive web design directly. This section will

include a short introduction to it. Even though the term World Wide
Web was invented for over 20 years ago, it is still considered as a
new medium and the methodologies in web design keep changing
and evolving continuously.

Web design is a process of accumulating and arranging elements to

form a unified digital space where end-users not only can interact,
but also absorb the information.

Fig 8: Responsive overview

11.GIT-HUB

GitHub, (ɡɪthub) is an Internet hosting

service for softwaredevelopment and version control using Git. It
provides the distributed version control of Git plus access control, bug
tracking, software feature requests, task management, continuous
integration, and wikis for every project. Headquartered in California, it
has been a subsidiary of Microsoft since 2018.

GitHub supports the following formats and features:

• Documents
• Graphs: pulse, contributors, commits, code frequency, punch card.
• Email notifications
• Discussions
• Option to subscribe someone to notifications by mentioning them.[
• Emojis
• Nested task-lists within files
• Visualization of geospatial data
• Pdf document viewer
• Security Alerts of known Common Vulnerabilities and Exposures
in different packages
 12. MAJOR PROJECT

1ST- E- COMMERSE WEBSITE

2 REGISTRATION FORM
3- BUISENESS WEBSITE
13. CONCLUSION

In this internship program on web development from

MOTION CUT, I got to know many things in a very short
period of time, there e some new terms, set of technologies
and languages through which I was able to make some
awesome websites as major projects.

Moreover I was able to understand how does a website works,

where does it stores the data, how does it get updated every
time, what is the scope in this field and the full roadmap to
make it as a profession. In this internship period I had utilized
every hour to make my self better in this field.