{"id":8026,"date":"2022-06-23T10:42:49","date_gmt":"2022-06-23T17:42:49","guid":{"rendered":"https:\/\/coderpad.io\/?p=8026"},"modified":"2023-06-07T14:10:12","modified_gmt":"2023-06-07T21:10:12","slug":"3-great-technical-questions-for-junior-front-end-candidates","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/interviewing\/3-great-technical-questions-for-junior-front-end-candidates\/","title":{"rendered":"3 Great Technical Questions to Ask Your Junior Front-End Engineering Candidates"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.codingame.com\/work\/codingame-coderpad-tech-hiring-survey-2022\/#recruiting-in-2022-a-tight-but-dynamic-job-market\" target=\"_blank\" rel=\"noopener\">Senior engineers are hard to come by<\/a>\u2013so many companies have started to focus on hiring junior developers to train up rather than pay the hefty price tag for intermediate and senior developers.<\/p>\n\n\n\n<p>However, hiring a good junior front-end developer isn\u2019t as simple as having them solve an algorithm question on a whiteboard.<\/p>\n\n\n\n<p><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\">We\u2019ve previously talked about<\/a> how important it is to develop interview questions that accurately assess skills and match the candidate\u2019s experience \u2013 but what does that look like for a junior front-end developer?<\/p>\n\n\n\n<p>First and foremost:<\/p>\n\n\n\n<p><strong>Does the question represent an actual task the candidate would do on the job?&nbsp;<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/eradicating-whiteboard-interviews-with-jon-nguyen\/\">Computer science trivia or algorithm questions<\/a> almost always are a poor reflection of what a candidate would actually be doing on the job AND it will bias you more towards candidates with a traditional academic background, drastically reducing your qualified candidate pool.<\/p>\n\n\n\n<p>With junior developers, you mainly want to focus on their grasp of basic coding principles and concepts they would apply at your company or team. At the very least, this usually means having a good understanding of JavaScript, HTML, and CSS fundamentals.<\/p>\n\n\n\n<p>Some potential skills to think about when you create a question for a junior front-end developer:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Can they use math functions correctly for displaying HTML elements?&nbsp;<\/li>\n\n\n\n<li>Can they resize images like pictures and bars in a bar chart?<\/li>\n\n\n\n<li>Are they able to communicate the rationale behind their design decisions?<\/li>\n<\/ul>\n\n\n\n<p>Your interview questions should depend on the specifics of your business, but you want to focus on the junior engineer\u2019s ability to carry out basic UI development.<\/p>\n\n\n\n<p>With that in mind, here are three questions we\u2019ve seen be successful in junior front-end engineer interviews:<\/p>\n\n\n<aside class=\"\n    cta-banner\n     cta-banner--bg-green      cta-banner--has-media \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">Ready to start interviewing?<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"\/sales\/\" class=\"button  js-cta--get-a-demo\"  data-ga-category=\"CTA\" data-ga-label=\"Ready to start interviewing?|Get a demo\">Get a demo<\/a>\n                                <\/div>\n                    <\/div>\n                    <div class=\"media\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"238\" height=\"146\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/illustration-of-two-people-chatting-in-app-windows.png\" class=\"attachment-large size-large\" alt=\"\" \/>\n            <\/div>\n            <\/div>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">Bar Chart Challenge<\/h2>\n\n\n\n<p>In the example question below, ask candidates to render a simple bar chart from a given data set. They don\u2019t have to collect the data themselves (that\u2019d be a more advanced task). Provide it as a JSON variable, which the candidate should know how to access.<\/p>\n\n\n\n<p>This question is helpful if your junior developers would be working on any usage chart or dashboards while on your team. It\u2019s also a good challenge for an entry-level developer with no professional coding experience to evaluate their different front-end skills.<\/p>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=219111&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>When you create a question, you should also define the success criteria. This will allow you to quickly evaluate the candidate when the interview is finished and <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/a-holistic-guide-to-diversity-and-inclusion-in-the-technical-hiring-process\/\">reduce bias<\/a> in the interview process because you\u2019re using the same success criteria for each candidate.&nbsp;<\/p>\n\n\n\n<p>The success criteria for the Bar Chart challenge are as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Good implementation<\/em> \u2013 Candidate just uses the counts as a pixel width<\/li>\n\n\n\n<li><em>Better implementation<\/em> \u2013 Candidate calculates the percentage of cell width from count \/ total words&nbsp;<\/li>\n\n\n\n<li><em>Best Implementation<\/em> \u2013 Candidate calculates the cell width percentages against the highest count&nbsp;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Web Developer Challenge<\/h2>\n\n\n\n<p>This one is suited for entry-level web developers.<\/p>\n\n\n\n<p>Have them build a simple login page that contains some basic form validation. It again assesses baseline HTML\/CSS\/JS skills to reflect what they\u2019d be working on in pretty much any web developer role.<\/p>\n\n\n\n<p>The design requirements are also a bit more open-ended than in the Bar Chart Challenge, which allows you to discuss design decisions more in-depth if that is a priority for you.<\/p>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=219328&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>Because of the open-endedness of this question, the success criteria are also a bit more open to interpretation. You can refine them further to fit the needs of your team better:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The candidate follows the instructions<\/li>\n\n\n\n<li>The code is clean and readable<\/li>\n\n\n\n<li>The candidate can work with loosely-defined tasks<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 Don\u2019t forget to ask the candidate questions about their code during the interview! Turning the interview into a discussion can reduce interview stress and get more insight into the candidate\u2019s thought process.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">CoderPad Playback Challenge<\/h2>\n\n\n\n<p>And now, an interview question directly from our playbook. This is a slightly more complex challenge and may be more suitable for a junior dev with a year or two of professional development experience.<\/p>\n\n\n\n<p>We ask the candidate to recreate part of one of our key features,&nbsp; <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/playback-mode\/\">Playback Mode<\/a>, which allows interviewers to review a candidate\u2019s work in a pad.&nbsp;<\/p>\n\n\n\n<p>The candidate must create a function that reads a series of timestamped JSON data and returns the playback state.<\/p>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=219329&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>Here are some success criteria you can use to develop a rubric for your version of the question:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Is the output correct per the respective timestamp?<\/li>\n\n\n\n<li>Did they understand the data structures in the challenge and minimize iteration over those structures?<\/li>\n\n\n\n<li>Did they manipulate the strings in a straightforward and understandable way?<\/li>\n\n\n\n<li>Is the code well-organized?<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">The best interviewing format &amp; other resources<\/h2>\n\n\n\n<p>Selecting the right question for junior developer candidates is just one part of setting up an excellent interview operation.<\/p>\n\n\n\n<p>You can improve the process by creating an iterative interview exercise that has a candidate working on a <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/interviewers\/resources\/docs\/interview\/quick-start-guides\/interviewers\/resources\/docs\/interview\/quick-start-guides\/interviewers\/resources\/docs\/interview\/quick-start-guides\/interviewers\/take-home-projects\/\">take-home project<\/a> by themselves. Qualified candidates then move on to a live coding interview where they build on the work they created in the take-home project.<\/p>\n\n\n\n<p>We dive deep into this particular process \u2013 and how to combine it with pair programming to create an even better interview\u2013 in a blog post that you can find <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/seamless-interview-experience-duplicate-pads\/\">here<\/a>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 Don\u2019t forget that there are many things even good junior developers may not know yet. If there is something they struggle with during the interview, teach them about it! Even if they\u2019re not the right candidate for you at the moment, you\u2019ll help them learn something new and they\u2019ll have some good things to say about your company in the future.<\/p>\n<\/blockquote>\n\n\n\n<p>We also have the following interviewing resources available for your reference at any time:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\">How to Run Front-End Developer Interviews That Don\u2019t Suck<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/a-holistic-guide-to-diversity-and-inclusion-in-the-technical-hiring-process\/\">A Holistic Guide to Diversity and Inclusion in the Technical Hiring Process<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/the-1-best-anti-cheat-interview-question-ever\/\">The #1 Best Anti-Cheat Interview Question Ever<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Hiring a good junior front-end developer isn\u2019t as simple as having them solve an algorithm question on a whiteboard. Set your junior dev interview process on fire with these three front-end based interview questions.<\/p>\n","protected":false},"author":12,"featured_media":8031,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12],"tags":[],"persona":[],"blog-programming-language":[],"keyword-cluster":[],"class_list":["post-8026","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-interviewing"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/8026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=8026"}],"version-history":[{"count":22,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/8026\/revisions"}],"predecessor-version":[{"id":33774,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/8026\/revisions\/33774"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/8031"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=8026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=8026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=8026"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=8026"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=8026"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=8026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}