Limited Time Offer!

For Less Than the Cost of a Starbucks Coffee, Access All DevOpsSchool Videos on YouTube Unlimitedly.
Master DevOps, SRE, DevSecOps Skills!

Enroll Now
Uncategorised

Front End Developer Interview Questions

March 2, 2021 comments off

CSS Interview Questions

  • What is CSS selector specificity and how does it work?
  • What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
  • Describe Floats and how they work.
  • Describe z-index and how stacking context is formed.
  • Describe BFC (Block Formatting Context) and how it works.
  • What are the various clearing techniques and which is appropriate for what context?
  • 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?
  • Have you used or implemented media queries or mobile specific layouts/CSS?
  • Are you familiar with styling SVG?
  • Can you give an example of an @media property other than screen?
  • 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.
  • How would you implement a web design comp that uses non-standard fonts?
  • Explain how a browser determines what elements match a CSS selector.
  • Describe pseudo-elements and discuss what they are used for.
  • 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?
  • What is the CSS display property and can you give a few examples of its use?
  • What’s the difference between inline and inline-block?
  • What’s the difference between the “nth-of-type()” and “nth-child()” selectors?
  • What’s the difference between a relative, fixed, absolute and statically positioned element?
  • What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
  • Have you used CSS Grid?
  • Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?
  • 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?

HTML Interview Questions

  • What does a doctype do?
  • 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?
  • Consider HTML5 as an open web platform. What are the building blocks of HTML5?
  • Describe the difference between a cookie, sessionStorage and localStorage.
  • Describe the difference between <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?
  • Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
  • Have you used different HTML templating languages before?

JavaScript Interview Questions

  • Explain event delegation.
  • Explain how this works in JavaScript.
    • Can you give an example of one of the ways that working with this has changed in ES6?
  • Explain how prototypal inheritance works.
  • 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 is a closure, and how/why would you use one?
  • What language constructions do you use for iterating over object properties and array items?
  • Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other?
  • What’s a typical use case for anonymous functions?
  • What’s the difference between host objects and native objects?
  • Explain the difference between: function Person(){}, var person = Person(), and var person = new Person()?
  • Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
  • Can you explain what Function.call and Function.apply do? What’s the notable difference between the two?
  • Explain Function.prototype.bind.
  • What’s the difference between feature detection, feature inference, and using the UA string?
  • Explain “hoisting”.
  • Describe event bubbling.
  • Describe event capturing.
  • What’s the difference between an “attribute” and a “property”?
  • What are the pros and cons of extending built-in JavaScript objects?
  • What is the difference between == and ===?
  • Explain the same-origin policy with regards to JavaScript.
  • Why is it called a Ternary operator, what does the word “Ternary” indicate?
  • What is strict mode? What are some of the advantages/disadvantages of using it?
  • What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
  • What tools and techniques do you use debugging JavaScript code?
  • Explain the difference between mutable and immutable objects.
    • What is an example of an immutable object in JavaScript?
    • What are the pros and cons of immutability?
    • How can you achieve immutability in your own code?
  • Explain the difference between synchronous and asynchronous functions.
  • What is event loop?
    • What is the difference between call stack and task queue?
  • What are the differences between variables created using let, var or const?
  • What are the differences between ES6 class and ES5 function constructors?
  • Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?
  • What advantage is there for using the arrow syntax for a method in a constructor?
  • What is the definition of a higher-order function?
  • Can you give an example for destructuring an object or an array?
  • Can you give an example of generating a string with ES6 Template Literals?
  • Can you give an example of a curry function and why this syntax offers an advantage?
  • What are the benefits of using spread syntax and how is it different from rest syntax?
  • How can you share code between files?
  • Why you might want to create static class members?

Accessibility Interview Questions

