Skip to content

IgnaciodeNuevo/frontend-development-interviews

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits

.DS_Store

.DS_Store

 
 

LICENSE.md

LICENSE.md

 
 

README.md

README.md

 
 

Repository files navigation

Front-end Interview Questions and Articles to face Interviews

A curated list of lists of frontend interview questions and articles to face Front-end Interviews.

Table of Contents

  1. General
  2. General Articles
  3. General Questions
  4. General Resources
  5. Books
  6. Videos
  7. HTML Questions
  8. CSS
  9. CSS Articles
  10. CSS Questions
  11. JavaScript
  12. JavaScript Articles
  13. JavaScript Questions
  14. Testing Articles
  15. Testing Questions
  16. Performance Questions
  17. A11y General
  18. A11y Technical
  19. A11y Design
  20. Network Questions
  21. Coding Questions
  22. Fun Questions
  23. Questions to know the company better
  24. Company
  25. Work-life balance
  26. Hiring and onboarding
  27. Project Management
  28. Clients and Meetings
  29. Coding
  30. Open Source
  31. Markup
  32. UX
  33. Design
  34. Programming
  35. Quality Assurance
  36. Bonus Questions

Getting Involved

  1. License
  2. Extra Info

General

General Articles

General Questions

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

General Resources

Books

Videos

HTML Questions

  • Are there any problems with serving pages as application/xhtml+xml?
  • Consider HTML5 as an open web platform. What are the building blocks of HTML5?
  • Describe the difference between <script>, <script async> and <script defer>.
  • Describe the difference between a cookie, sessionStorage and localStorage.
  • Have you used different HTML templating languages before?
  • How do you serve a page with content in multiple languages?
  • What are data- attributes good for?
  • What does a doctype do?
  • What is progressive rendering?
  • What kind of things must you be wary of when design or developing for multilingual sites?
  • What's the difference between full standards mode, almost standards mode and quirks mode?
  • What's the difference between HTML and XHTML?
  • 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?

CSS

CSS Articles

CSS Questions

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

JavaScript

JavaScript Articles

