lOMoAR cPSD| 11243712
A
Industrial Training Report
on
Front End Web Development
Submitted in partial fulfilment for the award of degree of
BACHELOR OF TECHNOLOGY
In
Computer Science & Engineering
Coordinator:
Submitted By:
Loveleen Kumar
Dhruv Vedwal
20EGJCS032
Submitted to:
Dr S. S. Shekhawat
Head of Dept.
Department of Computer Science & Engineering
GLOBAL INSTITUTE OF TECHNOLOGY
JAIPUR (RAJASTHAN)-302022
Session-2021-22
lOMoAR cPSD| 11243712
Acknowledgement
I take this opportunity to express my deep sense of gratitude to my coordinator Mr. Loveleen
Kumar, Assistant Professor Department of Computer Science and Engineering, Global
Institute of Technology, Jaipur, for his valuable guidance and cooperation throughout the
Practical Training work. He provided constant encouragement and unceasing enthusiasm at
every stage of the Practical Training work. We are grateful to our respected Dr. I. C. Sharma,
Principal GIT for guiding us during Practical Training period We express our indebtedness to
Dr. S. S. Shekhawat, Head of Department of Computer Science and Engineering, Global
Institute of Technology, Jaipur for providing me ample support during my Practical Training
period. Without their support and timely guidance, the completion of our Practical Training
would have seemed a farfetched dream. In this respect we find ourselves lucky to have
mentors of such a great potential.
Place: GIT, Jaipur
Dhruv Vedwal
20EGJCS042
B.Tech. III Sem, 2nd Year CS
lOMoAR cPSD| 11243712
Abstract
Web programming, also known as Web Development, is the creation of dynamic web
applications. 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 Hypertext 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.
JavaScript is a scripting language that’s widely used to add functionality and interactivity to
web pages.
Web developers often work for clients who are trying to get their product or service onto the
web. The work is typically very project focused and involves collaborating with a team that
helps to coordinate the client’s needs into the end product. The client could be a tech company,
an organization, or a government. The work could involve front-end, back-end, or full-stack
web development.
Web development could be a good profession for you if you like solving logical problems,
building useful things, and experimenting with new technologies. Web developers are in high
demand, generally have a good work/life balance, and command comfortable salaries. Google
your specific location to get a better sense of your local web development job opportunities.
lOMoAR cPSD| 11243712
Table of Contents
Certificate .................................................................................................................................. I
Acknowledgement .................................................................................................................... II
Abstract ....................................................................................................................................III
Table of Content ..................................................................................................................... IV
1. Chapter 1. Introduction to HTML
1.1 What is HTML ?
1.1.1 Why to learn HTML
1.1.2 Hello World using HTML
1.1.3 Applications of HTML
1.1.4 Audience
1.2 Basic HTML tags
1.2.1 Heading tag
1.2.2 Paragraph tag
1.2.3 Line break tag
1.2.4 Horizontal row tag
1.2.5 Center tag
2. Chapter 2. Introduction to CSS
2.1 What is CSS ?
2.2 CSS basics
2.3 CSS properties
2.3.1 Text properties
2.3.2 List properties
2.3.3 Border properties
2.3.4 Font properties
2.4 How CSS can be associated to HTML web page
2.5 Advantages of CSS
3. Chapter 3. Introduction to JavaScript
3.1 What is JavaScript ?
3.2 JavaScript and Java
3.3 JavaScript vs Java
4. Chapter 4. Introduction to Bootstrap
4.1 What is bootstrap ?
4.2 How to install
5. Chapter 5. Introduction to jQuery
5.1 jQuery
5.2 What is jQuery
5.3 jQuery Features
lOMoAR cPSD| 11243712
6. Chapter 6. Responsive design
6.1 What is responsive web design ?
6.2 The concept of responsive web design
6.3 Adjusting screen resolution
6.4 Part of the solution: flexible everything
lOMoAR cPSD| 11243712
Chapter 1 Introduction to HTML
1.1 What is HTML
Stands for "Hypertext Markup Language." HTML is the language used to create webpages.
"Hypertext" refers to the hyperlinks that an HTML page may contain. "Markup language"
refers to the way tags are used to define the page layout and elements within the page.
Below is an example of HTML used to define a basic webpage with a title and a single
paragraph of text.
<!doctype html>
<html>
<head>
<title>TechTerms.com</title>
</head>
<body>
<p>This is an e
</body>
</html>
The first line defines what type of contents the document contains. "<!doctype html>" means
the page is written in HTML5. Properly formatted HTML pages should include <html>,
<head>, and <body> tags, which are all included in the example above. The page title,
metadata, and links to referenced files are placed between the <head> tags. The actual contents
of the page go between the <body> tags.
The web has gone through many changes over the past few decades, but HTML has always
been the fundamental language used to develop webpages. Interestingly, while websites have
become more advanced and interactive, HTML has actually gotten simpler. If you compare
the source of an HTML5 page with a similar page written in HTML 4.01 or XHTML 1.0, the
HTML5 page would probably contain less code. This is because modern HTML relies on
cascading style sheets or JavaScript to format nearly all the elements within a page. NOTE:
Many dynamic websites generate webpages on-the-fly, using a serverside scripting language
lOMoAR cPSD| 11243712
like PHP or ASP. However, even dynamic pages must be formatted using HTML. Therefore,
scripting languages often generate the HTML that is sent to your web browser.
1.1.1 Why to Learn HTML?
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers. Now, HTML is being widely used to format web pages with the help of
different tags available in HTML language.
HTML is a MUST for students and working professionals to become a great Software
Engineer specially when they are working in Web Development Domain. I will list down
some of the key advantages of learning HTML:

Create Web site - You can create a website or customize an existing web template if
you know HTML well.

Become a web designer - If you want to start a carrer as a professional web designer,
HTML and CSS designing is a must skill.

Understand web - If you want to optimize your website, to boost its speed and
performance, it is good to know HTML to yield best results.

Learn other languages - Once you understands the basic of HTML then other related
technologies like javascript, php, or angular are become easier to understand.
1.1.2 Hello World using HTML
Just to give you a little excitement about HTML, I'm going to give you a small
conventional HTML Hello World program.
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
lOMoAR cPSD| 11243712
</head>
<body>
<h1>This is a heading</h1>
<p>Hello World!</p>
</body>
</html>
1.1.3 Applications of HTML
As mentioned before, HTML is one of the most widely used language over the web. I'm going
to list few of them here:

Web pages development - HTML is used to create pages which are rendered over the
web. Almost every page of web is having html tags in it to render its details in browser.

Internet Navigation - HTML provides tags which are used to navigate from one page
to another and is heavily used in internet navigation.

Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs,
desktop or laptops owing to responsive design strategy.

Offline support HTML pages once loaded can be made available offline on the
machine without any need of internet.

Game development- HTML5 has native support for rich experience and is now useful
in gaming development arena as well.
1.1.4 Audience
This HTML tutorial is designed for the aspiring Web Designers and Developers with a need
to understand the HTML in enough detail along with its simple overview, and practical
examples. This tutorial will give you enough ingredients to start with HTML from where you
can take yourself at higher level of expertise.
lOMoAR cPSD| 11243712
1.2 Basic HTML tags
1.2.1 Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML
also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and one line
after that heading.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
1.2.2 Paragraph Tags
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of
text should go in between an opening <p> and a closing </p> tag as shown below in the
example −
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
lOMoAR cPSD| 11243712
1.2.3 Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line. This tag
is an example of an empty element, where you do not need opening and closing tags, as there
is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this
space, older browsers will have trouble rendering the line break, while if you miss the forward
slash character and just use <br> it is not valid in XHTML.
<p> Hello <br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz
</p>
1.2.3 Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a
line from the current position in the document to the right margin and breaks the line
accordingly.
For example, you may want to give a line between two paragraphs as in the given example
below −
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
lOMoAR cPSD| 11243712
1.2.4 Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
1.3 History of HTML
This chapter discusses a brief history of HTML language. Reading this will help you to get
an idea of how HTML has been evolved through the years.
Tim Berners-Lee, the inventor of HTML, used to work in the computer section of the CERN
(European Laboratory for Particle Physics) at Geneva, Switzerland.
CERN is an institution for researching particle physics which requires the collaboration of
physicists all over the world.
Tim has an idea of creating something which would enable physicists to share research
information from anywhere in the world, and he came with HTML which can contain links
of many documents from one document.
Tim's prototype Web browser on the NeXT computer came out in 1990.
•
In 1991, an open discussion group HTML-talk was started across the internet for the
development of HTML.
•
In 1992, Dave Raggett from Hewlett-Packard's Labs in Bristol, England who was one
of the enthusiastic of HTML, met Tim and upon returning England, Dave wrote a
richer version of HTML called HTML+.
•
In 1992, NCSA showed interest in web and contributed to take the development of
web a step further.
lOMoAR cPSD| 11243712
•
In december 1992, Marc Andreessen of Mosaic team (an early web browser)
introduced img tag in the HTML document.
•
March 1993: Lou Montulli releases the Lynx browser version 2.0a.
•
Early 1993: Dave Raggett begins to write his own browser.
•
April 1993: The Mosaic browser is released.
•
Late 1993: Large companies underestimate the importance of the Web.
•
May 1994: NCSA assigns commercial rights for Mosaic browser to Spyglass Inc.
•
September 1994: The Internet Engineering Task Force (IETF) sets up an HTML
working group.
•
July 1994: HTML specification for HTML 2 is released.
•
November 1994: Netscape is formed.
•
Late 1994: The World Wide Web Consortium forms.
•
Through 1995: HTML is extended with many new tags.
•
March 1995: HTML 3 is published as an Internet Draft.
•
March 1995: A furor over the HTML Tables specification.
•
August 1995: Microsoft's Internet Explorer browser comes out.
•
September 1995: Netscape submits a proposal for frames.
•
November 1995: The HTML working group runs into problems.
•
November 1995: Vendors unite to form a new group dedicated to developing an
HTML standard.
•
November 1995: Style sheets for HTML documents begin to take shape.
•
November 1995: Internationalization of HTML Internet Draft.
lOMoAR cPSD| 11243712
•
December 1995: The HTML working group is dismantled.
•
February 1996: The HTML ERB is formed.
•
April 1996: The W3 Consortium working draft on Scripting comes out.
•
July 1996: Microsoft seems more interested than first imagined in open standards.
•
December 1996: Work on `Cougar' is begun.
•
January 1997: HTML 3.2 is ready.
•
In spring 1998, HTML 4.01 was materialized finally and become a w3c
recommendation.
•
In January 2008, a working draft of HTML 5 is prepared.
The current version of HTML is HTML 5 .
lOMoAR cPSD| 11243712
Chapter 2 Introduction to CSS
2.1 What is CSS
CSS, stands for Cascading Style Sheet is a computer language to describe presentation (for
example width, height, color, background color, alignment etc.) of
HTML and XML (and XML based languages like XHTML, SVG) web documents. In all the
examples of our tutorials, we have used HTML for implementing CSS.
CSS is a standard specified and maintained by World Wide Web Consortium.
From its invention, CSS has evolved through different versions. The present version of CSS
is CSS 2.1.
Next version of CSS is CSS3, which is under development but developers have already
started using some of its features.
In the consequent pages, we will discuss CSS 2.1 in detail. Learning which, you will be able
to implement CSS in your own web pages.
2.2 CSS Basics
Like HTML, CSS is not a programming language. It's not a markup language either. CSS is
a style sheet language. CSS is what you use to selectively style HTML elements. For
example ,this CSS selects paragraph text, setting the color to red:
p{
color :red;
}
Let's try it out! Using a text editor, paste the three lines of CSS (above) into a new file.
Save the file as style.css in a directory named styles. To make the code work, we still need
to apply this CSS (above) to your HTML document. Otherwise, the styling won't change
the appearance of the HTML.
lOMoAR cPSD| 11243712
Open your index.html file. Paste the following line in the head
(between the <head> and </head> tags):
<link href="styles/style.css" rel="stylesheet"> 2.
Save index.html and load it in your browser.
The whole structure is called a ruleset. (The term ruleset is often referred to as just
rules.) Note the names of the individual parts:
Selector = This is the HTML element name at the start of the ruleset. It defines the
element(s) to be styled (in this example, <p> elements). To style a different element,
change
the selector.
Declaration = This is a rule like color: red;. It specifies which of the element's properties
you want to style.
Properties = These are ways in which you can style an HTML element. (In this example,
color is a property of the <p> elements.) In CSS, you choose which properties you want
to affect in the rule.
Property value = To the right of the property—after the colon—there is the property
value. This chooses one out of many possible appearances for a given property. (For
lOMoAR cPSD| 11243712
example, there are many color values in addition to red. You can also select multiple
elements and apply a single ruleset to all of them. Separate multiple selectors by commas.
For example:
p, li, hi{
color:red;
}
There are many different types of selectors. The examples above use element selectors,
which select all elements of a given type. But we can make more specific selections as
well. Here are some of the more common types of selectors:
What does it select
Example
Element
All HTML elements
p
selector
of the specified type.
selects <p>
The element on the
#my-id
Selector
name
(sometimes
called a tag
or
type
selector)
ID selector
page
with
the
specified ID. On a
given
HTML
selects < p id="my-id"> or < a
id="my-id">
page,
each id value should
be unique.
Class
selector
The element(s) on the
.my-class selects <p class="my-
page with the specified
class"> and <a class="my-
class.
class">
Multiple instances of
lOMoAR cPSD| 11243712
the same class can
appear on a page.
Attribute
selector
The element(s) on the
page with the
specified attribute.
img[src]
selects
< img
src="myimage.png"> but not
< img >
Pseudo-
The specified
a:hover
class selector
element(s), but only
selects <a>, but only when
when in the specified
the
mouse
pointer
state. (For example,
when a cursor hovers
over a link.)
2.3 CSS Properties
Here are some basic CSS properties to work with.
2.3.1 Text Properties
2.3.2 List Properties
2.3.3 Border Properties
2.3.4 Font Properties
hovering over the link.
is
lOMoAR cPSD| 11243712
2.3.1 Text Properties
Property
Description
Values
color
Sets the color of a text
RGB, hex, keyword
line-height
Sets the distance between lines
normal, number, length, %
letter-spacing
Increase
or
decrease
the
space normal, length
between characters
text-align
Aligns the text in an element
left, right, center, justify
text-decoration
Adds decoration to text
none,
underline,
overline,
line-through
text-indent
Indents the first line of text in an
length, %
element
text-transform
Controls the letters in an element
none,
capitalize,
lowercase
uppercase,
lOMoAR cPSD| 11243712
2.3.2 List Properties
Property
Description
Values
list-style
Sets all the properties for a
list-style-type , list-style-position,
list in one declaration
list-style-image, inherit
Specifies an image as the
URL, none, inherit
list-style-image
list-item marker
list-style-position
Specifies where to place
inside, outside, inherit
the list-item marker
list-style-type
Specifies
the
list-item marker
type
of none, disc, circle, square, decimal,
decimal-leading-zero,
Armenian, Georgian, lower-alpha,
upper-alpha, lower-greek,
lower-latin, upper-latin, lower-roman,
upper-roman, inherit
lOMoAR cPSD| 11243712
2.3.3 Border Properties
Property
Description
Values
border
Sets all the border properties
border-width, border-style,
in one declaration
border-color
border-bottom-color
Sets the color
of the
border-color
bottom border
border-bottom-style
Sets
the
styleof
the
border-style
bottom border
border-bottom-width
Sets
the
width of the
border-width
bottom border
border-color
Sets the color of
the four
borders
border-left-color
Sets the color
color_name, hex_number,
rgb_number, transparent, inherit
of the left
border-color
of the left
border-style
border
border-left-style
Sets the style
border
border-left-width
Sets the width of the left
border-width
border
border-right
Sets all the right border
border-right-width,
border-right-style, border-
Properties in one Declaration
border-right-color
Sets the color of the right
right-color
border-color
border
border-right-style
Sets the style of the right
border
border-style
lOMoAR cPSD| 11243712
border-right-width
Sets the width of the right
border-width
border
border-top
Sets all the
top border
border-top-width, border-
properties
in one
top-style, border-topcolor
declaration
border-top-color
Sets the color
of the top
border-color
of the top
border-style
border
border-top-style
Sets the style
border
border-top-width
Sets the width of the top
border-width
border
border-width
Sets the width of the four
borders
thin,
inherit
medium,
thick, length,
lOMoAR cPSD| 11243712
2.3.4 Font Properties
Property
Description
Values
font
Sets all the font properties
font-style,
in one declaration
font-size/line-height, font-family, caption, icon,
font-variant,
font-weight,
menu, message-box, small-caption, status-bar,
inherit
font-family
Specifies the font family
family-name, generic-family, inherit
for text
font-size
Specifies the font size of
xx-small,
x-small,
small,
medium,
text
x-large, xx-large, smaller, larger, length, %,
inherit
font-style
Specifies the font style for
normal, italic, oblique, inherit
text
font-varian
t
Specifies whether or not a
normal, small-caps, inherit
text should be displayed in
a small-caps font
font-weigh
Specifies the weight of a
normal, bold, bolder, lighter,
t
font
100, 200, 300, 400, 500, 600, 700, 800, 900,
inherit
Careful, many of these are not supported!
large,
lOMoAR cPSD| 11243712
2.4 How CSS can be associated with an HTML web page
2.4.1 Linking
With linked CSS, CSS rules are stored in a separate file. To refer to that file from the HTML
page, add the link element (and its closing element within XHTML) to the head element, as
shown in the following example, which assumes that the stylesheet is stored in the file named
"style.css".
<head>
<title>Example Web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
The link element in the example has three attributes. The first, rel , tells the browser the type
of the target of the link. The second, type , tells the browser what type of stylesheet it is. And
the third, href , tells the browser under which URL to find the stylesheet. In the example, the
URL is relative, but it can also be absolute.
2.4.2 Embedding
Dynamically generated webpages may need to use embedded CSS, but this should be kept to
a minimum. Even in dynamic pages, any CSS that is common to multiple pages should
generally be moved to a linked stylesheet.
Embedded CSS is CSS that is located in the header of the HTML document that requires
styling.
The CSS may be placed in the document's header section:
<head>
<title>Example Web Page</title>
lOMoAR cPSD| 11243712
<style type="text/css">
p{
font-weight:bold;
}
</style>
</head>
The CSS is contained in a style element. Setting the element's type attribute to text/css tells
the browser that the enclosed sheetstyle is written in CSS should be used to format the page.
If the attribute type is missing or set to an unrecognized value, the CSS will not be applied to
the page.
2.4.3 Inlining
Inline CSS is specified directly in the opening tag of the element you want it to apply to. It is
entered into the style attribute within HTML or XHTML 1.1.
For example
<div style="font-weight:bold; color:red;">Bold Font</div>
2.5 Advantages of CSS
1.
Separation of content form presentation : Writing CSS code in another CSS file
and attaching it to an HTML page, you can separate content from presentation. So, as an
author, you need not be concerned about presentation and concentrate on content only.
2.
site.
Consistency : CSS can provide a consistent presentation for all of the pages of a web
lOMoAR cPSD| 11243712
3.
The Increment in accessibility : If a particular page (or a number of pages ) needs a
different look and formatting, with a change of a single line, that can be achieved by calling
more than one CSS for the same page.
4.
Save of bandwidth : Since CSS separates content form style, it makes a web
document lightweight, causing saving of bandwidth and in turn faster loading of the page.
5.
Ease of contribution : Content Management Systems (for example WordPress) uses
CSS, so that people without bothering how their content will look, can submit their content.
This has caused an exponential increase in User Generated Content.
lOMoAR cPSD| 11243712
Chapter 3 Introduction to JavaScript
3.1 What is JavaScript ?
JavaScript is a cross-platform, object-oriented scripting language developed by Netscape.
JavaScript was created by Netscape programmer Brendan Eich.
It was first released under the name of Live Script as part of Netscape Navigator 2.0 in
September 1995. It was renamed JavaScript on December 4, 1995. As JavaScript works on
the client side, It is mostly used for client-side web development.
JavaScript is designed for use on web pages and closely integrated with HTML.
JavaScript can create applications which run in the browsers such as IE, Opera,
Firefox, Google Chrome and other. Netscape submitted JavaScript to ECMA
International for standardization resulting in the standardized version named ECMAScript.
3.2 JavaScript and Java
JavaScript and Java are similar in some ways but fundamentally they are different. Java is a
programming language developed by Sun Microsystems, Inc. and JavaScript is a scripting
language developed by Netscape. Java is a server-side and static type language. JavaScript is
a client-side, dynamically typed language. Java programs are compiled on the server and run
on almost every platform without distribution of source code whereas scripts written in
JavaScript are placed inside a HTML document and interpreted by the browser. The syntax,
reserved-words of JavaScript and Java are also different.
lOMoAR cPSD| 11243712
3.3 JavaScript compares to Java
JavaScript
Java
JavaScript is used for front-end web
Java is used as a back-end language within a web
development (for example field level validation
environment.
in a HTML form).
Interpreted (not compiled) by the client.
Compiled bytecodes downloaded from the
server, executed on the client.
Object-oriented. No distinction between types
Class-based. Objects are divided into classes and
of objects. Inheritance is through the prototype
instances with all inheritance through the class
mechanism, and properties and methods can be
hierarchy. Classes and instances cannot have
added to any object dynamically.
properties or methods added dynamically.
Variable data types are not declared (loose
Variable data types must be declared as Java
typing).
maintains strong type checking.
Cannot automatically write to hard disk.
Cannot automatically write to hard disk.
lOMoAR cPSD| 11243712
Chapter 4 Introduction to BOOTSTRAP
4.1 What is BOOTSTRAP?
Twitter Bootstrap is a front end framework to develop web apps and sites fast. In modern
web development, there are several components which are required in almost all web
projects. Bootstrap provides you with all those basic modules - Grid, Typography, Tables,
Forms, Buttons, and Responsiveness. Besides, there are a plethora of other useful frontend
components like Dropdowns, Navigation, Modals, Typehead, Pagination, Carousal,
Breadcrumb, Tab, Thumbnails, Headers etc. With these, you can make a web project up and
running quickly and easily.
Moreover, since the entire framework is module based, you can customize it with your own
bit of CSS or even go for a complete overhaul after getting started.
It is based on the several best practices and we believe it is a very good point to start learning
modern day web development with HTML, and JavaScript/jQuery once you know the basics.
Though there are criticisms, that all Bootstrap made projects looks same and you can make a
website up without much of HTML+CSS knowledge, we need to understand that Bootstrap
is a generic framework and like any other generic stuff, you need to customize it to look it
exclusively. And you need to developed when you are on your way to customizing it and that
is not feasible without a well understanding of HTML+CSS.
There are of course very good front-end frameworks available beside bootstrap and it's
completely a developer's choice who wants which. But it is definitely worth trying.
lOMoAR cPSD| 11243712
Chapter 5. Introduction to jQuery
5.1 jQuery
jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is designed to
simplify the client-side scripting of HTML. It makes things like HTML document traversal
and manipulation, animation, event handling, and AJAX very simple with an easy-to-use API
that works on a lot of different type of browsers.
The main purpose of jQuery is to provide an easy way to use JavaScript on your website to
make it more interactive and attractive. It is also used to add animation.
5.2 What is jQuery
jQuery is a small, light-weight and fast JavaScript library. It is cross-platform and supports
different types of browsers. It is also referred as ?write less do more? because it takes a lot of
common tasks that requires many lines of JavaScript code to accomplish, and binds them into
methods that can be called with a single line of code whenever needed. It is also very useful
to simplify a lot of the complicated things from JavaScript, like AJAX calls and DOM
manipulation.
o
jQuery is a small, fast and lightweight JavaScript library.
o
jQuery is platform-independent. o jQuery means "write less do
more". o jQuery simplifies AJAX call and DOM manipulation.
lOMoAR cPSD| 11243712
5.3 jQuery Features
Following are the important features of jQuery.
o HTML manipulation
o DOM manipulation
o DOM element selection
o CSS manipulation
o Effects and Animations
o Utilities
o AJAX
o HTML event methods
o JSON Parsing
o Extensibility through plug-ins
5.4 Why jQuery is required
Sometimes, a question can arise that what is the need of jQuery or what difference it makes
on bringing jQuery instead of AJAX/ JavaScript? If jQuery is the replacement of AJAX and
JavaScript? For all these questions, you can state the following answers.
o
It is very fast and extensible. o It facilitates the users to write UI
related function codes in minimum possible lines. o It improves the
performance of an application.
o
Browser's compatible web applications can be developed. o It uses
mostly new features of new browsers.
So, you can say that out of the lot of JavaScript frameworks, jQuery is the most popular and
the most extendable. Many of the biggest companies on the web use jQuery.
Some of these companies are:
o
Microsoft
o
Google
lOMoAR cPSD| 11243712
o
o IBM
o
Netflix
lOMoAR cPSD| 11243712
Chapter 6 Responsive Design
6.1 What Is Responsive Web Design?
Responsive Web design is the approach that suggests that design and development should
respond to the user’s behavior and environment based on screen size, platform and
orientation.
The practice consists of a mix of flexible grids and layouts, images and an intelligent use of
CSS media queries. As the user switches from their laptop to iPad, the website should
automatically switch to accommodate for resolution, image size and scripting abilities. One
may also have to consider the settings on their devices; if they have a VPN for iOS on their
iPad, for example, the website should not block the user’s access to the page. In other
words, the website should have the technology to automatically respond to the user’s
preferences. This would eliminate the need for a different design and development phase
for each new gadget on the market.
Almost every new client these days wants a mobile version of their website. It’s practically
essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook,
Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll
likely need to design for a number of additional inventions.
When will the madness stop? It won’t, of course.
Almost every new client these days wants a mobile version of their website. It’s practically
essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook,
Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll
likely need to design for a number of additional inventions. When will the madness stop? It
won’t, of course.
lOMoAR cPSD| 11243712
In the field of Web design and development, we’re quickly getting to the point of being
unable to keep up with the endless new resolutions and devices. For many websites, creating
a website version for each resolution and new device would be impossible, or at least
impractical. Should we just suffer the consequences of losing visitors from one device, for
the benefit of gaining visitors from another? Or is there another option?
6.2 The Concept Of Responsive Web Design
Ethan Marcotte wrote an introductory article about the approach, Responsive Web Design,
for A List Apart. It stems from the notion of responsive architectural design, whereby a room
or space automatically adjusts to the number and flow of people within it:
"Recently, an emergent discipline called “responsive architecture” has begun asking how
physical spaces can respond to the presence of people passing through them. Through a
combination of embedded robotics and tensile materials, architects are experimenting with art
installations and wall structures that bend, flex, and expand as crowds approach them. Motion
sensors can be paired with climate control systems to adjust a room’s temperature and
ambient lighting as it fills with people. Companies have already produced “smart glass
lOMoAR cPSD| 11243712
technology” that can automatically become opaque when a room’s occupants reach a certain
density threshold, giving them an additional layer of privacy."
Transplant this discipline onto Web design, and we have a similar yet whole new idea. Why
should we create a custom Web design for each group of users; after all, architects don’t
design a building for each group size and type that passes through it? Like responsive
architecture, Web design should automatically adjust. It shouldn’t require countless custommade solutions for each new category of users. Obviously, we can’t use motion sensors and
robotics to accomplish this the way a building would. Responsive Web design requires a
more abstract way of thinking. However, some ideas are already being practiced: fluid
layouts, media queries and scripts that can reformat Web pages and mark-up effortlessly (or
automatically). But responsive Web design is not only about adjustable screen resolutions
and automatically resizable images, but rather about a whole new way of thinking about
design. Let’s talk about all of these features, plus additional ideas in the making.
6.3 Adjusting Screen Resolution
With more devices come varying screen resolutions, definitions and orientations. New
devices with new screen sizes are being developed every day, and each of these devices may
be able to handle variations in size, functionality and even color. Some are in landscape,
others in portrait, still others even completely square. As we know from the rising popularity
of the iPhone, iPad and advanced smartphones, many new devices are able to switch from
portrait to landscape at the user’s whim. How is one to design for these situations?
lOMoAR cPSD| 11243712
In addition to designing for both landscape and portrait (and enabling those orientations to
possibly switch in an instant upon page load), we must consider the hundreds of different
screen sizes. Yes, it is possible to group them into major categories, design for each of them,
and make each design as flexible as necessary. But that can be overwhelming, and who
knows what the usage figures will be in five years? Besides, many users do not maximize
their browsers, which itself leaves far too much room for variety among screen sizes.
Morten Hjerde and a few of his colleagues identified statistics on about 400 devices sold
between 2005 and 2008. Below are some of the most common:
Since then even more devices have come out. It’s obvious that we can’t keep creating custom
solutions for each one. So, how do we deal with the situation?
6.4 Part of the solution: Flexible Everything
A few years ago, when flexible layouts were almost a “luxury” for websites, the only things
that were flexible in a design were the layout columns (structural elements) and the text.
Images could easily break layouts, and even flexible structural elements broke a layout’s
form when pushed enough. Flexible designs weren’t really that flexible; they could give or
take a few hundred pixels, but they often couldn’t adjust from a large computer screen to a
netbook.
Now we can make things more flexible. Images can be automatically adjusted, and we have
workarounds so that layouts never break (although they may become squished and illegible
in the process). While it’s not a complete fix, the solution gives us far more options. It’s
lOMoAR cPSD| 11243712
perfect for devices that switch from portrait orientation to landscape in an instant or for when
users switch from a large computer screen to an iPad.