Web Developer Guide Interview Questions & Answers

Question 1. Explain Me What Are The New Media-related Elements In Html5?

Answer :

HTML5 has strong support for media. There are now special <audio> and <video> tags. There are additional A/V support tags as well: <embed> is a container for 3rd party applications. <track> is for adding text tracks to media. <source> is useful for A/V media from multiple sources.

Question 2. Tell Me What Is The Syntax Difference Between A Bulleted List And Numbered List?

Answer :

Bulleted lists use the <ul> tag, which stands for “unordered,” whereas <ol> is used to create an ordered list.

Question 3. Explain Me What Is The Difference In Caching Between Html5 And The Old Html?

Answer :

An important feature of HTML5 is the Application Cache. It creates an offline version of a web application. and stores website files such as HTML files, CSS, images, and JavaScript, locally. It is a feature that speeds up site performance.

Question 4. Do You Know What Elements Have Disappeared?

Answer :

As mentioned above, <frame> and <frameset> have been eliminated. Other elements that are no longer supported include: <noframe>, <applet>, <bigcenter> and <basefront>.

Question 5. Tell Me How Do You Add An Html Element In Dom Tree?

Answer :

You can use the jQuery method appendTo() to add an HTML element in DOM tree. This is one of the many DOM manipulation methods that jQuery provides. You can add an existing element or a new HTML element, appendTo() add that method in the end of a particular DOM element.

Question 6. Do You Know What Are Data- Attributes Good For?

Answer :

The HTML5 data- attribute is a new addition that assigns custom data to an element. It was built to store sensitive or private data that is exclusive to a page or application, for which there are no other matching attributes or elements.

Question 7. Please Explain Difference Between $(this) And This Keyword In Jquery?

Answer :

This could be a tricky question for many jQuery beginners, but indeed it's a simple one. $(this) returns a jQuery object, on which you can call several jQuery methods e.g. text() to retrieve text, val() to retrieve value etc, while this represent current element, and it's one of the JavaScript keyword to denote current DOM element in a context. You can not call jQuery method on this, until it's wrapped using $() function i.e. $(this).

Question 8. Tell Us How Do You Optimize A Website's Assets?

Answer :

File concatenation, file compression, CDN Hosting, offloading assets, re-organizing and refining code, etc. Have a few ready.

Question 9. Tell Me What Is The Difference Between Svg And <canvas>?

Answer :

<Canvas> is an element that manipulates two-dimensional (2D) pixels while Scalable Vector Graphics works in 2D and three-dimensional (3D) vectors. Essentially, <Canvas> is to SVG as Photoshop is to Illustrator.

Question 10. Explain Me What Is $(document).ready() Function? Why Should You Use It?

Answer :

This is one of the most important and frequently asked questions. The ready() function is used to execute code when document is ready for manipulation. jQuery allows you to execute code, when DOM is fully loaded i.e. HTML has been parsed and the DOM tree has been constructed. The main benefit of $(document).ready() function is that, it works in all browser, jQuery handles cross browser difficulties for you. For curious reader see answer link for more detailed discussion.

Question 11. Explain Me How Do You Set An Attribute Using Jquery?

Answer :

One more follow-up question of previous jQuery question, attr() method is overload like many other methods in JQuery. If you call attr() method with value e.g. attr(name, value), where name is the name of attribute and value is the new value.

Question 12. Explain Me The Difference Between Cookies, Sessionstorage, And Localstorage?

Answer :

Cookies are small text files that websites place in a browser for tracking or login purposes. Meanwhile, localStorage and sessionStorage are new objects, both of which are storage specifications but vary in scope and duration. Of the two, localStorage is permanent and website-specific whereas sessionStorage only lasts as long as the duration of the longest open tab.

Question 13. Tell Me What's The Difference Between Standards Mode And Quirks Mode?

Answer :

Quirks Mode is a default compatibility mode and may be different from browser to browser, which may result to a lack of consistency in appearance from browser to browser.

Question 14. Do You Know What Are The New Image Elements In Html5?

Answer :

Canvas and WebGL. <Canvas> is a new element that acts as a container for graphical elements like images and graphics. Coupled with JavaScript, it supports 2D graphics. WebGL stands for Web Graphics Language, a free cross-platform API that is used for generating 3D graphics in web browsers.

Question 15. Tell Me What Is The Difference Between Detach() And Remove() Methods In Jquery?

Answer :

Though both detach() and remove() methods are used to remove a DOM element, the main difference between them is that detach() keeps track of the last element detached, so that it can be reattached, while the remove() method does keep a reference of the last removed method. You can also take a look at the appendTo() method for adding elements into DOM.

