WEB DEVELOPMENT

A SUMMER TRAINING REPORT

Submitted by

MUKUL GUPTA
Enrollment Number: 45114803117

BACHELOR OF TECHNOLOGY
IN

Information Technology

Under the supervision of

Prof. Yaakov Chaikin

Adjunct Professor, Graduate Computer Science
Whiting School of Engineering
Johns Hopkins University
Baltimore, Maryland, USA

MAHARAJA AGRASEN INSTITUTE OF TECHNOLOGY

ROHINI, NEW DELHI

1|Page
CERTIFICATE

2|Page
 CANDIDATE’S DECLARATION

I hereby declare that the work, which is being presented in the training report, entitled
“Web Development” in partial fulfillment for the award of Degree of “Bachelor of
Technology” in Department of Information Technology and submitted to the Department of
Information Technology, Maharaja Agrasen Institute of Technology, Guru Gobind Singh
Indraprastha University is a record of my own investigations carried under the Guidance of
Dr. Anu Rathee, Department of Information Technology, Maharaja Agrasen Institute of
Technology.
I have not submitted the matter presented in this report anywhere for the award of any other
Degree.

MUKUL GUPTA
Enrollment No: 45114803117
Information Technology
7I456

3|Page
 ACKNOWLEDGEMENT

First and foremost, I wish to express my profound gratitude to Prof. Yaakov Chaikin,
Adjunct Professor, Graduate Computer Science, Whiting School of Engineering,
Johns Hopkins University, for mentoring and guiding me throughout the duration of the course.
I am extremely grateful to him for being so thorough with every topic and very carefully
designing this course. The most important aspect of this course was creating a website for a
client which gave insight in developing a fully functional website.

I find great pleasure to express my unfeigned thanks to my college, Maharaja Agrasen Institute
of Technology for sponsoring online courses through coursera for all of its students.

I wish to thank my Faculty Mentor Dr. Anu Rathee for her able guidance that helped me put my
work to a better perspective and further refine my ideas. My heartfelt thanks to her for her
immense help and support, useful discussions and valuable recommendations throughout the
course of my project work.

Last but not the least I thank the almighty for enlightening me with his blessings.

MUKUL GUPTA
Enrollment No: 45114803117
Information Technology
7I456

4|Page
 ABSTRACT

WEB APPLICATION or WEB APP is a client-server computer program which the client
(including the user interface and client-side logic) runs in a web browser. Common web
applications include webmail, online retail sales, online auctions, wikis, instant messaging
services and many other functions. Web Application can be brought to life using either core
programming languages like Python, PHP etc. or with the help of some available frameworks,
such as: Magento, Flask, CodeIgniter, Express.js, Node.js etc.

Generally, the Web applications uses a combination of server-side scripts (PHP and ASP) to
handle the storage and retrieval of the information, and client-side scripts (JavaScript and
HTML) to present information to users. This kind of applications allow employees to create
documents, share information, collaborate on projects, and work on common documents
regardless of location or device.

The course which I did was called “HTML, CSS and JavaScript for Web Developers” and it was
taught by Prof. Yaakov Chaikin. In this course, I learnt about HTML which stands for Hyper
Text Markup Language, CSS which stands for Cascading Style Sheets, JavaScript, Twitter
Bootstrap and AJAX. During the duration of my course, I made some assignments too for
grading purposes and the instructor led me through the process of building a website for a real
client.

5|Page
TABLE OF CONTENTS

Title Page no.

Certificate 2
Candidate’s Declaration 3
Acknowledgement 4
Abstract 5
Chapter 1: Introduction 8
1.1: Coursera 8
1.2: Johns Hopkins University 10
1.3 Professor Yaakov Chaikin 11
Chapter 2: About Web Development 12
2.1: Introduction 12
2.2: Software tools learned and theory 16
Chapter 3: Course: HTML, CSS And JavaScript for Web Developers 26
3.1: Introduction 26
3.2: Module Contents 28
Chapter 4: Results and Discussions 54
4.1: Assignments 54
Chapter 5: Conclusion 59
References 60

6|Page
 LIST OF FIGURES
Fig no. Caption Page no

Fid 2.1 AJAX model 24

Fig 3.1 CSS syntax 32

Fig 3.2 CSS Box Model 37

Fig. 3.3 Responsive Web Design 38

Fig 3.4 Navigation Bar 40

Fig 3.5 Homepage and Footer 41

Fig 3.6 Menu Page 42

Fig 3.7 Single Category Page 42

Fig 4.1 Module 1 Assignment 54

Fig 4.2 Module 2 Assignment 55-56

Fig 4.3 Module 3 Assignment 56-57

Fig 4.4 Module 4 Assignment 58

7|Page
 1. INTRODUCTION

1.1 COURSERA

Coursera is an American massive open online course (MOOC) provider founded in 2012 by
Stanford University's computer science professors Daphne Koller and Andrew Ng with a vision
of providing life-transforming learning experiences to anyone, anywhere.

It is now a leading online learning platform for higher education, where 71 million learners from
around the world come to learn skills of the future. More than 200 of the world’s top universities
and industry educators partner with Coursera to offer online courses, certifications, and degrees
in a variety of subjects, such as engineering, data science, machine learning, mathematics,
business, financing, computer science, digital marketing, humanities, medicine, biology, social
sciences, 3000 plus variety of courses giving students a very broad range of information &
experience in different fields.

Thousands of companies trust the company’s enterprise platform Coursera for Business to
transform their talent. Coursera for Government equips government employees and citizens with
in-demand skills to build a competitive workforce. Coursera for Campus empowers any
university to offer high-quality, job-relevant online education to students, alumni, faculty, and
staff. Coursera is backed by leading investors that include Kleiner Perkins, New Enterprise
Associates, Learn Capital, and SEEK Group.

8|Page
HISTORY

Coursera was founded in 2012 by Stanford University computer science professors Andrew Ng
and Daphne Koller. Ng and Koller started offering their Stanford courses online in fall 2011, and
soon after left Stanford to launch Coursera. Princeton, Stanford, the University of Michigan and
the University of Pennsylvania were the first universities to offer content on the platform.
Offerings have since expanded to include Specializations – collections of courses that build skills
in a specific subject – as well as degrees and a workforce development product for businesses
and government organizations.

COURSES

Coursera courses last approximately four to twelve weeks, with one to two hours of video
lectures a week. These courses provide quizzes, weekly exercises, peer-graded and reviewed
assignments, an optional Honors assignment and sometimes a final project or exam to complete
the course. Courses are also provided on-demand, in which case users can take their time in
completing the course with all of the material available at once.

As of May 2015, Coursera offered 104 on-demand courses it also provides guided projects which
are short 2-3 hour projects that can be done.

As of 2017, Coursera offers full master's degrees. They first started with Master's in Innovation
and Entrepreneurship (OMIE) from HEC Paris and Master's of Accounting (iMSA) from the
University of Illinois, but have moved on to offer Master of Computer Science in Data Science
and Master of Business Administration (iMBA), both from University of Illinois. Also as part of
MBA; there are some courses are offered separately and will be included in the curriculum of
MBA when being enrolled in like digital marketing courses.

9|Page
1.2 JOHNS HOPKINS UNIVERSITY

