- Frontend Interview Questions
- HTML
- What is the difference between a
<span>and a<div>? - Name 5 common block-level and inline HTML elements.
- Define semantic markup. What are the semantic meanings for
<section>,<article>,<aside>,<nav>,<header>,<footer>and when/how should each be used in structuring html markup? - What is the difference between (
<i>and<em>) and (<b>,<strong>) and how will screen-readers react the to each tag? - What is the purpose of aria attributes?
- Explain what inline styles and javascript are and when they are appropriate to use.
- When is it acceptable to use font tags?
- What is the difference between a
- Javascript
- Explain how prototypal inheritance works
- What is a closure in Javascript? Provide and example.
- What will the output of this function be? Explain why.
- Explain the difference between var, let and const and when each should be used.
- Give an example of 4 truthy and 4 falsey values.
- Why is extending built-in JavaScript objects not a good idea?
- What is the difference between
==and===? - What is the difference between synchronous and asynchronous requests?
- Explain AJAX in as much detail as you can. Give an example.
- Explain Javascript Promises in as much detail as you can. Give an example.
- Explain how the
thiskeyword functions in Javascript.
- In the browser's global context what doesthisrefer to?
- In the context of an object function what doesthisrefer to?
- How do ES6 arrow functions handlethis? - In what order will the numbers 1-4 be logged to the console when the code below is executed? Why?
- Testing and Debugging
- What tools and techniques do you use debugging JavaScript code?
- What is the difference between a unit test and a functional/integration test?
- What tools would you use to test your code's functionality?
- What are the steps you take to debug a javascript error? - Other Javascript Questions
- Have you ever used any Javascript templating libraries? If so, which ones?
- CSS
- What does the 'C' in CSS stands for?
- How does cascading determine precedence in assigning styles? Give a few examples.
- What is the difference between the way CSS handles classes and IDs? - What does
!importantdo and when is it acceptable to use? - What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
- What's the difference between block, inline and inline-block displayed elements?
- What's the difference between a relative, fixed, absolute and statically positioned element?
- Describe z-index and how stacking context is formed.
- 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? - Describe Floats and Flexbox and how each works. Why Flexbox is a better solution for web layouts?
- Other CSS Questions
- What CSS frameworks have you used?
- Which CSS Preprocessors have you used?
- What does the 'C' in CSS stands for?
- Sass Specific Questions
- Explain nested selectors in Sass.
- How do you refer to a parent selector in the SASS?
- Explain what Sass Maps are and how they are use?
- Explain the
@importfunction and how it is used. - Explain the
@include,@mixinand@functionfunctions and how they are used. - Explain how
%placeholderand@extendare used in Sass and the potential pitfalls of using them.
- HTML
Answer:
<div>is a block level element which means it will render it on it's own line with a width of a 100% of the parent element.<span>is an inline element which means it will render on the same line as the previous element, if it is also an inline element, and it's width will be determined by it's content.
Answer:
- block elements:
<h1>, <p>, <ul>, <ol>, <li>, - inline elements:
<span>, <a>, <strong>, <i>, <img>
Define semantic markup. What are the semantic meanings for <section>, <article>, <aside>, <nav>, <header>, <footer> and when/how should each be used in structuring html markup?
Answer:
<section>defines a section in a document or a block of related elements.<article>specifies independent, self-contained content.<aside>defines some content aside from the content it is placed in.<nav>defines a set of navigation links and intended for large blocks of navigation links; not all links in a document should be inside a<nav>element.<headerspecifies a header for a document or section and should be used as a container for introductory content. There can be several<header>elements in one document.<footer>specifies a footer for a document or section and should contain information about its containing element. There can be several<footer>elements in one document.
What is the difference between (<i> and <em>) and (<b>, <strong>) and how will screen-readers react the to each tag?
Answer: <i> and <b> simply indicate style and have no semantic meaning. While <em> and <strong> indicate some semantic meaning about the content they wrap and screen-readers will read this content differently.
Answer: They communicate role, state and property semantics to assistive technologies via the accessibility APIs implemented in browsers
Answer:
Answer: Never.
Answer: Instances inherit directly from other objects without any implicit hierarchy. Instances are typically instantiated via factory functions using the new keyword or Object.create().
Answer: A closure is a function defined inside another function (called the parent function), and has access to variables that are declared and defined in the parent function scope. The closure has access to variables in three scopes:
- Variables declared in their own scope
- Variables declared in a parent function scope
- Variables declared in the global namespace
let someGlobalVar = 'foo'
function parentFunction(someArrayVar = ['good','better','best']) {
const someConstVar = 'bar';
let someLetVar = 'baz';
someArrayVar.forEach((item) => {
console.log(item);
console.log(someGlobalVar);
console.log(someConstVar);
console.log(someLetVar);
});
}function test() {
console.log(a);
console.log(foo());
var a = 1;
function foo() {
return 2;
}
}Answer: undefined 2. In JavaScript, variables and functions are hoisted. Basically, the Javascript interpreter looks ahead to find all variable and function declarations and then hoists them to the top of the function in which they're declared
Answer: const and let are block scoped where as var is either function or globally scoped.
constsignals that the variable won’t be reassigned.let, signals that the variable may be reassigned.vargives no signal about the variable and should be avoided.
Answer:
- truthy:
1, 'abc', {}, [] - falsey:
0, null, '', undefined
Answer:
- Dependability - A consistent and dependable execution environment is crucial for maintainability.
- Compatibility - Mmodifying objects that we don’t own opens the possibility of naming collisions and incompatible implementations
Answer: == will not check types and === will check whether both sides are of same type.
Bonus Points: Under the hood == tries to convert both sides to the same type and then do the comparison. This is called coercion. === compares the types and values if both sides are not same type, the answer is always false.
Answer: Synchronous requests block execution until response is retrieved whereas asynchronous does not.
Answer: Ajax (Asynchronous Javascript and XML) uses asynchronous requests to transfer json data between the browser and the backend server.
Bonus Points: for any mention of XMLHttpRequests.
Answer: Promises allow you to write asynchronous code in a synchronous way. Using thenable functions to handle settled promises. A promise can be in one of 4 states:
- fulfilled - the action succeeded
- rejected - the action failed
- pending - the action hasn't fulfilled or rejected yet
- settled - the action has been fulfilled or rejected
const promise = new Promise((resolve, reject) => {
// do some async call
if (/*async call succeeded*/) {
resolve(/* some response */);
} else {
reject(/* some error */)
}
});Answer: At the time of execution of every function, Javascript engine sets a property to the function called this which refer to the current execution context.
Answer: window
Answer: The functions containing object.
Answer: They pass the current context into the called function context.
function test() {
console.log(1);
setTimeout(function(){console.log(2)}, 1000);
setTimeout(function(){console.log(3)}, 0);
console.log(4);
};Answer: The values will be logged in the following order: 1,4,3,2.
- 1 and 4 are displayed first since they are logged by simple calls to console.log() without any delay
- 2 is displayed after 3 because 2 is being logged after a delay of 1000ms and 3 is being logged after a delay of 0 ms.
- Since setTimeout() puts execution of its referenced function into the browser's event queue which will not run until the next event loop both 3 and 2 are displayed after 4.
Answer: Cascading
Answer: Basically the order and specificity style rules affect precedence. For a given set of style rules for a specific selector, the further down the cascade a rule appears the higher it's precedence and the more specific a rule the higher the precedence.
#some-id { color: yellow; }
p.some-class { color: blue; }
.some-class { color: red; }
.some-class { color: green; }Given this css the text will be yellow. If you removed the ID it would still be blue.
Answer: IDs have higher precedence in the Cascade than Classes
Answer: It overrides the cascade and gives the style rule the highest precedence.
Answer: resetting will remove all the default styling applied by the browser to give you a blank canvas where as normalize is a base stylesheet meaning its the starting point for custom styles and it styles the default elements to be consistent across the browsers.
Answer:
- Block elements:
- respect all of those
- force a line break after the block element
- Inline elements:
- respect left & right margins and padding, but not top & bottom
- cannot have a width and height set
- allow other elements to sit to their left and right.
- Inline-block elements:
- allow other elements to sit to their left and right
- respect top & bottom margins and padding
- respect height and width
Answer:
- Static - default for every single page element. The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control.
- Relative - means "relative to itself". Setting
position: relative;on an element and no other positioning attributes, it will no effect on it's positioning. It allows the use of z-index on the element and it limits the scope of absolutely positioned child elements. Any child element will be absolutely positioned within that block. - Absolute - positions the element exactly where you want it rrelative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the
<html>element. - Fixed - positioned relative to the viewport, or the browser window itself. regardless of scroll position.
Answer: An element with greater stack order is always in front of an element with a lower stack order. z-index only works on positioned elements. The default stack order of non-positioned elements is their order in the document.
Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
Answer: The content of the space taken by an element. Each element has an inner and outer height/width calculated based on the content, padding, border and margin.
- content-box - default. Excludes padding, border and margin from the inner dimensions.
- border-box - includes the padding and border, but not the margin in the inner dimension.
Answer: Make every element in the document include the padding and border in the element's inner dimensions; making it easier to reason about the layout of elements on the page.
Answer:
- Floats - specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
- Flexbox - consists of flex containers and flex items. Flex containers wrap a set of flex items and define how they are laid out. Flex items has properites that define how they interact with sibling flex elements and can also be flex containers themselves.
Answer:
Answer: & selects the parent selector in a nested selector context.
Answer:
Answer:
Answer:
Answer: