Interview - Technical
The Aim
The aim of the technical interview is to find out the following:
Understanding: The interviewee understands the HTML and CSS basics they've presumably learned and used to a sufficient level to allow them to manipulate their page further or to recreate it from scratch (if they were asked to).
Approach: The interviewee has picked up a process for searching for and incorporating new information
Knowledge: The interviewee can reason through some small problems
Reponses: The interviewee can express technical questions or explanations fairly clearly in English
These questions reduce the possibility of interviewees reciting prepared answers without genuine understanding.
Questions
Can you give me specifics?
Trainees are asked to build a product landing page and a tribute page as part of their application. The details of these tasks are here:
Find the applicant on the dashboard
Fork submitted work in Codepen
Quickly look over their work beforehand (5-10 mins)
What sort of questions should I ask?
Ask short questions which would require at least one of the following:
change of element types
change of element attributes
duplication and alteration of elements
css alterations
re-ordering of elements
removal of elements
for them to google something related and relatively easy which they don't know (e.g. a css rule or html attribute) such that they could potentially find the answer and make use of it in a (say) 1-minute window.
Guidance on creating and asking questions
Try not to get bogged down in minutia - we're looking for a good overall understanding not recalling specific APIs
It's fine to ask questions that the trainee might not know the answer to or which might be considered advanced. Just be positive and make it clear that they're not expected to know the answer!
Do not ask all these sample questions! Please just choose two or three.
A few sample questions for the product landing page task
How would you change your code if...
We want NO video when viewing with a small-screen mobile device (e.g. smartphone)
We want clickable links from your landing page to your tribute page and vice versa, maybe at the foot of the page
The company has a partner that wants their logo added to the header, too!
We want the navbar to always be shown at the bottom of the viewport, instead of the top?
[Ask this AFTER "playing ignorant", below]. What if I wanted to collect email address AND full name?
(Note copy paste isn't quite enough here - they'd have to disable validation of the name field as an email address)
We want to add a sound file to the page (or a playable video game, if they already know)
Here we're intentionally asking for something they've hopefully no clue how to do.
DON'T have them waste time taking this all the way, even if they can.
You just want to at least see that they can search and start to select from search results intelligently
Playing Ignorant
Make a "mistake" understanding the email address form field, and see if they can help you.
You: "This form field of the form rejects when i try to submit my name ("Neill"). What's going on?"
Hint (if necessary) so they don't treat you as infallible: You: "Am I doing something wrong? I might have the wrong idea here..." ... "I might be intentionally making a mistake here, what mistake am i making?"
What we're looking for:
Candidate understands our mistake - it should be enough for them to read the presented error message
Can articulate to us why we're seeing an error and what we might do to remedy it
Can explain how this validation has been enabled in their html code.
Follow up: You: "Ah! So how do you get it to validate an email field?"
Break and fix
Fork their site and break it (e.g. cause elements to become unstyled by changing element ids or classes). Point out the errors from the user perspective (not from a code view), and ask them to fix your code.
Make sure you're agreed on what the client expects: "We want this footer text to be neon pink, and ten feet tall, right?"
How do they go about debugging it?
Here are some likely hints (if they struggle for a while):
[First check you have the same expectation]: "We expect this text at the bottom of the page to be bright pink, right?"
"How would you do that in the first place? Forget that I broke it - do it from scratch as you would for any text." [avoid them obsessing on what got broken, or how. guide back to first principles.]
"How does it know that this rule in css is meant for this text?" [Looking for the aha of a wrong class or id]
Rubric
You may have asked more than one question, or you may have only had time for one. For each question you asked, consider the following areas. Now, overall, place the candidate on the scale provided.
Understanding the question (forget about the answer for now)
Clearly understood the question
Maybe understood the question
Probably didn't understand the questions
I had no chance to assess this
Approach
Showed an excellent approach to the question
Showed partial signs of a good approach to the questions
Showed a poor approach (e.g. helplessness)
I had no chance to assess this
Knowledge
Knew the answer
Was clearly familiar with the domain and got to the answer after light hint(s)
Didn't know the answer
I had no chance to assess this
Taking feedback
Took feedback well (acknowledged and/or incorporated or rejected with reasoning)
Took feedback with prompting
Took feedback poorly (denial / no acknowledgement)
I had no chance to assess this
Other notes
Any other notes on the technical interview or candidate's performance? Please contribute your insights, and any important context to your grade, in the text box.
Last updated