Web Development IT Report

lOMoARcPSD|24060828
lOMoARcPSD|24060828
INDUSTRIAL TRAINING REPORT

On
“HTML CSS and Javascript for web development”
Submitted for partial fulfillment

of
B. Sc. in
CONPUTER SCIENCE
SUBMITTED TO: SUBMITTED BY:
Ms. Miracle James Mart No

U2018/5570126
CSC 4th Year
University Of Port Harcourt ,

East/West Road, PMB 5323 Choba, Rivers State, Nigeria.
January 2023
lOMoARcPSD|24060828
Preface
Industrial Trainings are very important for science students. This training
provides the opportunity to be familiar with the industrial / company
environment. During this training they can show and can enhance their practical
skills and gain practical knowledge and experience for future. This is best way
through which the students can learn the latest technologies being used in the
companies.
I James Miracle (U2018/5570126) have undergone through Industrial

Training on “HTML, CSS and Javascript for web development” from
“Sciential Datalab & Research Consult” This training helped me a lot in
learning the technologies of this particular field.
Industrial Training was very challenging but as I proceeded things got easier.
Practical Industrial Training was an interesting learning experience for me.
lOMoARcPSD|24060828
Acknowledgement
I want to express my sincere gratitude and thanks to Student Industrial

Training Work Experience Scheme (Swies) for granting me permission for
my industrial training in the field of “HTML, CSS and Javascript for web
development”
I express my sincere thanks to Ms. Igwe Queen, Mr. Kelvin and Mr. Ajay for
his cooperative attitude and consistence guidance, due to which I was able to
complete my training successfully.
Finally, I pay my thankful regard and gratitude to the team members and
technicians of “University of Port Harcourt” and Friday Onoudu (HOD) CS
University Of Port Harcourt, Choba for their valuable help, support and
guidance.
James
Miracle U2018/5007126
4th Year CS
lOMoARcPSD|24060828
INSTITUTE PROFILE
lOMoARcPSD|24060828
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|24060828
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 My first 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 server-
side 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|24060828
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 Montulli releases the Lynx browser version 2.0a.
 Early 1993: Dave Raggett begins to write his own browser.
 April 1993: The Mosaic browser is released.
 Late 1993: Large companies underestimate the importance of the Web.
 May 1994: NCSA assigns commercial rights for Mosaic browser to Spyglass Inc.
 September 1994: The Internet Engineering Task Force (IETF) sets up an HTML working group.
 July 1994: HTML specification for HTML 2 is released.
 November 1994: Netscape is formed.

lOMoARcPSD|24060828
 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 5.01 which we have discussed in our HTML
tutorials.
lOMoARcPSD|24060828
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, 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 4.
lOMoARcPSD|24060828
Next version of CSS is CSS5, which is under development but developers have already started using
some of its features.
In the consequent pages, we will discuss CSS 4.15 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.
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.
lOMoARcPSD|24060828
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.
CHAPTER 3
lOMoARcPSD|24060828
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 LiveScript 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.
lOMoARcPSD|24060828
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
JavaScript Java
JavaScript is used for front-end Java is used as a back-end

web development (for example language within a web
field level validation in a HTML environment.
form).
Interpreted (not compiled) by the client. Compiled bytecodes downloaded from
the
lOMoARcPSD|24060828
server, executed on the client.
Object-oriented. No distinction Class-based. Objects are divided into

between types of objects. Inheritance classes and instances with all
is through the prototype mechanism, inheritance through the class hierarchy.
and properties and methods can be Classes and instances cannot have
added to any object dynamically. properties or methods added
dynamically.
Variable data types are not Variable data types must be declared
declared (loose typing). as Java maintains strong type
checking.
Cannot automatically write to hard disk. Cannot automatically write to hard disk.
lOMoARcPSD|24060828
CHAPTER 4
INTRODUCTION TO BOOTSTRAP
WHAT IS BOOTSTRAP?
Bootstrap is a front end framework to develop web apps and sites fast. In modern web
development, there are several components which are required in almost all web projects.
Bootstrap provides you with all those basic modules - Grid, Typography, Tables, Forms, Buttons,
and Responsiveness. Besides, there are a plethora of other useful front- end 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
lOMoARcPSD|24060828
Bootstrap is a generic framework and like any other generic stuff, you need to customize it to look it
exclusively. And you need to delveloped 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.0-
dist.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 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 'js' 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.
lOMoARcPSD|24060828
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 'ico' 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.
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/bootstrap-
theme.min.css">


<script
src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></scri
pt>
lOMoARcPSD|24060828
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, maximum-

scale=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>

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

<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
lOMoARcPSD|24060828
</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 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">
lOMoARcPSD|24060828
<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" data- send="false"></div></li>
<li class="socials"><a href="https://twitter.com/share" class="twitter-

share-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.
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
lOMoARcPSD|24060828
'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
(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;
lOMoARcPSD|24060828
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="...">
<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="...">
<h1>Mobiles are outnumbering desktops</h1>

lOMoARcPSD|24060828
</div>
</div>
<div class="item">
<img src="cloud1.jpg" alt="...">
<h1>Enterprises are adopting Cloud computing fast</h1>
</div>
</div>
</div>

<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 '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|24060828
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 {
lOMoARcPSD|24060828
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 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 'col- lg-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>
lOMoARcPSD|24060828
<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

<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>
lOMoARcPSD|24060828
<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>
lOMoARcPSD|24060828
</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 btn-

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



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

now</button></td>
lOMoARcPSD|24060828
<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;
}
lOMoARcPSD|24060828
For this and contact.html page, we have added another css rule in customize.css
.container > h1 {
text-align: center;
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|24060828
<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|24060828
<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|24060828
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
lOMoARcPSD|24060828
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
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|24060828
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.
lOMoARcPSD|24060828
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.
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
lOMoARcPSD|24060828
opaque when a room’s occupants reach a certain density threshold, giving them an
additional layer of privacy."
Transplant this discipline onto Web design, and we have a similar yet whole new idea.
Why should we create a custom Web design for each group of users; after all,
architects don’t design a building for each group size and type that passes through it?
Like responsive architecture, Web design should automatically adjust. It shouldn’t
require countless 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
lOMoARcPSD|24060828
years? Besides, many users do not maximize their browsers, which itself leaves far
too much room for variety among screen sizes.
Morten Hjerde and a few of his colleagues identified statistics on about 400 devices
sold between 2005 and 2008. Below are some of the most common:
Since then even more devices have come out. It’s obvious that we can’t keep creating
custom solutions for each one. So, how do we deal with the situation?
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|24060828
CHAPTER 7 Project: creating dynamic and responsive

website for a Ecommerce
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:
Image here
lOMoARcPSD|24060828
Image here
Small device view:
Image here
lOMoARcPSD|24060828
2 Image here
lOMoARcPSD|24060828
Image here
This explains responsiveness of my website and also one code refers to different
views in different browser sizes.
lOMoARcPSD|24060828
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>
<span class="icon-bar"></span>
lOMoARcPSD|24060828
</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="hidden-
xs"> Menu</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br class="hidden-
xs"> About</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span><br class="hidden-
xs"> 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>
<div id="call-btn" class="visible-xs">

lOMoARcPSD|24060828
<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>
<div class="text-center">© Copyright David Chu's China Bistro
2016</div>
</div>
lOMoARcPSD|24060828
</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|24060828
.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;
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;
}
lOMoARcPSD|24060828
#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;
}
lOMoARcPSD|24060828
#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 */
/* HOME PAGE */
.container .jumbotron {
box-shadow: 0 0 50px #3F0C1F;
border: 2px solid #3F0C1F;
}
#menu-tile, #specials-tile, #map-tile {

height: 250px;
width: 100%;
position: relative;
overflow: hidden;
}
#menu-tile:hover, #specials-tile:hover, #map-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
lOMoARcPSD|24060828
}
#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;
color: #fff;
opacity: .8;
}
/* END HOME PAGE */
/* MENU CATEGORIES PAGE */

.category-tile {
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
margin: 0 auto 15px;
}
.category-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
lOMoARcPSD|24060828
text-align: center;
font-size: 1.2em;
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;
overflow: hidden;
padding: 0;
lOMoARcPSD|24060828
margin-right: -15px;
margin-left: auto;
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) {
background: url('../images/jumbotron_1200.jpg') no-repeat;
height: 675px;
}
}
/********** Medium devices only **********/

@media (min-width: 992px) and (max-width: 1199px) {
/* Header */
lOMoARcPSD|24060828
#logo-img {
background: url('../images/restaurant-logo_medium.png') no-repeat;
width: 100px;
height: 100px;
margin: 5px 5px 5px 0;
}
/* 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;
}
padding-top: 10px;
font-size: 5vw; /* 1vw = 1% of viewport width */
}
lOMoARcPSD|24060828
.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;
}
/* End Header */
/* Footer */
.panel-footer section {
text-align: center;
lOMoARcPSD|24060828
}
.panel-footer section:nth-child(3) {
margin-bottom: 0; /* margin already exists on the whole row */
}
.panel-footer section hr {
width: 50%;
}
/* End Footer */
/* Home Page */
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;
lOMoARcPSD|24060828
}
/* End Header */
/* 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 = {};
lOMoARcPSD|24060828
var homeHtmlUrl = "snippets/home-snippet.html";

var allCategoriesUrl =
"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;
lOMoARcPSD|24060828
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 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(
lOMoARcPSD|24060828
allCategoriesUrl,
buildAndShowHomeHTML, // ***** <---- TODO: STEP 1: Substitute [...] ******
true); // Explicitely setting the flag to get JSON from server processed into an
object literal
});
// *** finish **
// Builds HTML for the home page based on categories array

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

homeHtmlUrl,
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
lOMoARcPSD|24060828
// 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.
//
// 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];
}
lOMoARcPSD|24060828
// Load the menu categories view

dc.loadMenuCategories = function () {
$ajaxUtils.sendGetRequest( allCa
tegoriesUrl,
buildAndShowCategoriesHTML);
};
// Load the menu items view

// 'categoryShort' is a short_name for a category
dc.loadMenuItems = function (categoryShort) {
$ajaxUtils.sendGetRequest( menuIte
msUrl + categoryShort,
buildAndShowMenuItemsHTML);
};
// Builds HTML for the categories page based on the data

// from the server
function buildAndShowCategoriesHTML (categories) {
// Load title snippet of categories page
categoriesTitleHtml,
function (categoriesTitleHtml) {
// Retrieve single category snippet
categoryHtml,
function (categoryHtml) {
// Switch CSS class active to menu button
switchMenuToActive();
var categoriesViewHtml =
buildCategoriesViewHtml(categories,
lOMoARcPSD|24060828
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,
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;
}
lOMoARcPSD|24060828
// Builds HTML for the single category page based on the data
// from the server
function buildAndShowMenuItemsHTML (categoryMenuItems) {
// Load title snippet of menu items page
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",
lOMoARcPSD|24060828
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++) {
// 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 =
insertItemPrice(html,
"price_large",
menuItems[i].price_large);
html =
insertItemPortionName(html,
"large_portion_name",
menuItems[i].large_portion_name);
lOMoARcPSD|24060828
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>";
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;
}
lOMoARcPSD|24060828
// 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);
lOMoARcPSD|24060828
CHAPTER 8: CONCLUSION
After so much effort put in I have successfully created a dynamic and responsive
restaurant website.
I would like to extend my gratitude towards

-Johns Hopkins university website
-coursera.org
-Mr. Yaakov Chaikin
- https://www.smashingmagazine.com/
- https://www.w3resource.com/
Without them this project and this report would not have been possible.

Web Development IT Report

Uploaded by

Document Information

Original Title

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

Web Development IT Report

Uploaded by

Copyright:

Available Formats

lOMoARcPSD|24060828

INDUSTRIAL TRAINING REPORT

“HTML CSS and Javascript for web development”

Submitted for partial fulfillment

Ms. Miracle James Mart No

University Of Port Harcourt ,

I James Miracle (U2018/5570126) have undergone through Industrial

I want to express my sincere gratitude and thanks to Student Industrial

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

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

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

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

How CSS can be associated with an HTML web page

3. The Increment in accessibility : If a particular page (or a number of pages ) needs a

JavaScript is a cross-platform, object-oriented scripting language developed by

JavaScript and Java

JavaScript compares to Java

JavaScript is used for front-end Java is used as a back-end

server, executed on the client.

Object-oriented. No distinction Class-based. Objects are divided into

Download and understand file structure

Develop with Bootstrap v3.0.0

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-

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

<ul class="nav navbar-nav">

<li><a href="new.html" class="navbar-brand">

<li class="active"><a href="#">Home</a></li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social<b

<li class="socials"><g:plusone annotation="inline"

<li class="socials"><div class="fb-like" data-

<li class="socials"><a href="https://twitter.com/share" class="twitter-

Using role="navigation" is new in Bootstrap V3.0.0 while creating navigation. Bootstrap

var js, fjs = d.getElementsByTagName(s)[0];

js = d.createElement(s); js.id = id;

/ HEADER /