The Johns Hopkins University is a private research university in Baltimore, Maryland. Founded
in 1876, the university was named for its first benefactor, the American entrepreneur,
abolitionist, and philanthropist Johns Hopkins. Daniel Coit Gilman, who was inaugurated as the
institution's first president on February 22, 1876, led the university to revolutionize higher
education in the U.S. by integrating teaching and research. Adopting the concept of a graduate
school from Germany's historic Heidelberg University, Johns Hopkins University is considered
the first research university in the United States. Over the course of several decades, the
university has led all U.S. universities in annual research and development expenditures. In fiscal
year 2016, Johns Hopkins spent nearly $2.5 billion on research. The university has graduate
campuses in Italy, China, and Washington, D.C., in addition to its main campus in Baltimore.

Johns Hopkins is organized into 10 divisions on campuses in Maryland and Washington, D.C.,
with international centers in Italy and China. The two undergraduate divisions, the Zanvyl
Krieger School of Arts and Sciences and the Whiting School of Engineering, are located on the
Homewood campus in Baltimore's Charles Village neighborhood. The medical school, nursing
school, and Bloomberg School of Public Health, and Johns Hopkins Children’s Center are
located on the Medical Institutions campus in East Baltimore. The university also consists of the
Peabody Institute, Applied Physics Laboratory, Paul H. Nitze School of Advanced International
Studies, School of Education, Carey Business School, and various other facilities.

10 | P a g e
The mission of The Johns Hopkins University is to educate its students and cultivate their
capacity for life-long learning, to foster independent and original research, and to bring the
benefits of discovery to the world.

Johns Hopkins was a founding member of the American Association of Universities. As of

October 2019, 39 Nobel laureates and 1 Fields Medalist have been affiliated with Johns Hopkins.
Founded in 1883, the Blue Jays men's lacrosse team has captured 44 national titles and plays in
the Big Ten Conference as an affiliate member as of 2014.

1.3 PROFESSOR YAAKOV CHAIKIN

He was the instructor of the course I did which was titled “HTML, CSS and JavaScript for Web
Developers”. He is the Adjunct Professor of the Graduate Computer Science department of
Whiting School of Engineering which is a division of the Johns Hopkins University located in
the university's Homewood campus in Baltimore, Maryland, United States.

Each of his Coursera courses have made it to be a #1 TOP RATED COURSE on Coursera.org.
The HTML, CSS, and Javascript for Web Developers course has been a #1 Top Rated Course for
3 straight weeks and Single Page Web Applications with AngularJS has been a #1 Top Rated
Course for 3 consecutive months (and is still #1 or #2 as of 1-26-2017). He is also a Principal
Enterprise Architect and software developer with a Columbia, Maryland consulting firm. His
expertise includes involvement in all phases of the software development lifecycle, from
requirements and architecture to implementation using some of the latest technologies. His daily
responsibilities include project leadership, architecture design as well as coding Web-based
applications. Yaakov is an experienced instructor. He has been bringing his real-world
experience as a part-time faculty at Johns Hopkins University for over 10 years, teaching Java
Enterprise Edition Web Development as well as Rich Internet Applications with Ajax. He has
also been hired to give presentations and teach short courses for commercial clients. Yaakov also
writes web development tutorials articles on his site ClearlyDecoded.com.

11 | P a g e
 2. ABOUT WEB DEVELOPMENT

2.1 INTRODUCTION

Web development is the work involved in developing a Web site for the Internet (World Wide
Web) or an intranet (a private network). Web development can range from developing a simple
single static page of plain text to complex Web-based Internet applications (Web apps),
electronic businesses, and social network services. A more comprehensive list of tasks to which
Web development commonly refers, may include Web engineering, Web design, Web content
development, client liaison, client-side/server-side scripting, Web server and network security
configuration, and e-commerce development. Among Web professionals, "Web development"
usually refers to the main non-design aspects of building Web sites: writing markup and coding.
Web development may use content management systems (CMS) to make content changes easier
and available with basic technical skills.

For larger organizations and businesses, Web development teams can consist of hundreds of
people (Web developers) and follow standard methods like Agile methodologies while
developing Web sites. Smaller organizations may only require a single permanent or contracting
developer, or secondary assignment to related job positions such as a graphic designer or
information systems technician. Web development may be a collaborative effort between
departments rather than the domain of a designated department. There are three kinds of Web
developer specialization: front-end developer, back-end developer, and full-stack developer.
Front-end developers are responsible for behavior and visuals that run in the user browser, while
back-end developers deal with the servers.

What is a website?

Websites are files stored on servers, which are computers that host (fancy term for “store files
for”) websites. These servers are connected to a giant network called the internet … or the World
Wide Web (if we’re sticking with 90s terminology). We talk more about servers in the next
section. Browsers are computer programs that load the websites via your internet connection,
such as Google Chrome or Internet Explorer. Your computer is also known as the client.

12 | P a g e
What is an Internet Protocol (IP) address?

Internet Protocol is a set of standards that govern interaction on the internet.

To access a website, you need to know its IP address. An IP address is a unique string of
numbers. Each device has an IP address to distinguish itself from the billions of websites and
devices connected via the internet.

While you can access a website using its IP address, most internet users prefer to use domain
names or by going through search engines.

What is HyperText Transfer Protocol?

Also known as HTTP, this protocol is the backbone of web development. The protocol defines
how information should be exchanged on the internet. It basically governs the request-response
cycle of the synergy of client to server and vice versa. Client is liable for sending the request to
the server and the server then responds to the request via a response message after parsing the
request and correlated information.

The Key role in the functioning of HTTP is played by Model View Controller (MVC), which
gives us the blueprint about the components through which the client and server can
communicate with each other. In Layman terms, Model represents the Database, View is the
templates and layouts on our website and Controller represents the logical part of our application
which connects the other two.

Several HTTP methods which are used regularly to undergo information exchange; some of
which are given below:

a) GET: Used to retrieve a resource from the server.

b) POST/PUT: Used to create or replace a resource in the server.
c) PATCH: Used to update a resource.
d) DELETE: Used to delete a resource in the server-side.

13 | P a g e
Front-end

Front-end (or client-side) is the side of a website or software that you see and interact with as an
internet user. When website information is transferred from a server to a browser, front-end
coding languages allow the website to function without having to continually “communicate”
with the internet.

Front-end code allows users like you and me to interact with a website and play videos, expand
or minimize images, highlight text, and more. Web developers who work on front-end coding
work on client-side development.

Front-end (or client-side) development includes a combination of JavaScript, HTML, and CSS. It
also controls components such as typography and fonts, navigation, positioning, and browser
compatibility and responsiveness. This part will reflect more of your initial site vision and what
you included in your wireframe.

Backend

Backend (or server-side) is the side that you don’t see when you use the internet. It’s the digital
infrastructure, and to non-developers, it looks like a bunch of numbers, letters, and symbols.

There are more backend coding languages than front-end languages. That’s because of browsers
— at the front-end — only understand JavaScript, but a server — at the backend — can be
configured to understand (pretty much) any language.

The backend handles the data that enables the functionality on the front-end. For example,
Facebook's backend stores my photos, so that the front-end can then allow others to look at them.
It’s comprised of two major components:

 Databases, which is responsible for storing, organizing, and processing data so that it’s
