Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps!

We spend hours on Instagram and YouTube and waste money on coffee and fast food, but won’t spend 30 minutes a day learning skills to boost our careers.
Master in DevOps, SRE, DevSecOps & MLOps!

Learn from Guru Rajesh Kumar and double your salary in just one year.


Get Started 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
DevOps Certification, SRE Certification, and DevSecOps Certification by DevOpsSchool

Explore our DevOps Certification, SRE Certification, and DevSecOps Certification programs at DevOpsSchool. Gain the expertise needed to excel in your career with hands-on training and globally recognized certifications.