#Front-end Job Interview Questions

This file contains a number of front-end interview questions that can be used when vetting potential candidates. It is by no means recommended to use every single question here on the same candidate (that would take hours). Choosing a few items from this list should help you vet the intended skills you require.

Note: Keep in mind that many of these questions are open-ended and could lead to interesting discussions that tell you more about the person's capabilities than a straight answer would.

Table of Contents

1. General Questions
2. HTML Questions
3. CSS Questions
4. JS Questions
5. Network Questions
6. Coding Questions
7. Fun Questions

Getting Involved

1. Contributors
2. How to Contribute
3. License

General Questions:

• What did you learn yesterday/this week?
• คุณเรียนรู้หรือศึกษาอะไรบ้างเมื่อวานหรือในช่วงสัปดาห์ที่ผ่านมา
• What excites or interests you about coding?
• สำหรับคุณอะไรคือความตื่นเต้นหรือความน่าสนใจเกี่ยวกับ 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?
• UI, Security, Performance, SEO, Maintainablity หรือ Technology อะไรที่คุณพิจารณาเอามาใช้ในการสร้างเว็บไซต์หรือเว็บแอพพลิเคชั่น
• Talk about your preferred development environment.
• อธิบายเกี่ยวกับ development environment ที่คุณชื่นชอบ
• Which version control systems are you familiar with?
• Version control system ไหนที่คุณคุ้นเคย
• Can you describe your workflow when you create a web page?
• อธิบาย workflow ของคุณเวลาคุณสร้างเว็บเพจ
• If you have 5 different stylesheets, how would you best integrate them into the site?
• ถ้าคุณมี stylesheet 5 อันที่แตกต่างกัน,คุณจะ integrate มันอย่างไร
• Can you describe the difference between progressive enhancement and graceful degradation?
• อธิบายความแตกต่างระหว่าง progressive enhancement และ graceful degradation
• How would you optimize a website's assets/resources?
• คุณมีวิธีการจัดการกับ website's asset / resource อย่างไรให้มีประสิทธิภาพมากที่สุด
• How many resources will a browser download from a given domain at a time?
• มี resource เท่าไหร่ที่ browser จะ dowload มาจาก domain ในการ download ครั้งนึง
  • What are the exceptions?
  • ข้อยกเว้นของคุณมีอะไรบ้าง
• Name 3 ways to decrease page load (perceived or actual load time).
• อธิบาย 3 ทางที่จะลด page load
• If you jumped on a project and they used tabs and you used spaces, what would you do?
• ถ้าคุณต้องเข้าไปอยู่ในโปรเจคที่ดำเนินการไปแล้วและใน code นั้นใช้ tab แต่คุณใช้ space คุณจะทำอย่างไร
• Describe how you would create a simple slideshow page.
• อธิบายวิธีการสร้าง slideshow page อย่างง่าย
• What tools do you use to test your code's performance?
• คุณใช้เครื่องมืออะไรในการทดสอบ performance ของโค้ด
• If you could master one technology this year, what would it be?
• คุณคิดว่าถ้าปีนี้คุณเป็นผู้เชี่ยวชาญในเทคโนโลยีอะไรซักอย่าง คุณคิดว่ามันจะเป็นอะไร
• Explain the importance of standards and standards bodies.
• อธิบายสิ่งสำคัญของ standard และ standard bodies
• What is Flash of Unstyled Content? How do you avoid FOUC?
• อะไรคือ flash of unstyled content และคุณมีวิธีหลีกเลี่ยง FOUC อย่างไร
• Explain what ARIA and screenreaders are, and how to make a website accessible.
• อะไรคือ ARIA และ screenreader จงอธิบาย และจะมีวิธีการสร้างเว็บไซต์ accessible อย่างไรบ้าง
• Explain some of the pros and cons for CSS animations versus JavaScript animations.
• อธิบายตัวอย่างของ pros และ cons สำหรับ CSS animation VS javascript animation

HTML Questions:

• What does a doctype do?
• 'doctype' ทำงานอย่างไร
• What's the difference between standards mode and quirks mode?
• standards mode และ quirks mode แตกต่างกันอย่างไร
• What's the difference between HTML and XHTML?
• HTML และ 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?
• attribute 'data-' ดีอย่างไร
• Consider HTML5 as an open web platform. What are the building blocks of HTML5?
• Describe the difference between a cookie, sessionStorage and localStorage.
• อธิบายความแตกต่างระหว่าง 'cookie', 'sessionStorage' และ 'localStorage'
• Describe the difference between <script>, <script async> and <script defer>.
• อธิบายความแตกต่างระหว่าง <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?
• progressive rendering คืออะไร

CSS Questions:

• What is the difference between classes and ID's in CSS?
• อะไรคือความแตกต่างระหว่าง classes และ ID's ใน CSS
• What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
• อะไรคือความแตกต่างระหว่าง "resetting" และ "normalizing" CSS และคุณเลือกใช้อันไหน เพราะอะไร
• Describe Floats and how they work.
• กรุณาอธิบาย Float และมันทำงานอย่างไร
• Describe z-index and how stacking context is formed.
• กรุณาอธิบาย z-index และ how stacking context is formed
• 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.
• อธิบาย CSS sprite และคุณมีวิธีการ implement มันบนเพจ หรือเว็บไซต์อย่างไร
• What are your favourite image replacement techniques and which do you use when?
• เทคนิคการ replace รูปภาพที่คุณชอบใช้คืออะไร และคุณจะใช้มันเมื่อไหร่บ้าง
• 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?
• คุณเคยใช้ grid system หรือไม่ ถ้าเคย คุณชอบอะไร
• Have you used or implemented media queries or mobile specific layouts/CSS?
• คุณเคยใช้หรือ implement media queries หรือ mobile specific layout/CSS มาก่อนหรือไม่
• Any familiarity with styling SVG?
• คุณคุ้นเคยกับ styling SVG ขนาดไหน
• How do you optimize your webpages for print?
• คุณมีวิธีการ optimize เว็บเพจของคุณสำหรับการปริ๊นอย่างไร
• What are some of the "gotchas" for writing efficient CSS?
• What are the advantages/disadvantages of using CSS preprocessors?
• การใช้ CSS preprocessor มีข้อดีข้อเสียอย่างไร
  • Describe what you like and dislike about the CSS preprocessors you have used.
  • อธิบายสิ่งที่คุณชอบหรือไม่ชอบเกี่ยวกับการใช้ CSS preprocessor ที่คุณเคยใช้มา
• How would you implement a web design comp that uses non-standard fonts?
• คุณมีวิธีการ implement เว็บ ที่ไม่ได้ใช้ font standard อย่างไร
• Explain how a browser determines what elements match a CSS selector.
• 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?

JS Questions:

• Explain event delegation
• อธิบายลักษณะของ event delegation
• Explain how this works in JavaScript
• อธิบายว่า this ทำงานอย่างไรใน JavaScript
• Explain how prototypal inheritance works
• อธิบายการ inherite prototy ใน JavaScript
• How do you go about testing your JavaScript?
• คุณทำการทดสอบ (Testing) JavaScript อย่างไร?
• What do you think of AMD vs CommonJS?
• คุณมีความเห็นอย่างไรเกี่ยวกับ AMD และ CommonJS?
• Explain why the following doesn't work as an IIFE: function foo(){ }();.
• อธิบายว่าทำไมการเขียนลักษณะนี้จึงทำงานไม่ได้ IIFE: function foo(){ }();
  • What needs to be changed to properly make it an IIFE?
  • คำอย่างไรตัวอย่างด้านบนถึงจะทำงานในลักษณะของ IIFE ได้อย่างถูกต้อง?
• 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?

Network Questions:

• Traditionally, why has it been better to serve site assets from multiple domains?
• โดยทั่วไปแล้ว ทำไมการใช้งานไฟล์จำพวก assets จากหลายๆ โดเมนจึงเป็นสิ่งที่ดีกว่า?
• Do your best to describe the process from the time you type in a website's URL to it finishing loading on your screen.
• ลองอธิบายกระบวนการทำงานตั้งแต่ตอนที่คุณพิมพ์ URL บนเว็บบราวเซอร์ จนกระทั้งเว็บไซต์โหลดเสร็จมาดู
• What are the differences between Long-Polling, Websockets and Server-Sent Events?
• อะไรคือความแตกต่างระหว่าง Long-Polling, Websockets และ Server-Sent Events?
• Explain the following request and response headers:
• ช่วยอธิบาย request และ 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.
• HTTP actions คืออะไร? ช่วยลิสต์รายการ HTTP actions ที่คุณรู้จักมา และอธิบายด้วย

Coding Questions:

Question: What is the value of foo? คำถาม: foo คืนค่าอะไร?

var foo = 10 + '20';

Question: How would you make this work? คำถาม: คุณควรจะเขียนแบบไหนระหว่างสองคำสั่งด้านล่าง?

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

Question: What value is returned from the following statement? คำถาม: คำสั่งด้านล่างจะให้คืนค่าอะไร?

"i'm a lasagna hog".split("").reverse().join("");

Question: What is the value of window.foo? คำถาม: window.foo จะให้ค่าอะไร?

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

Question: What is the outcome of the two alerts below? คำถาม: การ alerts ทั้งสองอย่างด้านล่าง จะให้ค่าอะไรบ้าง?

var foo = "Hello";
(function() {
  var bar = " World";
  alert(foo + bar);
})();
alert(foo + bar);

Question: What is the value of foo.length? คำถาม: foo.length จะให้ค่าอะไร?

var foo = [];
foo.push(1);
foo.push(2);

Fun 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?
• มีคุณสมบัติอะไรของ Internet Explorer ที่คุณชอบบ้าง?
• How do you like your coffee?
• คุณชอบกาแฟที่คุณดื่มอยู่เป็นประจำหรือเปล่า?

Contributors:

This document started in 2009 as a collaboration of @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed and @iansym.

It has since received contributions from over 100 developers.