retrievable by server requests
 Servers, which is the hardware and software that make up your computer. Servers are
responsible for sending, processing, and receiving data requests. They’re the intermediary

14 | P a g e
 between the database and the client/browser. The browser will, in effect, tell the server "I
need this information", and the server will know how to get that information from the
database and send it to the client.

These components work together to build the foundation for each website.

TYPES OF WEB DEVELOPMENT:

1. Front-end

Front-end developers work on the client- or user-facing side of websites, programs, and software.
They design and develop the visual aspects, including the layout, navigation, graphics, and other
aesthetics. These developers also work on the user interface and user experience of whatever
project they're developing.

2. Backend

Backend developers work on the server-facing side of websites, programs, and software. These
developers work in systems like servers, operating systems, APIs, and databases and manage the
code for security, content, and site structure.

3. Full Stack

Full stack developers work in both the front-end and backend sides of a website. They can create
a website, application, or software program from start to finish.

15 | P a g e
2.2 SOFTWARE TOOLS LEARNED AND THEORY

2.2.1 HTML

Hypertext Markup Language (HTML) is the standard markup language for documents designed
to be displayed in a web browser. It can be assisted by technologies such as Cascading Style
Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a web page
semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of

HTML pages. With HTML constructs,
images and other objects such as interactive
forms may be embedded into the rendered
page. HTML provides a means to create
structured documents by denoting structural
semantics for text such as headings,
paragraphs, lists, links, quotes and other
items. HTML elements are delineated by
tags, written using angle brackets. Tags such
as <img /> and <input /> directly introduce
content into the page. Other tags such as <p>
surround and provide information about document text and may include other tags as sub-
elements. Browsers do not display the HTML tags, but use them to interpret the content of the
page.

HTML can embed programs written in a scripting language such as JavaScript, which affects the
behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The
World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of
the CSS standards, has encouraged the use of CSS over explicit presentational HTML since
1997.
16 | P a g e
Markup

HTML markup consists of several key components, including those called tags (and their
attributes), character-based data types, character references and entity references. HTML tags
most commonly come in pairs like <h1> and </h1>, although some represent empty elements
and so are unpaired, for example <img>. The first tag in such a pair is the start tag, and the
second is the end tag (they are also called opening tags and closing tags).

The following is an example of the classic "Hello, World!" program:

<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<div>
<p>Hello world!</p>
</div>
</body>
</html>

The text between <html> and </html> describes the web page, and the text between <body> and
</body> is the visible page content. The markup text <title>This is a title</title> defines the
browser page title, and the tag <div> defines a division of the page used for easy styling.

The Document Type Declaration <!DOCTYPE html> is for HTML5. If a declaration is not
included, various browsers will revert to "quirks mode" for rendering.

Elements

HTML documents imply a structure of nested HTML elements. These are indicated in the
document by HTML tags, enclosed in angle brackets thus: <p>.

In the simple, general case, the extent of an element is indicated by a pair of tags: a "start tag"
<p> and "end tag" </p>. The text content of the element, if any, is placed between these tags.

17 | P a g e
Tags may also enclose further tag markup between the start and end, including a mixture of tags
and text. This indicates further (nested) elements, as children of the parent element.

The start tag may also include attributes within the tag. These indicate other information, such as
identifiers for sections within the document, identifiers used to bind style information to the
presentation of the document, and for some tags such as the <img> used to embed images, the
reference to the image resource in the format like this: <img src="example.com/example.jpg">

Some elements, such as the line break <br>, or <br /> do not permit any embedded content,
either text or further tags. These require only a single empty tag (akin to a start tag) and do not
use an end tag.

2.2.2 CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language such as HTML. CSS is a cornerstone technology of the
World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of

presentation and content, including layout, colors,
and fonts. This separation can improve content
accessibility, provide more flexibility and control
in the specification of presentation characteristics,
enable multiple web pages to share formatting by
specifying the relevant CSS in a separate .css file
which reduces complexity and repetition in the
structural content as well as enabling the .css file
to be cached to improve the page load speed
between the pages that share the file and its
formatting.

18 | P a g e
Separation of formatting and content also makes it feasible to present the same markup page in
different styles for different rendering methods, such as on-screen, in print, by voice (via speech-
based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for
alternate formatting if the content is accessed on a mobile device.

The name cascading comes from the specified priority scheme to determine which style rule
applies if more than one rule matches a particular element. This cascading priority scheme is
predictable.

In addition to HTML, other markup languages support the use of CSS including XHTML, plain
XML, SVG, and XUL.

Syntax

CSS has a simple syntax and uses a number of English keywords to specify the names of various
style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors,
and a declaration block.

Selector

In CSS, selectors declare which part of the markup a style applies to by matching tags and
attributes in the markup itself.

Selectors may apply to the following:

 all elements of a specific type, e.g. the second-level headers h2

 elements specified by attribute, in particular:
 id: an identifier unique within the document
 class: an identifier that can annotate multiple elements in a document
 elements depending on how they are placed relative to others in the document tree.

19 | P a g e
Classes and IDs are case-sensitive, start with letters, and can include alphanumeric characters,
hyphens, and underscores. A class may apply to any number of instances of any elements. An ID
may only be applied to a single element.

Declaration block

A declaration block consists of a list of declarations in braces. Each declaration itself consists of
a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;)
must be inserted to separate each declaration.

Properties are specified in the CSS standard. Each property has a set of possible values. Some
properties can affect any type of element, and others apply only to particular groups of elements.

Values may be keywords, such as "center" or "inherit", or numerical values, such as 200px (200
pixels), 50vw (50 percent of the viewport width) or 80% (80 percent of the parent element's
width). Color values can be specified with keywords (e.g. "red"), hexadecimal values (e.g.
#FF0000, also abbreviated as #F00), RGB values on a 0 to 255 scale (e.g. rgb(255, 0, 0)), RGBA
values that specify both color and alpha transparency (e.g. rgba(255, 0, 0, 0.8)), or HSL or HSLA
values (e.g. hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%)).

2.2.3 JAVASCRIPT

JavaScript, often abbreviated as JS, is a programming language that conforms to the

ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-
paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and
first-class functions.

Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web.
JavaScript enables interactive web pages and is an essential part of web applications. The vast
majority of websites use it for client-side page behavior, and all major web browsers have a
dedicated JavaScript engine to execute it.

20 | P a g e
 As a multi-paradigm language, JavaScript
supports event-driven, functional, and
imperative programming styles. It has
application programming interfaces (APIs) for
working with text, dates, regular expressions,
standard data structures, and the Document
Object Model (DOM). However, the language
itself does not include any input/output (I/O),
such as networking, storage, or graphics
facilities, as the host environment (usually a web
browser) provides those APIs.

JavaScript engines were originally used only in web browsers, but they are now embedded in
some servers, usually via Node.js. They are also embedded in a variety of applications created
with frameworks such as Electron and Cordova.

Although there are similarities between JavaScript and Java, including language name, syntax,
and respective standard libraries, the two languages are distinct and differ greatly in design.

