UI Developer Interview Questions and Answers

interview
Share Button

I work for a tech company in Silicon Beach, CA and one of my jobs as a UI Engineer is to conduct technical interviews for incoming web UI Developer / UI Engineer candidates. This has placed me in the unique position of seeing what a company might be looking for in a candidate, and what questions they might ask to judge if the candidate might be a good fit. My interviewing has become frequent enough that I have begun to maintain a general list of UI Developer interview questions and answers I might ask a interviewee, as well as the things I look for in the answers given. I once was on the other side of the interviewing table, and I know it can sometimes be difficult to know what to expect and prepare for if you are headed into an interview, so hopefully I may be of help if you are wondering what to expect/prepare for.

ResumeBefore I get into the list of UI Developer Interview Questions and Answers, I’ll first start by saying that my part of the interview process begins before meeting the candidate face to face. I will often want to get a better picture of what they have done in the past, so reading something like a well procured resume that is relevant to the job being applied for certainly helps. Beyond that I often google a candidates name to check out their web presence. Particularly I am looking for a “your-firstname-lastname.com” type site where I can see real examples of past work. I myself try to stay on top of tech trends, and use my website to show someone searching for more information about me, some content I control like: who I am, what I can do, and my various levels of unbridled awesomeness. For more information on how I have catered my site, I wrote an article on how to make a Developer/Designer Portfolio that goes deeper into the juicy details of how to stand out in the crowd, but a good website about you and your awesomeness really helps when interviewing. With that being said, It’s not like I (as an interviewer) am looking for the next revolutionary site design, all I really look for is something that tells me the person understands basic modern principles, and that their site shows maybe a bit of personality. An example of an awesome, but simple personal site is Nick Pettit‘s (Designer/Web Advocate at TreeHouse). It’s just a simple 1 pager, super clean, ’nuff said. So don’t stress if you think interviewers are looking for some crazy portfolio site. Really all I am looking for is that you care about your online presence, and that the experience you have chosen to give your users isn’t dated / awkward. Simply put, I’m looking to see if the candidate has spent time to help educate people searching for more information about them, and that they show a little bit of skill/personality through their site. I think maintaining a simple web presence is important in this field, and it has often been a good first indicator for me in starting to rank a candidates current skill level prior to interviewing. With all that being said, I have come across poorly maintained sites, and then had the candidate crush an interview, so it’s not 100% make or break, but it certainly helps the first impression.

aqNow more about my actual UI Developer interview questions and the answers I look for:
I do not ask trick questions, ever. I think asking someone to estimate how many pingpong balls fit inside a 747 is a waste of time and can add unnecessary stress to an interviewee that may then cause poor performance on following questions purely because they are stressed out about some stupid irrelevant question. I usually start out with trying to get to know them better as a person, and typically first ask them if I can answer any questions they have about what I do at the company, company culture, anything about the company they would like to know more about. This is a really good way to break the ice and build some good will between each other. If you are presented with this kind of question, take the opportunity and ask something! There have been a few times where the candidate had no questions and it just made the start of the interview a bit more stale. A good question would be, “What have you enjoyed the most/least working at company ____” or “What do you do at company ____”. These questions allow the Interviewer to take the first 5-10 minutes to give the candidate more insight about the inner workings of the company, and can be a good way to begin the conversation/break the ice.

