Industrial Report

lOMoARcPSD|14530661
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION,MUMBAI

MAHARASHTRA(INDIA)
Vishwa Technologies
Implant Training Report Submitted in partial fulfilment
For the award of the
Diploma in Engineering
Submitted by
ENROLLMENT NO. NAME OF STUDENT EXAM SEAT NO
2012140047 Onkar B Kolekar
Mode of Implant
Training Virtual
Training
Nanasaheb Mahadik Polytechnic Institute, 134 , Somwar Peth,Opp Kanya

Peth, Sangli 415409 Prashala, Karad (Pin-415 110),
State: Maharashtra, India.
Website: http://www.vishwatechs.com/
Mentor Industry Supervisor
Mr. Kishor Shinde Mr. Vishal Pawar
Downloaded by Onkar Kolekar (kolekaronkar01@gmail.com)

lOMoARcPSD|14530661
Nanasaheb Mahadik Polytechnic Institute , Peth,

Sangli 415409 Approved by AICTE, New Delhi
DTE Mumbai and Affiliated to MSBTE
Mumbai
DECLARATION
I hereby declare that the discussion entitled Vishwa Technologies

being submitted by us towards the partial fulfillment of the Diploma in Engineering,
in the Department of Computer Engineering is aim plant training work carried by
me under the supervision of Mr. Kishor Shinde and Industry resource person Co-
Guide Mr. Vishal Pawar designation and have not been submitted anywhere else.
We will be so responsible if any kind of plagiarism is found.
Enrollment No Name Of Student Signature
2012140047 Onkar B Kolekar
Place: NMPI, Peth.
Date:13 August 2022

lOMoARcPSD|14530661
Certificate of Completion of Industrial Training
This is to certify that Mr. Onkar B Kolekar with Enrolment No.

2012140047 has successfully completed Industrial Training (22049) in
Vishwa Technologies 4/07/2022 to13/08/2022 for partial fulfillment
towards completion of Diploma in Computer engineering from NMPI,

Peth 415409
The matter presented in this Implant Training report is an authentic
record of our student work carried out during training period, under the
supervision of Mr. Kishor Shinde Faculty, Head of Department Mr.
Kishor Shinde and under the monitoring of Mr. Vishal Pawar, of Vishwa
Technologies. Also, it has not been submitted by us for the award of any
other diploma elsewhere.
Mr. Kishor Mr. Vishal Pawar Mr. Kishor Shinde

Shinde Director of Vishwa Head of Department
Training Mentor, Technologies Karad. Department Of Computer
Department Of Computer Engineering,
Engineering, Faculty Of NMPI, Peth
Faculty Of NMPI, Peth
External-Examiner Dean Director

Department Of computer Nanasaheb mahadik NMPI, Peth.
Polytechnic, Peth
Engineering
Appointed By MSBTE, Faculty Of NMPI, Peth
Mumbai
Place: NMPI, Peth.

lOMoARcPSD|14530661
ACKNOWLEDGEMENT
We like to share our sincere gratitude to all those who help us in completion
of this Implant Training. During the work we faced many challenges due to our lack
of knowledge and experience but these people help us to get over from all the
difficulties and in final compilation of our idea to a shaped sculpture.
I am indeed grateful to Head of Department of Computer Engineering.

Mr. Kishor Shinde for being an effective source of inspiration.
We would like to thank Mr. Kishor Shinde sir as well as Mr. Vishal Pawar sir
for his governance and guidance, because of which our whole team was able to
learn the minute aspects of a Computer Engineering.
We would also like to show our gratitude to our department faculties Mr.
Kishor Shinde of our Computer Engineering department for their continuous help and
monitoring during the work. I am thankful to supporting staff of our department as
well as Vishwa Technologies, for their help and support towards my training.
In the last we would like to thank the management of Nanasaheb Mahadik

Polytechnic Institute, Peth for providing us such an opportunity to learn from these
experiences.
We are also thankful to our whole class and most of all to our parents who
have inspired us to face all the challenges and win all the hurdles in life.
Thank you All.
ENROLLMENTNO. 2012140047
NAME OF STUDENT Onkar B Kolekar

lOMoARcPSD|14530661
ABSTRACT
Industrial training offers the students with important practical knowledge .

The main objective of the industrial training is to provide the best and relevant
theoretical knowledge, practical knowledge and soft skills to gain in a
particular time period.
Industrial training is an important phase of a student life. A well planned

properly executed and evaluated industrial training helps a lot in developing a
professional attitude. It develops an awareness of industrial approach to
problem solving, based on a broad understanding of process and mode of
operation of organization. The aim and motivation of this industrial training is
to receive discipline, skills, teamwork and technical knowledge through a
proper training environment, which will help me, as a student in the field of
computer Engineering.
In this training we have learn lot of about computer engineering, like scope of
computer engineering and Web Development

lOMoARcPSD|14530661
TABLE OF CONTENTS
CHAPTER 1 INTRODUCTION TO HTML

WHAT IS HTML
HISTORY OF HTML
CHAPTER 2 INTRODUCTION TO CSS

WHAT IS CSS
Advantages OF CSS
CHAPTER 3 INTRODUCTION TO JAVASCRIPT

WHAT IS JavaScript
JavaScript and Java comparison
CHAPTER 4 INTRODUCTION TO BOOTSTRAP

WHAT IS BOOTSTRAP
Download and understand file structure
CHAPTER 5 WHAT IS JQUERY?
CHAPTER 6 RSPONSIVE DESIGN
WHAT IS Responsive Web Design
Concept
CHAPTER 7 Project: creating dynamic and responsive website for a restaurant
Introduction
HTML
CSS
JAVASCRIPT
CHAPTER 8 Conclusion

lOMoARcPSD|14530661
CHAPTER 1 INTRODUCTION TO HTML
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 example of a paragraph in HTML.</p>
</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 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.

