UI Developer Interview Questions and Answers

UI Developers are usually more technically sound as compared to Web developers. The role of UI / UX developer is to focus on the way the functionality is displayed and the detail on how users interact with the users.  They code for the functioning of the front-end interface or User Interface. They tend to have excellent problem-solving skills and are generally good in mathematics. On a daily basis, a developer writes code in five or more different languages including (X) HTML, CSS, JavaScript, jQuery, and XML. UI Developers can also be found wielding some kind of text editor, three or more Web browsers, and development plugins (for example: Mozilla Firebug). UI developer should have expertise in JavaScript reference and the jQuery documentation. A developer also knows what an API is and how to develop a user interface using an API.

• HTML/HTML5, CSS/CSS3, JavaScript AND JQuery
• Modern application programming languages, such as Java, .Net, AJAX, PHP, XHTML and Ruby
• Photoshop, Illustrator, Flash & Flex to mockup UI elements.
• AngularJS and Unit Testing
• SEO
• User Research and CMS
• Usability and Analytics
• Visual Design and Content Strategy

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

• New Doctype: doctype html
• Media Support: audio and video support
• Figure Element

<figure>

<img src=”path/to/image” alt=”About image” />

<figcaption>

<p> This is an image of earth </p>

</figcaption>

</figure>

• Flawless Content Editing
• Canvas element
• Article and Section

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

The term DOCTYPE tells the browser which type of HTML/HTML5 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.

SVG stands for Scalable Vector Graphics, It is an XML based two-dimensional vector graphics image format. In contrast to JPEG and GIFimages on the Web, which are bitmapped and always remain a specified size, SVG images are scalable to the size of the viewing window and will adjust in size and resolution according to the window in which it is displayed.

A JavaScript Framework/Library that make things like DOM selection/manipulation, AJAX, and animation, easier.

HTML5 Canvas element is used to draw graphics on a web page by the help of JavaScript.

Placeholder is used to display some text with in a textbox or text area and the text will disappear when user start typing in that box.

First create a folder called, eg. APP now you can keep subfolders like app+ assetts+ JavaScript+ custom+ vendor+ images in custom folder you can keep your own JavaScript file and in vendor keep files like jQuery, underscore.js, which mean libraries that you’ve used.

• Box Shadows
• CSS3 Selectors
• CSS3 Text Shadow
• Web safe Font Additions
• Rounded Corners
• Border Images
• Opacity Levels
• Create 2D and 3D transformations, animations, and transitions
• Transform

CSS Box Model includes content, margin, padding, and border. Total width is equal to width + padding + margin + border. These properties occupy space on box model.

Debugging is not easy. But fortunately, all modern browsers have a built-in JavaScript debugger. Built-in debuggers can be turned on and off, forcing errors to be reported to the user with a debugger, you can also set breakpoints (places where code execution can be stopped), and examine variables while the code is executing. you activate debugging in your browser with the F12 key and select “Console” in the debugger menu.

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.

JavaScript is used to make different behaviors happen on your site. These behaviors are all done through the Visitor of the sites browser. Examples of this are Image Slide Shows, Pop Up boxes, Menus, and more. When your website loads, but the behaviors on your site stopped working, this is usually because of the JavaScript code not working.

Post/Redirect/Get (PRG) is a web development design pattern that prevents some duplicate form submissions, creating a more intuitive interface for user agents (users). PRG supports bookmarks and the refresh button in a predictable way that does not create duplicate form submissions.

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

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@name.com.

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.

Smooth Cam filter in Final Cut Pro is to analyze a clip’s complete media file before the effect can be played or rendered in real time.  SmoothCam filter requires two independent phases:

Motion Analysis: Pixels are analyzed in successive frames to determine the direction of camera movement. It stored the analysis data on disk

Motion Compensation: During rendering or real time playback, the SmoothCam filter avails the motion analysis data to implement a “four-corner” transformation to each frame.

In the time-line double click, in order to display it in the Viewer window at the top. At the lower end of the viewer, tap on the icon with big letter A, which indicates the text button

In the viewer window “Text” will appear in the viewer window. Tap the controls tab to open the text editing window

Type your text into the text box

Use the options or tools, given below the text box to change the font, size, style and color

To add your text into the Timeline, under Viewer, click on the video tab, then drag and drop the text into the timeframe where you wanted it to appear

“2020”. First 20 is string type, second is numeric, for addition, both should be numeric.

“20” + 20 + 20 = “202020”. “20” + (20 + 20) is “2040”

In JavaScript Hoisting, A variable is declared first and then called. If variable is declared on bottom and called earlier, value will be undefined. Only assigned values are hoisted in JavaScript, like string, numbers etc. Undefined and function declaration can be called before declaration as they are not hoisted, and there is no assignment operator (=) in both.

The difference between a web developer as well as a UI developer is:

Web Developer: A specific with the abilities necessary to develop a whole end-to-end internet solution.

UI Programmer: A specific with a much more discipline-specific skill set connected with the appearance, really feel and also functionality of an application or websites.