HTML5 – Interview Questions and Answers

Preparing for an interview for a web developer or MEAN stack developer? Along with the JavaScript and other client-side and server-side technologies, developers are asked about HTML5 basic topics too. So, here are some important topics and questions that are frequently asked in an interview and the concepts that a developer must know about HTML5.

1) Once an application is offline, it remains cached until the following happens?

  a) The manifest file is modified.

  b) The application cache gets automatically cleared by the browser.

  c) The application cache is pro-grammatically updated.

  d) The user clears their browser’s data storage for the site.

Answer – A C and D

Explanation

HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface.

Using the cache interface gives your application three advantages:

Offline browsing – users can navigate your full site when they’re offline

Speed – resources come straight from disk, no trip to the network.

Resilience – if your site goes down for “maintenance” (as in, someone accidentally breaks everything), your users will get the offline experience
The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they’re offline.

The cache manifest file

The cache manifest file is a simple text file that lists the resources the browser should cache for offline access.

Referencing a manifest file
To enable the application cache for an app, include the manifest attribute on the document’s html tag:

<html manifest=”example.appcache”>

</html>

The manifest attribute should be included on every page of your web application that you want cached. The browser does not cache a page if it does not contain the manifest attribute (unless it is explicitly listed in the manifest file itself. This means that any page the user navigates to that includes a manifest will be implicitly added to the application cache. Thus, there’s no need to list every page in your manifest. If a page points to a manifest, there’s no way to prevent this page being cached.

Note: “/page-url/”, “/page-url/?something”, “/page-url/?something-else” are considered separate pages.

You can see the urls that are controlled by the application cache by visiting chrome://appcache-internals/ in Chrome.

A manifest file must be served with the mime-type text/cache-manifest

This requirement was dropped from the specification some time ago, and no longer required by the latest versions of Chrome, Safari and Firefox, but you’ll need the mime-type to work in older browsers and IE11.

Structure of a manifest file

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

There are a couple of things to note:

The CACHE MANIFEST string is the first line and is required.
Files can be from another domain
Some browsers place restrictions on the amount of storage quota available to your app. In Chrome for example, AppCache uses a shared pool of TEMPORARY storage that other offline APIs can share. If you are writing an app for the Chrome Web Store, using the unlimitedStorage removes that restriction.
If the manifest itself returns a 404 or 410, the cache is deleted.
If the manifest or a resource specified in it fails to download, the entire cache update process fails. The browser will keep using the old application cache in the event of failure.

https://www.html5rocks.com/en/tutorials/appcache/beginner/

2) What is the internal format of input type=”date” in HTML5?

  a) DD-MM-YYYY

  b) YYYY-MM-DD

  c) MM-DD-YYYY

  d) YYYY-DD-MM

Answer – B

3) Which of the following method can be used to estimates the page load times?

  a) Using _gap.push([“_trackPageLoadTime”]) with Google Analytics.

  b) Page load times cannot be estimated.

  c) Using the Navigation Timing JavaScript API.

  d) Using built-in JavaScript methods.

Answer –  A, C and D

https://www.html5rocks.com/en/tutorials/webperformance/basics/

4) Assuming that some text needs to be written on an HTML5 canvas, select a replacement for the commented line below:

<canvas id="e" width="200" height="200"> </canvas>
<script>
  var canvas = document.getElementById("e");
   // insert code here
  context.fillStyle = "blue";
    context.font = "bold 16px Arial";
  context.fillText("Zibri",100,100);
</script>

  a) var context = canvas.getContext();

  b) var context = canvas.getContext(“2D”);

  c) var context = canvas.getElementById(“context”);

  d) var context = canvas.getElementById(“2D”);

Answer – B

5) Which of the following is a possible way to get the fullscreen video played from the browser using HTML5?

  a) <object> <param name=”allowFullScreen” value=”true” />

  b) <video allowFullScreen=”true”>

  c) <video height=”100%” width=”100%”>

  d) None of these.

Answer – C

6) The following are valid use cases of client file/directory access in HTML5, except?

  a) Drag and drop files from the desktop.

  b) Full file system access.

  c) Use of the HTML5 File API.

  d) Use of files as HTML5 input types.

 

7) When does the ondragleave mouse event get fired in HTML5?

  a) It gets fired when an element has been dragged to a valid drop target.

  b) It gets fired when an element leaves a valid drop target.

  c) It gets fired at the end of a drag operation.

  d) It gets fired while an element is being dragged.

