Web Development Interview Questions & Answers Download PDF
Prepare comprehensively for your Web Development interview with our extensive list of 60 questions. Our questions cover a wide range of topics in Web Development to ensure you're well-prepared. Whether you're new to the field or have years of experience, these questions are designed to help you succeed. Don't miss out on our free PDF download, containing all 60 questions to help you succeed in your Web Development interview. It's an invaluable tool for reinforcing your knowledge and building confidence.
60 Web Development Questions and Answers:
Web Development Job Interview Questions Table of Contents:
1 :: Define HTML (Hyper Text Markup Language)?
HTML ( Hyper Text Markup Language) is the language used to write Web pages. You are looking at a Web page right now.
You can view HTML pages in two ways:
► One view is their appearance on a Web browser, just like this page -- colors, different text sizes, graphics.
► The other view is called "HTML Code" -- this is the code that tells the browser what to do.
You can view HTML pages in two ways:
► One view is their appearance on a Web browser, just like this page -- colors, different text sizes, graphics.
► The other view is called "HTML Code" -- this is the code that tells the browser what to do.
2 :: Write the simplest HTML page?
HTML Code:
<HTML>
<HEAD>
<TITLE>This is my page title! </TITLE>
</HEAD>
<BODY>
This is my message to the world!
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>This is my page title! </TITLE>
</HEAD>
<BODY>
This is my message to the world!
</BODY>
</HTML>
3 :: How to include comments in HTML?
Technically, since HTML is an SGML application, HTML uses SGML comment syntax. However, the full syntax is complex, and browsers don't support it in its entirety anyway. Therefore, use the following simplified rule to create HTML comments that both have valid syntax and work in browsers:
An HTML comment begins with "<!--", ends with "-->", and does not contain "--" or ">" anywhere in the comment.
The following are examples of HTML comments:
► <!-- This is a comment. -->
► <!-- This is another comment,
and it continues onto a second line. -->
► <!---->
An HTML comment begins with "<!--", ends with "-->", and does not contain "--" or ">" anywhere in the comment.
The following are examples of HTML comments:
► <!-- This is a comment. -->
► <!-- This is another comment,
and it continues onto a second line. -->
► <!---->
4 :: How you create arrays in JavaScript?
We can declare an array like this
var scripts = new Array()
We can add elements to this array like this
scripts[0] = " PHP"
scripts[1] = " ASP"
scripts[2] = " JavaScript"
scripts[3] = " HTML"
Now our array scripts have 4 elements inside it and we can print or access them by using their index number. Note that index number starts from 0. To get the third element of the array we have to use the index number 2. Here is the way to get the third element of an array.
document.write(scripts[2])
We also can create an array like this
var no_array = new Array(21, 22, 23, 24, 25)
var scripts = new Array()
We can add elements to this array like this
scripts[0] = " PHP"
scripts[1] = " ASP"
scripts[2] = " JavaScript"
scripts[3] = " HTML"
Now our array scripts have 4 elements inside it and we can print or access them by using their index number. Note that index number starts from 0. To get the third element of the array we have to use the index number 2. Here is the way to get the third element of an array.
document.write(scripts[2])
We also can create an array like this
var no_array = new Array(21, 22, 23, 24, 25)
5 :: How to submit a form using JavaScript?
Use document.forms[0].submit()
(0 refers to the index of the form - if we have more than one form in a page, then the first one has the index 0, second has index 1 and so on).
Assuming that you have defined the name attribute also for your form, you can write:
document.forms[""].submit();
(0 refers to the index of the form - if we have more than one form in a page, then the first one has the index 0, second has index 1 and so on).
Assuming that you have defined the name attribute also for your form, you can write:
document.forms[""].submit();
6 :: Give example of using Regular Expressions for syntax checking in JavaScript?
var re = new RegExp(" ^(&[A-Za-z_0-9]{1,}=[A-Za-z_0-9]{1,})*$" )
var text = myWidget.value
var OK = re.test(text)
if( ! OK ) {
alert(" The extra parameters need some work. Should be something like: " &a=1&c=4" " )
}
var text = myWidget.value
var OK = re.test(text)
if( ! OK ) {
alert(" The extra parameters need some work. Should be something like: " &a=1&c=4" " )
}
7 :: How you read and write a file using JavaScript?
I/O operations like reading or writing a file is not possible with client-side JavaScript. However , this can be done by coding a Java applet that reads files for the script.
8 :: What is the relationship between JavaScript and ECMAScript?
ECMAScript is yet another name for JavaScript (other names include LiveScript). The current JavaScript that you see supported in browsers is ECMAScript revision 3.
9 :: Define JavaScript?
JavaScript is a general-purpose programming language designed to let programmers of all skill levels control the behavior of software objects. The language is used most widely today in Web browsers whose software objects tend to represent a variety of HTML elements in a document and the document itself. But the language can be--and is--used with other kinds of objects in other environments. For example, Adobe Acrobat Forms uses JavaScript as its underlying scripting language to glue together objects that are unique to the forms generated by Adobe Acrobat. Therefore, it is important to distinguish JavaScript, the language, from the objects it can communicate with in any particular environment. When used for Web documents, the scripts go directly inside the HTML documents and are downloaded to the browser with the rest of the HTML tags and content.
JavaScript is a platform-independent, event-driven, interpreted client-side scripting and programming language developed by Netscape Communications Corp. and Sun Microsystems.
JavaScript is a platform-independent, event-driven, interpreted client-side scripting and programming language developed by Netscape Communications Corp. and Sun Microsystems.
10 :: How you create border using images by CSS3?
By using border-image: property of css3 we can create a border using images like below
.roundpcds
{
border-image:url(borderpcds.png) 30 30 round;
-moz-border-image:url(borderpcds.png) 30 30 round; /* Firefox */
-webkit-border-image:url(borderpcds.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(borderpcds.png) 30 30 round; /* Opera */
}
.stretchPcds
{
-moz-border-image:url(borderpcds.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(borderpcds.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(borderpcds.png) 30 30 stretch; /* Opera */
border-image:url(borderpcds.png) 30 30 stretch;
}
.roundpcds
{
border-image:url(borderpcds.png) 30 30 round;
-moz-border-image:url(borderpcds.png) 30 30 round; /* Firefox */
-webkit-border-image:url(borderpcds.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(borderpcds.png) 30 30 round; /* Opera */
}
.stretchPcds
{
-moz-border-image:url(borderpcds.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(borderpcds.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(borderpcds.png) 30 30 stretch; /* Opera */
border-image:url(borderpcds.png) 30 30 stretch;
}
11 :: Which new futures added in CSS3 for Borders and how Browser Support it?
Following border futures added:
★ border-radius
★ box-shadow
★ border-image
and all modern Browser Support it like below:
★ Internet Explorer 9 supports border-radius and box-shadow
★ Firefox requires the prefix -moz- for border-image.
★ Chrome and Safari requires the prefix -webkit- for border-image.
★ Opera requires the prefix -o- for border-image.
★ border-radius
★ box-shadow
★ border-image
and all modern Browser Support it like below:
★ Internet Explorer 9 supports border-radius and box-shadow
★ Firefox requires the prefix -moz- for border-image.
★ Chrome and Safari requires the prefix -webkit- for border-image.
★ Opera requires the prefix -o- for border-image.
12 :: How you can create rounded corners using css3?
We have to creat a class like below
<style>
.roundc{
border:2px solid #ff0000;
border-radius:25px;
background:#dddddd;
width:300px;
-moz-border-radius:25px; /* Firefox */
-webkit-border-radius:25px; /* Chrome and Safari */
-o-border-radius:25px; /* Opera */
}
</style>
and we have to add this class where we want the round corner like in below div
<div class="roundc" > this is the round corner by css3 </div>
<style>
.roundc{
border:2px solid #ff0000;
border-radius:25px;
background:#dddddd;
width:300px;
-moz-border-radius:25px; /* Firefox */
-webkit-border-radius:25px; /* Chrome and Safari */
-o-border-radius:25px; /* Opera */
}
</style>
and we have to add this class where we want the round corner like in below div
<div class="roundc" > this is the round corner by css3 </div>
13 :: What are the CSS3 modules?
Below are the listed major modules:
★ Selectors
★ Box Model
★ Backgrounds and Borders
★ Text Effects
★ 2D/3D Transformations
★ Animations
★ Multiple Column
★ User Interface
★ Selectors
★ Box Model
★ Backgrounds and Borders
★ Text Effects
★ 2D/3D Transformations
★ Animations
★ Multiple Column
★ User Interface
14 :: Can you please explain the difference between CSS and CSS3?
CSS3 is upgreaded version of CSS with new future like Selectors,Box Model, Backgrounds and Borders, Text Effects,2D/3D Transformations, Animations, Multiple Column Layout,User Interface etc.
15 :: How you can store CSS definitions in external files?
If you want to share a set of CSS definitions with multiple HTML documents, you should those CSS definitions in an external file, and link it to those HTML documents using the LINK tag in the HEAD tag as:
<HEAD>
...
<LINK REL=stylesheet TYPE="text/css" HREF="css_file_url"/>
...
</HEAD>
Below is a CSS file called, GlobalGuideLine.css, that stores the same CSS definitions used in the previous exercise:
BODY {background-color: black}
P {color: yellow}
If you modify the HTML document with the LINK tag instead of the STYLE tag, you can get the same result:
<html><head>
<title>CSS Linked</title>
<link rel=stylesheet type="text/css" href="GlobalGuideLine.css"/>
</head><body>
<p>Welcome to GlobalGuideLine.com.
You should see this text in yellow on black background.</p>
</body></html>
<HEAD>
...
<LINK REL=stylesheet TYPE="text/css" HREF="css_file_url"/>
...
</HEAD>
Below is a CSS file called, GlobalGuideLine.css, that stores the same CSS definitions used in the previous exercise:
BODY {background-color: black}
P {color: yellow}
If you modify the HTML document with the LINK tag instead of the STYLE tag, you can get the same result:
<html><head>
<title>CSS Linked</title>
<link rel=stylesheet type="text/css" href="GlobalGuideLine.css"/>
</head><body>
<p>Welcome to GlobalGuideLine.com.
You should see this text in yellow on black background.</p>
</body></html>
16 :: How I can include CSS inside the HEAD tag?
If you want to include CSS inside the HEAD tag and apply to the entire HMTL docuemnt, you can use the STYLE tag as <STYLE TYPE="text/css">css_definition</STYLE>. The following tutorial exercise shows you how to set body background to black and paragraph text to yellow:
<html><head>
<title>CSS Included</title>
<style type="text/css">
BODY {background-color: black}
P {color: yellow}
</style>
</head><body>
<p>Welcome to GlobalGuideLine.com.
You should see this text in yellow on black background.</p>
</body></html>
<html><head>
<title>CSS Included</title>
<style type="text/css">
BODY {background-color: black}
P {color: yellow}
</style>
</head><body>
<p>Welcome to GlobalGuideLine.com.
You should see this text in yellow on black background.</p>
</body></html>
17 :: How I can include CSS inside a HTML tag?
If you want to include CSS inside a HTML tag, you can use the STYLE attribute as <TAG STYLE="css_definition" ...>. Of course, the CSS definition will only apply to this instance of this tag. The following tutorial exercise shows you how to set background to gray on a <PRE> tag:
<p>Map of commonly used colors:</p>
<pre style="background-color: gray">
black #000000
white #ffffff
gray #7f7f7f
red #ff0000
green #00ff00
blue #0000ff
</pre>
<p>Map of commonly used colors:</p>
<pre style="background-color: gray">
black #000000
white #ffffff
gray #7f7f7f
red #ff0000
green #00ff00
blue #0000ff
</pre>
18 :: How many ways to attach CSS to HTML documents?
There are 3 ways to attach CSS to HTML documents:
★ Included in the STYLE attribute of HTML tags.
★ Included in the STYLE tag inside the HEAD tag.
★ Included in an external file and specify it in the LINK tag inside the HEAD tag.
★ Included in the STYLE attribute of HTML tags.
★ Included in the STYLE tag inside the HEAD tag.
★ Included in an external file and specify it in the LINK tag inside the HEAD tag.
19 :: List the basic Unit of CSS?
The basic unit of CSS is a definition of a style property for a selected HTML tag written in the following syntax:
html_tag_name {style_property_name: style_property_value}
For example:
/* set background color to black for the <BODY> tag */
BODY {background-color: black}
/* set font size to 16pt for the <H1> tag */
H1 {font-size: 16pt}
/* set left margin to 0.5 inch for the <BLOCKQUOTE> tag */
BLOCKQUOTE {margin-left: 0.5in}
html_tag_name {style_property_name: style_property_value}
For example:
/* set background color to black for the <BODY> tag */
BODY {background-color: black}
/* set font size to 16pt for the <H1> tag */
H1 {font-size: 16pt}
/* set left margin to 0.5 inch for the <BLOCKQUOTE> tag */
BLOCKQUOTE {margin-left: 0.5in}
20 :: Define CSS (Cascading Style Sheets)?
CSS (Cascading Style Sheets) is a technical specification that allows HTML document authors to attach formatting style sheets to HTML documents. When HTML documents are viewed as Web pages through Web browsers, the attached style sheets will alter the default style sheets embedded in browsers.
One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in CSS specification.
CSS specification is maintained by W3C. You can download a copy of the specification at http://www.w3.org/.
Tutorials below are based Cascading Style Sheets, level 1, which has been widely accepted as the current standard.
One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in CSS specification.
CSS specification is maintained by W3C. You can download a copy of the specification at http://www.w3.org/.
Tutorials below are based Cascading Style Sheets, level 1, which has been widely accepted as the current standard.
21 :: Which browsers support AJAX?
★ Internet Explorer 5.0 and up,
★ Opera 7.6 and up,
★ Netscape 7.1 and up,
★ Firefox 1.0 and up,
★ Safari 1.2 and up,
★ among others support AJAX.
★ Opera 7.6 and up,
★ Netscape 7.1 and up,
★ Firefox 1.0 and up,
★ Safari 1.2 and up,
★ among others support AJAX.
22 :: Which kinds of applications is Ajax best suited for?
We don't know yet. Because this is a relatively new approach, our understanding of where Ajax can best be applied is still in its infancy. Sometimes the traditional web application model is the most appropriate solution to a problem.
23 :: Can you please explain the difference between proxied and proxyless calls in AJAX?
Proxied calls are made through stub objects that mimic your PHP classes on the JavaScript side in AJAX. E.g., the helloworld class from the Hello World example.
Proxyless calls are made using utility JavaScript functions like HTML_AJAX.replace() and HTML_AJAX.append() in AJAX.
Proxyless calls are made using utility JavaScript functions like HTML_AJAX.replace() and HTML_AJAX.append() in AJAX.
24 :: What I need to know to create my own AJAX functionality?
If you plan not to reuse and existing AJAX component here are some of the things you will need to know.
Plan to learn Dynamic HTML (DHTML), the technology that is the foundation for AJAX. DHTML enables browser-base realtime interaction between a user and a web page. DHTML is the combination of JavaScript, the Document Object Model (DOM) and Cascading Style Sheets (CSS).
* JavaScript - JavaScript is a loosely typed object based scripting language supported by all major browsers and essential for AJAX interactions. JavaScript in a page is called when an event in a page occurs such as a page load, a mouse click, or a key press in a form element.
* DOM - An API for accessing and manipulating structured documents. In most cases DOM represent the structure of XML and HTML documents.
* CSS - Allows you to define the presentation of a page such as fonts, colors, sizes, and positioning. CSS allow for a clear separation of the presentation from the content and may be changed programmatically by JavaScript.
Understanding the basic request/response nature of HTTP is also important. Many subtle bugs can result if you ignore the differences between the GET and OIst methods when configuring an XMLHttpRequest and HTTP response codes when processing callbacks.
JavaScript is the client-side glue, in a sense. JavaScript is used to create the XMLHttpRequest Object and trigger the asynchronous call. JavaScript is used to parse the returned content.
Plan to learn Dynamic HTML (DHTML), the technology that is the foundation for AJAX. DHTML enables browser-base realtime interaction between a user and a web page. DHTML is the combination of JavaScript, the Document Object Model (DOM) and Cascading Style Sheets (CSS).
* JavaScript - JavaScript is a loosely typed object based scripting language supported by all major browsers and essential for AJAX interactions. JavaScript in a page is called when an event in a page occurs such as a page load, a mouse click, or a key press in a form element.
* DOM - An API for accessing and manipulating structured documents. In most cases DOM represent the structure of XML and HTML documents.
* CSS - Allows you to define the presentation of a page such as fonts, colors, sizes, and positioning. CSS allow for a clear separation of the presentation from the content and may be changed programmatically by JavaScript.
Understanding the basic request/response nature of HTTP is also important. Many subtle bugs can result if you ignore the differences between the GET and OIst methods when configuring an XMLHttpRequest and HTTP response codes when processing callbacks.
JavaScript is the client-side glue, in a sense. JavaScript is used to create the XMLHttpRequest Object and trigger the asynchronous call. JavaScript is used to parse the returned content.
25 :: What I do on the server to interact with an AJAX client?
The "Content-Type" header needs to be set to"text/xml". In servlets this may be done using the HttpServletResponse.setContentType()should be set to "text/xml" when the return type is XML. Many XMLHttpRequest implementations will result in an error if the "Content-Type" header is set The code below shows how to set the "Content-Type".
response.setContentType("text/xml");
response.getWriter().write("<response>invalid</response>");
You may also want to set whether or not to set the caches header for cases such as autocomplete where you may want to notify proxy servers/and browsers not to cache the results.
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<response>invalid</response>");
Note to the developer: Internet Explorer will automatically use a cached result of any AJAX response from a HTTP GET if this header is not set which can make things difficult for a developer. During development mode you may want set this header. Where do I store state with an AJAX client.
response.setContentType("text/xml");
response.getWriter().write("<response>invalid</response>");
You may also want to set whether or not to set the caches header for cases such as autocomplete where you may want to notify proxy servers/and browsers not to cache the results.
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<response>invalid</response>");
Note to the developer: Internet Explorer will automatically use a cached result of any AJAX response from a HTTP GET if this header is not set which can make things difficult for a developer. During development mode you may want set this header. Where do I store state with an AJAX client.