2.2.4 BOOTSTRAP

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end
web development. It contains CSS- and (optionally) JavaScript-based design templates for
typography, forms, buttons, navigation, and other interface components.

Bootstrap is the seventh-most-starred project on GitHub, with more than 142,000 stars, behind
freeCodeCamp (almost 312,000 stars) and marginally behind Vue.js framework.

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton
at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap,
various libraries were used for interface development, which led to inconsistencies and a high
maintenance burden.

21 | P a g e
Features

Bootstrap is a web framework that focuses on simplifying the development of informative web
pages (as opposed to web apps). The primary purpose of adding it to a web project is to apply
Bootstrap's choices of color, size, font and layout to that project. As such, the primary factor is
whether the developers in charge find those choices to their liking. Once added to a project,
Bootstrap provides basic style definitions for all HTML elements. The result is a uniform
appearance for prose, tables and form elements across web browsers. In addition, developers can
take advantage of CSS classes defined in Bootstrap to further customize the appearance of their
contents. For example, Bootstrap has provisioned for light- and dark-colored tables, page
headings, more prominent pull quotes, and text with a highlight.

Bootstrap also comes with several JavaScript components in the form of jQuery plugins. They
provide additional user interface elements such as dialog boxes, tooltips, and carousels. Each
Bootstrap component consists of an HTML structure, CSS declarations, and in some cases
accompanying JavaScript code. They also extend the functionality of some existing interface
elements, including for example an auto-complete function for input fields.

The most prominent components of Bootstrap are its layout components, as they affect an entire
web page. The basic layout component is called "Container", as every other element in the page
is placed in it. Developers can choose between a fixed-width container and a fluid-width
container. While the latter always fills the width of the web page, the former uses one of the four
predefined fixed widths, depending on the size of the screen showing the page:

 Smaller than 576 pixels

 576–768 pixels
 768–992 pixels
 992–1200 pixels
 Larger than 1200 pixels

Once a container is in place, other Bootstrap layout components implement a CSS Flexbox
layout through defining rows and columns.

22 | P a g e
A precompiled version of Bootstrap is available in the form of one CSS file and three JavaScript
files that can be readily added to any project. The raw form of Bootstrap, however, enables
developers to implement further customization and size optimizations. This raw form is modular,
meaning that the developer can remove unneeded components, apply a theme and modify the
uncompiled Sass files.

2.2.5 AJAX

Ajax (short for "Asynchronous JavaScript and XML") is a set of web development techniques
using many web technologies on the client side to create asynchronous web applications. With
Ajax, web applications can send and retrieve data from a server asynchronously (in the
background) without interfering with the display and behaviour of the existing page. By
decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by
extension, web applications, to change content dynamically without the need to reload the entire
page. In practice, modern implementations commonly utilize JSON instead of XML.

Ajax is not a single technology, but rather a group of technologies. HTML and CSS can be used
in combination to mark up and style information. The webpage can then be modified by
JavaScript to dynamically display—and allow the user to interact with—the new information.
The built-in XMLHttpRequest object, or since 2017 the new "fetch()" function within JavaScript,
is commonly used to execute Ajax on webpages, allowing websites to load content onto the
screen without refreshing the page. Ajax is not a new technology, or different language, just
existing technologies used in new ways.

The term Ajax has come to represent a broad group of Web technologies that can be used to
implement a Web application that communicates with a server in the background, without
interfering with the current state of the page. The following technologies are incorporated:

 HTML (or XHTML) and CSS for presentation

 The Document Object Model (DOM) for dynamic display of and interaction with data
 JSON or XML for the interchange of data, and XSLT for XML manipulation
 The XMLHttpRequest object for asynchronous communication
 JavaScript to bring these technologies together

23 | P a g e
2.2.6 JQUERY

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation,
as well as event handling, CSS animation, and Ajax. It is free, open-source software using the
permissive MIT License. As of May 2019, jQuery is used by 73% of the 10 million most popular
websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large
margin, having at least 3 to 4 times more usage than any other JavaScript library.

jQuery's syntax is designed to make it easier to navigate a document, select DOM elements,
create animations, handle events, and develop Ajax applications. jQuery also provides
capabilities for developers to create plug-ins on top of the JavaScript library. This enables
developers to create abstractions for low-level interaction and animation, advanced effects and
high-level, themeable widgets. The modular approach to the jQuery library allows the creation of
powerful dynamic web pages and Web applications.

24 | P a g e
2.2.7 GOOGLE BROWSER SYNC

Browser Sync is an automation tool that makes web development faster. In the past we've
automated a lot of actions like compilation of SASS files, image compression etc. BrowserSync
brings a whole new type of automation to the table with batteries included.

Features of Browser Sync

 Live reloading: This is probably the most important feature of BrowserSync. change your
code and the page is auto-reloaded. Live reloading works across many browsers and devices.
 Interaction synchronization: It means that all your actions are mirrored across every browser.
This little feature is useful for testing, especially, when testing across many devices. You can
also customize what actions are mirrored across browsers.
 Simulate slower connections: I believe you are expecting users from all over the world, and
some countries are not fortunate enough to have fast internet connection; BrowserSync has a
feature that you can use to throttle your website connection speed.
 URL history: BrowserSync logs all browsing history so you can push a test URL to all
devices.
 Extra: BrowserSync is compatible with many task runners like GULP and Grunt. And they
work across many operating systems.

25 | P a g e
 3. COURSE: HTML, CSS And JavaScript for Web Developers

3.1 INTRODUCTION

In this course, I learnt the basic tools that every web page coder needs to know. I started from the
ground up by learning how to implement modern web pages with HTML and CSS. Then I
advanced to learning how to code pages such that its components rearrange and resize
themselves automatically based on the size of the user’s screen. After doing the course, I was
able to code up a web page that will be just as useful on a mobile phone as on a desktop
computer. No “pinch and zoom” required! Last but certainly not least, I got a thorough
introduction to the most ubiquitous, popular, and incredibly powerful language of the web:
JavaScript. Using JavaScript, I was able to build a fully functional web application that utilizes
Ajax to expose server-side functionality and data to the end user.

Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and
be comfortable to view on all devices: from a desktop computer to tablets and mobile phones. I
learnt all about that in this course.

SYLLABUS

1. MODULE 1: Introduction to HTML5

In this module I learnt the basics of HTML5. I started with instructional videos on how to set
up my development environment, go over HTML5 basics like valid document structure,
which elements can be included inside other elements and which cannot, discuss the meaning
and usefulness of HTML5 semantic tags, and go over essential HTML5 tags.

2. MODULE 2: Introduction to CSS3

A lot of people "tinker" with CSS. In this module, the instructor takes me from the very
basics of CSS3 to some fairly advanced concepts like floating and CSS rule conflict
resolution. I learnt about the 'box model', background property, etc. I finished off the module
with learning about Responsive Design using our own CSS code as well as start introducing
Twitter Bootstrap with its essential Grid System.

26 | P a g e
3. MODULE 3: Coding the Static Restaurant Site
In this module, we went over some basics of interacting with a client when managing a web
site project and then go visit a real client at their place of business (a Chinese restaurant),
help the owner figure out what she wants in a site, and get acquainted with the restaurant in
general. We'll spend the rest of the module building a real web site for this business from
scratch and you'll get to sit next to me and watch as the site comes together.