lOMoARcPSD|14530661
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.
• In December 1992, Marc Andreessen of Mosaic team (an early web browser) introduced img tag
in the HTML document.
• March 1993: Lou Montello 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.

lOMoARcPSD|14530661
• 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.
• 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 4.01 which we have discussed in our HTML
tutorials.
Development of HTML 5 is underway but developers have already started using some
of it's features.
CHAPTER 2 INTRODUCTION TO CSS

What is CSS

lOMoARcPSD|14530661
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.
How CSS can be associated with an HTML web page
There are three ways to attach CSS to an HTML web page.
1. Writing CSS code in a separate file (CSS files are saved with .css extension) and
including that CSS file in head section of an HTML page using <link> element.

lOMoARcPSD|14530661
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. Consistency: CSS can provide a consistent presentation for all of the pages of a
web site.
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.

lOMoARcPSD|14530661
CHAPTER 3 INTRODUCTION TO JavaScript

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.
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.
JavaScript compares to Java

lOMoARcPSD|14530661
JavaScript Java
JavaScript is used for front-end web Java is used as a back-end language within
development (for example field level a web environment.
validation 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 Class-based. Objects are divided into

types of objects. Inheritance is through classes and instances with all inheritance
the prototype mechanism, and properties through the class hierarchy. Classes and
and methods can be added to any object instances cannot have properties or
dynamically. methods added dynamically.
Variable data types are not declared Variable data types must be declared as
(loose typing). Java maintains strong type checking.
Cannot automatically write to hard disk. Cannot automatically write to hard disk.
CHAPTER 4 INTRODUCTION TO BOOTSTRAP
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,

lOMoARcPSD|14530661
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.
Download and understand file structure

You can download Bootstrap Version 3.0.0 from
https://github.com/twbs/bootstrap/archive/v3.0.0.zip (full) or
https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-
3.0.0dist.zip(short). We have used the first one, but you may use the second
one too.

lOMoARcPSD|14530661
Moreover, our code which has given to be downloaded contains a bootstrap code folder
downloaded from the first link. This also contains the custom.css file we have used to
customize Bootstrap's original CSS.
Once unzipped, you would find that there are several files and folders are available within
the root folder bootstrap-3.0.0.
The main CSS files - bootstrap.css and minified version of it bootstrap-min.css are available
within 'CSS' folder which is placed within 'dist.' folder under bootstrap-3.0.0.
Within 'dist.' there is a 'is' folder, which contains the main JavaScript file bootstrap.js and a
minified version of it.
There is a separate 'js' folder within the root, which contains different JavaScript plugins in
separate files.
Another 'js' folder is found within 'assets' folder within the root. This holds html5shiv.js which
is HTML5 shim, used for IE8 support. There is also respond.min.js file, used for supporting
media queries in IE8. This folder also contains jquery.js on which Bootstrap's js plugins
depends.
There is an 'icon' folder within the same containing icons for favicon and icons for various
mobile devices.
'css' folder in the same path contains css files for documentation.
'_includes' and '_layouts' folder contains some default layout structure files which may be
useful for rapid prototyping.
'less' folder within root contains several .less files. If you are going for less based
development, these files are useful for you.
Within the root folder. there are lies several files. Some of them are HTML files which can
be used for basic prototyping. Besides, there is bower.json, browserstack.json used for
Bower based compilation. There is also composer.json and a YAML file _config.yml.
Besides downloading from the link given, you may also compile all CSS, js files with the
following command -
$ bower install bootstrap
You may clone the Bootstrap's Git repo git clone
git://github.com/twbs/bootstrap.git
For this tutorial, we have simple downloaded the Zip file and will be working out of that.

lOMoARcPSD|14530661
Once you finish this tutorial, we encourage you to install with bower and let us know how it
works.
NetDNA hosts compiled and minified version of Bootstrap CSS, Js, and optional theme css.
You may include them like following

<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 <link
rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/
bootstraptheme.min.css">


<script
src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></scri
pt>
Develop with Bootstrap v3.0.0
Basic HTML
Following is the basic HTML structure we will be using for our project
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap V3 template</title>
<meta name="viewport" content="width=device-width, initial-scale=1,

maximumscale=1, user-scalable=0">

<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet"

media="screen">

</head>

lOMoARcPSD|14530661
<body>
<h1>Hello, world!</h1>

<script src="//code.jquery.com/jquery.js"></script>

<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
Note that
html5shiv.js and respond.min.js are added in this template for IE8 support. Adding
these files are to Bootstrap version 3.
We have placed the bootstrap-3.0.0 folder within twitter-bootstrap folder which is placed
within our web server's root. All html files we will be creating will be placed within twitter
bootstrap folder. The purpose of stating this is nothing but to ease your deployment
process.
Customization
We are going to customize the out of the box styles of the Bootstrap's CSS. So, without
disturbing the original CSS file, which is within dist folder of the bootstrap-3.0.0, we are
going to create a separate CSS file called custom.css in the same folder. We will then
include that CSS file within our HTML files just bellows the original CSS file. This way, we
will be able to override the default styles when you want, but, if Bootstrap upgrades itself,
the original CSS file can also upgrade without disturbing our own customization. We
suggest you to follow this method in your development process also.
Creating navigation
For creating navigation will add the following code in our HTML file, just after the opening
body tag.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><a href="new.html" class="navbar-brand"> <img

lOMoARcPSD|14530661
src="logo.png"></a></li>
<li class="active"><a href="#">Home</a></li>
<li><a href="price.html">Price</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social<b

class="caret"></b></a>
<ul class="dropdown-menu">
<li class="socials"><g:plusone annotation="inline"

width="150"></g:plusone></li>
<li class="socials"><div class="fb-like" data-

href="https://developers.facebook.com/docs/plugins/" data-width="The pixel width of
the plugin" data-height="The pixel height of the plugin" data-colorscheme="light"
data-layout="standard" data-action="like" data-show-faces="true"
datasend="false"></div></li>
<li class="socials"><a href="https://twitter.com/share"

class="twittershare-button">Tweet</a>
<script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);j
s.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs
);}}(document,"script","twitter-wjs");</script></li>
</ul>
</li>
</ul>
</nav>
For navigation, Bootstrap uses 'navbar' class in the container level. So, it is assigned to the
nav element which holds the entire navigation.
We have used 'navbar-inverse' class along with to change the default color of the navigation
bar dark instead of the default lighter one. 'Navbar-fixed-top' class makes sure that the
navbar stays fixed in the top position when we scroll down our HTML page.
Using role="navigation" is new in Bootstrap V3.0.0 while creating navigation. Bootstrap

