HTML, CSS, JavaScript Guide for Building Websites

| S a k s h a m S i n g h , A E I E , H I T , K o l k a t a

TABLE OF CONTENTS
CHAPTER 1 INTRODUCTION TO HTML
WHATIS HTML
HISTORYOF HTML
CHAPTER 2 INTRODUCTION TO CSS
WHATIS CSS
Advantages OF CSS
CHAPTER 3 INTRODUCTION TO JAVASCRIPT
WHATIS JavaScript
JavaScriptand Java comparison

CHAPTER 4 INTRODUCTION TO BOOTSTRAP
WHATIS BOOTSTRAP
Download and understand file structure
CHAPTER 5 WHATIS JQUERY?
CHAPTER 6 RSPONSIVEDESIGN
WHAT IS ResponsiveWeb Design
Concept
CHAPTER 7 Project:creating dynamic and responsive websitefor a
restaurant
Introduction
HTML
CSS
JAVASCRIPT
CHAPTER 8 Conclusion
CHAPTER 1: INTRODUCTION TO HTML
What is HTML
Stands for "HypertextMarkup Language." HTML is the language used to create
webpages."Hypertext"refersto the hyperlinksthat an HTML pagemay 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
</body>
</html>
an example of a paragraph in HTML. </p>
The firstline 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.Thepagetitle, metadata, and linksto referenced files areplaced
between the <head> tags. The actual contents of the page go between the
<body> tags.
The web has gone through many changes over the pastfew 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 comparethe sourceof 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 server
side scripting language like PHP or ASP. However, even dynamic pages must be
formatted using HTML. Therefore, scriptinglanguages often generate the HTML
that is sent to your web browser.

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) atGeneva, Switzerland.
CERN is an institution for researching particle physics which requires the
collaboration of physicists allover the world.
Tim has an idea of creating something which would enable physicists to share
research information fromanywherein the world, and he came with HTML
which can contain links of many documents from one document.
Tim's prototypeWeb 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, DaveRaggett from Hewlett-Packard's Labs in Bristol, England
who was one of the enthusiastic of HTML, met Tim and upon returning
England, Dave wrotea richer version of HTML called HTML+.
• In 1992, NCSA showed interestin 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 image tag in the HTML document.
• March 1993: Lou Montulli releases the Lynxbrowser version 2.0a.
• Early 1993: DaveRaggett begins to writehis own browser.
• April 1993: TheMosaic browser is released.
• Late 1993: Largecompanies underestimate the importance of the Web.

• May 1994: NCSA assigns commercialrights for Mosaic browser to
Spyglass Inc.
• September 1994: TheInternet 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: TheWorld Wide Web Consortium forms.
• Through 1995: HTML is extended with many new tags.
• March 1995: HTML 3 is published as an InternetDraft.
• March 1995: A furor over the HTML Tables specification.
• August1995: Microsoft's InternetExplorer browser comes out.
• September 1995: Netscapesubmits a proposalfor 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 InternetDraft.
• December 1995: TheHTML working group is dismantled.
• February 1996: TheHTML ERB is formed.
• April 1996: TheW3 Consortium working drafton Scripting comes out.
• July 1996: Microsoftseems moreinterested than firstimagined 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 draftof 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, butdevelopers havealready started
using some of its features.
CHAPTER 2: INTRODUCTION TO CSS
What is CSS
CSS, stands for Cascading Style Sheet is a computer language to describe
presentation (for example width, height, colour, background colour, alignment
etc.) of
HTML and XML (and XML based languages like XHTML, SVG) web documents.
In all the examples of our tutorials, we haveused HTML for implementing CSS.
CSS is a standard specified and maintained by World Wide WebConsortium.
Fromits invention, CSS has evolved through differentversions. 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 inyour own web pages.

How CSS can be associated with an HTML web page
There are three ways to attachCSS to an HTML webpage.
o Inline CSS: Define CSS properties using style attribute in the HTML
elements.
o Internal or Embedded CSS: Define CSS using <style> tag in <head>
section.
o External CSS: Define all CSS property in a separate .CSS file, and then
include the file with HTML file using tag in section.
Advantages of CSS
1. Separationof content formpresentation: 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 providea consistent presentation for all of the
pages of a web site.
3. The Increment inaccessibility: If a particular page (or a number of
pages) needs a different look and formatting, with a changeof a single line,
that can be achieved by calling morethan 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: ContentManagement Systems (for example
WordPress) uses CSS, so thatpeople without bothering how their content will
look, can submit their content. This has caused an exponential increasein
User GeneratedContent.

CHAPTER 3 INTRODUCTION TO JavaScript
What is JavaScript?
JavaScriptis a cross-platform, object-oriented scripting languagedeveloped by
Netscape. JavaScriptwas created by Netscape programmer BrendanEich.
Itwas firstreleased under the name of Live Script as part of Netscape
Navigator 2.0 in September 1995. Itwas renamed JavaScripton December 4,
1995. As JavaScriptworks on theclient side, Itis mostly used for client-side
web development.
JavaScriptis designed for useon web pages and closely integrated with HTML.
JavaScriptcan create applications which run in the browsers such as IE, Opera,
Firefox, Google Chrome and other. Netscape submitted JavaScriptto ECMA
Internationalfor standardization resulting in the standardized version named
ECMAScript.
JavaScript and Java
JavaScriptand Java are similar in some ways butfundamentally they are
different. Java is a programming languagedeveloped by Sun Microsystems,
Inc. and JavaScriptis a scripting language developed by Netscape. Java is a
server-sideand static type language. JavaScriptis a client-side, dynamically
typed language. Java programs arecompiled on the server and run on almost
every platform without distribution of sourcecode whereas scripts written in
JavaScriptare placed inside a HTML document and interpreted by the
browser. Thesyntax, reserved words of JavaScriptand Java are also different.

JavaScript compares to Java
JavaScript Java
JavaScript is used for front-end web
development (for example field level
validation in a HTML form).
Java is used as a back-end language
within a web environment.
Interpreted (not compiled) by the client. Compiled bytecodes downloaded from
the server, executed on the client.
Object-oriented. No distinction between
types of objects. Inheritance is through
the prototype mechanism, and
properties and methods can be added to
any object dynamically.
Class-based. Objects are divided into
classes and instances with all inheritance
through the class hierarchy. Classes and
instances cannot have properties or
methods added dynamically.
Variable data types are not declared
(loose typing).
Variable data types must be declared as
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 severalcomponents 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 usefulfrontend components like
Dropdowns, Navigation, Modals, Typehead, Pagination, Carousal,
Breadcrumb, Tab, Thumbnails, Headers etc. With these, you can make a web
projectup and running quickly and easily.
Moreover, sincethe entire framework is modulebased, you can customizeit
with your own bit of CSS or even go for a complete overhaul after getting
started.
Itis based on the severalbest practices, and we believe it is a very good point
to start learning modern day web development with HTML, and
JavaScript/jQuery onceyou know the basics.
Though there are criticisms, that all Bootstrap made projects looks sameand
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 customizeit to look it exclusively. And you need to
develop when you are on your way to customizing it and that is not feasible
without a well understanding of HTML+CSS.
There are of coursevery good front-end frameworks availablebeside
bootstrap and it's completely a developer's choice who wants which. But it is
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/boot

strap-3.0.0dist.zip(short). We have used the first one, but you may
use the second one too.
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 filewe haveused to customize Bootstrap's original CSS.
Once unzipped, you would find that there are severalfiles 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 'js'folder, which contains the main JavaScriptfile
bootstrap.js and a minified version of it.
There is a separate 'js'folder within the root, which contains different
JavaScriptplugins 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. Thereis 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 'ico' folder within the samecontaining icons for favicon and icons
for various mobile devices.
'css'folder in the samepath contains css files for documentation.
'_includes' and '_layouts' folder contains somedefault layout structurefiles
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 usefulfor you.
Within the root folder. there are lies severalfiles. 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 fromthe 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.
Once you finish this tutorial, we encourage you to install with bower and let us
know how it works.
Net DNA 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.cs
s">

<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 structurewe will be using for our project
<!DOCTYPEhtml>
<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>
<body>
<h1>Hello, world!</h1>

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

<scriptsrc="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
Note that html5shiv.jsand respond.min.jsare 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 purposeof 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'sCSS. So,
without disturbing the original CSS file, which is within dist folder of the
bootstrap-3.0.0, wearegoing to create a separateCSS file called custom.css in
the samefolder. We will then include that CSS file within our HTML files just
bellows the original CSS file. This way, wewill be able to overridethe default
styles when you want, but, if Bootstrap upgrades itself, the original CSS file can
also upgradewithout disturbing our own customization. We suggestyou
follow this method in your development process also.
Creating navigation
For creating navigation will add the following code in our HTML file, justafter
the opening body tag.

<nav class="navbar navbar-inversenavbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><a href="new.html" class="navbar-brand">
<img 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:plusoneannotation="inline"
width="150"></g:plusone></li>
<li class="socials"><div class="fb-like" data-
href="https://developers.facebook.com/docs/plugins/" data-width="Thepixel
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.createElem
ent(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 colour of
the navigation bar dark instead of the default lighter one. 'Navbar-fixed-top'
class makes surethat 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 using this for navbars for accessibility purpose.
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, butunless you do so, the top part of our content after navbar will be
hidden.
Within the container nav, we havean 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 haveused an
image for that. Since our image's height is morethan the line height of the
navbar, wemade some customization here. We have increased the 'line-
height' property of the '.navbar-nav>li>a'to 50pxinstead of default 20px. We
have also made the font size16px.
For the right mostlink, we haveadded dropdown. For that 'dropdown'class is
added to the associated li, justafter that, an anchor is added having two
classes 'dropdown-toggle'and 'caret'. This anchor 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. Thefirstli holds a markup for
Google Plus, the second li holds a markup for Facebook and third li holds
markup and somejs scriptfor displaying Twitter button.

Additionally, you must add the following markup and scriptjustafter 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
(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 justbelow the navbar, on the home page of our
project. we will use the following markup
<div id="carousel-example-generic" class="carouselslide">

<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="itemactive">
<img src="computer.jpg" alt="...">
<div class="carousel-caption">
<h1>LargeDesktops areeverywhere</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="...">
<h1>Mobiles are outnumbering desktops</h1>
'Carouselslide' class is assigned to it.
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
/
< div>
<div class "
= item">
<img src "
= cloud1.jpg" alt "
= ...">
<h1>Enterprises are adopting Cloud computing fast</h1>
<p><button class "
= btn btn-success btn-lg">Try 30 day trial now /
< p>
/
< div>
</div>
/
< div>
-->
Controls
<!--
<a class="left carousel-control" href="#carousel-example-generic" data-
slide "
= prev">
<span class "
= icon-prev"></span>
/
< a>
<a class="right carousel-control" href="#carousel-example-generic" data-
slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
There are four parts in the Carousal. The main container is defined using a div tag and

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 justbelow the caption.
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 somemarkup 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 defaultcarousal. 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
}
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 makesthe
images responsive.
Creating Grid
Below the slideshow, wehaveplaced our content using grids. We opened the
grid with a div with 'container' class. Note that we are going to develop a
responsivewebsiteand unlike previous versions of Bootstrap, here, we havea
single class for container and the is responsiveby default.
Container div nests number of divs (three in the firstrow 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, smfor 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 haveused lg for the
sakeof simplicity but since we have done so, you may have a stacked
experience while watching the projectsite in mobile or tablets.
In a couple of days, wewill havea 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 firstrow, so
we used 'collg-4' for all the columns. In the second row, wehave made it 'col-
lg-2' sincewe wanted six columns.

Following is the markup for grid containing two rows, thefirst row has three
columns, and the second row has sixcolumns.
<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>
<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
In the price.html page of our project, weare using a table to render a price
table. We used the following markup
<table class="tabletable-bordered">
<thead>
<tr>
<th>Features</th>
<hr>
<p>Copyright@2013-14 by ToDo App.</p>
Using tables

<th>Individual</th>
<th>Small Team</th>
<th>Medium Team</th>
<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>
</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>

Two classes 'table' and 'table-bordered' are used which are default form
Bootstrap's original CSS file. But we havemade somecustomizationsto make
the table headslook different by adding following CSS in our customize.css file
We have used class 'badge' for displaying sometexts within our table. We
have customized badge class also with following css
.badge { background-color: #428bca; color: #fff;
font-size: 22px;
<td><button type="button" class="btn btn-success btn-lg"">Buy
now</button></td>
<td> button type="button" class="btn btn-success btn-lg"">Buy
<
now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy
now /
< button></td>
</tr>
</tbody>
</table>
th {
background-color: #428bca;
color: #ec8007;
z-index : 10;
text-shadow: 1px 1px 1px #fff ;
font-size: 24px;
}
Using badges

}
For this and contact.html page, we haveadded another css rule in
customize.css
.container > h1 { text-align: center;
}
This makes the h1 aligned centre.
Using form
In the contact.html file we have created three columns and in the firstcolumn,
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>

'Form-horizontal'class places the form controls horizontally. Note that there is
role="form" added for accessibility. This is a new 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.
<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>

Adding Google map
In the third column of the grid in the contact.html page, we haveadded
Google Map. For that, we have used the following markup
<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 beforethe said js
You have to add following style in custom.css for the map to be rendered
properly
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Copy

#map_canvas { width: 400px; height: 400px;
}
This is how we havecreated our firstsimple project based on Twitter
Bootstrap V3.0.0. Butwe have justscratched the surface. This series will
update all the Twitter Bootstrap Tutorial we have to version 3.0.0 exploring
new techniques and customizations.
CHAPTER 5: WHAT IS JQUERY
jQuery
jQuery is a fast, small, cross-platform and feature-rich JavaScriptlibrary. Itis
designed to simplify the client-side scripting of HTML. Itmakes things like
HTML document traversaland manipulation, animation, event handling, and
AJAX very simple with an easy-to-useAPI thatworks on a lot of different type
of browsers.
The main purposeof jQuery is to provide an easy way to use JavaScripton your
website to make it more interactive and attractive. Itis also used to add
animation.
What is jQuery
jQuery is a small, lightweight and fast JavaScriptlibrary. Itis cross-platform and
supports differenttypes of browsers. Itis 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. Itis also very usefulto simplify a lot of
the complicated things fromJavaScript, like AJAX calls and DOMmanipulation.
o jQuery is a small, fastand lightweight JavaScriptlibrary.
o jQuery is platform independent.
o jQuery means "writeless do more".
o jQuery simplifies AJAX call and DOMmanipulation.
jQuery Features
Following are the important features of jQuery.
o HTML
manipulation
o DOM
manipulation
o DOMelement
selection
o CSS
manipulation
o Effects and
Animations
o Utilities

o AJAX
o HTML event
methods
o JSONParsing
o Extensibility
through plug-ins
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 Itis very fastand extensible.
o Itfacilitates the users to write UI related function codes in
minimum possiblelines.
o Itimproves the performanceof an application.
o Browser's compatibleweb applications can be developed.
o Ituses mostly new features of new browsers.
So, you can say that out of the lot of JavaScriptframeworks,jQuery is themost
popular and the mostextendable. Many of the biggest companies on the web
use jQuery.
Some of these companies are:
o Microsoft
o Google
o IBM
o Netflix

CHAPTER 6: RSPONSIVE DESIGN
What Is Responsive Web Design?
ResponsiveWeb design is the approach that suggests thatdesign and
development should respond to the user’s behaviour and environmentbased
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 sizeand scripting abilities. Onemay also haveto 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, thewebsite should have the technology to automatically respond to

the user’s preferences. This would eliminate the need for a different design
and development phasefor 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 several
additional inventions.
When will the madness stop? Itwon’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 several
additional inventions. When will the madness stop? Itwon’t, of course.
In the field of Web design and development, we’requickly 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 justsuffer the

consequences of losing visitors from one device, for the benefit of gaining
visitors fromanother? 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. Itstems from the notion of responsive
architectural design, whereby a roomor spaceautomatically adjusts to the
number and flow of people within it:
"Recently, an emergentdiscipline called “responsive architecture” hasbegun
asking how physicalspacescan respond to the presence of people passing
through them. Through a combination of embedded roboticsand tensile
materials, architects are experimenting with artinstallations and wall
structuresthat bend, flex, and expand as crowdsapproachthem. Motion
sensors can be paired with climate controlsystems to adjusta room’s
temperature and ambientlighting as it fills with people. Companieshave
already produced “smartglasstechnology” thatcan automatically become
opaque when a room’soccupantsreach a certain density threshold, giving
them an additionallayer of privacy."
Transplantthis 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 responsivearchitecture, Web design should
automatically adjust. Itshouldn’t require countless custom-madesolutions for
each new category of users. Obviously,wecan’tuse motion sensors and
robotics to accomplish this the way a building would. ResponsiveWeb design
requires a more abstractway of thinking. However, someideas are already
being practiced: fluid layouts, media queries and scripts that can reformat
Web pages and mark-up effortlessly (or automatically). ButresponsiveWeb
design is not only about adjustable screenresolutions andautomatically
resizable images, butrather abouta whole new way of thinking about design.
Let’s talk about all 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
fromportrait to landscape at the user’s whim. How is one to design for these
situations?
In addition to designing for both landscapeand 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 possibleto group
them into major categories, design for each of them, and make each design as
flexible as necessary. Butthat can be overwhelming, and who knows whatthe
usagefigures will be in five years? Besides, many users do not maximize their
browsers, which itself leaves far too much roomfor variety among screen
sizes.
Morten Hjerdeand 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 moredevices have come out. It’s obvious that we can’tkeep
creating customsolutions for each one. So, how do we deal with the situation?
PART OF THE SOLUTION: FLEXIBLE EVERYTHING
A few years ago, when flexible layouts werealmost a “luxury” for websites, the
only things that wereflexible in a design werethe layout columns (structural
elements) and the text. Images could easily break layouts, and even flexible
structuralelements broke a layout’s form when pushed enough. Flexible
designs weren’treally that flexible; they could give or take a few hundred
pixels, but they often couldn’t adjustfrom a large computer screen to a
netbook.
Now we can make things moreflexible. Images can be automatically adjusted,
and we haveworkarounds so thatlayouts 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 perfectfor devices that switch from
portrait orientation to landscape in an instant or for when users switch from a
large computer screen to an iPad.

CHAPTER 7 Project: Creating dynamic and responsive
website for a restaurant
Introduction: In this section I will talk about the projectI created during
my training, and I will code a websitewhich will be dynamic and
responsive. I willuse HTML, CSS, JavaScriptand Bootstrap framework.
Here are screenshots of my website in desktop browser and mobile browser.
Large Device browser view:

Small device view:

This explains responsiveness of my websiteand also one code refers to
different views in different browser sizes.

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-leftvisible-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">Togglenavigation</span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapsenavbar-collapse">
<ul id="nav-list" class="nav navbar-navnavbar-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>*WeDeliver</div>
</li>
</ul>
</div>
</div>
</nav>
</header>

<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
chargefor all deliveries.</p>
<hr class="visible-xs">
</section>
<section id="testimonials" class="col-sm-4">
<p>"The bestChinese restaurantI'vebeen to! And that's saying a lot,
since I'vebeen to many!"</p>
<p>"Amazing food! Great service!Couldn't ask for more! I'll be back
again and again!"</p>
</section>
</div>
<div class="text-center">© CopyrightDavid 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: 10px15px
10px0;
}

.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 {
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 {
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*/
/* HOMEPAGE */
.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 5px1px #cccccc;
}
#menu-tile {
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;
background-color: #000;
color: #fff;
opacity: .8;
}
/* END HOMEPAGE */
/* 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;
text-
transform:
uppercase;
background-color:
#000; color: #fff;
opacity: .8;
}
.category-tile:hover {
box-shadow: 0 1px5px 1px #cccccc;
}
#menu-categories-title + div {
}
/* END MENU CATEGORIES PAGE*/
/* SINGLECATEGORYPAGE*/ .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;
max-width: 250px;
}
.menu-item-photo div {
position: absolute;
bottom: 0; right: 0;
width: 80px;
background-color:
#557c3e; text-align:
center;
}
.menu-item-description {
padding-right: 30px;
}
h3.menu-item-title {
margin: 0 0 10px;
}
.menu-item-details { font-
size: .9em;
font-style: italic;
}
/* END SINGLECATEGORYPAGE*/
/********** 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 5px0;
}
/* End Header */
/* Home Page */
height: 558px;
}
/* End Home Page */
}
/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
/* Home Page */
height: 432px;
}
/* End Home Page */
}
/********** Extra small devices only **********/
@media (max-width: 767px) {
/* Header */ .navbar-
brand { padding-top:
10px;
height: 80px;
}
.navbar-brand h1 { /* Restaurantname */
padding-top: 10px;
font-size: 5vw; /* 1vw = 1% of viewportwidth */
}

.navbar-brand p { /* Kosher cert */
font-size: .6em;
margin-top: 12px;
}
.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 {
text-align: center;
}

.panel-footer section:nth-child(3) {
margin-bottom: 0; /* margin already exists on the wholerow */
}
.panel-footer section hr {
width: 50%;
}
/* End Footer */
/* Home Page */
.container
.jumbotron {
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 */
.navbar-brand h1 { /* Restaurantname */
padding-top: 5px;
font-size: 6vw;
}

/* End Header */
/* Home page */
#menu-tile, #specials-tile {
width: 280px;
}
.col-xxs-12 {
position: relative;
min-height: 1px;
padding-right:
15px;
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');
}
});
});

// Remove the class 'active' from home and switch to Menu
button var switchMenuToActive= function () { // Remove
'active' fromhome 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";
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 haveanother
function // called buildAndShowHomeHTML thatwill receive all the
categories fromthe server
// and process them: chooserandom 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 firstload, show home view showLoading("#main-
content"); $ajaxUtils.sendGetRequest( allCategoriesUrl,
buildAndShowHomeHTML, //***** <---- TODO: STEP 1: Substitute [...]
****** true); // Explicitely setting the flag to get JSONfrom server processed
into an object literal
});
// *** finish **
// Builds HTML for the home page based on categories
array // returned fromthe server.
function buildAndShowHomeHTML (categories) {
// Load home snippet page
$ajaxUtils.sendGetRequest(
homeHtmlUrl,
function (homeHtml) {
// TODO: STEP 2: Here, call chooseRandomCategory, passing itretrieved
'categories'
// Pay attention to whattype 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. Useexisting insertProperty function for
that purpose.
// Look through this code for an example of how to do usethe
insertProperty function.
// WARNING!You are inserting something that will have to result in a valid
Javascript

// syntaxbecause the substitution of {{randomCategoryShortName}}
becomes an argument
// being passed into the $dc.loadMenuItems function. Think aboutwhat
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 shortname with
something beforeinserting
// it into the home html snippet.
//
// var homeHtmlToInsertIntoMainPage=....
chosenCategoryShortName="'" + chosenCategoryShortName+"'";
var homeHtmlToInsertIntoMainPage=insertProperty(homeHtml,
"randomCategoryShortName", chosenCategoryShortName);
// TODO: STEP 4: Insertthe 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 becausewe are getting justregular HTML from the
server, so no need to process JSON.
}
// Given array of category objects, returns a random category object.
function chooseRandomCategory (categories) {
// Choosea 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");
allCategoriesUrl,
buildAndShowCategoriesHTML);
};
// Load the menu items view
// 'categoryShort'is a short_namefor a
category dc.loadMenuItems = function
(categoryShort) { showLoading("#main-
content"); $ajaxUtils.sendGetRequest(
menuItemsUrl+ categoryShort,
buildAndShowMenuItemsHTML);
};
// Builds HTML for the categories page based on the data
// fromthe server
function buildAndShowCategoriesHTML (categories) {
// Load title snippet of categories
page $ajaxUtils.sendGetRequest(
categoriesTitleHtml, function
(categoriesTitleHtml) { //
Retrieve single category snippet
categoryHtml, 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
function buildCategoriesViewHtml(categories,
categoriesTitleHtml,
categoryHtml) {
var finalHtml = categoriesTitleHtml;
finalHtml += "<section class='row'>";
// Loop over categories
for (var i = 0; i < categories.length; i++) {
// Insertcategory 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

// fromthe server
function buildAndShowMenuItemsHTML (categoryMenuItems) {
// Load title snippet of menu items
page $ajaxUtils.sendGetRequest(
menuItemsTitleHtml, function
(menuItemsTitleHtml) { //
Retrieve single menu item snippet
menuItemHtml, function
(menuItemHtml) {
// 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++) {
// Insertmenu 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 =
insertItemPrice(html,
"price_large",
menuItems[i].price_large); html =
insertItemPortionName(html,
"large_portion_name",
menuItems[i].large_portion_name); html =
"name",
menuItems[i].name); html
= insertProperty(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>";
return finalHtml;
}
// Appends price with '$' if price exists
function insertItemPrice(html,
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 effortput in, I have successfully created a dynamic and
responsiverestaurantwebsite.

HTML, CSS, JavaScript Guide for Building Websites

Recommended

Recommended

More Related Content

Similar to HTML, CSS, JavaScript Guide for Building Websites

Similar to HTML, CSS, JavaScript Guide for Building Websites (20)

Recently uploaded

Recently uploaded (20)

HTML, CSS, JavaScript Guide for Building Websites