Top UI Developer Interview Questions and Answers

UI Developer Interview Questions and Answers

UI Developer Interview Questions and Answers

Front-End Interviews

General Questions

Believe it or not, some people find that the most difficult part of the interview is the icebreaker portion that involves small talk and requires some clever improvisation on your part. You can prepare by knowing some of the questions potential employers might ask during this interview phase. Come up with a good story for each of the questions. If you don’t have an answer for these, then maybe you are not as gung-ho about web design as you thought you were.

Beginner HTML Questions

8. What is HTML?

• HTML stands for HyperText Markup Language. It is the dominant markup language for creating websites and anything that can be viewed in a web browser. If you want to get some extra bonus points, you can learn the history of HTML and throw in some obscure facts.

9. What is the difference between HTML elements and tags?

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

10. What is “Semantic HTML?”

• Semantic HTML is a coding style where the tags embody what the text is meant to convey. In Semantic HTML, tags like  for bold, and  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  and . These tags will have the same bold and italic effects, while demonstrating meaning and structure (emphasis in this case).

11. What does DOCTYPE mean?

• 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. See example:

.

12. What’s the difference between standards mode and quirks mode?

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

13. What are the limitations when serving XHTML pages?

• Perhaps the biggest issue is the poor browser support XHTML currently enjoys. Internet Explorer and a number of other user agents cannot parse XHTML as XML. Thus, it is not the extensible language it was promised to be. There are many other issues. Take your pick.

14. How many HTML tags are should be used for the most simple of web pages?

• 8 total. 4 pairs of tags.

Simplest page ever!

Doesn’t get simpler than this.

15. How do you make comments without text being picked up by the browser?

• Comments are used to explain and clarify code or to prevent code from being recognized by the browser. Comments start with “*“.

16. What is the difference between linking to an image, a website, and an email address?

• To link an image, use  tags. You need specify the image in quotes using the source attribute, src in the opening tag. For hyperlinking, the anchor tag, , is used and the link is specified in the href attribute. Text to be hyperlinked should be placed between the anchor tags. Little known fact: href stands for “hypertext reference.” When linking to an email, the href specification will be “mailto:send@here.com.” See examples below:

Skilledup

Email Me

17. My hyperlink or image is not displaying correctly, what is wrong with it?

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

18. What is the syntax difference between a bulleted list and numbered list?

