Front End Development Interview Questions

explain 'this' in javascript

'this' normally refers to the object which 'owns' the method, but it depends on how a function is called.

Difference between null and undefined?

'undefined' means value of the variable is not defined. You cannot change the value of undefined. JS has a global variable of undefined and it's value is of course, undefined 'null' means empty or non-existent value which is used by programmers to indicate "no value". null is a primitive value and you can assign null to any variable. null is not an object, it is a primitive value. For example, you cannot add properties to it. Sometimes people wrongly assume that it is an object, because typeof null returns "object". 8 WAYS TO GET UNDEFINED: -A declared variable without assigning any value to it. -Implicit returns of functions due to missing return statements. -return statements that do not explicitly return anything. -Lookups of non-existent properties in an object. -Function parameters that have not passed. -Anything that has been set to the value of undefined. -Any expression in the form of void(expression) -The value of the global variable undefined

Define what the h1 is: Define the {color: blue} is: Define color: Define "blue". Define the entire code. h1 { color: blue; }

- h1 is the selector - {color:blue;} is the declaration - color is a property -"blue" is the value -the entire code is a CSS rule

List all of the display values you can remember

-none; -inline; -inline-block; -block; -flex; -table; -table-cell;

What are some techniques for clearing floats?

1. If you always know what the succeeding element will be, use "clear:both". 2. The empty div method. Use an empty div (not the most semantic), but has not default browser styling and does not have a special function. ex: <div style="clear:both"></div> 3. The Overflow Method. The Overflow method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. 4. The Clearfix method: Create a class in HTML called "clearfix" and have this in your CSS using the psuedo selector ":after" : .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }

What are the key differences between a section element, an article element, and a div element? And when should you use either?

<section>, group of content inside is related to a single theme, and should appear as an entry in an outline of the page. It's a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp's tabbed interface. A section normally has a heading (title) and maybe a footer too. <article>, represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. <div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes. NOTE: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

explain prototypal inheritance?

All objects have an internal link to another object called prototype. These objects have their own prototype, as their prototypes have their own prototypes and so on, until it reaches null (which does not have a prototype). If you call an object and ask for a property, if that particular object does not have the property, it will then as it's object's prototype if it has the desired property, if not it will keep going up the prototype chain. If all objects and their prototypes do not have the property, it will return undefined.

How could you apply css rules specific to a media?

By using media queries: ex: @media (max-width: 500px) { h1 { color: blue; } }

What are CSS sprites?

CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance. You can use node/grunt/gulp to automate sprites for you. They use the same background image and have different background positions.

Which one would you prefer among px, em % or pt and why?

Depending on what you're trying to do: px: gives fine grained control and maintains alignment because 1 px or multiple of 1 px is guaranteed to look sharp. px is not cascade, this means if parent font-size is 20px and child 16px. child would be 16px. em: maintains relative size. you can have responsive fonts. em is the width of the letter 'm' in the selected typeface. However, this concept is tricky. 1em is equal to the current font-size of the element or the browser default. if you sent font-size to 16px then 1em = 16px. The common practice is to set default body font-size to 62.5% (equal to 10px). em is cascade. %: sets font-size relative to the font size of the body. Hence, you have to set font-size of the body to a reasonable size. this is easy to use and does cascade. for example, if parent font-size is 20px and child font-size is 50%. child would be 10px. pt: (points) are traditionally used in print. 1pt = 1/72 inch and it is fixed-size unit.

What is the difference between display:none vs visibility:hidden?

Display:none removes space from the natural flow(or browser reflow) as if the element were never there. Visiblitiy:hidden removes the element, but keeps the space that the element takes up in the natural flow.

What is a doctype? and why do we need it?

Doctype is an instruction to the browser to inform the browser the version of the HTML document and how to render the document. If the doctype is not present in the DOM, the browser will resort to Quirks Mode.

what is event delegation?

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

The pseudo class :checked will select inputs with type radio or checkbox, but not <option> elements.

False

The translate() function can move the position of an element on the z-axis.

False

What does float do?

Float pushes an element to either side of a page with text wrapped around it. You can create an entire page or a smaller area by using float. If size of a floated element changes, text around it will re-flow to accommodate the changes. You can have float: left; float: right; float: none; float: inherit; If you set, 'float: left;' for an image, it will move to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side. Note: Floating elements are NOT taken out of the normal document flow. Absolute positioned items ARE. History: Taken from print design.

What is clear and how can you clear sides of a floating element?

Float's sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float. Ex: If you clear a side of an element, floating elements will not be accepted on that side. With 'clear' set to 'left', an element will be moved below any floating element on the left side. Clear is used to stop wrap of an element around a floating element. clear has 5 values it takes: clear: both, left, right, none (default), inherit (not supported in IE)

How can u generate public key in html?

HTML has a keygen element that facilitates a generation of a key and submission via a form.

What is "the great collapse" when dealing with floats?

If there was a parent container that was just contained floated elements, the parent container's height would collapse. In order to deal with collapsing parent elements, you need to clear the float AFTER the floated elements in the container but BEFORE the end of the parent container.

