What's the difference between inline and inline-block?
Elements with display: inline will take up as much height&width as their content, height&width properties have no effect on them. On inline-block elements on the other hand, you can change width&height.
What's the difference betwen == and ===?
Both are comparison operators, but while == only checks value, === check checks for both value and data type.
What are the differences between variables created using let, var or const?
Var is global-scoped, visible thorugh blocks. It tolerates re-declarations. They,re hoisted and initialised with undefined. Let and const are block-level variables(living only in the {...} if declared inside). An error is thrown if re-declared. They are hoised but can't be accessed before their declarations. The main difference between let and const is that the value of const can't be changed.
Positioning in CSS: What's the difference between a fixed, relative, absolute or statically positioned element?
Static: this is the default positioning, following the normal flow of the document. Relative: relatively positioned elements can be moved based on their original position in the document flow. This element won't be taken out of the flow, it leaves its "ghost" behind. Absolute: takes the element out of the document flow (no "ghost"). Absolutely positioned elements can be offset based on the entire page (or the relatively positioned parent). Fixed: the element's position will always be based on the screen. Sticky: is like fixed but instead of the screen, it's fixed to its parent.
What is hoisting?
Before parsing the code Javascript engine shifts all variable declarations to the top of the scope (auto-initialised to undefined), this is called hoisting. It does the same with function declarations (but they're initialised to their actual function value). Hoisting doesn't work with function expressions.
What are some user experience (UX) concerns to be aware of when using iconography in user interfaces(UI)?
In some cases, icons can effectively bridge language gaps. They can grab the user's attention and can communicate an idea quickly but they are hard to memorise and can be inefficient. It's difficult to get them right and for abstract things they usually don't work well. It's always worth considering the reason behind using icons and whether they'd enhance UX.
What is strict mode? What are some of the advantages/ disadvantages using it?
Some text that is going to be the answer.
What's the difference between while and do-while loops in Javascript?
A while loop executes as long as the specified condition evaluates to true. A do while loop will always executes once, even if the condition is never true.
What is WCAG?
Web Content Accessibility Guidelines. It is developed to provide a standard for web content accessibility.
Why is it generally a good idea to position CSS links in the head and JS scripts just before the closing body tag? Do you know any exceptions?
CSS links should be in the head so they load first. JS script should come last, as they manipulate the DOM. HTML is loaded and executed line by line and this way we can make sure that by the end of the body, we have the DOM ready that the JS script will use.
What is specificity in CSS and how does it work?
Specificity determines which CSS rule will take precedence and apply to an element. There's a source order, in case of equal specificities, the last declaration takes precedence. Certain selector types can increase specificity, like class or ID (ID is higher). !important overrides any other declarations.
Describe z-index and how stacking context is formed.
It controls the vertical stacking order of the elements that overlap (which one appears physically closer). Only elements with a position other than static can have z-index. Without it, elements stack in the order of their appearance in the DOM.
What language constructions do you use for iterating over object properties and array items?
Loops. For loops: For...of for iterating over values, for...in for iterating over enumerable properties. While loops: iterating as long as a certain condition is met. Methods: forEach(): calls a function for every element of an array. Map: applies a function to each element and return a new array.
Can you explain the difference between px, em and rem as they relate to font sizing?
Pixels are absolute units, em and rem are relative units. Absolute units are always the same size, while relative units relate to something else (like viewport or the parent element's font). Relative units are used more frequently in responsive web design as they scaleable. Rem is relative to the root element's font size, while em is relative to it's parent's size.
What are the different ways to visually hide content (and make it available only for screen readers)?
Some text that is going to be the answer.
How is an "alt" used for and how does a well-functioning alt look like?
An attribute of images that provides an alternate text description if the image can't be displayed/the user cannot see it (using screen readers, turned off images to save data, etc). Alt-texts should describe the image (depending on the context), they should be concise and end with a period.They can be left blank if an image is purely decorative or when they're repeated.
What is the definition of a higher-order function?
They are functions that either take another function as an argument or return a function.
What are the different data types in Javascript?
Primitive data types: string, number, bigInt, Boolean, Undefined, Null, Symbol. Non-primitive data types: object
Explain "this" (very funny, yes)!
"This" is a keyword that refers to the object that the function is a property of. Its value will always depend on the object invoking that function.
What are object prototypes?
Some text that is going to be the answer.
What are callbacks?
Callback is a function that will be executed after another function finished executing. Because functions are objects in JS, they can take functions as arguments and can be returned by other functions. Functions that do this are called higher-order functions. Functions that are passed as arguments are called callback functions.
What is DOM?
Stands for Document Object Model. It represent all content on a page as objects that can be modified.
What is NaN property in Javascript?
Stands for "Not-a-Number" value, indicating the value is not a number(who'd have thought). typeOf of a NaN will return a Number. You can check is a value is NaN with isNaN() method.
Explain passed by value and passed by reference.
In JS primitive data types are passed by value, while non-primitives are passed by reference. When we assign a primitive value to a variable, the assign operator(=) allocates memory space for the value and returns the address of this space. When these variables are copied, a new space is allocated for the value of the new variable. If the value is non-primitive, the assign operator passes only the address of the original var (reference).
Wha is an Immediately Invoked Function (IIFE) in Javascript?
Some text that is going to be the answer.
What's the difference between IDs and classes in HTML?
Both are attributes of an HTML element, but while IDs are unique, more than one HTML element can have the same class. Since classes are reusable, their use is encouraged.
What are arrow functions?
Introduced with ES6, arrow functions provide a shorter syntax for writing functions. They can only be used as a function expression. They're declared without the function keyword, if there's only one returning expression, we don't need to use return keyword either and if it has only one line of code curly braces {} can be omitted. It also handles "this" differently, not referring to the object calling it but inheriting its value from the parent scope.
What is the Box Model in CSS?
Every element is a rectangular box. This box has a width and height determined by: the content itself, border, padding and margin.
What is vh/vw in CSS?
Viewport height and viewport width are relative units, used in responsive design. 1vh/1vw is 1% of the height/width of the viewport (browser window).
What are CSS custom properties?
They are variables defined by the developer. They contain specific values that can be reused throughout the document. They are set using -- notion and can be accessed with var().
What's the difference between function expression and function declaration?
They are the 2 ways of creating functions using the function keyword. Function declarations START with function keyword, function expressions don't. Function variables created with function declarations are hoisted, their role is to create standalone functions, inside the global scope or the scope of other functions. Function expressions are best used as callbacks or functions created by conditions (in if else statements).
What are pseudo elements and pseudo classes?
A pseudo-class is a keyword added to a selector that specifies a special state of the selected element. For example, :hover can be used to change a button's color when the user's pointer hovers over it. Other pseudo-classes are :link, :visited, :active, :focus. Pseudo-elements on the other hand allows is to create items that don't normally exist on the document tree. Some frequently used pseudo-elements are ::before and ::after.
What types of @media properties are there?
all: suitable for all devices, print: intented for paged material/print preview, screen: for screens, speech: for speech synthesizers