Here are some common front end / web interview questions, and some sample answers, for those aspiring web devs among us:
HTML:
What’s a DOCTYPE?
A doctype associates a markup document (html or xml) with a DTD. It tells the browser what kind of document and what type of markup to expect. HTML 4.01 has strict, loose (transitional) and frameset DTDs depending on how standard compliant you want it to be. XHTML also uses the same strict, transitional and frameset DTDs but also need a specific XHTML namespace declared with . HTML5 does not need any references to a DTD. Another thing to note is that HTML5 encompasses HTML4 AND XHTML1.
What’s Quirks mode?
Quirks mode is a technique used by some browsers to maintain backward compatibility with legacy markup code. Before W3C standardized doctypes, Internet Explorer and Netscape didn’t have standards to go by, thus developers wrote different markup for each. Now, if a document has no doctype, the browser will render it in quirks mode, attempting to emulate behavior of older browsers. Thus this is only useful for older websites.
What are advantages of HTML5?
There are a number of advantages, here are a few:
-HTML5 deprecates legacy unnecessary tags such as
and
and introduces new semantic tags such as
etc
-very simple doctype declaration which subsumes both HTML4 and XHTML1
-data- attributes are added, which makes it easier for JS to manipulate metadata related to page elements, instead of using classes or hidden inputs or ajax calls.
-new apis, such as
and sessionStorage and localStorage, which allows for additional storage space of resources.
CSS:
What’s a reset CSS?
A reset CSS file defines default styling for commonly used elements such as div, span, a, etc. This is so that the display of each element remains consistent regardless of browser or environment.
What do floats and clears do?
A float takes an element out of the flow and turns it into a block level element, floated against the next closest block level element. All block level elements above it in the flow will not be affected, but elements below it will wrap around it. A clear property will clear the float on the floated element before it.
what does overflow property do?
overflow: visible is the default setting and content that can’t fit within the container box will render outside it. hidden will make the overflow content invisible. scroll and auto will add a scrollbar to see the rest of the content.
What is the grid layout?
The CSS Grid layout (display:grid) is a specification of a layout that designers can use to help style their webpages. However, there are a bunch of rules to follow and may lead to bloated markup, which is why most sites don’t use it.
What’s the difference between margin and padding?
Every block element can be described using the box model – padding is the space between an element’s content and its borders, and margin is the space between an element’s borders and the next element in the flow.
What does display inline-block do?
An inline block element is an inline element (that is, it appears on the same line as its sibling elements rather than on a new line) but has block properties such as height, width and margins. This is essentially similar to floating a block element.
What is the difference between position fixed, static, relative and absolute?
position: static is the default position of an element on the page, and behaves as if its in the “normal flow” of the document structure.
position: fixed takes the element out of the normal flow, and functions as absolute positioning relative to the viewport – meaning they don’t move when the window is scrolled.
position: relative will position the element in the flow, but can be positioned (using top,left,right,bottom) relative to its current position in the document.
position: absolute takes the element out of the flow and can be position relative to its closest non-static positioned ancestor (if none, it uses the window).
What are some common usages of CSS3?
CSS3 has many usages, the most common of which are:
-rounded corners via border-radius.
-shadows on texts and elements via box-shadow and text-shadow.
-flexibility in fonts via @font-face.
-Animations which used to be done with JS! which include @keyframes, transitions, 2D and 3D transforms.
-resizing boxes via box-sizing and resize
-resizing pages for different screen sizes (responsive css) via @media screen.
JavaScript and jQuery:
What does ~~ and !! do?
~~ is the logical equivalent of Math.floor() and !! type casts an object into a native boolean.
What is the difference between == and ===?
== checks to see if two objects are equal, with weak type checking. === checks to see if two objects are equal, with strong type checking.
What is a closure?
A closure in JS is simply when you have an inner function using variables declared in the outer function, and the inner function is being returned. The inner function is thus acting as a closure over the outer functions free variables.
Why would you use anonymous functions?
Anonymous functions don’t clutter up the namespace, they fit easily in dynamic environments, provide scoping for variables, and automatically dispose of themselves after single uses with no residue. This makes it particularly suitable for scalable web applications that don’t like to assume anything in their code.
What is the module pattern?
A module pattern makes use of anonymous functions, and requires only that objects that are being used by the function to be imported in. In this way, it’s clean, efficient, scalable, and maintains privacy and state through closures, and can also be exported by using its return value. Then it essentially becomes a module, which is both lean, easy to transport, and easy to test and maintain.
Leave a Reply