recommends to use this for navbars for accessibility purpose.

lOMoARcPSD|14530661
At this point, we have added 'padding-top: 80px;' to the body in the custom.css file. Number
pf pixels you add as top padding to the body may vary, but unless you do so, the top part of
our content after navbar will be hidden.
Within the container nav, we have an unordered list with class 'nav' and 'navbar-nav'. Within
this unordered list. each list item holds a link in the navigation.
'navbar-brand' class is used to present the brand name. We have used an image for that.
Since our image's height is more than the line height of the navbar, we made some
customization here. We have increased the 'line-height' property of the '.navbar-nav>li>a' to
50px instead of default 20px. We have also made the font size 16px.
For the right most link, we have added dropdown. For that 'dropdown' class is added to the
associated li, just after that, an anchor is added having two classes 'dropdown-toggle' and
'caret'. This anchor actually holds the anchor text social in our project. This li then holds an
unordered list within this and again each list item of that nested list holds a link presented in
the dropdown.
We have added social plugins in the dropdown. The first li holds a markup for Google Plus,
the second li holds a markup for Facebook and third li holds markup and some js script for
displaying Twitter button.
Additionally, you have to add the following markup and script just after the opening body
tag, to make the Facebook button to work
<div id="fb-root
"></div>
(function
(d, s, id) {
var js, fjs= d.getElementsByTagName

(s)[0];
if (d.getElementById
(id)) return
;
js= d.createElement
(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"
;
fjs
.parentNode
.insertBefore
(js, fjs);
}(document
, 'script'
, 'facebook-jssdk'
));
To make Twitter Button work, we have added the following script just before the closing
body tag

lOMoARcPSD|14530661
(function
() {
var po = document
.createElement
('script'
); po.type= 'text/javascript'
; po.async
= true;
po
.src = 'https://apis.google.com/js/plusone.js'
;
var s = document
.getElementsByTagName
('script'
)[0]; s.parentNode
.insertBefore
(po,
s);
})();
We used the following style to add some adding to the social buttons with 'socials' class
.socials {
padding: 10px;
This completes our navigation.
Creating slideshow with carousal
For creating a slideshow just below the navbar, on the home page of our project. we will use
the following markup
<div id="carousel-example-generic" class="carousel slide">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"

class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-
target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
<img src="computer.jpg" alt="...">

lOMoARcPSD|14530661
<div class="carousel-caption">
<h1>Large Desktops are everywhere</h1> <p><button class="btn btn-
success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="mobile.jpg" alt="...">
<div class="carousel-caption">
<h1>Mobiles are outnumbering desktops</h1>

lOMoARcPSD|14530661
<p><buttonclass
="btn btn-success btn-lg
">Try 30 day trial</p>
now
</div>
</div>
<div class"
= item">
<img src="cloud1.jpg
" alt="...">
<div class
="carousel-caption
">
<h1>Enterprises are adopting Cloud computing

</h1> fast
<p><buttonclass"
= btn btn-success btn-lg
">Try 30 day trial</now
p>
</div>
</div>
</div>

<a class
="left carousel-control
" href="#carousel-example-generic
" data-
slide"
= prev">
<spanclass"
= icon-prev
"></span>
</a>
<a class
="right carousel-control
" href="#carousel-example-generic
" data-
slide="next">
<spanclass
="icon-next
"></span>
</a>
</div>
</div>
There are four parts in the Carousal. The main container is defined using a div tag and
'carousel slide' class is assigned to it.
Then there is an ordered list having 'carousel-indicators' class associated with it. Each of the
list item in this ol refers to a slide. class 'active' is assigned to the slide which loads by
default when the page loads. When rendered, you can see them as tiny circles just below
the caption.

lOMoARcPSD|14530661
Then, each slide (image) is placed within a div tag and class 'item' is assigned to it. Each of
these items again nests a div with class 'carousel-caption' assigned to it. carousel-caption
holds some markup which is displayed as captions along with the image. We have an h1
and a button wrapped in a paragraph here, but you may have your own markup.
The last part is for next previous and slide/slide by control. This is defined using 'left' and
'carousel-control' for previous and 'right' and 'carousel-control' classes for next.
'icon-prev' and 'icon-next' classes are used for next and previous icons.
We have made some customization in the default carousal. We wanted the captions,
indicators, and next/previous icons to be rendered some pixels above its default position.
For that, we have added the following styles in our custom.css file
.carousel-inner .item .carousel-caption {
position:absolute; top: 200px
.carousel-indicators {
position: absolute;
top: 400px; }
.navbar { margin-
bottom:0;
.navbar-nav>li>a { line-
height: 50px; font-size: 16px
We have also customized h1 by adding a bottom margin of 30 pixels to it.

h1 {
margin-bottom: 30px

lOMoARcPSD|14530661
Responsive Image
You might have already noticed that for each of the images in the slideshow, we have used
'img-responsive' class. This is a new feature in Bootstrap v3.0.0. Using the 'img-responsive'
class along with img tag, Bootstrap makes the images responsive.
Creating Grid
Below the slideshow, we have placed our content using grids. We opened the grid with a div
with 'container' class. Note that we are going to develop a responsive website and unlike
previous versions of Bootstrap, here, we have a single class for container and the is
responsive by default.
Container div nests number of divs (three in the first row and six in the second row) with
class 'row' associated with them to create rows of the Bootstrap's grid.
Each row then holds divs with class 'col-x-y' to create columns. The value of x can be xs for
mobile devices, sm for tablets, md for laptops and smaller desktop screens, and lg for large
desktop screens. it takes a mobile first approach. The value of y can be any positive integer
but a total number of columns in a grid must not exceed 12. In our project, we have used lg
for the sake of simplicity but since we have done so, you may have a stacked experience
while watching the project site in mobile or tablets.
In a couple of days we will have a complete tutorial on Grid system of Twitter Bootstrap
V3.0.0 and there we will explore its awesomeness of the responsive capabilities.
In this example, we have wanted three equal width columns in our first row, so we used
'collg-4' for all of the columns. In the second row, we have made it 'col-lg-2' since we wanted
six columns.
Following is the markup for grid containing two rows, the first row has three columns and the
second row has six columns.
<div class="row barone">
<div class="col-lg-2">
<p><img src="https://www.w3resource.com/images/w3resourcelogo.gif"></p>
</div>
<p><img src="https://w3resource.com/update-images/php.png"></p> </div>

lOMoARcPSD|14530661
<p><img src="https://w3resource.com/update-images/mysql-logo.jpg"></p>
</div>
<p><img src="https://w3resource.com/update-images/javascript-logo.png"></p>
</div>
<p><img src="https://w3resource.com/update-images/java.png"></p>
</div>
<p><img src="https://w3resource.com/update-images/postgresql.png"></p>
</div>
</div>
We ended up the grid with a hr and a footer with following markup

<hr>
<p>Copyright@2013-14 by ToDo App.</p>
Using tables
In the price.html page of our project, we are using a table to render a price table. We used
the following markup
<table class="table table-bordered">
<thead>
<tr>
<th>Features</th>
<th>Individual</th>
<th>Small Team</th>
<th>Medium Team</th>

lOMoARcPSD|14530661
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td><h3>No. Of users</h3></td>
<td><span class="badge">One</span></td>
<td><span class="badge">Five</span></td>
<td><span class="badge">Fifteen</span></td>
<td><span class="badge">Unlimited</span></td>
</tr>
<tr>
<td><h3>Pro training</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Forum Support</h3></td>
</tr>
<tr>
<td><h3>In person support</h3></td>

lOMoARcPSD|14530661
</tr>
<tr>
<td><h3>Weekly webinars</h3></td>
</tr>
<tr>
<td><h3>Price</h3></td>
<td><button type="button" class="btn btn-warning

btnlg">$9/Month</button></td>



</tr>
<tr>
<td></td>
<td><button type="button" class="btn btn-success btn-lg">Buy

now</button></td>

lOMoARcPSD|14530661
<td><button type="button" class="btn btn-success btn-lg"">Buy

now</button></td>

now</button></td>

now</button></td>
</tr>
</tbody>
</table>
Two classes 'table' and 'table-bordered' are used which are default form Bootstrap's original
css file. But we have made some customizations to make the table heads look different by
adding following css in our customize.css file
th {
background-color: #428bca;
color: #ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
Using badges
We have used class 'badge' for displaying some texts within our table. We have customized
badge class also with following css
.badge { background-color: #428bca; color: #fff; font-
size: 22px;
For this and contact.html page, we have added another css rule in customize.css
.container > h1 { text-align: center;

lOMoARcPSD|14530661
This makes the h1 aligned center.
Using form
In the contact.html file we have created three columns and in the first column, we have
embedded a from. We have used default styles for this.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<label for="name" class="col-lg-2 control-label">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<label for="country" class="col-lg-2 control-label">Country</label>
<select>

lOMoARcPSD|14530661
<option>USA</option>
<option>India</option>
<option>UK</option>
<option>Autralia</option>
</select>
</div>
</div>
<label for="desc" class="col-lg-2 control-label">Message</label>
<textarea rows="5" cols="50"></textarea>
</div>
</div>
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
'form-horizontal' class places the form controls horizontally. Note that there is role="form"
added for accessibility. This is anew feature of version 3.0.0.
For placing each of the form control Bootstrap 3.0.0 uses a new 'form-group' class.
In the second column of the grid in this page, we have placed some text simply.
Adding Google map
In the third column of the grid in the contact.html page, we have added Google Map. For
that, we have used the following markup

lOMoARcPSD|14530661
<div id="map_canvas"></div>
</div>
And the following js, which has been added at the top the HTML file within head
function initialize() { var map_canvas =
document.getElementById('map_canvas'); var map_options
= { center: new google.maps.LatLng(23.244066,
87.861276), zoom: 8, mapTypeId:
google.maps.MapTypeId.ROADMAP
} var map = new google.maps.Map(map_canvas,
map_options)
} google.maps.event.addDomListener(window, 'load',
initialize);
And you must add the following script tag before the said js
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Copy
You have to add following style in custom.css for the map to be rendered properly
#map_canvas { width: 400px; height: 400px;
This is how we have created our first simple project based on Twitter Bootstrap V3.0.0. But
we have just scratched the surface. This series will update all the Twitter Bootstrap Tutorial
we have to version 3.0.0 exploring new techniques and customizations.

lOMoARcPSD|14530661
CHAPTER 5 WHAT IS JQUERY
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.
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.
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

lOMoARcPSD|14530661
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 o IBM

o Netflix

lOMoARcPSD|14530661
CHAPTER 6 RSPONSIVE DESIGN
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.

lOMoARcPSD|14530661
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?
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 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

lOMoARcPSD|14530661
require countless custom-made 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.
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?
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:

lOMoARcPSD|14530661
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?
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 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.

lOMoARcPSD|14530661
CHAPTER 7 Project: creating dynamic and responsive

website for a restaurant
Introduction : In this section I will talk about the project I created during my
training and I will code a website which will be dynamic and responsive. I
will use HTML, CSS, Javascript and also Bootsrap framework.
Here are screenshots of my website in desktop browser and mobile browser.
Large Device browser view:

lOMoARcPSD|14530661
Small device view:

lOMoARcPSD|14530661

lOMoARcPSD|14530661
This explains responsiveness of my website and also one code refers to different
views in different browser sizes.

lOMoARcPSD|14530661
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David Chu's China Bistro</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet'
type='text/css'>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<a href="index.html"><h1>David Chu's China Bistro</h1></a>
<p>
<img src="images/star-k-logo.png" alt="Kosher certification">
<span>Kosher Certified</span>
</p>
</div>
<button id="navbarToggle" type="button" class="navbar-toggle collapsed"

data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>

lOMoARcPSD|14530661
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">

<ul id="nav-list" class="nav navbar-nav navbar-right">
<li id="navHomeButton" class="visible-xs active">
<a href="index.html">
<span class="glyphicon glyphicon-home"></span> Home</a>
</li>
<li id="navMenuButton">
<a href="#" onclick="$dc.loadMenuCategories();">
<span class="glyphicon glyphicon-cutlery"></span><br class="hiddenxs">
Menu</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br
class="hiddenxs"> About</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span><br
class="hiddenxs"> Awards</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:410-602-5008">
<span>410-602-5008</span></a><div>* We Deliver</div>
</li>
</ul>
</div>
</div>
</nav>
</header>

lOMoARcPSD|14530661
<div id="call-btn" class="visible-xs">

<a class="btn" href="tel:410-602-5008">
<span class="glyphicon glyphicon-earphone"></span> 410-602-
5008
</a>
</div>
<div id="xs-deliver" class="text-center visible-xs">* We Deliver</div>
<div id="main-content" class="container"></div>
<footer class="panel-footer">
<div class="container">
<div class="row">
<section id="hours" class="col-sm-4">
<span>Hours:</span><br>
Sun-Thurs: 11:15am - 10:00pm<br>
Fri: 11:15am - 2:30pm<br>
Saturday Closed
<hr class="visible-xs">
</section>
<section id="address" class="col-sm-4">
<span>Address:</span><br>
7105 Reisterstown Road<br>
Baltimore, MD 21215
<p>* Delivery area within 3-4 miles, with minimum order of $20 plus $3
charge for all deliveries.</p>
<hr class="visible-xs">
</section>
<section id="testimonials" class="col-sm-4">
<p>"The best Chinese restaurant I've been to! And that's saying a lot, since
I've been to many!"</p>
<p>"Amazing food! Great service! Couldn't ask for more! I'll be back again
and again!"</p>
</section>
</div>

lOMoARcPSD|14530661
<div class="text-center">© Copyright David Chu's China Bistro

2016</div>
</div>
</footer>


<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-utils.js"></script>
<script src="js/script.js"></script>
</body>
</html>
CSS CODE:
body { font-
size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
/** HEADER **/ #header-nav

{ background-color:
#f6b319; border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/restaurant-logo_large.png') no-repeat;
width: 150px; height: 150px; margin: 10px 15px 10px 0;
}

lOMoARcPSD|14530661
.navbar-brand {
padding-top: 25px;
}
.navbar-brand h1 { /* Restaurant name */
font-family: 'Lora', serif; color: #557c3e;
font-size: 1.5em; text-transform:
uppercase; font-weight: bold; text-
shadow: 1px 1px 1px #222;
margin-top: 0; margin-
bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus { text-
decoration: none;
}
.navbar-brand p { /* Kosher cert */
color: #000; text-transform:
uppercase; font-size: .7em;
margin-top: 15px;
}
.navbar-brand p span { /* Star-K */
vertical-align: middle;
}
#nav-list { margin-
top: 10px;
}
#nav-list a
{ color:
#951C49;
text-align: center;
}
#nav-list a:hover {
background: #E7E7E7;
}
#nav-list a span {

lOMoARcPSD|14530661
font-size: 1.8em;
}
#phone {
margin-top: 5px;
}
#phone a { /* Phone number */
text-align: right;
padding-bottom: 0;
}
#phone div { /* We Deliver */
color: #557c3e; text-align:
right;
padding-right: 15px;
}
.navbar-header button.navbar-toggle, .navbar-header .icon-bar

{ border: 1px solid #61122f;
}
.navbar-header button.navbar-toggle {
clear: both;
margin-top: -30px;
}
/* END HEADER */
/* FOOTER */ .panel-
footer { margin-top:
30px; padding-top: 35px;
padding-bottom: 30px;
background-color: #222;
border-top: 0;
}
.panel-footer div.row {
margin-bottom: 35px;
}
#hours, #address {

lOMoARcPSD|14530661
line-height: 2;
}
#hours > span, #address > span {
font-size: 1.3em;
}
#address p
{ color: #557c3e;
font-size: .8em;
line-height: 1.8;
}
#testimonials {
font-style: italic;
}
#testimonials p:nth-child(2) {
margin-top: 25px;
}
/* END FOOTER */
/* HOME PAGE */
.container .jumbotron { box-
shadow: 0 0 50px #3F0C1F;
border: 2px solid #3F0C1F;
}
#menu-tile, #specials-tile, #map-tile {

height: 250px; width: 100%;
margin-bottom: 15px; position:
relative; border: 2px solid #3F0C1F;
overflow: hidden;
}
#menu-tile:hover, #specials-tile:hover, #map-tile:hover { box-
shadow: 0 1px 5px 1px #cccccc;
}
#menu-tile {

lOMoARcPSD|14530661
background: url('../images/menu-tile.jpg') no-repeat; background-

position: center;
}
#specials-tile {
background: url('../images/specials-tile.jpg') no-repeat; background-
position: center;
}
#menu-tile span, #specials-tile span, #map-tile span {
position: absolute; bottom: 0;
right: 0; width: 100%;
text-align: center; font-
size: 1.6em; text-
transform: uppercase;
color: #fff;
opacity: .8;
}
/* END HOME PAGE */
/* MENU CATEGORIES PAGE */

.category-tile { position:
relative; border: 2px solid
#3F0C1F; overflow:
hidden; width: 200px;
height: 200px;
margin: 0 auto 15px;
}
.category-tile span
{ position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align:
center; font-
size: 1.2em;

lOMoARcPSD|14530661
text-transform:
uppercase;
color: #fff; opacity: .8;
}
.category-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}
#menu-categories-title + div {
}
/* END MENU CATEGORIES PAGE */
/* SINGLE CATEGORY PAGE */ .menu-item-tile

{
}
.menu-item-tile hr {
width: 80%;
}
.menu-item-tile .menu-item-price {
font-size: 1.1em; text-align: right;
margin-top: -15px;
margin-right: -15px;
}
.menu-item-tile .menu-item-price span {
font-size: .6em;
}
.menu-item-photo
{ position: relative;
border: 2px solid #3F0C1F;
overflow: hidden;
padding: 0;
margin-right: -15px; margin-
left: auto; margin-bottom: 20px;

lOMoARcPSD|14530661
max-width: 250px;
}
.menu-item-photo div
{ position: absolute;
bottom: 0; right: 0; width:
80px; background-color:
#557c3e; text-align: center;
}
.menu-item-description {
}
h3.menu-item-title {
margin: 0 0 10px;
}
.menu-item-details { font-
size: .9em;
font-style: italic;
}
/* END SINGLE CATEGORY PAGE */
/********** Large devices only **********/

@media (min-width: 1200px)
{ .container .jumbotron {
background: url('../images/jumbotron_1200.jpg') no-repeat;
height: 675px;
}
}
/********** Medium devices only **********/

@media (min-width: 992px) and (max-width: 1199px)
{ /* Header */
#logo-img {
background: url('../images/restaurant-logo_medium.png') no-repeat;
width: 100px; height: 100px;
margin: 5px 5px 5px 0;

lOMoARcPSD|14530661
}
/* End Header */
/* Home Page
*/ .container .jumbotron {
height: 558px;
}
/* End Home Page */
}
/********** Small devices only **********/

@media (min-width: 768px) and (max-width: 991px) {
/* Home Page
*/ .container .jumbotron {
height: 432px;
}
/* End Home Page */
}
/********** Extra small devices only **********/

@media (max-width: 767px) {
/* Header */ .navbar-
brand { padding-top:
10px;
height: 80px;
}
padding-top: 10px;
font-size: 5vw; /* 1vw = 1% of viewport width */
}
.navbar-brand p { /* Kosher cert */
font-size: .6em;
margin-top: 12px;
}

lOMoARcPSD|14530661
.navbar-brand p img { /* Star-K */

height: 20px;
}
#collapsable-nav a { /* Collapsed nav menu text */

