WEB DEVELOPMENT

An Internship/Training Report

Submitted By :-

Harsh Raj (22110113002)

BACHELOR OF TECHNOLOGY

IN

ELECTRICAL AND ELECTRONICS ENGINEERING

at

MOTIHARI COLLEGE OF ENGINEERING , MOTIHARI - 845401

[ AFFILIATED TO BIHAR ENGINEERING UNIVERSITY, PATNA, BIHAR (INDIA) ]
 DECLARATION

This is to declare that this report has been written by

me. No part of the report is plagiarized from other
sources. All information included from other sources
have been duly acknowledged. I am aware that if any
part of the report is found to be plagiarized, I shall be
liable and punishable by institute or university, which
may include fail in the examination, repeat study and
resubmission of the report or any other punishment
that institute or university may decide.

Name of Student: HARSH RAJ

Enrollment Number: 22110113002

Signature :
CERTIFICATE
 ACKNOWLEDGEMENT

I would like to express my special thanks to MOTION

CUT for this Web Development Training/Internship
which was quite easy to learn and which helped me
learn web technologies and enhance my skills. The
lecture videos were very easy understand and were of
short duration which also saved a lot of time. I am
really very thankful to them.
I would also like to extend my sincere thanks to my
college for helping me to complete this training.
 ABSTRACT

Web Development were the main objective of this internship. The Online Web
Development Internship by is a 4-weeks training program in the fields of
HTML, CSS, JavaScript and Bootstrap. In this training program, I learn multiple
web technologies that create my own web projects. If we develop web
based application that is very useful for us because we can access it from of
the world. It is very helpful for our daily life. We all know technology is
changing rapidly, all over the world; websites are another name for the
internet and browsers. In the IT industry software development is a growing
industry and providing too many career opportunities. The training has
given me good experience about building websites from scratch.
Overall, it was really a wonderful learning journey in RCPL
trainings and I hope that the training will surely help me in
building a successful career ahead.
This report takes us through all the details of WEBSITE
DESIGN And DEVELOPMENT knowledge and experience
gathered during this internship period.
 TABLE OF CONTENTS

Page No.
1. Title Page …………………………………………………………… 01
2. Declaration of the Student...................................................02
3. Certificate of the Training/Internship.................................03
4. Acknowledgement...............................................................04
5. Abstract....................................................................................
6. INTRODUCTION.......................................................................
7. HTML........................................................................................
8. CSS...........................................................................................
9. BOOTSTRAP.............................................................................
10. JavaScript...............................................................................
11. MY PROJECT DETAILS……………………………………………………
12. CONCLUSION..........................................................................
13. REFFERENCES...........................................................................
 1. INTRODUCTION
Web development is a specific field of software engineering that focuses on
building web pages. Web pages, or web apps, are codebases that are
downloaded and run in our web browser (e.g., Google Chrome) each time a
user navigates to the website address. This differs from other software which
is usually downloaded once and runs as a standalone application on your
computer or phone.

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 is what we see when we open a web page or app. Code is
downloaded from a server and is rendered to the screen by a web browser.
What happens when we interact with the code is also considered front end.
This is often referred to as the ‘Presentation Layer’ or ‘Client’ in software
development terms.
The front end is built with HTML and CSS.
HTML allows us to put content on our page: text, headers, images, buttons,
links, and etc.
CSS is used to style our page. It allows the contents to have different text
colours, background colours, as well as dealing with the positioning of the
content on the page.

The back end is the place we don’t see as users. This consists of data storage
(databases) and servers running to provide data for the front end. Back end
can be a little harder to imagine, especially for someone without much
experience with it. Back end is commonly
Referred to as the ‘data access layer’ or ‘server’ within software development
terms. The back end computes the data and content sent to the front end to
be used and displayed by your browser.
Back-end scripts are written in many different coding languages and
frameworks, such as…

● PHP
● Node.js
● Python
● ASP.NET etc.
What is a framework?
Real world web development relies heavily on the use of frameworks.
Frameworks aren’t exactly new languages, but are more like add-ons to
existing languages. These frameworks slightly change the rules and syntax of a
language, but save us a lot of time and e ort in writing web development code.
For example, a CSS framework like Bootstrap will require us to write our CSS
using slightly different rules than regular (vanilla) CSS. It will also limit the level
of customization we can do using CSS. But the drawbacks are often worth it,
because Bootstrap makes styling our sites far easier and allows us to create
mobile-friendly pages
With minimal effort.

Challenges for Web Developer

While there are a lot of pros in developing software for use on the web, there
are some cons as well. These can be unique challenges to a web developer.

Load times
We usually get frustrated whenever a website takes too long to respond, we
generally do not wait till the website loads its page. In fact, most users will
leave a site if it does not load for them in 15 seconds or less! Connection speed
is a large hurdle to overcome when dealing with web development. A user’s
speed can range from very fast (Fibre optic) to slow (mobile 3G or satellite).