Answer – B

8) Given following HTML and CSS, what will be the height of parent element having “wrap” class?

<style>
  .wrap{ box-sizing: border-box; }
  .col{ height:100px; margin:20px;}
</style>

<div class="wrap">
  <div class="col"> </div>
  <div class="col"> </div>
</div>

  a) 260px

  b) 140px

  c) 220px

  d) 280px

Answer – C

9) Which CSS2 selector, selects all Button elements that have a space separated list of values for attr where one of those values is equal to the given value?

  a) button[attr~=value]

  b) button[attr^=value]

  c) button[attr|=value]

  d) button[attr=value]

 

10) Which of the following CSS rule would make all h3 tags that are immediately preceded by a section tag italic?

  a) section~h3 {font-style: italic;}

  b) section>h3 {font-style: italic;}

  c) section+h3 {font-style: italic;}

  d) section h3 {font-style: italic;}

Answer – B

11) What is the use of data list in HTML5?

  a) Enables a tag contain additional data(meta data).

  b) Provides autocomplete feature in a textbox.

  c) Provides SEO friendly markup for page context.

  d) The alternate markup for building accessible lists.

Answer – B

12)  Generally, quirks mode could be turned on when there is:

  a) NO or Incorrect DOCTYPE declaration.

  b) Spaces or illegal chars before DOCTYPE

  c) Invalid HTML – with respect to the chosen DOCTYPE

  d) All of the above

Answer – A and C

Explanation

Quirks mode also known as Compatibility Mode – means your page is running without a document type declared(this is old school, so this is most likely not needed anymore) The whole
point of quirks mode is that it’s a compatibility mode for IE5

Modern browsers generally try to render HTML content according to the W3C recommendations. However, to provide compatibility with older web pages, and to provide additional “intuitive” functionality, all browsers support an alternative “quirks mode”.

Quirks mode is not, however, a standard. The rendering of any page in quirks mode in different browsers may be different. Whenever possible, it is better to adhere to the W3C standards and try and avoid depending on any past or present browser quirks.

Generally, quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition. However, invalid HTML – with respect to the chosen DOCTYPE – can also cause the browser to switch to quirks mode.

https://stackoverflow.com/questions/1695787/what-is-quirks-mode

13) Which CSS rule would make the fourth list item underlined if the list had a fourth item?

  a) ul li:nth(4th) { text-decoration:underline; }

  b) ul li:nth-child(4) { text-decoration: underline; }

  c) ul li:4th-child { text-decoration: underline; }

  d) ul li:nth-of-type(4) { text-decoration: underline;}

Answer – B

14) Which property specifies whether the mask should scroll or stay fixed the page is scrolled?

  a) mask-clip

  b) mask-repeat

  c) mask-attachment

  d) mask-image

Explanation

https://www.html5rocks.com/en/tutorials/masking/adobe/

15) The property defines whether or not an ellipsis should be displayed when content overflows a region?

  a) text-overflow

  b) overflow-style

  c) content-overflow

  d) overflow

Answer – D

Explanation

 

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (…), or display a custom string.

Both of the following properties are required for text-overflow:

white-space: nowrap;
overflow: hidden;

div {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
}

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

16) Which rule is used to define the properties that will be animated in an animation rule?

  a) @transition

  b) @key

  c) @keyframes

  d) @animation

Answer – C

 

Explanation

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords “from” and “to”, which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}

17) What is the attribute used in the <video> element, that is set to the URL of an image that the browser will use in place of the video before it is loaded and playing?

  a) placeholder

  b) poster

  c) banner

  d) preload

Answer –  B

 

Explanation

<video width=”320″ height=”240″ poster=”/images/w3html5.gif” controls>
<source src=”movie.mp4″ type=”video/mp4″>
Your browser does not support the video tag.
</video>

 

Further Readings

http://array151.com/blog/javascript-interview-questions/

http://array151.com/blog/nodejs-interview-questions/

http://array151.com/blog/angularjs-interview-questions/

AngularJS Interview Questions
Here are AngularJS interview questions that will help you to crack AngularJS technical interview.

1) What is AngularJS ?

2) Features of AngularJS ?

3) Difference between MVVM and MVC and MVP ?

4) What is single page application ?

5) How angular bootstrap ?

6) How to manual bootstrap angularjs ?

7) AngularJS Initialization & rendering process ?

8) Running order of

      Controller

      Filters

      Service

      Factory

      Config

      Run

9) jqLite vs jQuery ?

10) Types of binding ?

11) Two way data binding ?

12) ng-model directive ?

13) Why ng init is used ?

14) Difference Between expression{{}} and ng-bind ?

15) ng-repeat is used for ?

16) What if duplicate element in ng-rpeat ?

17) How to display unique element in ng-repeat ?

18) How to apply switch case in angular ?

19) Difference between service and factory ?

20) Is service and factory singleton object ?

21) How angular has implement singleton pattern in factory and service ?

22) One scanerio where services can’t be used ?

23)What is the meaning of # in the URL?

24) UI Routing ?

25) Abstract state in UI routing ?

26) ng routing vs ui routing ?

27) Authorizaion in ng-routing ?

28) Difference between scope and $scope ?

29) Benfit of controller As ?

30) Lazy loading of controllers ?

31) How to check current running controller ?

32) Communication between two controllers

33) What are the ajax calls?

34) What is asynchronous means?

35) What are promises ?

36) What are interceptors ?

37) What is dependency injection? How to add dependency in angularjs?

38) What is digest cycle and how you can stop it ?

39) How to check digest cycle is in progress ?

40) What is $destroy ?

41) What is ng-transclude ?

42) How you can all method of controller in directive ?

43) Different types of directives ?

44) Controller vs link in directive ?

45) Pre link vs Post Link vs Compile functions ?

46) What is best way to manipulate DOM and how can we do ?

47) Directive restrict type ?

48) Events in angularjs ?

49) Restrict types in angularjs ?

50) Custom exceptions in angularjs ?

51) Filters in angularjs ?

52) Custom filter in angularjs ?

53) What are decorators ?

54) Providers in angularjs ?

55) Session management in angularjs ?

56) Authentication and Authorization in angualrjs?

57) What is localization? How can we achieve the localization ?

58) What is local Storage?

59) What is session storage?

60) What is the difference between the local Storage and session Storage?

61) How to speed up rendering UI ?

62) Directory structure of angular js app ?

63) Best practices of angualrjs ?

64) How to remove ng-classes and directive information from DOM ?

65) What is angular 2 ?

66) Difference between angularjs 1.x and 2 ?

67) How angular 2 is rendering DOM ?

68) What is grunt? Why we use it?

69) Why we use grunt other than minification?

70) What is gulp?

71) What are the new things in available in html5?

So above are the AngularJS interview questions that were asked during the technical round for different companies. For more detail on AngularJS visit official website.

Further Reading

Javascript Interview Questions

After javascript can be executed on the server side, it has become very popular. So for better understanding and quality code, there are few concepts that a developer must know. So here are javascript interview questions generally asked in the interviews

1) What is event bubbling and capturing?

2) Best practices in javascript?

3) How to reduce the loading time of web page without concerning too much refactoring?

4) If two div on the page has the same id(“mydiv”) then getelementbyid(“mydiv”) will refer to ?

5) How to handle large JSON on UI if rendering is slow?

6) The result of accessing undeclared variable?

7) Parent/Child communication in javascript ?

8) How to make Ajax call?

9) What is setTimeout?

10) What are closures?

11) What is a prototype in javascript?

12) Scope in javascript?

13) How to define the class in javascript?

14) How can promises be implemented in javascript?

15) # and ! in URL?

16) What are callbacks?

17) Suppose we have an error in production which is not producible on Local and we don’t have access to the production and we have only minified file the production then how you can track the error?

18) What is async and defer?

19) How to find the inner classes of a div by using javascript?

20) What is the difference between promise and callback?

21) What is view engine?

22) What are bind filters and reduce map in js?

23) Difference between primitive and non-primitives data types?

24) How javascript interpret DOM that is rendering order or control flow?

25) What is the hoisting?

26) Difference between following two snippets

console.log(abc());
function abc(){
  return “Sunil”
}
 and
console.log(abc());
var abc = function(){
   return “Sunil”;
}
27) Inheritance in javascript?
28) Local scope and block level scope in javascript?

29) What is lexical scope?

Further Reading

en_USEnglish
en_USEnglish