font-size: 1.2em;
}
#collapsable-nav a span { /* Collapsed nav menu glyph */ font-
size: 1em;
margin-right: 5px;
}
#call-btn > a { font-size:

1.5em; display: block;
margin: 0 20px; padding:
10px; border: 2px solid #fff;
background-color: #f6b319;
color: #951c49;
}
#xs-deliver { margin-
top: 5px; font-
size: .7em; letter-
spacing: .1em;
text-transform: uppercase;
}
/* End Header */
/* Footer */ .panel-
footer section { margin-
bottom: 30px; text-
align: center;
}
.panel-footer section:nth-child(3) {
margin-bottom: 0; /* margin already exists on the whole row */
}

lOMoARcPSD|14530661
.panel-footer section hr
{ width: 50%;
}
/* End Footer */
/* Home Page
*/ .container .jumbotr
on { margin-top:
30px;
padding: 0;
}
#menu-tile, #specials-tile
{ width: 360px;
}
.menu-item-photo {
margin-right: auto;
}
.menu-item-tile .menu-item-price {
text-align: center;
}
.menu-item-description {
text-align: center;;
}
}
/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
@media (max-width: 479px) {
/* Header */
padding-top: 5px; font-
size: 6vw;
}
/* End Header */

lOMoARcPSD|14530661
/* Home page */
#menu-tile, #specials-tile
{ width: 280px;
}
.col-xxs-12
{ position: relative;
min-height: 1px;
padding-left: 15px;
float: left;
width: 100%;
}
}
JAVASCRIPT CODE:
$(function () { // Same as document.addEventListener("DOMContentLoaded"...
// Same as
document.querySelector("#navbarToggle").addEventListener("blur",...
$("#navbarToggle").blur(function (event) {
var screenWidth = window.innerWidth; if
(screenWidth < 768) {
$("#collapsable-nav").collapse('hide');
}
});
});
(function (global) {
var dc = {};
var homeHtmlUrl = "snippets/home-snippet.html";

var allCategoriesUrl =

lOMoARcPSD|14530661
"https://davids-restaurant.herokuapp.com/categories.json"; var
categoriesTitleHtml = "snippets/categories-title-snippet.html"; var
categoryHtml = "snippets/category-snippet.html"; var
menuItemsUrl =
"https://davids-restaurant.herokuapp.com/menu_items.json?category=";
var menuItemsTitleHtml = "snippets/menu-items-title.html"; var
menuItemHtml = "snippets/menu-item.html";
// Convenience function for inserting innerHTML for 'select'

var insertHtml = function (selector, html) { var targetElem
= document.querySelector(selector);
targetElem.innerHTML = html;
};
// Show loading icon inside element identified by 'selector'.
var showLoading = function (selector) { var html = "<div
class='text-center'>"; html += "<img src='images/ajax-
loader.gif'></div>"; insertHtml(selector, html);
};
// Return substitute of '{{propName}}' //

with propValue in given 'string'
var insertProperty = function (string, propName, propValue) {
var propToReplace = "{{" + propName + "}}"; string = string
.replace(new RegExp(propToReplace, "g"), propValue);
return string;
};
// Remove the class 'active' from home and switch to Menu button
var switchMenuToActive = function () { // Remove 'active' from
home button
var classes = document.querySelector("#navHomeButton").className; classes =
classes.replace(new RegExp("active", "g"), "");
document.querySelector("#navHomeButton").className = classes;
// Add 'active' to menu button if not already there

classes = document.querySelector("#navMenuButton").className;
if (classes.indexOf("active") === -1) { classes += " active";

lOMoARcPSD|14530661
document.querySelector("#navMenuButton").className = classes;
}
};
// On page load (before images or CSS)

document.addEventListener("DOMContentLoaded", function (event) {
// TODO: STEP 0: Look over the code from

// *** start ***
// to
// *** finish *** //
below.
// We changed this code to retrieve all categories from the server instead of
// simply requesting home HTML snippet. We now also have another function //
called buildAndShowHomeHTML that will receive all the categories from the
server
// and process them: choose random category, retrieve home HTML snippet,
insert that
// random category into the home HTML snippet, and then insert that snippet into
our
// main page (index.html).
//
// TODO: STEP 1: Substitute [...] below with the *value* of the function
buildAndShowHomeHTML,
// so it can be called when server responds with the categories data.
// *** start ***

// On first load, show home view showLoading("#main-
content"); $ajaxUtils.sendGetRequest( allCategoriesUrl,
buildAndShowHomeHTML, // ***** <---- TODO: STEP 1: Substitute [...] ******
true); // Explicitely setting the flag to get JSON from server processed into an
object literal
});
// *** finish **

lOMoARcPSD|14530661
// Builds HTML for the home page based on categories array //

returned from the server.
function buildAndShowHomeHTML (categories) {
// Load home snippet page

$ajaxUtils.sendGetRequest( homeHtmlUr
l,
function (homeHtml) {
// TODO: STEP 2: Here, call chooseRandomCategory, passing it retrieved

'categories'
// Pay attention to what type of data that function returns vs what the
chosenCategoryShortName
// variable's name implies it expects.
// var chosenCategoryShortName = ....
var chosenCategoryShortName =
chooseRandomCategory(categories).short_name;
// TODO: STEP 3: Substitute {{randomCategoryShortName}} in the home html

snippet with the
// chosen category from STEP 2. Use existing insertProperty function for that
purpose.
// Look through this code for an example of how to do use the insertProperty
function.
// WARNING! You are inserting something that will have to result in a valid
Javascript
// syntax because the substitution of {{randomCategoryShortName}} becomes
an argument
// being passed into the $dc.loadMenuItems function. Think about what that
argument needs
// to look like. For example, a valid call would look something like this:
// $dc.loadMenuItems('L')
// Hint: you need to surround the chosen category short name with something
before inserting
// it into the home html snippet.
//

lOMoARcPSD|14530661
// var homeHtmlToInsertIntoMainPage = ....

chosenCategoryShortName = "'" + chosenCategoryShortName + "'"; var
homeHtmlToInsertIntoMainPage = insertProperty(homeHtml,
"randomCategoryShortName", chosenCategoryShortName);
// TODO: STEP 4: Insert the the produced HTML in STEP 3 into the main page
// Use the existing insertHtml function for that purpose. Look through this code
for an example // of how to do that.
// ....
insertHtml('#main-content', homeHtmlToInsertIntoMainPage);
},
false); // False here because we are getting just regular HTML from the server,
so no need to process JSON.
}
// Given array of category objects, returns a random category object.

function chooseRandomCategory (categories) {
// Choose a random index into the array (from 0 inclusively until array length
(exclusively))
var randomArrayIndex = Math.floor(Math.random() * categories.length);
// return category object with that randomArrayIndex

return categories[randomArrayIndex];
}
// Load the menu categories view

dc.loadMenuCategories = function ()
{ showLoading("#main-content");
$ajaxUtils.sendGetRequest( allCategoriesUr
l,
buildAndShowCategoriesHTML);
};

lOMoARcPSD|14530661
// Load the menu items view

// 'categoryShort' is a short_name for a category
dc.loadMenuItems = function (categoryShort)
{ showLoading("#main-content");
$ajaxUtils.sendGetRequest( menuItemsUrl +
categoryShort,
buildAndShowMenuItemsHTML);
};
// Builds HTML for the categories page based on the data

// from the server
function buildAndShowCategoriesHTML (categories) {
// Load title snippet of categories page
$ajaxUtils.sendGetRequest( categorie
sTitleHtml, function
(categoriesTitleHtml) { // Retrieve
single category snippet
$ajaxUtils.sendGetRequest( catego
ryHtml, function (categoryHtml) {
// Switch CSS class active to menu button
switchMenuToActive();
var categoriesViewHtml =
buildCategoriesViewHtml(categories,
categoriesTitleHtml,
categoryHtml);
insertHtml("#main-content", categoriesViewHtml);
},
false);
},
false);
}
// Using categories data and snippets html // build

categories view HTML to be inserted into page

lOMoARcPSD|14530661
function buildCategoriesViewHtml(categories,
categoriesTitleHtml,
categoryHtml) {
var finalHtml = categoriesTitleHtml;

finalHtml += "<section class='row'>";
// Loop over categories

for (var i = 0; i < categories.length; i++) {
// Insert category values var html =
categoryHtml; var name = "" +
categories[i].name; var short_name =
categories[i].short_name; html =
insertProperty(html, "name", name);
html =
insertProperty(html,
"short_name",
short_name);
finalHtml += html;
}
finalHtml += "</section>";
return finalHtml;
}
// Builds HTML for the single category page based on the data
// from the server
function buildAndShowMenuItemsHTML (categoryMenuItems) {
// Load title snippet of menu items page
$ajaxUtils.sendGetRequest( menuItem
sTitleHtml, function
(menuItemsTitleHtml) { // Retrieve
single menu item snippet
$ajaxUtils.sendGetRequest( menuIte
mHtml, function (menuItemHtml) {

lOMoARcPSD|14530661
// Switch CSS class active to menu button

switchMenuToActive();
var menuItemsViewHtml =
buildMenuItemsViewHtml(categoryMenuItems,
menuItemsTitleHtml,
menuItemHtml);
insertHtml("#main-content", menuItemsViewHtml);
},
false);
},
false);
}
// Using category and menu items data and snippets html //

build menu items view HTML to be inserted into page
function buildMenuItemsViewHtml(categoryMenuItems,
menuItemsTitleHtml,
menuItemHtml) {
menuItemsTitleHtml =
insertProperty(menuItemsTitleHtml,
"name",
categoryMenuItems.category.name);
menuItemsTitleHtml =
insertProperty(menuItemsTitleHtml,
"special_instructions",
categoryMenuItems.category.special_instructions);
var finalHtml = menuItemsTitleHtml;

finalHtml += "<section class='row'>";
// Loop over menu items

var menuItems = categoryMenuItems.menu_items; var
catShortName = categoryMenuItems.category.short_name;
for (var i = 0; i < menuItems.length; i++) {

lOMoARcPSD|14530661
// Insert menu item values

var html = menuItemHtml;
html =
insertProperty(html, "short_name", menuItems[i].short_name);
html =
"catShortName",
catShortName); html =
insertItemPrice(html,
"price_small",
menuItems[i].price_small); html =
insertItemPortionName(html,
"small_portion_name",
menuItems[i].small_portion_name); html =
"price_large",
menuItems[i].price_large); html =
insertItemPortionName(html,
"large_portion_name",
menuItems[i].large_portion_name); html =
"name",
menuItems[i].name); html =
"description",
menuItems[i].description);
// Add clearfix after every second menu item

if (i % 2 !== 0) { html +=
"<div class='clearfix visible-lg-block visible-md-block'></div>";
}
finalHtml += html;
}
finalHtml += "</section>";

lOMoARcPSD|14530661
return finalHtml;
}
// Appends price with '$' if price exists function

pricePropName,
priceValue) {
// If not specified, replace with empty string
if (!priceValue) {
return insertProperty(html, pricePropName, "");
}
priceValue = "$" + priceValue.toFixed(2); html =

insertProperty(html, pricePropName, priceValue); return
html;
}
// Appends portion name in parens if it exists

function insertItemPortionName(html,
portionPropName,
portionValue) {
// If not specified, return original string
if (!portionValue) {
return insertProperty(html, portionPropName, "");
}
portionValue = "(" + portionValue + ")";

html = insertProperty(html, portionPropName, portionValue);
return html;
}
global.$dc = dc; })(window);
CHAPTER 8: CONCLUSION
After so much effort put in I have successfully created a dynamic and responsive
restaurant website.

lOMoARcPSD|14530661
I would like to extend my gratitude towards

-coursera.org
-Mr. Vishal Pawar
- https://www.smashingmagazine.com/
- https://www.w3resource.com/
Without them this project and this report would not have been possible.

Industrial Report

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Industrial Report

Uploaded by

Copyright:

Available Formats

lOMoARcPSD|14530661

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION,MUMBAI

Nanasaheb Mahadik Polytechnic Institute, 134 , Somwar Peth,Opp Kanya

Mentor Industry Supervisor

Mr. Kishor Shinde Mr. Vishal Pawar

Downloaded by Onkar Kolekar (kolekaronkar01@gmail.com)

Nanasaheb Mahadik Polytechnic Institute , Peth,

I hereby declare that the discussion entitled Vishwa Technologies

Enrollment No Name Of Student Signature

2012140047 Onkar B Kolekar

Place: NMPI, Peth.

Date:13 August 2022

Downloaded by Onkar Kolekar (kolekaronkar01@gmail.com)

Certificate of Completion of Industrial Training

This is to certify that Mr. Onkar B Kolekar with Enrolment No.

towards completion of Diploma in Computer engineering from NMPI,

other diploma elsewhere.

Mr. Kishor Mr. Vishal Pawar Mr. Kishor Shinde

External-Examiner Dean Director

Place: NMPI, Peth.

Downloaded by Onkar Kolekar (kolekaronkar01@gmail.com)

I am indeed grateful to Head of Department of Computer Engineering.

In the last we would like to thank the management of Nanasaheb Mahadik

Thank you All.

Downloaded by Onkar Kolekar (kolekaronkar01@gmail.com)

Industrial training offers the students with important practical knowledge .

Industrial training is an important phase of a student life. A well planned

Downloaded by Onkar Kolekar (kolekaronkar01@gmail.com)

CHAPTER 1 INTRODUCTION TO HTML

CHAPTER 2 INTRODUCTION TO CSS

CHAPTER 3 INTRODUCTION TO JAVASCRIPT

CHAPTER 4 INTRODUCTION TO BOOTSTRAP

Download and understand file structure

CHAPTER 5 WHAT IS JQUERY?

CHAPTER 6 RSPONSIVE DESIGN

WHAT IS Responsive Web Design

CHAPTER 7 Project: creating dynamic and responsive website for a restaurant

Downloaded by Onkar Kolekar (kolekaronkar01@gmail.com)

CHAPTER 1 INTRODUCTION TO HTML

Downloaded by Onkar Kolekar (kolekaronkar01@gmail.com)

• 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.

• July 1994: HTML specification for HTML 2 is released.

• November 1994: Netscape is formed.

Downloaded by Onkar Kolekar (kolekaronkar01@gmail.com)

• 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: Internationalization of HTML Internet Draft.

• 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.

• December 1996: Work on `Cougar' is begun.

• January 1997: HTML 3.2 is ready.

• In January 2008, a working draft of HTML 5 is prepared.

CHAPTER 2 INTRODUCTION TO CSS

Downloaded by Onkar Kolekar (kolekaronkar01@gmail.com)

CSS is a standard specified and maintained by World Wide Web Consortium.

How CSS can be associated with an HTML web page