Different Browsers
Not only do we have to worry about load times, but also differences in browser
technology.
Mobile browsers are different from desktop (or laptop) browsers. Older
browsers (many computers still use Windows XP and IE9) are extremely
different from newer browsers, and developing for each provides a unique
challenge.
 2. HTML

HTML is the standard markup language for creating Web pages.

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.

A simple HTML Document

Explanation

 The < !DOCTYPE html> declaration defines that this document is

an HTML5 document
 The < html> element is the root element of an HTML page
 The < head> element contains meta information about the HTML
page
 The < title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
 The < body> element defines the document's body, and is a
container for all the visible contents, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The < p> element defines a paragraph.

HTML Element

An HTML element is defined by a start tag, some content, and an end

tag:

<tagname> Contents...< / tagname>

The HTML element is everything from the start tag to the end tag:
<h 1> My First Heading< / h1>
<p > My first paragraph.< / p>

Start Tag Element Content End Tag

<h1> My First Heading </h1>
<p> My first paragraph </p>
<br> none none

Note: Some HTML elements have no content (like the <br> element).
These elements are called empty elements. Empty elements do not have
an end tag!

HTML History
Since the early days of the World Wide Web, there have been
many versions of HTML:

HTML Versions YEAR

Tim Berners-Lee invented www 1989
Tim Berners-Lee invented HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014
HTML 5.2 2017

HTML Documents
All HTML documents must start with a document type declaration: <
!DOCTYPE html>.
The HTML document itself begins with < html> and ends with < /html>.
The visible part of the HTML document is between < body> and < /body>.

TEXT FORMATTING
HTML Formatting is a process of formatting text for better look
and feel. HTML provides us ability to format text without using
CSS.
In HTML the formatting tags are divided into two categories:-
 Physical tag: These tags are used to provide the visual
appearance to the text.
 Logical tag: These tags are used to add some logical or semantic
value to the text.
Here, we are going to learn 8 HTML formatting tags. Following is
the list of HTML formatting text.
 Element name Description

<b> This is a physical tag, which is

used to bold the text written
between it.
<strong> This is a logical tag, which tells
the browser that the text is
important.
<em> This is a logical tag which is used to
display content in italic.
<u> This tag is used to underline text
written between it.
<del> This tag is used to display the
deleted content
<big> This tag is used to increase the font
size by one conventional unit.
<small> This tag is used to decrease the font
size by one unit from base font size.
<i> his is a physical tag which is used to
make text italic.
The <!DOCTYPE> Declaration
The < !DOCTYPE> declaration represents the document type, and helps
browsers to display
web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The < !DOCTYPE> declaration is not case sensitive.
Example:-
<! DOCTYPE html>

HTML Headings
HTML headings are defined with the < h1> to < h6> tags.
<h1> defines the most important heading. < h6> defines the least
important heading.
Example:-
<h 1> T his is heading 1< / h1>
<h 2> T his is heading 2< / h2>
<h 3> T his is heading 3< / h3>
HTML Paragraphs
HTML paragraphs are defined with the < p> tag.
Example:-
<p > T his is a paragraph.< / p>

HTML Links
HTML links are defined with the < a> tag.
Example:-
< a href =" https://www.youtube.com "> Visit YouTube< / a>

HTML Images
HTML images are defined with the < img> tag.
The source file (src) , alternative text (alt) , width, and height are
provided as attributes.
Example:-
<i mg src= "logo.jpg" alt= "logoimage" width= "104" height= "142">

HTML Comment Tags

We can add comments to your HTML source by using the following
syntax :-
Example:-
<!-- Write your comments here -->

Note: Comments are not displayed by the browser, but they can help
document your HTML source code.

HTML Table
The < table> tag defines an HTML table.
Each table row is defined with a < tr> tag.
Each table header is defined with a < th> tag.
Each table data/cell is defined with a < td> tag.
By default, the text in < th> elements are bold and centered.
By default, the text in < td> elements are regular and left-aligned.
Note: The < td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists,
other tables, etc.

HTML Lists

Unordered HTML List

An unordered list starts with the < ul> tag. Each list item starts with
the < li> tag.
The list items will be marked with bullets (small black circles) by
default.

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the
< li> tag.
 3. CSS

CSS is used to control the style of a web document in a

simple and easy way.
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

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 Syntax
A CSS rule-set consists of a selector and a declaration block :-
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated
by semicolons.
Each declaration includes a CSS property name and a value,
separated by a colon.
Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.

Example :-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
 }
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>

Output:-
CSS Colours
Colours are specified using predefined color names, or RGB,
HEX, HSL, RGBA, HSLA values.
In CSS, a color can be specified by using a color name:-

CSS Border Style

The border-style property specifies what kind of border to display.
The following values are allowed:

 dotted - Defines a dotted border

 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on
the border-color value
 ridge - Defines a 3D ridged border. The effect depends on the
border-color value.
 inset - Defines a 3D inset border. The effect depends on the