Most of these Questions are just pulled from my notes, so the ‘answer’ section might be a little incomplete because it mostly serves as a baseline for my memory. More of a “gist”. You might think that many of these questions are on the easier side, but in my experience interviewing you can get a pretty good idea of someones skill level with just some of the more basic questions. Keep in mind that if you list something on your resume, be prepared to answer some questions about it. I had one interview where the candidate listed PHP as a skill, but couldn’t remember how to declare a variable. This told me pretty clearly that they just listed it on their resume and hoped no questions were asked, so I’ve found simple questions can be surprisingly effective.

  • GENERAL:
    • Q: What is something new / something you have found interesting recently?
    • A: Open Ended Question, looking to see what they are learning/ staying up-to-date with.
    •  
    • Q: What Got you into Web Development?
    • A: Open Ended Question, looking to see what they are learning/ staying up-to-date with.
    •  
    • Q: What is the coolest thing you’ve ever coded? What’s something awesome you’ve done.
    • A: Open Ended Question, looking for an example of a complex/cool project, personality and what motivates them about development.
  • HTML:
    • Q: Name 3 of the minimum HTML elements needed for an HTML document.
    • A: !DOCTYPE html | html | body | head | (title kind-of)
    •  
    • Q: What is Semantic HTML?
    • A: 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.
    •  
    • Q: If you have an issue with your page, how do you debug it, what tools do you use?
    • A: Looking for common debugging practices like W3c validator, Firebug, Chrome Dev Tools.
    •  
    • Q: Call an external style sheet and an external script located in the ROOT folder called style.css and main.js with HTML.
    •  
    • Q: Name 4 new elements in HTML5 that were not available in previous HTML versions.
    • A: canvas | audio | svg | header | footer | aside | article | nav | section etc…
  • CSS:
    • Q: Name 3 attributes of the position property.
    • A: static, absolute, fixed, relative, inherit.
    •  
    • Q: Name some online resources you reference when having CSS issues.
    • A: Mozilla, Stack Overflow, CSS-Tricks . . .
    •  
    • Q: What is a CSS reset. What is the difference between a CSS reset and normalize.css
    • A: CSS Reset removes browser default styles. Normalize.css sets a standard across all browsers (It does not ‘reset’ them).
    •  
    • Q: How would you solve a floated div’s parent height.
    • A: Clearfix, Float Parent as well, User overflow property other than ‘visible’.
    •  
    • Q: Declare all elements with class of “blue-text” to have a text color of blue.
    • A: .blue-text {color: blue;}
    •  
    • Q: Name 3 attributes of the position property.
    • A: static, absolute, fixed, relative, inherit
    •  
    • Q: How do you include a comment in CSS
    • A: /* This is a Comment */
  • JS:
    • Q: Is JavaScript case sensitive?
    • A: Yes
    •  
    • Q: What are 2 (shorthand) boolean operators supported by JavaScript
    • A: or ||, and &&, not equal to !
    •  
    • Q: What is the difference between “==” and “===”
    • A: “==” checks equality, “===” checks equality and type
    •  
    • Q: What is the result of “20” + 20;
    • A: 2020
    •  
    • Q: What Javascript method would convert the string “20” to an integer (on the fly) so “20” + 20 = 40?
    • A: parseInt(“20″) + 20;
    •  
    • Q: What is an AJAX request and what is a simple example of where a AJAX request would be used?
    • A: Asynchronous JavaScript and XML. Client side process used for GET, POST etc to get new data without having to refresh the page.
    •  
    • Q: Assign any variable name a value of “Hello World”, and print that variable’s contents to the console.
    • A:
    • Q: Create an array in JavaScript with a list of 4 colors, assign that array to the variable, ‘colors’.
    • A: var colors = [‘red, ‘yellow’, ‘green’, ‘blue’];
    •  
    • Q: How do you include a comment in JavaScript?
    • A:
    •  
    • Q: 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.
    • A:
    •  
    • Q: 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.
    • Extra Credit:
    • Q: 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.
  • jQuery:
    • Q: What is jQuery
    • A: A JavaScript Framework/Library that make things like DOM selection/manipulation, AJAX, and animation, easier.
    •  
    • Q: What programming language does jQuery use?
    • A: JavaScript
    •  
    • Q: Is jQuery code exicuted on the clientside, or serverside?
    • A: Clientside
    •  
    • Q: How do you install/use jQuery in a project. What is the minimum setup needed to start using jQuery.
    • A: script tag, linked to a jquery CDN or locally hosted file.
    •  
    • Q: How do you select all elements with the class of “selected” in jQuery?
    • A: $(‘.selected’);
    •  
    • Q: Can jQuery be used to make an AJAX request?
    • A: Yes
    •  
    • Q: How would you select the 3rd li element and retreive the value of it’s id attribute w/out selecting the li by id? *You can select it by index.
    • A:
    •  
    • Q: *Extra Bonus – 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.
    • A:
  • PHP:
    • Q: Declare a new variable in PHP equal to the number 3;
    • A: $number = 3;
    •  
    • Q: How do you check if a variable has been set in PHP.
    • A: isset($var);
    •  
    • Q: How do you access a GET requests URL parameter with PHP.
    • A: $_GET[“urlkey”]
    •  
    • Q: How do you check if a variable has NOT been set in PHP.
    • A: !isset($var);
    •  
    • Q: What is the difference between require() and include() when an error is encountered.
    • A: include() will raise a warning if it fails, require() will raise a fatal error.
    •  
    • Q: What is a simple PHP method to make a cross domain data request?
    • A: file_get_contents().
    •  
    • Q: Inside a php function, what param needs to be set in order to access a global variable?
    • A:
  • Bootstrap:
    • Q: What is the current major version of Bootstrap?
    • A: 3.x.x
    •  
    • Q: 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?
    • A: class=”col-md-6 col-lg-12″
    •  
    • Q: Name 3 available jQuery plugins that Bootstrap has in their Query plugin library.
    • A: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel, Affix.
    •  
    • Q: What minimum things do you have to do in order to include Bootstrap & Boostrap JS in a project/ HTML Document.
    • A: 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).
    •  

