Front End

What is a stacking context?

A 3-D conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or webpage.

What is Sass (or Syntactically Awesome StyleSheets)?

A CSS preprocessor that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with fully CSS-compatible syntax. Helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.

What is a !DOCTYPE?

A document type declaration - used to tell the web browser the HTML version used or about any other markup language that is used on the page. An instruction given to browsers at the top of an HTML file to ensure a page is rendered in standards mode.

What are psuedo-elements?

A keyword that can be added to a selector that lets you style a specific part of the selected element. Uses a double colon (::). Examples: ::after, ::before, ::first-line, ::selection

What is JSON (JavaScript Object Notation)?

A lightweight data-interchange format, derived from JavaScript, but used by many programming languages. Not a strict subset of JS, but closely resembles it.

What is HTML? (Hypertext Markup Language)

A markup language that tells browsers how to structure the webpages you visit.

Explain Load Balancing

A method in which requests are allocated and handled by numerous machines rather than a single device. Ensures the load does not rely on any single point and is allocated efficiently.

Explain CSS sprites, and how you would implement them on a page or site.

A method of combining multiple images used throughout your website into one big image. You can then use the proper background-position CSS attribute to load the particular image you want from your CSS Sprite using the X and Y coordinates. Reduces the number of HTTP requests for multiple images, although with HTTP2 loading multiple images is no longer much of an issue. More info: http://css-tricks.com/css-sprites/

What is strict mode?

A new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions.

What is specificity and how to calculate specificity?

A process of determining which CSS rule will be applied to an element. It determines which rules will take precedence. In-line styles usually win, then ID, then class value (or psuedo-class or attribute selector). The universal selector has none.

What is HTTP (Hypertext Transfer Protocol)?

A protocol for fetching resources such as HTML documents. The foundation of any data exchange on the web and it a client-server protocol, which means requests are initiated by the user-agent, usually the web browser.

What is a CSS declaration?

A single rule like `color: red;` that specifies which of the element's properties you want to style and the property value.

What is a cookie?

A small piece of data that a server sends to a user's web browser. The browser may store it and send it back to the same server with later requests. Typically, used to tell if two requests come from the same browser. It remembers stateful information for the stateless HTTP protocol. Useful for session management, personalization and tracking.

What is a CSS preprocessor?

A tool to extend the basic functionality of vanilla CSS. We gain access to things like - variables, functions, mixins, code nesting, and inheritance (and more). Some examples are Sass, Less, Stylus. A scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS.

What is a self-closing tag in HTML?

A type of tag that doesn't need to be closed by a separate closing tag. Examples <img /> <input/> <br />. Alternatively known as void tags, empty tags, singleton tags. No content nor child nodes.

What is an iframe?

An HTML document which can be embedded inside another HTML page.

What is cascading in CSS?

An cascade is an algorithm that defines how to combine property values originating from different sources. The algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties.

What makes up an HTML element?

An opening tag, followed by the content, followed by a closing tag.

What are data- attributes?

Attributes on an HTML element used to store extra in information / data in the DOM. Can be easily accessed using JavaScript using the dataset object on the element.

What is margin area in the box model?

Bound by the margin edge, it extends from the border to include an empty area used to separate an element from its neighbors.

What are the limitations of CSS?

Browser compatibility (determining which styles are supported), cross browser issues, there is no parent selector.

Difference between CSS grid and flexbox?

CSS grid layout is a two dimensional system, meaning it can handle both columns and rows. Grid layout is intended for larger-scale layouts that aren't linear in design. Flexbox is largely a one dimensional system (either a column or a row) and is most appropriate to the components of an application.

What is the difference between CSS reset vs normalize CSS?

CSS reset aims to remove all built-in browser styling, while normalize aims to make all built-in browser styling consistent across browsers.

What does CSS stand for?

Cascading Style Sheets

What is an HTML attribute?

Contain extra information about the HTML element that won't appear in the content. For example, class, target, href, src

What is the <body> element?

Contains all the content that displays on the page, such as text, images, videos, games, playable audio tracks, and whatever else.

What is session storage?

Data stored here is stored until the session or tab is closed, however, it is not cleared during reloads. The data remains on the client-side and cannot be transferred to the server.

What is local storage?

Data stored on a client's computer. Has no expiration, however, it is limited to only string data. Can be accessed using JavaScript and HTML but cannot be transferred to the server end. Can be cleared by the user.