Question 16. Tell Me What Purpose Do Work Workers Serve And What Are Some Of Their Benefits?

Answer :

Web Workers are background scripts that do not interfere with the user interface or user interactions on a webpage, allowing HTML to render uninterrupted while JavaScript works in the background.

Question 17. Suppose Our Hyperlink Or Image Is Not Displaying Correctly, What Is Wrong With It?

Answer :

It could be any number of things, but the most common mistakes are leaving out a tag bracket or quote missing for href, src, or alt text may be the issue. You should also verify the link itself.

Question 18. Explain Me What Is The Difference Between <div> And <frame>?

Answer :

A <div> is a generic container element for grouping and styling, whereas a <frame> creates divisions within a web page and should be used within the <frameset> tag. The use of <frame> and <frameset> are no longer popular and are now being replaced with the more flexible <iframe>, which has become popular for embedding foreign elements (ie. Youtube videos) into a page.

Question 19. Tell Me How Do You Find All The Selected Options Of Html Select Tag?

Answer :

This is one of the tricky jQuery question on Interviews. This is a basic question, but don’t expect every jQuery beginner to know about this. You can use the following jQuery selector to retrieve all the selected options of <select> tag with multiple=true :

$('[name=NameOfSelectedTag] :selected')

This code uses the attribute selector in combination of :selected selector, which returns only selected options. You can tweak this and instead of name, you can even use id attribute to retrieve

<select> tag.

Question 20. Do You Know What Is The Difference Between Jquery.get() And Jquery.ajax() Method?

Answer :

The ajax() method is more powerful and configurable, allows you to specify how long to wait and how to handle error. The get() method is a specialization to just retrieve some data.

Question 21. Tell Me How Do You Hide An Image On A Button Click Using Jquery?

Answer :

This jQuery interview question is based on event handling. jQuery provides good support for handling events like button click. You can use following code to hide an image, found using Id or class. What you need to know is the hide() method and how to setup an even handler for button, to handle clicks, you can use following jQuery code to do that :

$('#ButtonToClick').click(function(){

$('#ImageToHide').hide();

});

Question 22. Do You Know The Real Difference Between Html And Html5?

Answer :

From a broader perspective, HTML was a simple language for laying out text and images on a webpage, whereas HTML5 can be viewed as an application development platform that does what HTML does that and more, including better support for audio, video, and interactive graphics.

It has a number of new elements, supports offline data storage for applications, and has more robust exchange protocols. Thus, proprietary plug-in technologies like Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX are no longer needed, because browsers can now process these elements without additional requirements.

Question 23. Explain Me What Is “semantic Html?”?

Answer :

Semantic HTML is a coding style where the tags embody what the text is meant to convey. In Semantic HTML, tags like <b></b> for bold, and <i></i> for italic should not be used, reason being they just represent formatting, and provide no indication of meaning or structure. The semantically correct thing to do is use <strong></strong> and <em></em>. These tags will have the same bold and italic effects, while demonstrating meaning and structure (emphasis in this case).

Question 24. Explain Me What Is The Main Advantage Of Loading Jquery Library Using Cdn?

Answer :

This is a slightly advanced jQuery question. Well, apart from many advantages including reducing server bandwidth and faster download, one of the most important is that, if browser has already downloaded same jQuery version from the same CDN, then it won't download it again. Since nowadays, many public websites use jQuery for user interaction and animation, there is a very good chance that the browser already has the jQuery library downloaded.

Question 25. Explain Me What Is The Difference Between Html5 Interaction In Sencha And Twitter/bootstrap?

Answer :

Sencha and Twitter/Bootstrap are both HTML development frameworks that integrate HTML5, CSS3, and JavaScript. The major difference is that in Sencha, the three languages are all comingled together in code, whereas in Bootstrap, HTML and CSS and decoupled.

Question 26. Tell Me What Kind Of Things Must You Be Wary Of When Design Or Developing For Multilingual Sites?

Answer :

setting the default language, using Unicode encoding, using the ‘lang' attribute, being aware of standard font sizes and text direction, and language word length (may affect layout).

Question 27. Explain Me What Happens If You Return False From A Jquery Event Handler?

Answer :

It is used to stop the event from bubbling up.

Question 28. Tell Me How Do You Retrieve Attribute Of An Html Tag Using Jquery E.g. Href Of Links?

Answer :

The attr() method is used to retrieve the value of an attribute of any HTML element. You first need to select all links or specified links using the jQuery selector and then you can apply the attr() method to get the value of their href attribute. The code below will find all links from a page and return the href value :

view sourceprint?

$('a').each(function(){

alert($(this).attr('href'));

});

Question 29. Explain Me What Are Some New Input Attributes In Html5?

Answer :

There are many new form elements including: datalist, datetime, output, keygen, date, month, week, time, number, range, email, and url.

Question 30. Tell Me How Many Html Tags Are Should Be Used For The Most Simple Of Web Pages?

Answer :

8 total. 4 pairs of tags.

<HTML>

<HEAD>

<TITLE>Simplest page ever!</TITLE>

</HEAD>

<BODY>

Doesn’t get simpler than this.

</BODY>

</HTML>

Question 31. Do You Know What Does Doctype Mean?

Answer :

The term DOCTYPE tells the browser which type of HTML is used on a webpage. In turn, the browsers use DOCTYPE to determine how to render a page. Failing to use DOCTYPE or using a wrong DOCTYPE may load your page in Quirks Mode.

Question 32. Tell Me What Is The Difference Between The Application Model Of Html And Html5?

Answer :

Trick question, there is no difference. HTML5 is a continuum of HTML and just a souped up version of the original HTML. There has been no major paradigm shift.

Question 33. Explain Me Difference Between Javascript Window.onload Event And Jquery Ready Function?

Answer :

This is the follow-up of the previous question. The main difference between the JavaScript onload event and the jQuery ready function is that the former not only waits for DOM to be created but also waits until all external resources are fully loaded including heavy images, audios and videos. If loading images and media content takes lot of time, then the user might experience significant delay on the execution of code defined in the window.onload event.

On the other hand, the jQuery ready() function only waits for the DOM tree, and does not wait for images or external resource loading, something that means faster execution. Another advantage of using the jQuery $(document).ready() is that you can use it at multiple times in your page, and the browser will execute them in the order they appear in the HTML page, as opposed to the onload technique, which can only be used for a single function. Given this benefits, it's always better to use the jQuery ready() function rather than the JavaScript window.onload event.

Question 34. What Is The New Doctype?

Answer :

Instead of typing out a ridiculously long DOCTYPE statement to tell the browser how to render your webpage, this long line of code has been truncated to .

Question 35. Tell Me What Is The Difference Between Html Elements And Tags?

Answer :

HTML elements communicate to the browser how to render text. When surrounded by angular brackets <> they form HTML tags. For the most part, tags come in pairs and surround text.

Question 36. Tell Me What Is Method Chaining In Jquery? What Is The Benefit Of Using Method Chaining?

Answer :

Method chaining is calling another method on the result of another method, it results in clean and concise code, single search over DOM so better performance.

Question 37. Explain Me What Is The Each() Function In Jquery? How Do You Use It?

Answer :

each() function is like an Iterator in Java, it allows you to iterate over a set of elements. You can pass a function to each() method, which will be executed for each element from the jQuery object, on which it has been called. This question sometime is asked as a follow-up of the previous question e.g. how to show all selected options in alert box. We can use the above selector code to find all the selected options and then we can use the each() method to print them in an alert box, one by one, as shown below:

$('[name=NameOfSelectedTag] :selected').each(function(selected){

alert($(selected).text());

});

The text() method returns text for that option.

Question 38. Tell Me What Is $() In Jquery Library?

Answer :

The $() function is an alias of jQuery() function, at first it looks weird and makes jQuery code cryptic, but once you get used to it, you will love it's brevity. $() function is used to wrap any object into jQuery object, which then allows you to call various method defined jQuery object. You can even pass a selector string to $() function, and it will return jQuery object containing an array of all matched DOM elements. I have seen this jQuery asked several times, despite it's quite basic, it is used to differentiate between developer who knows jQuery or not.

Question 39. Do You Know What Are Some New Html5 Markup Elements?

Answer :

There are several: <article>, <aside>, <bdi>, <command>, <details>, <figure>, <figcaption>, <summary>, <header>, <footer>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>, <section>, <time>, and <wpr>.

Question 40. Please Explain How Do You Make Comments Without Text Being Picked Up By The Browser?

Answer :

Comments are used to explain and clarify code or to prevent code from being recognized by the browser. Comments start with “*<!--” and end with ” -->“.

<!-- Insert comment here. -->

Question 41. Explain Me What Are Three Ways To Reduce Page Load Time?

Answer :

Reduce image sizes, remove unnecessary widgets, HTTP compression, put CSS at the top and script references at the bottom or in external files, reduce lookups, minimize redirects, caching, etc.