General

  • Who benefits from accessibility?
  • How would you define inclusive and/or universal design?
    • Can you provide an example? (does not need to be web related)
  • How has your approach to accessibility changed over time?
  • 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)?
  • What assistive technologies (ATs) are you familiar with (desktop + mobile)?
    • What do you feel is your skill level with these AT(s)?
  • What are skip links?
    • What benefit(s) do they provide?
    • What are some of their limitations?
  • What are some of the tools available to test the accessibility of a website or web application?
  • What is WCAG?
    • What are the differences between A, AA, and AAA compliance?
  • How can using plain language benefit the accessibility of a project?
  • Describe appropriate instances to use a link, vs a generic button, vs a submit button.
  • Describe ways to indicate an element or component’s state that aren’t entirely reliant on visuals.
  • How can carousels be problematic for users with disabilities?
  • How would you convince your Manager to allocate some funds to do an accessibility external audit?
  • Describe a situation where a coworker may have been resistant to accessibility or inclusive design best practices.
    • How were you able to work with them to mitigate such issues?
    • What sort of strategies do you use in situations like these to help educate coworkers?

Technical

  • 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 be resized, and/or zoomed?
  • How is the title attribute exposed to assistive technologies?
    • What kind of elements can title attributes be used on?
    • What sort of information is appropriate for use with the title attribute?
  • Describe a scenario where you might need to use aria-describedby.
  • What is a focus trap, or focus trapping? Describe an instance of when you’d need focus trapping, and how it can be an accessibility failure if not used appropriately.
  • Describe a situation where one might need to add or modify the focusability of an element by using the tabindex attribute.
  • What are landmark regions and how can they be useful?
  • In what situations might you use a toggle button, vs a switch control, vs a checkbox?
  • Describe methods to hide content:
    • From all users.
    • From only screen reader users.
    • From sighted users, but not screen reader users.
    • And why you might do so.
  • Describe an instance of inappropriately using ARIA attributes.
  • Aside from screen readers, what other assistive technologies can be affected by use of ARIA? How?
  • What is the difference between hidden, aria-hidden="true" and role="presentation" or role="none"?
  • Describe instances where you might need to use aria-live.
    • What values (such as assertive or polite) might you give the attribute in different situations?
  • How would you mark-up an icon font or SVG that was for decorative purposes?
  • How is CSS pseudo content treated by screen readers?
  • What is the purpose of the alt attribute for images?
    • Can you describe the effect of an empty alt, and/or the lack of the attribute, on an image?
    • In what instances might an empty alt or no alt be appropriate?
    • How might alternative text for an image vary, depending on the context the image is used in?
    • Since svgs don’t accept the alt attribute, how can one provide alternative text for these graphics?
    • Do you need to supply an image an alt attribute if used witin a figure with a figcaption?
  • 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?
  • What is the difference between legend, caption and label elements?
    • What are their similarities?
  • Describe the purpose of heading and header elements, and how they are useful in websites and applications.
  • Describe how you’d handle a single page web app should and managing focus when changing routes.
  • Name an ARIA attribute that requires either a child/parent relationship or a pairing role.
  • What is your understanding of “accessible name computation” and how it affects modifying the way screen readers announce certain content?
  • What are some issues with modifying normal scrolling behavior? For example: infinite scrolling or scrolljacking.
  • Some ARIA widgets are presently best supported on devices with physical keyboard, rather than mobile/touch interfaces. Are you aware of any widgets that would be described this way, and why?

Design

  • Talk about the pros and cons of flat and skeuomorphic design trends in regards to accessibility.
  • Explain the importance of color contrast in designing for inclusion.
  • Besides :hover, name other states an actionable element (links, buttons, form controls, etc.) could have styles for, and why providing them is important?
  • When might it be appropriate to remove the visual outline from a focused element?
  • 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 could make an infographic accessible for screen reader users.
  • Why is color alone insufficient to draw attention to actionable elements, or to convey state?
  • What are some of the inclusive UX problems that need to be solved when content (static or actionable) is revealed on :hover, and how would you propose solving for them?

Testing

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

Performance

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

Network

  • Traditionally, why has it been better to serve site assets from multiple domains?
  • Do your best to describe the process from the time you type in a website’s URL to it finishing loading on your screen.
  • What are the differences between Long-Polling, Websockets and Server-Sent Events?
  • 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
  • What are HTTP methods? List all HTTP methods that you know, and explain them.
  • What is domain pre-fetching and how does it help with performance?
  • What is a CDN and what is the benefit of using one?

Reference

  • https://github.com/devops-school/Front-end-Developer-Interview-Questions
Rajesh Kumar
Follow me
Latest posts by Rajesh Kumar (see all)