What are primitives in JavaScript?

Data that is not an object and has no methods. These are: string, number, bigint, Boolean, undefined, symbol, and null. Represented directly at the lowest level of the language implementation. Immutable. Except for undefined and null, each has object equivalents that wrap around them.

What are CSS custom properties (or CSS variables or cascading variables)

Defined by users that contain specific values to be reused throughout the document. The values are set using '—' and accessed using the var() function.

Are document.on load and window.on load fired at the same time?

Document.onload is fired when the DOM is ready - this could be either before or after images, script, and other contents are loaded. Window.onload is fired only when the DOM is fully loaded and ready with all the content including images, scripts, css, etc.

When is it appropriate to use the <small> element?

Element represents side-comments and small print, like copyright and legal text, independent of its styled presentation.

What are some different types of CSS selectors?

Element selector (aka tag, or type selector), ID selector, class selector, attribute selector, pseudo-class selector, universal selector, various combinator selectors (not listing them all here), more.

What is an inline element?

Element that appears within the flow of the text with your page. Examples are spans, and anchors.

What is a block element?

Element that takes up the full width available, and has a line break before and after it. Examples are divs, paragraphs, headings.

What are empty elements in HTML?

Elements with no embedded elements or text elements. Do not have successor nodes. Tags that do not contain any closing tags. For example, <link>, <meta>, <hr>, <br>, <img>, <input>, <col>

What is padding area in the box model?

Extends from the content area to the padding edge.

What is border in the box model?

Extends from the padding area to the border edge.

When would you use Flexbox vs Grid?

Flexbox is mainly meant for 1-dimensional layouts while Grid is means for 2-dimensional layouts.

What is a CSS property value?

Found to the right of the colon after the property; Chooses one out of many possible appearances for a given property. For example, there are many `color` values in addition to `red`.

List out the key features of Sass

Full CSS3 compatible, language extensions such as nesting, variables and mixins, many useful functions for manipulating colors and other values, advanced features like control directives for libraries, well-formatted customizable output.

What are higher-order functions?

Functions that operate on other functions, either by taking them as arguments or by returning them. Some built-in examples: map, sort, reduce, filter, forEach.

What are the various ways to get elements from the DOM?

GetElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll

What's the difference in classes and IDs in CSS?

IDs are meant to be unique within the document, and elements can only have one ID attribute. Classes can be reused on multiple elements within the document. Mainly for styling and targeting elements.

Describe objects in JavaScript.

In CS an object is a value in memory which is possibly referenced by an identifier. In JS, object can be seen as a collection of properties. Property values can be values of any type, including other objects. Properties are identified using key values. A key value is either a string or a symbol.

What is VH/VW in CSS (Viewport height / viewport width)?

It's a CSS unit used to measure the height and width in percentage with respect to the viewport.

What is an @extend directive used for in Sass?

Lets you share a set of CSS properties from one selector to another, to help keep your Sass dry.

What is an HTTP request?

Messages sent by the client, usually a web browser.

What is an HTTP response?

Messages sent by the server as an answer.

Explain null and undefined in JavaScript?

Null is an assignment value, with means you can assign the value `null` to any variable when you want it to be empty. Undefined is a variable that has been declared but hasn't been initialized yet (though you can assign variables to undefined, you should not). If you compare the equality of the two implicitly (==) it's true, but if you compare the two explicitly (===), it's false.

What is `typeof` operator in JavaScript?

Operator that examines a value and returns what type it is - string, number, Boolean, object, undefined, (null is an object and array is an object).

How do we include CSS in a webpage?

Options: 1. An external file sheet linked to your HTML document, using the link tag (within the head). 2. Embed CSS with a style tag. A set of CSS styles within your HTML markup. 3. Add inline styles to HTML elements (CSS rules applied directly within an HTML tag) 4. Import a stylesheet into another CSS stylesheet file using @import

What is the web storage API?

Provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies. Made up of sessionStorage and localStorage.

List some different ways to specify units in CSS.

Px, em, rem, %,

What is the <meta> element?

Represent metadata that cannot be represented by other HTML meta-related elements like base, link, script, style, or title. Go inside the head tag, passed as name, value pairs, not displayed on the page but intended for the browser. Can contain inormation about character encoding, description, title of the document, etc.

What is the most commonly used load balancing technique?