4. MODULE 4: Introduction to JavaScript

What fun would a web site be if there was no functionality to it? In this module, we are going
to concentrate on learning the fundamentals of the JavaScript language. A lot of even
seasoned developers “tinker” with JavaScript without really understanding how the language
works. That leads to viewing the language as more of a nuisance instead of a powerful tool.
That is why we are going to concentrate not only on the “how” but also on the “why”, so you
are empowered by the JavaScript language features, not confused by them. We’ll cover just
about everything - from common language constructs and JavaScript types to objects,
functions, arrays, closures, and scope isolation.

5. MODULE 5: Using JavaScript to Build Web Applications

In this module, we are going to take all those newly learned JavaScript language skills and
learn how to utilize them within the context of a web page. We’ll start by learning how to
properly manipulate the web page components using the JavaScript Document Object Model
API. We will then move on to learning one of the most popular ways of serving up data to a
web site - Ajax. We'll learn about the protocol that the language of the web speaks in
(HTTP), how to set up and handle Ajax requests and responses, as well as how to process
JSON data. We'll finish the module by connecting our restaurant web site from Module 3 to a
real backend service that will allow us to pull the data for the restaurant menu dynamically
from the server without having to reload the entire page.

27 | P a g e
3.2 MODULE CONTENTS

3.2.1 MODULE 1: Introduction to HTML5

In this module I learnt the basics of HTML5. I started with instructional videos on how to set up
my development environment, go over HTML5 basics like valid document structure, which
elements can be included inside other elements and which cannot, discuss the meaning and
usefulness of HTML5 semantic tags, and go over essential HTML5 tags.

Development Environment setup

In this part, I installed and set up all the tools and software required for this course which
include:

 Sublime Text 3
 Browser Sync
 GitHub

HTML Basics – Essential HTML tags

 Tags in HTML: Tags are one of the most important part in an HTML Document. HTML uses
some predefined tags which tells the browser about content display property, that is how to
display a particular given content. For Example, to create a paragraph, one must use the
paragraph tags(<p> </p>) and to insert an image one must use the img tags(<img />).
There are generally two types of tags in HTML:
 Paired Tags: These tags come in pairs. That is they have both opening(< >) and
closing(</ >) tags.
 Singular Tags: These tags do not required to be closed.
 HTML structure: An HTML Document is mainly divided into two parts:
HEAD: This contains the information about the HTML document. For Example, Title of the
page, version of HTML, Meta Data etc.
BODY: This contains everything you want to display on the Web Page.

28 | P a g e
Let us now have a look on the basic structure of HTML. That is the code which is must for
every webpage to have:

<!DOCTYPE html>

<html>
<head>
<title>

</title>
</head>

<body>

</body>
</html>

Every Webpage must contain this code. Below is the complete explanation of each of the
tags used in the above piece of HTML code:

<!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the
version is HTML 5.

<html>: This is called HTML root element and used to wrap all the code.

<head>: Head tag contains metadata, title, page CSS etc. All the HTML elements that can be
used inside the <head> element are:

 <style>
 <title>
 <base>
 <noscript>
 <script>
 <meta>

<body>: Body tag is used to enclosed all the data which a web page has from texts to links.
All of the content that you see rendered in the browser is contained within this element.

29 | P a g e
 Heading Elements: HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
 Lists: HTML offers web authors three ways for specifying lists of information. All lists must contain
one or more list elements. Lists may contain −
 <ul> − An unordered list. This will list items using plain bullets.
 <ol> − An ordered list. This will use different schemes of numbers to list your items.
 <dl> − A definition list. This arranges your items in the same way as they are
arranged in a dictionary.
 Links: It is a connection from one web resource to another.A link has two ends,An anchor
and direction. The link starts at the “source” anchor and points to the “destination” anchor,
which may be any Web resource such as an image, a video clip, a sound bite, a program, an
HTML document or an element within an HTML document.
HTML Link Syntax
Links are specified in HTML using the “a” tag.
<a href = "url">Text Link</a>
Syntax Explanation:
href : The href attribute is used to specify the destination address of the link used.
Text link : The text link is the visible part of the link.
 Images: The “img” tag is used to add images on a webpage. The “img” tag is an empty tag,
which means it can contain only a list of attributes and it has no closing tag.
Syntax :
<img src="url" alt="some_text">

30 | P a g e
 Attribute:
src: src stands for source. Every image has a src attribute which tells the browser where to
find the image you want to display. The URL of the image provided points to the location
where the image is stored.
alt: If the image cannot be displayed then the alt attribute acts as an alternative description
for the image. The value of the alt attribute is an user-defined text.

3.2.2 MODULE 2: Introduction to CSS3

In this module, the instructor takes me from the very basics of CSS3 to some fairly advanced
concepts like floating and CSS rule conflict resolution. I learnt about the 'box model',
background property, etc. I finished off the module with learning about Responsive Design using
our own CSS code as well as start introducing Twitter Bootstrap with its essential Grid System.

CSS Basics

A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts −

 Selector − A selector is an HTML tag at which a style will be applied. This could be any tag
like <h1> or <table> etc.

 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border etc.

 Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows −

selector { property: value }

31 | P a g e
Example − You can define a table border as follows −

