1. How to check if a variable has NOT been set in PHP?

!isset($var);

2. Tell me why did you get into coding, programming, etc.?

"Because I can make good $," "I don't like to dress up or shave," and "because I loved the movie Hackers," are not good enough answers. Well… a comment about Hackers might fly but make sure you have a real backstory that describes your "Aha!" moment.

3. Tell me what is the current major version of Bootstrap?

3.x.x

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

5. Tell me what is a simple PHP method to make a cross domain data request?

file_get_contents().

6. Tell me how do you check if a variable has been set in PHP?

isset($var);

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

8. Tell me can jQuery be used to make an AJAX request?

Yes jQuery cab be used to make an AJAX request.

9. Tell us what is the difference between require() and include() when an error is encountered?

include() will raise a warning if it fails, require() will raise a fatal error.

10. Explain 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.

Download Interview PDF

11. Is jQuery code exicuted on the clientside, or serverside?

Clientside

12. Tell me what elements have disappeared?

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

13. Explain what are three ways to reduce page load time?

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.

14. What programming language does jQuery use?

JavaScript

15. Explain what is the difference between SVG and <Canvas>?

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

16. How to include a comment in JavaScript?

/* This is a comment block */
//This is a commented out line

17. Create an array in JavaScript with a list of 4 colors, assign that array to the variable, 'colors'?

var colors = ['red, 'yellow', 'green', 'blue'];

18. Tell me how do you select all elements with the class of "selected" in jQuery?

$('.selected');

19. Explain what is an AJAX request and what is a simple example of where a AJAX request would be used?

Asynchronous JavaScript and XML. Client side process used for GET, POST etc to get new data without having to refresh the page.

20. Explain 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. Assign any variable name a value of "Hello World", and print that variable's contents to the console.?

var t = "Hello World";
console.log(t);

22. Tell me how do you install/use jQuery in a project. What is the minimum setup needed to start using jQuery?

script tag, linked to a jquery CDN or locally hosted file.

23. Explain Inside a php function, what param needs to be set in order to access a global variable?

function function_name(){
global $the_global_var;
}

24. What is the result of "20" + 20; in JS?

2020

25. Explain what is the syntax difference between a bulleted list and numbered list?

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

Download Interview PDF

26. Explain what is the difference between "==" and "==="?

"==" checks equality, "===" checks equality and type

27. Tell me 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 .

28. Tell me what are some new HTML5 markup elements?

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

29. Explain what are the new media-related elements in HTML5?

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.

30. Tell me 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.

31. Explain 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.

32. Tell me Is JavaScript case sensitive?

Yes JavaScript is case sensitive

33. Do you know 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.

34. Tell me what are 2 (shorthand) boolean operators supported by JavaScript?

or ||, and &&, not equal to !

35. Do you know 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.

36. How would you solve a floated div's parent height?

Clearfix, Float Parent as well, User overflow property other than 'visible'

37. Tell me 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.

38. Testing Based User Interface Developer Interview Questions:

☛ What are some advantages/disadvantages to testing your code?
☛ What tools would you use to test your code's functionality?
☛ What is the difference between a unit test and a functional/integration test?
☛ What is the purpose of a code style linting tool?

39. Funny User Interface Developer Interview Questions:

☛ What's a cool project that you've recently worked on?
☛ What are some things you like about the developer tools you use?
☛ Do you have any pet projects? What kind?
☛ What's your favorite feature of Internet Explorer?
☛ How do you like your coffee?

40. Performance Based UI Developer Interview Questions:

☛ What tools would you use to find a performance bug in your code?
☛ What are some ways you may improve your website's scrolling performance?
☛ Explain the difference between layout, painting and compositing.

Download Interview PDF

41. Coding Based UI Developer Interview Questions:

☛ What is the value of foo?
var foo = 10 + '20';
Question: How would you make this work?

add(2, 5); // 7
add(2)(5); // 7

☛ What value is returned from the following statement?
"i'm a lasagna hog".split("").reverse().join("");

☛ What is the value of window.foo?

( window.foo || ( window.foo = "bar" ) );

☛ What is the outcome of the two alerts below?
var foo = "Hello";
(function() {
var bar = " World";
alert(foo + bar);
})();
alert(foo + bar);

☛ What is the value of foo.length?
var foo = [];
foo.push(1);
foo.push(2);

☛ What is the value of foo.x?
var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};

42. CSS Based UI Developer Interview Questions:

☛ What is the difference between classes and ID's in CSS?
☛ What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
☛ Describe Floats and how they work.
☛ Describe z-index and how stacking context is formed.
☛ Describe BFC(Block Formatting Context) and how it works.
☛ What are the various clearing techniques and which is appropriate for what context?
☛ Explain CSS sprites, and how you would implement them on a page or site.
☛ What are your favourite image replacement techniques and which do you use when?
☛ How would you approach fixing browser-specific styling issues?
☛ How do you serve your pages for feature-constrained browsers?
☛ What techniques/processes do you use?
☛ What are the different ways to visually hide content (and make it available only for screen readers)?
☛ Have you ever used a grid system, and if so, what do you prefer?
☛ Have you used or implemented media queries or mobile specific layouts/CSS?
☛ Are you familiar with styling SVG?
☛ How do you optimize your webpages for print?
☛ What are some of the "gotchas" for writing efficient CSS?
☛ What are the advantages/disadvantages of using CSS preprocessors?
☛ Describe what you like and dislike about the CSS preprocessors you have used.
☛ How would you implement a web design comp that uses non-standard fonts?
☛ Explain how a browser determines what elements match a CSS selector.
☛ Describe pseudo-elements and discuss what they are used for.
☛ Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
☛ What does * { box-sizing: border-box; } do? What are its advantages?
☛ List as many values for the display property that you can remember.
☛ What's the difference between inline and inline-block?
☛ What's the difference between a relative, fixed, absolute and statically positioned element?
☛ The 'C' in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?
☛ What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
☛ Have you played around with the new CSS Flexbox or Grid specs?
☛ How is responsive design different from adaptive design?
☛ Have you ever worked with retina graphics? If so, when and what techniques did you use?
☛ Is there any reason you'd want to use translate() instead of absolute positioning, or vice-versa? And why?

43. General UI Developer Interview Questions:

☛ What did you learn yesterday/this week?
☛ What excites or interests you about coding?
☛ What is a recent technical challenge you experienced and how did you solve it?
☛ What UI, Security, Performance, SEO, Maintainability or Technology considerations do you make while building a web application or site?
☛ Talk about your preferred development environment.
☛ Which version control systems are you familiar with?
☛ Can you describe your workflow when you create a web page?
☛ If you have 5 different stylesheets, how would you best integrate them into the site?
☛ Can you describe the difference between progressive enhancement and graceful degradation?
☛ How would you optimize a website's assets/resources?
☛ How many resources will a browser download from a given domain at a time?
☛ What are the exceptions?
☛ Name 3 ways to decrease page load (perceived or actual load time).
☛ If you jumped on a project and they used tabs and you used spaces, what would you do?
☛ Describe how you would create a simple slideshow page.
☛ If you could master one technology this year, what would it be?
☛ Explain the importance of standards and standards bodies.
☛ What is Flash of Unstyled Content? How do you avoid FOUC?
☛ Explain what ARIA and screenreaders are, and how to make a website accessible.
☛ Explain some of the pros and cons for CSS animations versus JavaScript animations.

44. HTML Based UI Developer Interview Questions:

☛ What does a doctype do?
☛ What's the difference between standards mode and quirks mode?
☛ What's the difference between HTML and XHTML?
☛ Are there any problems with serving pages as application/xhtml+xml?
☛ How do you serve a page with content in multiple languages?
☛ What kind of things must you be wary of when design or developing for multilingual sites?
☛ What are data- attributes good for?
☛ Consider HTML5 as an open web platform. What are the building blocks of HTML5?
☛ Describe the difference between a cookie, sessionStorage and localStorage.
☛ Describe the difference between <script>, <script async> and <script defer>.
☛ Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?
☛ What is progressive rendering?
☛ Have you used different HTML templating languages before?

45. Network Based UI Developer Interview Questions:

☛ Traditionally, why has it been better to serve site assets from multiple domains?
☛ Do your best to describe the process from the time you type in a website's URL to it finishing loading on your screen.
☛ What are the differences between Long-Polling, Websockets and Server-Sent Events?
☛ Explain the following request and response headers:
☛ Diff. between Expires, Date, Age and If-Modified-...
☛ Do Not Track
☛ Cache-Control
☛ Transfer-Encoding
☛ ETag
☛ X-Frame-Options
☛ What are HTTP actions? List all HTTP actions that you know, and explain them.

46. JS Related UI Developer Interview Questions:

☛ Explain event delegation
☛ Explain how this works in JavaScript
☛ Explain how prototypal inheritance works
☛ What do you think of AMD vs CommonJS?
☛ Explain why the following doesn't work as an IIFE: function foo(){ }();.
☛ What needs to be changed to properly make it an IIFE?
☛ What's the difference between a variable that is: null, undefined or undeclared?
☛ How would you go about checking for any of these states?
☛ What is a closure, and how/why would you use one?
☛ What's a typical use case for anonymous functions?
☛ How do you organize your code? (module pattern, classical inheritance?)
☛ What's the difference between host objects and native objects?
☛ Difference between: function Person(){}, var person = Person(), and var person = new Person()?
☛ What's the difference between .call and .apply?
☛ Explain Function.prototype.bind.
☛ When would you use document.write()?
☛ What's the difference between feature detection, feature inference, and using the UA string?
☛ Explain AJAX in as much detail as possible.
☛ Explain how JSONP works (and how it's not really AJAX).
☛ Have you ever used JavaScript templating?
☛ If so, what libraries have you used?
☛ Explain "hoisting".
☛ Describe event bubbling.
☛ What's the difference between an "attribute" and a "property"?
☛ Why is extending built-in JavaScript objects not a good idea?
☛ Difference between document load event and document ready event?
☛ What is the difference between == and ===?
☛ Explain the same-origin policy with regards to JavaScript.
☛ Make this work:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
☛ Why is it called a Ternary expression, what does the word "Ternary" indicate?
☛ What is "use strict";? what are the advantages and disadvantages to using it?
☛ Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5
☛ Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
☛ Why would you use something like the load event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?
☛ Explain what a single page app is and how to make one SEO-friendly.
☛ What is the extent of your experience with Promises and/or their polyfills?
☛ What are the pros and cons of using Promises instead of callbacks?
☛ What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?

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

8 total. 4 pairs of tags.
<HTML>
<HEAD>
<TITLE>Simplest page ever!</TITLE>
</HEAD>
<BODY>
Doesn't get simpler than this.
</BODY>
</HTML>

48. What minimum things we have to do in order to include Bootstrap & Boostrap JS in a project/ HTML Document?

Add bootstrap.css/bootstrap.js link and script in the head of the HTML document *bonus if bootstrap.js script included in the footer (better for page loading).

49. Loop through the color array and print each value to the console. Assume you do not know the amount of colors in the color array?

var colors = ['red, 'yellow', 'green', 'blue'];
for( var i = 0; i < colors.length; i++ ){
console.log(colors[i]);
}

50. How to declare all elements with class of "blue-text" to have a text color of blue?

.blue-text {color: blue;}

51. Explain 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.

52. Loop through the "me" object and print each value to the console without assuming you know the keys. Extra bonus: print each color in a separate console.log() without assuming you know the key of "fcolors" (detect the array, and handle printing the values of the array?

var me = {"fname": "Global", "lname": "Guideline", "fcolors": ["blue", "green", "whitesmoke"]};
for (var key in me){
if(me.hasOwnProperty(key)){
if(me[key] instanceof Array){
for( var i =0; i < me[key].length; i++ ){
console.log(me[key][i]);
}
} else {
console.log(me[key]);
}
}
}

53. Tell me 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.

54. Tell me what CSS class do you use to span 12 columns on medium sized screens but only 6 columns on large screens in the latest version of Bootstrap?

class="col-md-6 col-lg-12″

55. With jQuery, construct an array that has the values ["A", "B", "C", "D", "E", "F"] by getting the letters stored in the following html elements and pushing them into the array?

<div class="select-container" data-letter="A">
B
<div class="select-wrapper">
<ul>
<li id="select-first">D</li>
<li></li>
<li>E</li>
<li></li>
C
</ul>
</div>
<div>
<span>F</span>
</div>
</div>

var letterArray = [];
// A
letterArray.push($('.select-container').data("letter"));
// B
var b = $('.select-container').contents().filter(function() {
return this.nodeType === 3 && this.nodeValue.trim() !== '';
}).text().trim();
letterArray.push(b);
// C
var c = $('.select-wrapper ul').contents().filter(function() {
return this.nodeType === 3 && this.nodeValue.trim() !== '';
}).text().trim();
letterArray.push(c);
// D
letterArray.push($('#select-first').text());
//E
letterArray.push($('.select-wrapper li').eq(2).text());
// F
letterArray.push($('.select-container > div:last-child span').text());
// Console Log the array.
console.log(letterArray);

Download Interview PDF

56. How would we select the 3rd li element and retrieve the value of it's id attribute w/out selecting the li by id? *You can select it by index?

<ul id="list">
<li id="one"></li>
<li id="two"></li>
<li id="three"></li>
<li id="four"></li>
</ul>

$('ul li').eq(2).attr('id');
// or
var item;
$.each($('ul li'), function(i){
if (i == 2){
item = $(this).attr('id');
}
});

57. Create a new javascript object with the keys of "fname" equal to your first name, "lname" equal to your last name, and "fcolors" equal to and array of 3 of your favorite colors. assign this object to a variable called "me" and log it to the console?

var me = {"fname": "Global", "lname": "Guideline", "fcolors": ["blue", "green", "whitesmoke"]};
console.log(me);
// or
var me = {};
me.fname = "Global";
me.lname = "Guideline";
me.fcolors = ["blue", "green", "whitesmoke"];
console.log(me);

58. Tell me what JavaScript method would convert the string "20" to an integer (on the fly) so "20" + 20 = 40?

parseInt("20″) + 20;

59. Tell me what are the new media-related elements in HTML5?

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.

60. Explain what is the difference between linking to an image, a website, and an email address?

To link an image, use <img> tags. You need specify the image in quotes using the source attribute, src in the opening tag. For hyperlinking, the anchor tag, <a>, 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:

<img src="HTMLrocks.jpg"></img>
<a href="http://www.globalguideline.com/">global guideline</a>
<a href="hussain@globalguideline.com">Email Me</a>

61. Explain what is the coolest thing you ever coded? Do you have any personal projects you are working on?

These two questions are interchangeable. Any developer worth his weight had to practice somewhere or on something before they landed their first gig. If not, how did you get this interview anyway?! Review your past experiences, and even if they were boring to you, figure out a new frame of reference that demonstrates passion and a zest for learning.

62. Declare a new variable in PHP equal to the number 3?

$number = 3;

63. Explain 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.

64. What is a CSS reset. What is the difference between a CSS reset and normalize.css?

CSS Reset removes browser default styles. Normalize.css sets a standard across all browsers (It does not 'reset' them).

65. Tell me what is the difference between <div> and <frame>?

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.

66. Name 3 attributes of the css position property?

static, absolute, fixed, relative, inherit

67. Suppose 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.

68. Name some online resources you reference when having CSS issues?

Mozilla, Stack Overflow, CSS-Tricks

69. Tell me 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 "*<!--" and end with " -->".

70. Name 3 attributes of the position property?

☛ static
☛ absolute
☛ fixed
☛ relative
☛ inherit

Download Interview PDF

71. Tell me 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.

72. Name 4 new elements in HTML5 that were not available in previous HTML versions?

☛ canvas
☛ audio
☛ svg
☛ header
☛ footer
☛ aside
☛ article
☛ nav
☛ section etc…

73. Call an external style sheet and an external script located in the ROOT folder called style.css and main.js with HTML?

<script src="main.js"></script>
<link href="style.css" rel="stylesheet"></link>

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

75. Name 3 of the minimum HTML elements needed for an HTML document?

☛ !DOCTYPE html
☛ html |
☛ body
☛ head
☛ (title kind-of)

76. Explain what kind of things must you be wary of when design or developing for multilingual sites?

setting the default language, using Unicode encoding, using the 'lang' attribute, being aware of standard font sizes and text direction, and language word length

77. Tell us what is the coolest thing you've ever coded? What's something awesome you've done?

Open Ended Question, looking for an example of a complex/cool project, personality and what motivates them about development.

78. Explain how do you optimize a website's assets?

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

79. Tell me what got you into Web Development?

Open Ended Question, looking to see what they are learning/ staying up-to-date with.

80. Tell me what is your preferred development environment?

This is your chance to talk shop and demonstrate some industry knowledge. Be prepared to talk about your favorite editor, browser, plug-ins, operating system, and other tools. Freshen up on your lingo.

81. What is something new / something you have found interesting recently?

Open Ended Question, looking to see what they are learning/ staying up-to-date with.

82. Tell us have you learned something new or interesting lately?

Make sure you know all the relevant news and blogs. You should be reading them regardless, but doing so on a daily basis during your job search is important. Be ready to talk casually and fluently about the latest web trends.

83. Tell me 3 available jQuery plugins that Bootstrap has in their Query plugin library?

Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel, Affix.

84. How to access a GET requests URL parameter with PHP?

$_GET["urlkey"]

85. Tell me what is jQuery?

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

Download Interview PDF

86. How do you include a comment in CSS?

/* This is a Comment */

87. What is Semantic HTML?

HTML using markup that also conveys the containing content. HTML5 has more semantic tags than prior versions (nav | aside | article | header | footer), but using descriptive classes and id's could also be an example of semantic markup.

88. Suppose If you have an issue with your page, how do you debug it, what tools do you use?

Looking for common debugging practices like W3c validator, Firebug, Chrome Dev Tools.