JavaScript Questions

  • 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
  • Describe event bubbling.
  • Difference between document load event and document DOMContentLoaded event?
  • Difference between: function Person(){}, var person = Person(), and var person = new Person()?
  • Explain "hoisting".
  • Explain Function.prototype.bind.
  • Explain Ajax in as much detail as possible.
  • Explain event delegation
  • Explain how this works in JavaScript
  • Explain how JSONP works (and how it's not really Ajax).
  • Explain how prototypal inheritance works
  • Explain the difference between mutable and immutable objects.
    • How can you achieve immutability in your own code?
    • What are the pros and cons of immutability?
    • What is an example of an immutable object in JavaScript?
  • Explain the difference between synchronous and asynchronous functions.
  • Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
  • Explain the same-origin policy with regards to JavaScript.
  • Explain what a single page app is and how to make one SEO-friendly.
  • Explain why the following doesn't work as an IIFE: function foo(){ }();.
    • What needs to be changed to properly make it an IIFE?
  • Have you ever used JavaScript templating?
    • If so, what libraries have you used?
  • How do you organize your code? (module pattern, classical inheritance?)
  • Make this work: 
    duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
  • What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
  • What are the advantages and disadvantages of using Ajax?
  • What are the pros and cons of using Promises instead of callbacks?
  • What do you think of AMD vs CommonJS?
  • What is "use strict";? what are the advantages and disadvantages to using it?
  • What is a closure, and how/why would you use one?
  • What is event loop?
    • What is the difference between call stack and task queue?
  • What is the difference between == and ===?
  • What is the extent of your experience with Promises and/or their polyfills?
  • What language constructions do you use for iterating over object properties and array items?
  • What tools and techniques do you use debugging JavaScript code?
  • What's a typical use case for anonymous functions?
  • What's the difference between .call and .apply?
  • 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's the difference between an "attribute" and a "property"?
  • What's the difference between feature detection, feature inference, and using the UA string?
  • What's the difference between host objects and native objects?
  • When would you use document.write()?
  • Why is extending built-in JavaScript objects not a good idea?
  • Why is it called a Ternary expression, what does the word "Ternary" indicate?
  • 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?

Testing Articles

Testing Questions

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

Performance Questions

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

A11y General

  • Who benefits from accessibility?
  • Name some ways responsive/mobile first design can affect accessibility.
  • What are some user experience (UX) concerns to be aware of when using iconography in user interfaces (UI)?
  • In what ways should someone be able to close a modal dialog?
  • What are your thoughts on modifying the way screen readers announce certain content?
  • What assistive technologies (ATs) are you familiar with (desktop + mobile)?
    • What do you feel is your skill level with these AT(s)?
  • Describe what someone would use heading tags for.
  • What are skip links and who benefits from them?
  • What are some of the tools available to test the accessibility of a website or web application?

A11y Technical

  • Describe appropriate instances to use a link, vs a generic button, vs a submit button
  • What methods would you use to find an element's accessible name?
  • What is the accessibility tree?
  • Why are rems or ems preferable to pixels for setting type size?
  • Why is it important to allow the viewport to scale?
  • How is title attribute exposed to assistive technologies?
    • What kind of content should titles be used on.
    • What sort of information is appropriate for use in a title?
  • Describe a scenario where you might use aria-describedby.
  • What are landmark roles and how can they be useful?
  • When might you use a toggle button, such as a button utilizing aria-pressed and/or role="switch" over a checkbox?
  • Describe ways to hide content:
    • From all users.
    • From only screen reader users.
    • From sighted users, but not screen reader users.
  • When is the affect of alt="" on images?
  • What is the difference between aria-hidden="true" and role="presentation"?
  • When should you use aria-live="assertive" instead of aria-live="polite"?
  • How would you mark-up an icon font or SVG that was for decorative purposes?
  • What are some issues with using CSS pseudo content?
  • Describe the steps you take in reviewing or auditing a website or application for accessibility?
  • Describe an instance where an automated test would not flag a blatant accessibility error?
  • When should you use or recommend ARIA roles or attributes to solve an accessibility issue?
  • Describe your process for figuring out if an accessibility bug is due to a developer, browser, or assistive technology error?
  • Describe your thoughts on how a single page web app should handle focus when a new screen loads.
  • Why shouldn't you only rely on visual styling to indicate state?
  • What are some issues with carousels?

A11y Design

  • Talk about the pros and cons of flat and skeuomorphic design trends in regards to accessibility.
  • Explain the importance of color contrast.
  • Besides :hover, what other states should an actionable item (links, buttons, form controls) have designs for.
  • What are your thoughts on the removal of visual focus indicators for UI elements?
  • If a form or form field were to return an error message, where might you want those error messages to be located?
  • How can utilizing animation in an interface affect the user experience?
  • Explain how you would make an infographic accessible for screen reader users.
  • What are some issues with modifying normal scrolling behavior? For example: infinite scrolling or scrolljacking.
  • Why is color alone insufficient to draw attention to actionable elements, or to convey state?
  • Talk about the importance of using plain language.

Network Questions

  • Do your best to describe the process from the time you type in a website's URL to it finishing loading on your screen.
  • 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
  • Traditionally, why has it been better to serve site assets from multiple domains?
  • What are HTTP methods? List all HTTP methods that you know, and explain them.
  • What are the differences between Long-Polling, Websockets and Server-Sent Events?

Coding Questions

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

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 = 'bar');

Question: What is the outcome of the two alerts below?

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

Question: What is the value of foo.length?

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

Question: What is the value of foo.x?

var foo = { n: 1 };
var bar = foo;
foo.x = foo = { n: 2 };

Question: What does the following code print?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

Fun Questions

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

Questions to know the company better