table{ border :1px solid #C00; }

Here table is a selector and border is a property and given value 1px solid #C00 is the value of
that property.

CSS Selectors

 Element Selector: The element selector selects HTML elements based on the element name.

Example
Here, all <p> elements on the page will be center-aligned, with a red text color:

p {
text-align: center;
color: red;
}

 Id Selector: The id selector uses the id attribute of an HTML element to select a specific
element. The id of an element is unique within a page, so the id selector is used to select one
unique element! To select an element with a specific id, write a hash (#) character, followed
by the id of the element.

32 | P a g e
Example
The CSS rule below will be applied to the HTML element with id="para1":

#para1 {
text-align: center;
color: red;
}

 Class Selector: The class selector selects HTML elements with a specific class attribute. To
select elements with a specific class, write a period (.) character, followed by the class name.

Example
In this example all HTML elements with class="center" will be red and center-
aligned:

.center {
text-align: center;
color: red;
}

 Universal Selector: The universal selector (*) selects all HTML elements on the page.

Example
The CSS rule below will affect every HTML element on the page:

* {
text-align: center;
color: blue;
}

CSS Combinators

Descendant Selector: The descendant selector matches all elements that are descendants of a
specified element. The following example selects all <p> elements inside <div> elements:

33 | P a g e
Example
div p {
background-color: yellow;
}

Child Selector: The child selector selects all elements that are the children of a specified element.
The following example selects all <p> elements that are children of a <div> element:

Example
div > p {
background-color: yellow;
}

Adjacent Sibling Selector: The adjacent sibling selector selects all elements that are the adjacent
siblings of a specified element. Sibling elements must have the same parent element, and
"adjacent" means "immediately following". The following example selects all <p> elements that
are placed immediately after <div> elements:

Example
div + p {
background-color: yellow;
}

General Sibling Selector: The general sibling selector selects all elements that are siblings of a
specified element. The following example selects all <p> elements that are siblings of <div>
elements:

Example
div ~ p {
background-color: yellow;
}

34 | P a g e
Conflict Resolution

If there are two or more conflicting CSS rules that point to the same element, the browser
follows some rules to determine which one is most specific and therefore wins out

Think of specificity as a score/rank that determines which style declarations are ultimately
applied to an element.

The universal selector (*) has low specificity, while ID selectors are highly specific!

 Specificity Hierarchy

Every selector has its place in the specificity hierarchy. There are four categories which define
the specificity level of a selector:

Inline styles - An inline style is attached directly to the element to be styled. Example: <h1
style="color: #ffffff;">.

IDs - An ID is a unique identifier for the page elements, such as #navbar.

Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and
pseudo-classes such as :hover, :focus etc.

Elements and pseudo-elements - This category includes element names and pseudo-elements,
such as h1, div, :before and :after.

 How to Calculate Specificity?

Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or
pseudo-class, add 1 for each element name or pseudo-element.

Consider these three code fragments:

35 | P a g e
Example
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

The specificity of A is 1 (one element)

The specificity of B is 101 (one ID reference and one element)
The specificity of C is 1000 (inline styling)

Since 1 < 101 < 1000, the third rule (C) has a greater level of specificity, and therefore will be
applied.

 Specificity Rules
1. Equal specificity: the latest rule counts - If the same rule is written twice into the external
style sheet, then the lower rule in the style sheet is closer to the element to be styled, and
therefore will be applied.
2. ID selectors have a higher specificity than attribute selectors
3. Contextual selectors are more specific than a single element selector
4. A class selector beats any number of element selectors
5. The universal selector and inherited values have a specificity of 0

Text Styling

 The color property is used to set the color of a text.

 The direction property is used to set the text direction.
 The letter-spacing property is used to add or subtract space between the letters that make up a
word.
 The word-spacing property is used to add or subtract space between the words of a sentence.
 The text-indent property is used to indent the text of a paragraph.
 The text-align property is used to align the text of a document.
 The text-decoration property is used to underline, overline, and strikethrough text.

36 | P a g e
 The text-transform property is used to capitalize text or convert text to uppercase or
lowercase letters.
 The white-space property is used to control the flow and formatting of text.
 The text-shadow property is used to set the text shadow around a text.

CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when
talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of:
margins, borders, padding, and the actual content. The image below illustrates the box model:

Explanation of the different parts:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between
elements.
Responsive Web Design
Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web
page should look good, and be easy to use, regardless of the device.
Web pages should not leave out information to fit smaller devices, but rather adapt its content to
fit any device:

37 | P a g e
 Desktop Tablet Phone

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge,
or move the content to make it look good on any screen.
Media Queries
Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Example
If the browser window is 600px or smaller, the background color will be
lightblue:

@media only screen and (max-width: 600px) {

body {
background-color: lightblue;
}
}

Twitter Bootstrap

Bootstrap is a web framework that focuses on simplifying the development of informative web
pages (as opposed to web apps). The primary purpose of adding it to a web project is to apply
Bootstrap's choices of color, size, font and layout to that project. As such, the primary factor is
whether the developers in charge find those choices to their liking. Once added to a project,
Bootstrap provides basic style definitions for all HTML elements. The result is a uniform

38 | P a g e
appearance for prose, tables and form elements across web browsers. In addition, developers can
take advantage of CSS classes defined in Bootstrap to further customize the appearance of their
contents. For example, Bootstrap has provisioned for light- and dark-colored tables, page
headings, more prominent pull quotes, and text with a highlight.

Bootstrap also comes with several JavaScript components in the form of jQuery plugins. They
provide additional user interface elements such as dialog boxes, tooltips, and carousels. Each
Bootstrap component consists of an HTML structure, CSS declarations, and in some cases
accompanying JavaScript code. They also extend the functionality of some existing interface
elements, including for example an auto-complete function for input fields.

The most prominent components of Bootstrap are its layout components, as they affect an entire
web page. The basic layout component is called "Container", as every other element in the page
is placed in it. Developers can choose between a fixed-width container and a fluid-width
container. While the latter always fills the width of the web page, the former uses one of the four
predefined fixed widths, depending on the size of the screen showing the page:

 Smaller than 576 pixels

 576–768 pixels
 768–992 pixels
 992–1200 pixels
 Larger than 1200 pixels

Once a container is in place, other Bootstrap layout components implement a CSS Flexbox
layout through defining rows and columns.

3.2.2 MODULE 3: Coding the Static Restaurant Site

In this module, we went over some basics of interacting with a client when managing a web site
project and then go visit a real client at their place of business (a Chinese restaurant), help the
owner figure out what she wants in a site, and get acquainted with the restaurant in general. We'll
spend the rest of the module building a real web site for this business from scratch and you'll get
to sit next to me and watch as the site comes together.

39 | P a g e
Visit the Client

The instructor visited a local chinese restaurant for which he would develop the website.

Coding the Navigation Bar of the site

With the help of Twitter Bootstrap and its predefined components and documentation, the
navigation bar of the site was developed. The elements of the bar would re-organize according to
screen size:

Desktop

Tablet

Mobile Phone

40 | P a g e
Coding the Homepage and the Footer of the site

Desktop Tablet

Mobile Phone

41 | P a g e
Coding the Menu Page of the site

Coding the Single category page of the site

42 | P a g e
3.2.2 MODULE 4: Introduction to JavaScript

What fun would a web site be if there was no functionality to it? In this module, we are going to
concentrate on learning the fundamentals of the JavaScript language. A lot of even seasoned
developers “tinker” with JavaScript without really understanding how the language works. That
leads to viewing the language as more of a nuisance instead of a powerful tool. That is why we
are going to concentrate not only on the “how” but also on the “why”, so you are empowered by
the JavaScript language features, not confused by them. We’ll cover just about everything - from
common language constructs and JavaScript types to objects, functions, arrays, closures, and
scope isolation.

JavaScript Datatypes

One of the most fundamental characteristics of a programming language is the set of data types it
supports. These are the type of values that can be represented and manipulated in a programming
language.

JavaScript allows you to work with three primitive data types −

 Numbers, eg. 123, 120.50 etc.

 Strings of text e.g. "This text string" etc.

 Boolean e.g. true or false.

JavaScript also defines two trivial data types, null and undefined, each of which defines only a
single value. In addition to these primitive data types, JavaScript supports a composite data type
known as object. We will cover objects in detail in a separate chapter.

Note − JavaScript does not make a distinction between integer values and floating-point values.
All numbers in JavaScript are represented as floating-point values. JavaScript represents
numbers using the 64-bit floating-point format defined by the IEEE 754 standard.

43 | P a g e
JavaScript Variables

Like many other programming languages, JavaScript has variables. Variables can be thought of
as named containers. You can place data into these containers and then refer to the data simply
by naming the container.

Before you use a variable in a JavaScript program, you must declare it. Variables are declared
with the var keyword as follows.

<script type = "text/javascript">

<!--
var money;
var name;
//-->
</script>

You can also declare multiple variables with the same var keyword as follows –

<script type = "text/javascript">

<!--
var money, name;
//-->
</script>

Storing a value in a variable is called variable initialization. You can do variable initialization
at the time of variable creation or at a later point in time when you need that variable.

JavaScript Variable Scope

The scope of a variable is the region of your program in which it is defined. JavaScript variables
have only two scopes.

 Global Variables − A global variable has global scope which means it can be defined
anywhere in your JavaScript code.
 Local Variables − A local variable will be visible only within a function where it is defined.
Function parameters are always local to that function.

44 | P a g e
Within the body of a function, a local variable takes precedence over a global variable with the
same name. If you declare a local variable or function parameter with the same name as a global
variable, you effectively hide the global variable.

Function Definition

Before we use a function, we need to define it. The most common way to define a function in
JavaScript is by using the function keyword, followed by a unique function name, a list of
parameters (that might be empty), and a statement block surrounded by curly braces.

Syntax

The basic syntax is shown here.

<script type = "text/javascript">

<!--
function functionname(parameter-list) {
statements
}
//-->
</script>

Calling a Function

To invoke a function somewhere later in the script, you would simply need to write the name of
that function as shown in the following code.

<html>
<head>
<script type = "text/javascript">
function sayHello() {
document.write ("Hello there!");
}
</script>

</head>

<body>
<p>Click the following button to call the function</p>
<form>

45 | P a g e
 <input type = "button" onclick = "sayHello()" value = "Say
Hello">
</form>
<p>Use different text in write method and then try...</p>
</body>
</html>

Output

Click the following button to call the function

Say Hello
Use different text in write method and then try...
JavaScript Objects

Objects, in JavaScript, is it’s most important data-type and forms the building blocks for modern
JavaScript. These objects are quite different from JavaScript’s primitive data-types(Number,
String, Boolean, null, undefined and symbol) in the sense that while these primitive data-types
all store a single value each (depending on their types).

 Objects are more complex and each object may contain any combination of these primitive
data-types as well as reference data-types.
 An object, is a reference data type. Variables that are assigned a reference value are given a
reference or a pointer to that value. That reference or pointer points to the location in
memory where the object is stored. The variables don’t actually store the value.
 Loosely speaking, objects in JavaScript may be defined as an unordered collection of related
data, of primitive or reference types, in the form of “key: value” pairs. These keys can be
variables or functions and are called properties and methods, respectively, in the context of
an object.

An object can be created with figure brackets {…} with an optional list of properties. A property
is a “key: value” pair, where a key is a string (also called a “property name”), and value can be
anything.

To understand this rather abstract definition, let us look at an example of a JavaScript Object :

let school = {
name : "Vivekananda School",
location : "Delhi",
established : "1971"
}

46 | P a g e
In the above example “name”, “location”, “established” are all “keys” and “Vivekananda
School”, “Delhi” and 1971 are values of these keys respectively.

Each of these keys is referred to as properties of the object. An object in JavaScript may also
have a function as a member, in which case it will be known as a method of that object.

Arrays in JavaScript

In JavaScript, array is a single variable that is used to store different elements. It is often used
when we want to store list of elements and access them by a single variable. Unlike most
languages where array is a reference to the multiple variable, in JavaScript array is a single
variable that stores multiple elements.

Declaration of an Array
There are basically two ways to declare an array.

Example:

var House = [ ]; // method 1

var House = new array(); // method 2

But generally method 1 is preferred over the method 2. Let us understand the reason for this.

Closure in JavaScript

Most of the JavaScript Developers use closure consciously or unconsciously. Even if they do
unconsciously it works fine in most of the cases. But knowing closure will provide better control
over the code when using them. And another reason for learning closure is that it is the most
frequently asked question in the interview for the JavaScript developers.

Let’s see and understand closure through an example.

47 | P a g e
Example 1:

/* 1 */ function foo()
/* 2 */ {
/* 3 */ var b = 1;
/* 4 */ function inner(){
/* 5 */ return b;
/* 6 */ }
/* 7 */ return inner;
/* 8 */ }
/* 9 */ var get_func_inner = foo();

/* 10 */ console.log(get_func_inner());
/* 11 */ console.log(get_func_inner());
/* 12 */ console.log(get_func_inner());

Explanation: Interesting thing to note here is from line number 9 to line number 12 . At line
number 9 we are done with the execution of function foo() and the entire body of function
inner() is returned and stored in var get_func_inner, due to the line 7 return inner.
[The return statement does not execute the inner function – function is executed only when
followed by () , but rather the return statement returns the reference to the function as a
function in JavaScript is also an object.]

We can access the variable b which is defined in function foo() through function inner() as the
later preserves the scope chain of enclosing function at the time of execution of enclosing
function i.e. the inner function knows the value of b through it’s scope chain.
This is closure in action that is inner function can have access to the outer function variables as
well as all the global variables.

JavaScript Namespaces

Namespace refers to the programming paradigm of providing scope to the identifiers (names of
types, functions, variables, etc) to prevent collisions between them. For instance, the same
variable name might be required in a program in different contexts. Using namespaces in such a
scenario will isolate these contexts such that the same identifier can be used in different
namespaces. In this article, we will discuss how namespaces can be initialized and used in

48 | P a g e
JavaScript. JavaScript does not provide namespace by default. However, we can replicate this
functionality by making a global object which can contain all functions and variables.

Syntax:
 To initialise an empty namespace
var <namespace> = {};
 To access variables in the namespace
<namespace>.<identifier>
Example: As shown below, the identifier startEngine is used to denote different functions in car
and bike objects. In this manner, we can use the same identifier in different namespaces by
attaching it to different global objects.

<script>
var car = {
startEngine: function () {
console.log("Car started");
}
}

var bike = {
startEngine: function () {
console.log("Bike started");
}
}

car.startEngine();
bike.startEngine();
</script>

Output:
Car started
Bike started

49 | P a g e
3.2.2 MODULE 5: Using JavaScript to Build Web Applications

In this module, we are going to take all those newly learned JavaScript language skills and learn
how to utilize them within the context of a web page. We’ll start by learning how to properly
manipulate the web page components using the JavaScript Document Object Model API. We
will then move on to learning one of the most popular ways of serving up data to a web site -
Ajax. We'll learn about the protocol that the language of the web speaks in (HTTP), how to set
up and handle Ajax requests and responses, as well as how to process JSON data. We'll finish the
module by connecting our restaurant web site from Module 3 to a real backend service that will
allow us to pull the data for the restaurant menu dynamically from the server without having to
reload the entire page.

DOCUMENT OBJECT MODEL MANIPULATION

To start learning about DOM manipulation, let's begin with a practical example.

1. Take a local copy of the dom-example.html page and the image that goes along with it.
2. Add a <script></script> element just above the closing </body> tag.
3. To manipulate an element inside the DOM, you first need to select it and store a reference to
it inside a variable. Inside your script element, add the following line:

const link = document.querySelector('a');

4. Now we have the element reference stored in a variable, we can start to manipulate it using
properties and methods available to it (these are defined on interfaces like
HTMLAnchorElement in the case of <a> element, its more general parent interface
HTMLElement, and Node — which represents all nodes in a DOM). First of all, let's change
the text inside the link by updating the value of the Node.textContent property. Add the
following line below the previous one:

link.textContent = 'Mozilla Developer Network';

5. We should also change the URL the link is pointing to, so that it doesn't go to the wrong

50 | P a g e
 place when it is clicked on. Add the following line, again at the bottom:

link.href = 'https://developer.mozilla.org';

Note that, as with many things in JavaScript, there are many ways to select an element and store
a reference to it in a variable. Document.querySelector() is the recommended modern approach,
which is convenient because it allows you to select elements using CSS selectors. The above
querySelector() call will match the first <a> element that appears in the document. If you wanted
to match and do things to multiple elements, you could use Document.querySelectorAll(), which
matches every element in the document that matches the selector, and stores references to them
in an array-like object called a NodeList.

There are older methods available for grabbing element references, such as:

 Document.getElementById(), which selects an element with a given id attribute value, e.g.

<p id="myId">My paragraph</p>. The ID is passed to the function as a parameter, i.e. const
elementRef = document.getElementById('myId').
 Document.getElementsByTagName(), which returns an array-like object containing all the
elements on the page of a given type, for example <p>s, <a>s, etc. The element type is
passed to the function as a parameter, i.e. const elementRefArray =
document.getElementsByTagName('p').

These two work in older browsers than the modern methods like querySelector(), but are not as
convenient.

Introduction to AJAX

What is HyperText Transfer Protocol?

Also known as HTTP, this protocol is the backbone of web development. The protocol defines
how information should be exchanged on the internet. It basically governs the request-response
cycle of the synergy of client to server and vice versa. Client is liable for sending the request to

51 | P a g e
the server and the server then responds to the request via a response message after parsing the
request and correlated information.

The Key role in the functioning of HTTP is played by Model View Controller (MVC), which
gives us the blueprint about the components through which the client and server can
communicate with each other. In Layman terms, Model represents the Database, View is the
templates and layouts on our website and Controller represents the logical part of our application
which connects the other two.

Several HTTP methods which are used regularly to undergo information exchange; some of
which are given below:

a) GET: Used to retrieve a resource from the server.