Round Robin - requests are distributed across a group of servers. The algorithm allocates requests to the servers, once completed, it goes back to the top and the process is repeated.

Difference in SASS and SCSS?

Sass uses indention whereas SCSS uses curly braces and semicolons like CSS. Different file extensions.

What is a pseudo-class selector?

Selector that selects the specified element(s), but only when in the specified state. Use a single colon (:). Ex: a:hover, a:focus

What are the advantages of using CSS?

Separation of content from presentation, easy to maintain (when built correctly) - make one change and it applies in many places, and bandwidth - stylesheets will be stored in browser cache and can be used on multiple pages without having to download again.

What is the <title> element?

Sets the title of the page, which is the title that appears in the browser tab the page is loaded in. Also used to describe the page when it is bookmarked.

What is a inline-block element?

Similar to an inline element, but can have padding and margins, and set width and height.

What is the purpose of the alt attribute on images?

Specifies an alternative text to show in place of an image, in case it cannot be viewed for some reason (slow connection, error in src, user using screen reader, etc) Also helps search engine crawlers to index an image properly. Important for accessibility and SEO.

What is CSS?

Style sheet language that provides the formatting and "look" of a Web page or document written in a markup language.

How does the cascading algorithm determine how to find the value to apply for each property for each document element?

TODO https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

How can you highlight text in HTML?

The <mark> tag is used to mark or highlight text that is of special interest or relevance in an HTML document. You can use the css background-color property to change the default style of the highlight which is yellow by default.

What is a user agent stylesheet?

The browser's basic stylesheet that gives a default style to any document.

How does calc work?

The calc functions allows us to perform mathematical operations on property values.

What CSS declaration is used to change the font face?

The font-family property, and for the value we list the font with several fallbacks in case the fonts are not found or not supported, with serif or sans-serif usually being the final.

What is content area in the box model?

The innermost region of the box model, bounded by the content edge, and contains the "real" content of the element, such as text, or an image.

How do I restore the default value of a property?

The keyword initial can be used to reset it to its default value.

What is a CSS rule or "rule set" ?

The main building block of a CSS sheet, and contains one or more selectors and one or more declarations.

What is an author stylesheet?

The most common type of stylesheet. Define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.

What is a block formatting context?

The region in which the layout of the block boxes occurs and in which floats interact with other elements. Created by many different situations. An element that establishes a new one will contain internal floats, exclude external floats, and suppress margin collapsing.

What is a CSS selector?

The selector is the part of the CSS rule at the start of the rule that identifies the HTML element(s) you want to style.

What does !important mean in CSS?

The style has the highest precedence and overrides the cascade property.

What is semantic HTML or "semantically-correct" HTML.

The tags used to structure content are selected and applied appropriately to the meaning of the content. This type of element clearly describes its meaning to both the browser and developer.

What is a user stylesheet?

The user (or reader) of a website an choose to override styles in many browsers to tailor the experience to the user's wishes, using this.

What is a CSS property?

The ways you can style an HTML element, such as `color`.

Why is it important to test a web page in different browsers?

There are differences in browser support, and browsers go through updates.

What is the <head> element?

This element acts as a container for everything you want to include on the HTML that isn't the content the page will show to the viewers.

What is character encoding?

To display an HTML page correctly, a web browser must know which character set (character encoding) to use. This is specified in the tag: <meta charset="UTF-8">

When would you use an anonymous function?

Used as an argument to another function, or to create and invoke IIFE

What kind of problems are solved by Flexbox?

Vertical centering of elements within a container, sticky footer, makes the holy grail layout trivial, immediately think of it for something like a nav bar, full width input button pairs. Src: https://philipwalton.github.io/solved-by-flexbox

How to write good alt text?

Very descriptive, relatively short, use keywords but not stuffing, don't include "image/picture of" in the text, don't forget longdesc for more complex images.

What is the box model?

When a user-agent lays out a document, it generates a box for each element composed of four areas, defined by their respective edges: the content edge, the padding edge, the border edge, and the margin edge. Used to determine the height and width of the rectangular box.

What is the <html> element?

Wraps all the content on the page. Sometimes known as the root element.

What is the syntax for linking an external stylesheet to you HTML document?

`<link rel="stylesheet" type="text/css" href="mystyles.css" />`

How to check if an item is an array in JavaScript?

`Array.isArray(value)` method, or `value instanceof Array`, or `({}).toString.call(value) === '[object Array]'`