{"id":20470,"date":"2021-03-02T21:10:03","date_gmt":"2021-03-02T21:10:03","guid":{"rendered":"http:\/\/www.devopsschool.com\/blog\/?p=20470"},"modified":"2021-03-02T21:16:53","modified_gmt":"2021-03-02T21:16:53","slug":"css-front-end-developer-interview-questions","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/css-front-end-developer-interview-questions\/","title":{"rendered":"Front End Developer Interview Questions"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">CSS Interview Questions<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>What is CSS selector specificity and how does it work?<\/li><li>What&#8217;s the difference between &#8220;resetting&#8221; and &#8220;normalizing&#8221; CSS? Which would you choose, and why?<\/li><li>Describe Floats and how they work.<\/li><li>Describe z-index and how stacking context is formed.<\/li><li>Describe BFC (Block Formatting Context) and how it works.<\/li><li>What are the various clearing techniques and which is appropriate for what context?<\/li><li>How would you approach fixing browser-specific styling issues?<\/li><li>How do you serve your pages for feature-constrained browsers?<ul><li>What techniques\/processes do you use?<\/li><\/ul><\/li><li>What are the different ways to visually hide content (and make it available only for screen readers)?<\/li><li>Have you ever used a grid system, and if so, what do you prefer?<\/li><li>Have you used or implemented media queries or mobile specific layouts\/CSS?<\/li><li>Are you familiar with styling SVG?<\/li><li>Can you give an example of an&nbsp;<code>@media<\/code>&nbsp;property other than&nbsp;<code>screen<\/code>?<\/li><li>What are some of the &#8220;gotchas&#8221; for writing efficient CSS?<\/li><li>What are the advantages\/disadvantages of using CSS preprocessors?<ul><li>Describe what you like and dislike about the CSS preprocessors you have used.<\/li><\/ul><\/li><li>How would you implement a web design comp that uses non-standard fonts?<\/li><li>Explain how a browser determines what elements match a CSS selector.<\/li><li>Describe pseudo-elements and discuss what they are used for.<\/li><li>Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.<\/li><li>What does&nbsp;<code>* { box-sizing: border-box; }<\/code>&nbsp;do? What are its advantages?<\/li><li>What is the CSS&nbsp;<code>display<\/code>&nbsp;property and can you give a few examples of its use?<\/li><li>What&#8217;s the difference between inline and inline-block?<\/li><li>What&#8217;s the difference between the &#8220;nth-of-type()&#8221; and &#8220;nth-child()&#8221; selectors?<\/li><li>What&#8217;s the difference between a relative, fixed, absolute and statically positioned element?<\/li><li>What existing CSS frameworks have you used locally, or in production? How would you change\/improve them?<\/li><li>Have you used CSS Grid?<\/li><li>Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?<\/li><li>Have you ever worked with retina graphics? If so, when and what techniques did you use?<\/li><li>Is there any reason you&#8217;d want to use&nbsp;<code>translate()<\/code>&nbsp;instead of&nbsp;<em>absolute positioning<\/em>, or vice-versa? And why?<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Interview Questions<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>What does a&nbsp;<code>doctype<\/code>&nbsp;do?<\/li><li>How do you serve a page with content in multiple languages?<\/li><li>What kind of things must you be wary of when design or developing for multilingual sites?<\/li><li>What are&nbsp;<code>data-<\/code>&nbsp;attributes good for?<\/li><li>Consider HTML5 as an open web platform. What are the building blocks of HTML5?<\/li><li>Describe the difference between a&nbsp;<code>cookie<\/code>,&nbsp;<code>sessionStorage<\/code>&nbsp;and&nbsp;<code>localStorage<\/code>.<\/li><li>Describe the difference between&nbsp;<code>&lt;script&gt;<\/code>,&nbsp;<code>&lt;script async&gt;<\/code>&nbsp;and&nbsp;<code>&lt;script defer&gt;<\/code>.<\/li><li>Why is it generally a good idea to position CSS&nbsp;<code>&lt;link&gt;<\/code>s between&nbsp;<code>&lt;head&gt;&lt;\/head&gt;<\/code>&nbsp;and JS&nbsp;<code>&lt;script&gt;<\/code>s just before&nbsp;<code>&lt;\/body&gt;<\/code>? Do you know any exceptions?<\/li><li>What is progressive rendering?<\/li><li>Why you would use a&nbsp;<code>srcset<\/code>&nbsp;attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.<\/li><li>Have you used different HTML templating languages before?<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript Interview Questions<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Explain event delegation.<\/li><li>Explain how&nbsp;<code>this<\/code>&nbsp;works in JavaScript.<ul><li>Can you give an example of one of the ways that working with&nbsp;<code>this<\/code>&nbsp;has changed in ES6?<\/li><\/ul><\/li><li>Explain how prototypal inheritance works.<\/li><li>What&#8217;s the difference between a variable that is:&nbsp;<code>null<\/code>,&nbsp;<code>undefined<\/code>&nbsp;or undeclared?<ul><li>How would you go about checking for any of these states?<\/li><\/ul><\/li><li>What is a closure, and how\/why would you use one?<\/li><li>What language constructions do you use for iterating over object properties and array items?<\/li><li>Can you describe the main difference between the&nbsp;<code>Array.forEach()<\/code>&nbsp;loop and&nbsp;<code>Array.map()<\/code>&nbsp;methods and why you would pick one versus the other?<\/li><li>What&#8217;s a typical use case for anonymous functions?<\/li><li>What&#8217;s the difference between host objects and native objects?<\/li><li>Explain the difference between:&nbsp;<code>function Person(){}<\/code>,&nbsp;<code>var person = Person()<\/code>, and&nbsp;<code>var person = new Person()<\/code>?<\/li><li>Explain the differences on the usage of&nbsp;<code>foo<\/code>&nbsp;between&nbsp;<code>function foo() {}<\/code>&nbsp;and&nbsp;<code>var foo = function() {}<\/code><\/li><li>Can you explain what&nbsp;<code>Function.call<\/code>&nbsp;and&nbsp;<code>Function.apply<\/code>&nbsp;do? What&#8217;s the notable difference between the two?<\/li><li>Explain&nbsp;<code>Function.prototype.bind<\/code>.<\/li><li>What&#8217;s the difference between feature detection, feature inference, and using the UA string?<\/li><li>Explain &#8220;hoisting&#8221;.<\/li><li>Describe event bubbling.<\/li><li>Describe event capturing.<\/li><li>What&#8217;s the difference between an &#8220;attribute&#8221; and a &#8220;property&#8221;?<\/li><li>What are the pros and cons of extending built-in JavaScript objects?<\/li><li>What is the difference between&nbsp;<code>==<\/code>&nbsp;and&nbsp;<code>===<\/code>?<\/li><li>Explain the same-origin policy with regards to JavaScript.<\/li><li>Why is it called a Ternary operator, what does the word &#8220;Ternary&#8221; indicate?<\/li><li>What is strict mode? What are some of the advantages\/disadvantages of using it?<\/li><li>What are some of the advantages\/disadvantages of writing JavaScript code in a language that compiles to JavaScript?<\/li><li>What tools and techniques do you use debugging JavaScript code?<\/li><li>Explain the difference between mutable and immutable objects.<ul><li>What is an example of an immutable object in JavaScript?<\/li><li>What are the pros and cons of immutability?<\/li><li>How can you achieve immutability in your own code?<\/li><\/ul><\/li><li>Explain the difference between synchronous and asynchronous functions.<\/li><li>What is event loop?<ul><li>What is the difference between call stack and task queue?<\/li><\/ul><\/li><li>What are the differences between variables created using&nbsp;<code>let<\/code>,&nbsp;<code>var<\/code>&nbsp;or&nbsp;<code>const<\/code>?<\/li><li>What are the differences between ES6 class and ES5 function constructors?<\/li><li>Can you offer a use case for the new arrow&nbsp;<code>=&gt;<\/code>&nbsp;function syntax? How does this new syntax differ from other functions?<\/li><li>What advantage is there for using the arrow syntax for a method in a constructor?<\/li><li>What is the definition of a higher-order function?<\/li><li>Can you give an example for destructuring an object or an array?<\/li><li>Can you give an example of generating a string with ES6 Template Literals?<\/li><li>Can you give an example of a curry function and why this syntax offers an advantage?<\/li><li>What are the benefits of using&nbsp;<code>spread syntax<\/code>&nbsp;and how is it different from&nbsp;<code>rest syntax<\/code>?<\/li><li>How can you share code between files?<\/li><li>Why you might want to create static class members?<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Accessibility Interview Questions<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">General<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Who benefits from accessibility?<\/li><li>How would you define inclusive and\/or universal design?<ul><li>Can you provide an example? (does not need to be web related)<\/li><\/ul><\/li><li>How has your approach to accessibility changed over time?<\/li><li>Name some ways responsive\/mobile first design can affect accessibility.<\/li><li>What are some user experience (UX) concerns to be aware of when using iconography in user interfaces (UI)?<\/li><li>What assistive technologies (ATs) are you familiar with (desktop + mobile)?<ul><li>What do you feel is your skill level with these AT(s)?<\/li><\/ul><\/li><li>What are skip links?<ul><li>What benefit(s) do they provide?<\/li><li>What are some of their limitations?<\/li><\/ul><\/li><li>What are some of the tools available to test the accessibility of a website or web application?<\/li><li>What is WCAG?<ul><li>What are the differences between A, AA, and AAA compliance?<\/li><\/ul><\/li><li>How can using plain language benefit the accessibility of a project?<\/li><li>Describe appropriate instances to use a link, vs a generic button, vs a submit button.<\/li><li>Describe ways to indicate an element or component\u2019s state that aren\u2019t entirely reliant on visuals.<\/li><li>How can carousels be problematic for users with disabilities?<\/li><li>How would you convince your Manager to allocate some funds to do an accessibility external audit?<\/li><li>Describe a situation where a coworker may have been resistant to accessibility or inclusive design best practices.<ul><li>How were you able to work with them to mitigate such issues?<\/li><li>What sort of strategies do you use in situations like these to help educate coworkers?<\/li><\/ul><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Technical<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>What methods would you use to find an element\u2019s accessible name?<\/li><li>What is the accessibility tree?<\/li><li>Why are rems or ems preferable to pixels for setting type size?<\/li><li>Why is it important to allow the viewport to be resized, and\/or zoomed?<\/li><li>How is the&nbsp;<code>title<\/code>&nbsp;attribute exposed to assistive technologies?<ul><li>What kind of elements can&nbsp;<code>title<\/code>&nbsp;attributes be used on?<\/li><li>What sort of information is appropriate for use with the&nbsp;<code>title<\/code>&nbsp;attribute?<\/li><\/ul><\/li><li>Describe a scenario where you might need to use&nbsp;<code>aria-describedby<\/code>.<\/li><li>What is a focus trap, or focus trapping? Describe an instance of when you\u2019d need focus trapping, and how it can be an accessibility failure if not used appropriately.<\/li><li>Describe a situation where one might need to add or modify the focusability of an element by using the&nbsp;<code>tabindex<\/code>&nbsp;attribute.<\/li><li>What are landmark regions and how can they be useful?<\/li><li>In what situations might you use a toggle button, vs a switch control, vs a checkbox?<\/li><li>Describe methods to hide content:<ul><li>From all users.<\/li><li>From only screen reader users.<\/li><li>From sighted users, but not screen reader users.<\/li><li>And why you might do so.<\/li><\/ul><\/li><li>Describe an instance of inappropriately using ARIA attributes.<\/li><li>Aside from screen readers, what other assistive technologies can be affected by use of ARIA? How?<\/li><li>What is the difference between&nbsp;<code>hidden<\/code>,&nbsp;<code>aria-hidden=\"true\"<\/code>&nbsp;and&nbsp;<code>role=\"presentation\"<\/code>&nbsp;or&nbsp;<code>role=\"none\"<\/code>?<\/li><li>Describe instances where you might need to use&nbsp;<code>aria-live<\/code>.<ul><li>What values (such as&nbsp;<code>assertive<\/code>&nbsp;or&nbsp;<code>polite<\/code>) might you give the attribute in different situations?<\/li><\/ul><\/li><li>How would you mark-up an icon font or SVG that was for decorative purposes?<\/li><li>How is CSS pseudo content treated by screen readers?<\/li><li>What is the purpose of the&nbsp;<code>alt<\/code>&nbsp;attribute for images?<ul><li>Can you describe the effect of an empty&nbsp;<code>alt<\/code>, and\/or the lack of the attribute, on an image?<\/li><li>In what instances might an empty&nbsp;<code>alt<\/code>&nbsp;or no&nbsp;<code>alt<\/code>&nbsp;be appropriate?<\/li><li>How might alternative text for an image vary, depending on the context the image is used in?<\/li><li>Since&nbsp;<code>svg<\/code>s don\u2019t accept the&nbsp;<code>alt<\/code>&nbsp;attribute, how can one provide alternative text for these graphics?<\/li><li>Do you need to supply an image an&nbsp;<code>alt<\/code>&nbsp;attribute if used witin a&nbsp;<code>figure<\/code>&nbsp;with a&nbsp;<code>figcaption<\/code>?<\/li><\/ul><\/li><li>Describe the steps you take in reviewing or auditing a website or application for accessibility?<\/li><li>Describe an instance where an automated test would not flag a blatant accessibility error?<\/li><li>When should you use or recommend&nbsp;ARIA&nbsp;roles or attributes to solve an accessibility issue?<\/li><li>Describe your process for figuring out if an accessibility bug is due to a developer, browser, or assistive technology error?<\/li><li>What is the difference between&nbsp;<code>legend<\/code>,&nbsp;<code>caption<\/code>&nbsp;and&nbsp;<code>label<\/code>&nbsp;elements?<ul><li>What are their similarities?<\/li><\/ul><\/li><li>Describe the purpose of heading and header elements, and how they are useful in websites and applications.<\/li><li>Describe how you\u2019d handle a single page web app should and managing focus when changing routes.<\/li><li>Name an ARIA attribute that requires either a child\/parent relationship or a pairing role.<\/li><li>What is your understanding of \u201caccessible name computation\u201d and how it affects modifying the way screen readers announce certain content?<\/li><li>What are some issues with modifying normal scrolling behavior? For example: infinite scrolling or scrolljacking.<\/li><li>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?<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Design<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Talk about the pros and cons of flat and\u00a0<a href=\"http:\/\/whatis.techtarget.com\/definition\/skeuomorphism\" target=\"_blank\" rel=\"noopener\">skeuomorphic design<\/a>\u00a0trends in regards to accessibility.<\/li><li>Explain the importance of color contrast in designing for inclusion.<\/li><li>Besides\u00a0<code>:hover<\/code>, name other states an actionable element (links, buttons, form controls, etc.) could have styles for, and why providing them is important?<\/li><li>When might it be appropriate to remove the visual outline from a focused element?<\/li><li>If a form or form field were to return an error message, where might you want those error messages to be located?<\/li><li>How can utilizing animation in an interface affect the user experience?<\/li><li>Explain how you could make an infographic accessible for screen reader users.<\/li><li>Why is color alone insufficient to draw attention to actionable elements, or to convey state?<\/li><li>What are some of the inclusive UX problems that need to be solved when content (static or actionable) is revealed on\u00a0<code>:hover<\/code>, and how would you propose solving for them?<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Testing<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>What are some advantages\/disadvantages to testing your code?<\/li><li>What tools would you use to test your code&#8217;s functionality?<\/li><li>What is the difference between a unit test and a functional\/integration test?<\/li><li>What is the purpose of a code style linting tool?<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Performance<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>What tools would you use to find a performance bug in your code?<\/li><li>What are some ways you may improve your website&#8217;s scrolling performance?<\/li><li>Explain the difference between layout, painting and compositing.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Network<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Traditionally, why has it been better to serve site assets from multiple domains?<\/li><li>Do your best to describe the process from the time you type in a website&#8217;s URL to it finishing loading on your screen.<\/li><li>What are the differences between Long-Polling, Websockets and Server-Sent Events?<\/li><li>Explain the following request and response headers:<ul><li>Diff. between Expires, Date, Age and If-Modified-&#8230;<\/li><li>Do Not Track<\/li><li>Cache-Control<\/li><li>Transfer-Encoding<\/li><li>ETag<\/li><li>X-Frame-Options<\/li><\/ul><\/li><li>What are HTTP methods? List all HTTP methods that you know, and explain them.<\/li><li>What is domain pre-fetching and how does it help with performance?<\/li><li>What is a CDN and what is the benefit of using one?<\/li><\/ul>\n\n\n\n<p><strong>Reference<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>https:\/\/github.com\/devops-school\/Front-end-Developer-Interview-Questions<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>CSS Interview Questions What is CSS selector specificity and how does it work? What&#8217;s the difference between &#8220;resetting&#8221; and &#8220;normalizing&#8221; CSS? Which would you choose, and why? Describe Floats and&#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[2],"tags":[],"class_list":["post-20470","post","type-post","status-publish","format-standard","hentry","category-uncategorised"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/20470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=20470"}],"version-history":[{"count":2,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/20470\/revisions"}],"predecessor-version":[{"id":20473,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/20470\/revisions\/20473"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=20470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=20470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=20470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}