b) POST/PUT: Used to create or replace a resource in the server.
c) PATCH: Used to update a resource.
d) DELETE: Used to delete a resource in the server-side.

AJAX

Ajax (short for "Asynchronous JavaScript and XML") is a set of web development techniques
using many web technologies on the client side to create asynchronous web applications. With
Ajax, web applications can send and retrieve data from a server asynchronously (in the
background) without interfering with the display and behaviour of the existing page. By
decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by
extension, web applications, to change content dynamically without the need to reload the entire
page. In practice, modern implementations commonly utilize JSON instead of XML.

Ajax is not a single technology, but rather a group of technologies. HTML and CSS can be used
in combination to mark up and style information. The webpage can then be modified by
JavaScript to dynamically display—and allow the user to interact with—the new information.
The built-in XMLHttpRequest object, or since 2017 the new "fetch()" function within JavaScript,
is commonly used to execute Ajax on webpages, allowing websites to load content onto the

52 | P a g e
screen without refreshing the page. Ajax is not a new technology, or different language, just
existing technologies used in new ways.

The term Ajax has come to represent a broad group of Web technologies that can be used to
implement a Web application that communicates with a server in the background, without
interfering with the current state of the page. The following technologies are incorporated:

 HTML (or XHTML) and CSS for presentation

 The Document Object Model (DOM) for dynamic display of and interaction with data
 JSON or XML for the interchange of data, and XSLT for XML manipulation
 The XMLHttpRequest object for asynchronous communication
 JavaScript to bring these technologies together