Company

  • Do employees have time to learn/be mentored during work hours?
  • Do you care about diversity?
    • What's your process for making sure you have diversity in other ways?
  • Do you hace private medical insurance or extras?
  • Do you have a dress code?
  • Does the company attend/promote/sponsor Events, Conferences or Workshops?
  • Does your company support continuing education? (will they pay for employees to do a master's degree?)
  • How do you define front end development?
  • How do you manage company expenses?
    • If you need to go to a client's company how do you ask for bill refounds?
  • How long have you been here?
  • How many employees are in the company?
  • How often do you review salaries?
  • How often have you moved teams? What made you join the team you’re on right now? If you wanted to move teams, what would need to happen?
  • Is the there good communication in the company?
  • What did your day look like yesterday? Was that pretty typical? If not, what was different about it?
  • What equipment is provided with the position?
  • What is something you wish were different about your job?
  • What is the most fulfilling/exciting/technically complex project that you’ve worked on here so far?
  • What is the value of this position to your company?
  • What is your telecommuting policy?
  • What tools do you use for internal communication?
  • When you were last interviewing, what were some of your other options, and what made you choose this company?
  • When’s the last time you interacted with a founder? What was it regarding? Generally how involved are the founders in the day-to-day? (If the company is a startup)

Work-life balance

Hours

  • Do you have flexible schedules?
  • Do you track hours?
    • What tools do you use?
    • How many client-billable hours do you expect per week?
    • Is there a policy about objectives vs schedules?
  • How often are there emergencies or times when people have to work extra hours?
  • Is there the possibility to work remotely?
  • What time do people normally leave work?

Holiday

  • How much vacation do people get? If there's "unlimited" vacation, how much vacation do people normally take?

Hiring and onboarding

  • Do you only hire excellent human beings?
  • How many devs were hired last year and how many left?
  • What is your turnover rate like?
  • What's the onboarding process like?

Project Management

  • Can you describe a typical project life cycle?
  • Do you have dedicated project managers?
    • If so, how many?
    • Are they certified / what certification?
  • Do you use a bug tracking/ticketing system?
  • Do you use any project management software?
  • How do you organize project teams?
  • How often do you push code live?
  • How you evaluate your development team?
  • If Agile, what is your sprint length?
  • What is an average project size in terms of days/weeks/team members?
  • What is your development methodology?
  • What kind of seating arrangement do you have?
    • Teams vs departments

Clients and meetings

  • Are Front-end expected to meet with clients?
  • Are there no realistic deadlines?
  • Do you send Front-end on sales calls?
  • How do you handle difficult clients, in particular:
    • Feature / design changes
    • "Make the logo bigger"
  • How often are clients in the office?
  • What meetings? Time in meetings? Estimates? Client/Customer? Scrum meetings? Retrospectives? How many should I go as developer?
  • What percentage of clients are internal vs external?

Coding

  • % experimenting with libraries / languages / techniques?
  • % time for tech-debt, refactoring, readability, automation, or improving the code base.
  • Can developers propose new technologies & ideas to implement?
  • Can I view the source code?
  • Do devs get shamed for breaking the build?
  • Do you care about the work that you do, and keep trying to do it better?
  • Do you have a coder blog?
  • Do you have a preferred CMS or development platform?
  • Do you publish your code?
  • Do you tend to roll your own solutions more often or rely on third party tools?
  • Do you test your code?
    • If so. How?
  • Do you try to do best practices?
  • Do you use coding style guides?
    • Spaces or tabs?
  • Do you use modern technologies?
  • How is your branch workflow?
  • How long are your release cycles?
  • How often do you add new tools to the mix?
  • Is there code maintainability?
  • Is there legacy code?
  • Macs, PCs or Linux?
  • What do you think about Software Craftsmanship?
  • What do you use for version control?
  • What is the most costly technical decision made early on that the company is living with now?
  • What is the oldest version of IE that you support?
  • What is your stack?
  • What is your standard development toolkit?
  • What’s been the worst technical screw up that’s happened in the recent past? How did you guys deal with it? What changes were implemented afterwards to make sure it didn’t happen again?
  • Who decides what features get built?

Open Source

  • Do you allow employees to publish code (Github)?
  • Which organisations work on open source?
  • Which projects?

Markup

  • Accessibility
    • Do you ever test for accessibility with screen reader software or a testing service?
    • Do you use WAI-ARIA?
    • Is accessible AJAX a priority?
  • Semantics or divs / spans as necessary?

UX

  • Do you do user testing?
  • Do you have a UX team?
    • If yes, can you give me an overview of your UX process?
  • What's your current approach to mobile?

Design

  • Are Front-end involved in the design process?
    • If so, at what point?
  • Does the company value design?
  • How many design comps are created for a typical project?
  • What format do you use for design comps?

Programming

  • How many dedicated programmers do you have?
  • How much time are programmers allowed to spend mentoring?
  • What are the primary programming languages used?

Quality Assurance

  • At what point in the build do you begin QA?
  • Bonus for continuous or unit testing
  • Do you collect metrics on site visitors and user agents?
  • Do you do code reviews?
  • Do you have any dedicated QA software or hardware?
  • Do you use pull request and pull request review?
  • How do you determine browsers/devices for testing?
  • How do you find bugs in your team's code?
  • Planning Code Reviews, QA, CI, Testing, Crossbrowser testing, Deployment, GIT, issue tracker?
  • What percentage of a build is dedicated to QA?
  • When something goes wrong, how do you handle it?

Bonus Questions

  • Do you believe an employee should ever "stay as late as it takes to get the job done?"
  • Do you ever bring in lunch/dinner during crunch times?
  • Do you send employees to tech conferences?
    • Do you let them spend working hours creating talks to give at said conferences?
  • What do you think about Google's 20% policy?

Awesome Interview Questions

A curated list of lists of technical interview questions.

Extra Info

This was originally made here plus my own additions Front-end Job Interview Questions

About

A curated list of lists of frontend interview questions.

Resources

Readme

License

MIT license
Activity

Stars

49 stars

Watchers

3 watching

Forks

12 forks
Report repository

Releases

No releases published

Packages

No packages published