jobOne thing to consider is even when a candidate doesn’t get the exactly right answer, I am looking more at the problem solving/thought process that got them there. There have been a few people that technically got the wrong answer to a question, but I could tell that they probably knew it, but just got a little mixed up in remembering. I, as an interviewer, understand that there are thousands upon thousands of terms that need to be memorized in order to answer every question about development, and we all have to sometimes look things up when in a normal development workflow. It is more about knowing how to solve the problem than naming the exact corner-case method or attribute. In cases that you blank out on something you know you can do, just explain that you cant remember the term, but explain everything else about the process or how you’d solve the problem.

My interviewing process may be different than other companies so don’t take this as a definitive list, but I would generally say an interviewer is looking for a mixture of creativity, personality, intelligence, and expertise. Go into an interview prepared. Brush up on your various languages syntax and common practices. If you can, bring a portfolio to show of your past work. Even better, have a portfolio section on your website that you can quickly run through and demo examples. At the very least I hope my list of UI Developer Interview Questions and Answers may be of help, but just remember that this is just a list of general questions I ask. Make sure you prepare for questions the company/position you are interviewing for may be asking.

If you have any good questions to add, or think some of these questions could be improved, let me know with a comment below and I’ll look into amending my list. My goal here is to make this a “living list” where I can add and improve these questions over time, so any suggestions are welcome.

Share Button
Riley scribbled this article down on: February 8, 2014
  • Gopalakrishnan

    Hi, I came across your site and try the jQuery bonus question(The array concept) but its not produce the result on the question. I made out a fiddle for your question : http://jsfiddle.net/v6pMc/4/ and I think the result should be like this in the fiddle http://jsfiddle.net/v6pMc/1/ (If there is any misunderstood on the question by me make me clear… thanks :)

    • http://rileyh.com/ Riley Hilliard

      You’re right! It looks like I had forgotten to remove some of the test code I had written as I accidentally added b twice, and for some reason wasn’t using my var c filter for c. Thanks for pointing that out, the answer has been updated.

  • WindaTang

    B = $(‘.select-container’).contents()[0].data.trim()

  • ksull

    Q: 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?
    A: class=”col-md-6 col-lg-12″

    Wouldn’t this be the other way around? You can span 12 columns on medium and large just by using col-md-12, so if you wanted to span only 6 columns on lg I would assume it is “col-md-12 col-lg-6″

  • Shiob Mohammed A

    Hi riley thanks for the article, I have taken interviews for few candidates for web development position, with my own questions prepared, I have attached link, let me know is it good to go with those questions.

    http://momeen.com/interview/web.pdf

  • Vinod Dangudubiyyapu

    how about boilerplate and YUI? are there more freindly.

  • http://jacobarriola.com Jacob Arriola

    Thanks for this @DJRi:disqus. This was a good test for me since I’m at the early stages of my dev career. Thanks!

  • Pradeep Kumar N M

    Thanks a lot. Thanks for yo valuable time in bringing up these used cases. Really helped in brushing up the basics.. Saved my time… Good work Riley Hilliard.

  • Daneyal Akhtar

    Greetings Riley! Great website. Much appreciate your sharing your wisdom for the rest of us beginner devs. Wanted to say that for the fourth JS question regarding “20” + 20 – shouldn’t the answer be “2020” and not 2020? JS strings turn other data types into strings too it they are concatenated, no?

  • ABHISHEK SRIVASTAVA

    Hi Riley, guy’s like you make our life easy as I am aspiring Mobile Web developer I love to enhance my knowledge and what I find is the best practice is to go through questions and then find out the answers by yourself if you dont know. Thanks for some wonderful questions.