53 | P a g e
 4. RESULTS AND DISCUSSION

In this course, I learnt the basic tools that every web page coder needs to know. I started from the
ground up by learning how to implement modern web pages with HTML and CSS. Then I
advanced to learning how to code pages such that its components rearrange and resize
themselves automatically based on the size of the user’s screen. After doing the course, I was
able to code up a web page that will be just as useful on a mobile phone as on a desktop
computer. No “pinch and zoom” required! Last but certainly not least, I got a thorough
introduction to the most ubiquitous, popular, and incredibly powerful language of the web:
JavaScript. Using JavaScript, I was able to build a fully functional web application that utilizes
Ajax to expose server-side functionality and data to the end user.

Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and
be comfortable to view on all devices: from a desktop computer to tablets and mobile phones. I
learnt all about that in this course.

Along with learning, I made few assignments too at the end of each module.

Module 1 Assignment: It was a quiz in which I scored 100%

Module 2 Assignment:

54 | P a g e
Here is the link to the
assignment: https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/
assignments/assignment2/Assignment-2.md

Desktop

Tablet

55 | P a g e
Mobile Phone

Module 3 Assignment:

56 | P a g e
Here is the link to the assignment: https://github.com/jhu-ep-coursera/fullstack-course4/blob/
master/assignments/assignment3/Assignment-3.md

Desktop

Tablet

Mobile Phone

57 | P a g e
Module 4 Assignment:

Here is the link to the

assignment: https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/
assignments/assignment4/Assignment-4.md

Solution:

58 | P a g e
Module 5 Assignment:

Here is the link to the assignment: https://github.com/jhu-ep-coursera/fullstack-course4/blob/

master/assignments/assignment5/Assignment-5.md

5. CONCLUSION

59 | P a g e
Web development is the work involved in developing a Web site for the Internet (World Wide
Web) or an intranet (a private network). Web development can range from developing a simple
single static page of plain text to complex Web-based Internet applications (Web apps),
electronic businesses, and social network services. A more comprehensive list of tasks to which
Web development commonly refers, may include Web engineering, Web design, Web content
development, client liaison, client-side/server-side scripting, Web server and network security
configuration, and e-commerce development. Among Web professionals, "Web development"
usually refers to the main non-design aspects of building Web sites: writing markup and coding.
Web development may use content management systems (CMS) to make content changes easier
and available with basic technical skills.

For larger organizations and businesses, Web development teams can consist of hundreds of
people (Web developers) and follow standard methods like Agile methodologies while
developing Web sites. Smaller organizations may only require a single permanent or contracting
developer, or secondary assignment to related job positions such as a graphic designer or
information systems technician. Web development may be a collaborative effort between
departments rather than the domain of a designated department. There are three kinds of Web
developer specialization: front-end developer, back-end developer, and full-stack developer.
Front-end developers are responsible for behavior and visuals that run in the user browser, while
back-end developers deal with the servers.

In this course, I learnt the basic tools that every web page coder needs to know. I started from the
ground up by learning how to implement modern web pages with HTML and CSS. Then I
advanced to learning how to code pages such that its components rearrange and resize
themselves automatically based on the size of the user’s screen. After doing the course, I was
able to code up a web page that will be just as useful on a mobile phone as on a desktop
computer. No “pinch and zoom” required! Last but certainly not least, I got a thorough
introduction to the most ubiquitous, popular, and incredibly powerful language of the web:
JavaScript. Using JavaScript, I was able to build a fully functional web application that utilizes
Ajax to expose server-side functionality and data to the end user.

REFERENCES

60 | P a g e
https://blog.hubspot.com/website/website-development

https://www.coursera.org/

https://www.geeksforgeeks.org/

https://www.w3schools.com/

https://www.javatpoint.com/

https://github.com/

https://www.tutorialspoint.com/index.htm

https://www.wikipedia.org/

61 | P a g e