What are the differences between inline, block and inline-block?

Inline elements sit inline and do not have a forced line break after it. It allows elements to sit to the left and the right of it. You can set margin/padding on the left/right side but you cannot set width/height. Block elements have forced line breaks after it, you can set a height/width on them, as well as left and right padding/margin. Inline-block elements allow elements to be displayed on the right and left, respect top and bottom margins/padding, and respect height and width

What does box-sizing:border-box do?

It calculates the width, height, padding, and border on an element.

What does "semantically correct" mean?

It means that you're calling something what it actually is. The classic example is that if something is a table, it should contain rows and columns of data. To use that for layout is semantically incorrect - you're saying "this is a table" when it's not.

Are css properties are case sensitive?

No

Do properties margin-top and margin-bottom have effect on inline elements?

No

Do properties padding-top and padding-bottom have effect on inline elements?

No

Does style1.css have to be downloaded and parsed before style2.css can be fetched? <head> <link href="style1.css" rel="stylesheet"> <link href="style2.css" rel="stylesheet"> </head>

No

If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?

No

What is the difference between normalize.css and reset.css?

Normalize.css is more of a modular way of making browser styling consistent across all browsers. It also fixes common CSS bugs (svg in IE9). Reset.css resets all of the elements to nothing so you start from scratch. Normalize.css seems to be a better method for browser consistency.

What is the difference between Standard and Quirks mode?

Quirks mode and strict mode are the two 'modes' modern browsers can use to interpret your CSS. Quirks Mode in browsers allow you to render page for old browsers. This is for backward compatibility. Strict Mode is for the W3C standard. By using <!DOCTYPE html>, it already includes it. Or you don't need to worry about it.

Why would you use semantic elements?

Search Engine Optimization, accessibility, repurposing, light code. Many visually impaired people rely on browser speech and semantic elements to help interpret page content clearly. Search engine needs to understand page content to rank and semantic tag helps.

What is the use of data- attribute?

The data- attribute allows you to store extra information/ data in the DOM. You can write valid html with embedded private data. You can easily access data attribute by using javascript and hence a lot of libraries like knockout uses it. EX: <div id="myDiv" data-user="jsDude" data-list-size="5" data-maxage="180"></div>

In a HTML document, the pseudo class :root always refers to the <html> element.

True

Does padding-left or padding-right or margin-left or margin-right have effect on inline element?

Yes

Does style2.css have to be downloaded and parsed before Paragraph 1 is rendered on the page? <head> <link href="style1.css" rel="stylesheet"> </head> <body> <p>Paragraph 1</p> <p>Paragraph 2</p> <link href="style2.css" rel="stylesheet"> </body>

Yes

Does overflow: hidden create a new block formatting context?

Yes Overflow property deals with the content if content size exceeds the allocated size for the content. You can make extra content visible, hidden, scroll or auto (viewport default behavior).

What is the z-index?

Z-index is a stacking order of elements in the browser. Z-index only works on positioned elements. the higher the z-index, the closer to the front the element is, the lower the index number is, is closer to the background. Default z-index: auto;

How absolute, relative, fixed and static position differ?

absolute, place an element exactly where you want to place it. absolute position is actually set relative to the element's parent. if no parent available then relatively place to the page itself. relative, is position an element relative to itself (from where the element would be placed, if u don't apply relative positioning). for example, if u set position relative to an element and set top: 10px, it will move 10px down from where it would be normally. fixed, element is positioned relative to viewport or the browser window itself. viewport doesn't changed if u scroll and hence fixed element will stay right in the same position. static, element will be positioned based on the normal flow of the document. usually, u will use position static to remove other position might be applied to an element.

What are the necessary HTML elements needed for a basic structure of an HTML document?

doctype <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>

How do you remove duplicate members from an array?

function removeDuplicates(array) { var exists = {}, outterArray = [], element; for (var i=0; i < array.length; i++){ element = array[i]; if (!exists[element]) { outterArray.push(element); exists[element] = true; } } return outterArray; }

How do you reverse a string?

function reverseString(string){ var returnStr = ''; for (var i = string.length -1; i >= 0; i--){ returnStr += string[i]; } return returnStr; }

Are HTML IDs and classes case sensitive?

yes

What is semantic HTML?

Semantic HTML, or "semantically-correct HTML", is HTML where the tags used to structure content are selected and applied appropriately to the meaning of the content. For example, <b></b> (for bold), and <i></i> (for italic) should never be used, because they're to do with formatting, not with the meaning or structure of the content. Instead, use the replacements <strong></strong> and <em></em> (meaning emphasis), which by default will turn text bold and italic (but don't have to do so in all browsers), while adding meaning to the structure of the content.

What is the difference between a span element and a div element?

Span elements are inline, as div are block elements. Note: You cannot have a block element inside of an inline element.

What is the box model and what are the properties associated?

Technically, height, width, padding and border are part of box model and margin is related to it. Note: Everything in a web page is a box where you can control size, position, background, etc. Each box/ content area is optionally surrounded by padding, border and margin. When you set height and width of an element, you set content height and width.