border-color value
 outset - Defines a 3D outset border. The effect depends on
the border-color value
 none - Defines no border
 hidden - Defines a hidden border
The border-style property can have from one to four values (for the
top border, right border, bottom border, and the left border).

Note: None of the OTHER CSS border properties (which you will
learn more about in the next chapters) will have ANY effect unless
the b order-style property is set!
FONTS
 4. BOOTSTRAP

What is Bootstrap ?
 Bootstrap is a free front-end framework for faster and easier web
development
 Bootstrap includes HTML and CSS based design templates for
typography, forms, buttons, tables, navigation, modals, image
carousels and many other, as well as optional JavaScript plugins
 Bootstrap also gives you the ability to easily create responsive
designs.

Why Use Bootstrap ?

Advantages of Bootstrap:
 Easy to use: Anybody with just basic knowledge of HTML and CSS
can start using Bootstrap
 Responsive features: Bootstrap's responsive CSS adjusts to
phones, tablets, and desktops
 Mobile-first approach: In Bootstrap, mobile-first styles are part of
the core framework
 Browser compatibility: Bootstrap 4 is compatible with all modern
browsers (Chrome, Firefox, Internet Explorer 10+, Edge, Safari,
and Opera).

Containers
Containers are used to pad the content inside of them, and there are
two container classes
available:
1. The . container class provides a responsive fixed width container
2. The . container-fluid class provides a full width container,
spanning the entire width of the viewport.

Fixed Container
Use the . container class to create a responsive, fixed-width
container.
Note that its width (m ax-width) will change on di erent screen sizes:
Fluid Container
Use the . container-fluid class to create a full width container, that
will always span the entire width of the screen (w idth is always 1
00%) :

Container Padding
By default, containers have 15px left and right padding, with no top
or bottom padding.
Therefore, we often use spacing utilities, such as extra padding and
margins to make them look even better. For example, . pt-3 means
"add a top padding of 16px".

Bootstrap 4 Default Settings

Bootstrap 4 uses a default f ont-size of 16px, and its l ine-height is
1.5.
The default f ont-family is "Helvetica Neue", Helvetica, Arial, sans-
serif.
In addition, all < p> elements have m argin-top: 0 and m argin-
bottom: 1rem (16px by default).
<h1> - <h6>
Bootstrap 4 styles HTML headings (< h1> to < h6>) with a bolder
font-weight and an increased font-size:

Display Headings
Display headings are used to stand out more than normal headings
(larger font-size and lighter font-weight), and there are four classes to
choose from: . display-1, . display-2, .display-3, . display-4.

Thumbnail
The . img-thumbnail class shapes the image to a thumbnail
(bordered).
Responsive Images
Images come in all sizes. So do screens. Responsive images
automatically adjust to fit the size of the screen.
Create responsive images by adding an . img-fluid class to the < img>
tag. The image will then scale nicely to the parent element.
The . img-fluid class applies m ax-width: 100%; and h eight: auto; to
the image.
Bootstrap supports for images. There are three classes in Bootstrap
that can be used to apply some simple style to the images.

Classes uses
.img-rounded It adds border-radius:6px to
give the image rounded
corners.
.img-circle It makes the entire image
round by adding border-
radius:500px.
.img-thumbnail It adds a bit of padding and a
gray border.

Navigation Bars
A navigation bar is a navigation header that is placed at the top of
the page

Basic Navbar
With Bootstrap, a navigation bar can extend or collapse, depending
on the screen size.
A standard navigation bar is created with the . navbar class, followed
by a responsive
collapsing class: . navbar-expand-xl|lg|md|sm (stacks the navbar
vertically on extra large, large, medium or small screens).
To add links inside the navbar, use a < ul> element with
c lass="navbar-nav". Then add < li>
elements with a . nav-item class followed by an < a> element with a .
nav-link class:
Vertical Navbar
Remove the . navbar-expand-xl|lg|md|sm class to create a vertical
navigation bar

Centered Navbar
Add the . justify-content-center class to center the navigation bar.
The following example will center the navigation bar on medium,
large and extra large screens. On small screens it will be displayed
vertically and left-aligned (because of the .navbar-expand-sm class).

Jumbotron
A jumbotron indicates a big grey box for calling extra attention to
some special content or information.
Tip: Inside a jumbotron you can put nearly any valid HTML, including
other Bootstrap elements/classes.
Use a < div> element with class . jumbotron to create a jumbotron.

GLYPHICONS
Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.
Glyphicons can be used in text, buttons, toolbars, navigation, forms,
etc.
Here are some examples of glyphicons:
 Envelope glyphicon
 Print glyphicon
 Search glyphicon
 Download glyphicon
 7 REFRENCES OF MY PROJECT

Features:
1. Portfolio
2. todo-list
3. E-commerce
4. Registration form
 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.

6. REFERENCES

1. www.quora.com
2. https://en.wikipedia.org/wiki/HTML
3. https://www.w3schools.com/