• Bulleted lists use the 
  •  tag, which stands for “unordered,” whereas 
    1.  is used to create an ordered list.

  19. What is the difference between  and ?

   is a generic container element for grouping and styling, whereas a creates divisions within a web page and should be used within the  tag. The use of  and  are no longer popular and are

  • now being replaced with the more flexible , which has become popular for embedding foreign elements (ie. Youtube videos) into a page.

  HTML5  Interview Questions

  

  HTML5 is the future of web development.

  20. What is the difference between the application model of HTML and HTML5?

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

  21. Ok, what’s the real difference between HTML and HTML5?

  • There are many. 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.

  22. What is the new DOCTYPE?

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

  23. What are some new HTML5 markup elements?

  • There are several: , , ,, , , , and .

  24. What elements have disappeared?

  • As mentioned above,  and  have been eliminated. Other elements that are no longer supported include: ,,  and.

  25. What are the new media-related elements in HTML5?

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

  26. What are the new image elements in HTML5?

  • Canvas and WebGL.  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.

  27. What is the difference between SVG and ?

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

  28. What are some new input attributes in HTML5?

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

  29. What are data- attributes good for?

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

  30. What is the difference between HTML5 interaction in Sencha and Twitter/Bootstrap?

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

  31. What purpose do Work Workers serve and what are some of their benefits?

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

  32. Describe the difference between cookies, sessionStorage, and localStorage.

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

  33. What are some of the major new API’s that come standard with HTML5?

  • To name a few: Media API, Text Track API, Application Cache API, User Interaction, Data Transfer API, Command API, Constraint Validation API, and the History API.

  34. What is the difference in caching between HTML5 and the old HTML?

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

  35. Did you remember your portfolio?

  Top 10 HTML5 Interview Questions

  It’s a collection of selected top 10 HTML5 Interview Questions and Answers. These are the most frequently asked interview questions for web developers. You will definitely feel that your understanding enhances after going through these important Interview Questions.  You can take a free online test for HTML5 at the end of this tutorial to validate your skill and further strengthen your level of understanding about latest HTML standard

  HTML5 Interview Questions List

  1. What’s new HTML 5 DocType and Charset?
  2. How can we embed Audio in HTML 5?
  3. How can we embed Video in HTML 5?
  4. What are the new media element in HTML 5 other than audio and video?
  5. What is the usage of canvas Element in HTML 5?
  6. What are the different types of storage in HTML 5?
  7. What are the new Form Elements introduced in HTML 5?
  8. What are the deprecated Elements in HTML5 from HTML4?
  9. What are the new APIs provided by HTML 5 standard?
  10. What is the difference between HTML 5 Application Cache and regular HTML Browser Cache?

  More HTML5 Interview Questions and Answers

  • What is Web Forms 2.0 in HTML5?
  • Briefly explain cache manifest file with an example?
  • Is it possible to get the geographical location of a user using HTML5?
  • What are HTML5 Semantic Elements? Explain with Example.
  • How to use HTML5 details and summary elements?
  • Article Vs Section tags in HTML5?
  • What is an HTML5 Web Worker?
  • What are the limitations of HTML5 Web Worker?
  • Canvas Vs SVG?
  • What are the new attributes introduced in HTML5 for
    and elements?
  • What is a placeholder attribute in HTML5?
  • What is a draggable attribute in HTML5?

   

  1.What’s new HTML 5 DocType and Charset?

  Normally for HTML files first line of code is DocType which basically tells browser about specific version of HTML. HTML5 is now not subset of SGML. As compared to previous version/standards of HTML, DocType is simplified as follows:
                   
  And HTML 5 uses UTF-8 encoding as follows:
                   

  You can see a very simple HTML5 page below:

  2.How can we embed Audio in HTML5?

  HTML 5 comes with a standard way of embedding audio files as previously we don’t have any such support on a web page. Supported audio formats are as follows:

  • MP3
  • Wav
  • Ogg.

  Below is the most simple way to embed an audio file on a web page.

  Your browser does’nt support audio embedding feature.

  In above code, src value can be relative as well as absolute URL. We can also use multiple 

  elements pointing to different audio files. There are more new attributes fortag other than src as below:
  • controls – it adds controls such as volume, play and pause.
  • autoplay – it’s a boolean value which specifies that audio will start playing once it’s ready.
  • loop – it’s also a boolean value which specifies looping (means it automatically start playing after it ends).
  • preload – auto, metadata and none are the possible values for this attribute.
    • auto means plays as it loaded.
    • metadata displays audio file’s associated data
    • none means not pre-loaded.

  3.How can we embed Video in HTML 5?

  Same like audio, HTML 5 defined standard way of embedding video files which was not supported in previous versions/standards. Supported video formats are as follows:

  • MP4
  • WebM
  • Ogg

  Please look into below sample code.

  
     Your browser does’nt support video embedding feature.
• Same like,

  tag has associated optional attributes as controls, autoplay, preload, loop, poster, width, height and other global attributes etc. Controls, loop, preload and autoplay are already explained above. Others are explained below:

  • poster – it’s basically a URL of the image that needs to display until video get started.
  • width – video player width
  • height – video player’s height

  4.What are the new media element in HTML 5 other than audio and video?

  HTML 5 has strong support for media. Other than audio and video tags, it comes with the following tags:

  Tag:  acts as a container for external application or some interactive content such as a plug-in. Special about is that it doesn’t have a closing tag as we can see below:

   

  Tag:  is helpful for multiple media sources for audio and video.    
  Tag:  defines text track for media like subtitles as:     

  5.What is the usage of canvas Element in HTML 5?

  is an element in HTML5 which we can use to draw graphics with the help of scripting (which is most probably JavaScript).
  This element behaves like a container for graphics and rest of things will be done by scripting. We can draw images, graphs and a bit of animations etc using element.

  As canvas is considered to be the most exciting feature in HTML5, following resources can be helpful to ehnance one’s skill in this area. I have listed few good websites on HTML5 canvas as well as available tools and libraries:

  • Canvas From Scratch
    Starting from scratch and follow the step by step approach to take to advance level.
    • Introduction to Canvas in HTML5
    • Understanding advanced Drawing Topics
    • Tranformation, Shadows and Gradients in HTML5 Canvas
    • and finally Pixel Manipulation in Canvas
  • Mozilla Developer Network – MDN
    MDN acts a complete reference guide for HTML5 with detailed examples and code snippets.
  • HTML5 Canvas Tutorial
    Canvas Tutorial is a good tutorial site for learning basics of HTML5 canvas topics including Lines, Curves, Paths, Shapes, Filling Styles, Images, Text Manipulation, Tranformation, Composites and Animation etc.
  • PlayCanvas
    PlayCanvas is basically a WebGL Game Engine with a set of developer tools that can be used to develop 3D games for browser as well as mobiles.

  For a more detailed reference to HTML5 Canvas resource, you can go to Emily Heming’s tutorial on this blog
  “Top 20 Resources You Need To Master HTML5 Canvas“.

  6.What are the different types of storage in HTML 5?

  HTML 5 has the capability to store data locally. Previously it was done with the help of cookies.
  Exciting thing about this storage is that its fast as well as secure.

  There are two different objects which can be used to store data.

  • localStorage object stores data for a longer period of time even if the browser is closed.
  • sessionStorage object stores data for a specific session.

  sessionStorage	localStorage
  It persists data until we close the window or tab in which it was stored.	It persist data even if the window or tab is closed (but can be explicitly removed or expires).
  Values stored in sessionStorage are not shared. These will be visible only to respective window or tab.	Values stored in localStorage are shared for all windows and tabs from same origin.
  Maximum size is 5MB.	Maximum size for localStorage is more between 10-15MB.

   

  Working with localStorage is quite simple and having following methods:

  • localStorage.getItem(key) -> fetch an item from storage against provided key.
  • localStorage.setItem(key, value) -> add an item to storage.
  • localStorage.removeItem(key) -> removes an item from storage against provided key.
  • localStorage.clear() -> clearing the storage removing all items from it.

  7.What are the new Form Elements introduced in HTML 5?

  There are a number of new form elements has been introduced in HTML 5 as follows:

  • datalist provides functionality for auto-complete feature.
  • datetime facilitate selecting a datetime along with Time Zone.
  • output represents the result of a calculation.
  • keygen generates a key-pair field in a form to implement secure authentication.
  • date is an input field for date and applies validation accordingly.
  • month for selecting a month and year in a form input field.
  • week for selecting a week and year in an input field.
  • time is an input field for selecting time i.e. Hours:Minutes: AM/PM. For example, 10:30 AM.
  • color is an input field for color.
  • number that only allows numeric values.
  • range is an input field for selecting value within a specified range.
  • email is input field for email with standard email validations.
  • url is for an URL(Uniform Resource Locator) and validated accordingly.

  8.What are the deprecated Elements in HTML5 from HTML4?

  Elements that are deprecated from HTML 4 to HTML 5 are:

  • frame
  • frameset
  • noframe
  • applet
  • big
  • center
  • basefront

  9.What are the new APIs provided by HTML 5 standard?

  HTML 5 standard comes with a number of new APIs. Few of it are as follows:

  • Media API
  • Text Track API
  • Application Cache API
  • User Interaction
  • Data Transfer API
  • Command API
  • Constraint Validation API
  • History API
  • and many more….

  10.What is the difference between HTML 5 Application Cache and regular HTML Browser Cache?

  One of the key feature of HTML 5 is “Application Cache” that enables us to make an offline version of a web application. It allows to fetch few or all of website contents such as HTML files, CSS, images, javascript etc locally. This feature speeds up the site performance. This is achieved with the help of a manifest file defined as follows: