Frontend Interview Quiz Part 1

Be prepared for job interviews by having a solid understanding of the concepts and skills that employers are looking for - part 1 of a 2 part quiz.

Question 1/15

What is the difference between canvas and svg?

Question 2/15

What is BFC (Block Formatting Context)?

Question 3/15

Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>?

Question 4/15

What are CSS pseudo-elements?

Question 5/15

What is progressive rendering?

Question 6/15

In JavaScript, what's the difference between an "attribute" and a "property"?

Question 7/15

What is the main difference between the Array.forEach() loop and Array.map()

Question 8/15

In JavaScript, what's the difference between host objects and native objects?

Question 9/15

What is an example of an @media property other than screen?

Question 10/15

What's the difference between inline and inline-block?

Question 11/15

What are data- attributes good for?

Question 12/15

What are empty elements in HTML?

Question 13/15

What does a doctype do?

Question 14/15

What is a closure in JavaScript?

Question 15/15

What does * { box-sizing: border-box; } do?
You did not answer any questions correctly.

Your Answers

Question 1/15

What is the difference between canvas and svg?

Canvas and SVG are both graphics technologies used in web development, but they have different strengths and use cases. Canvas is a HTML element that provides a drawing surface for dynamic, interactive graphics such as games and data visualizations. It uses JavaScript to draw shapes and images directly onto the canvas element, which can be updated in real-time to create animations and other dynamic effects. SVG, on the other hand, is a vector-based graphics format that is optimized for static, scalable graphics such as logos and icons. It uses XML markup to define shapes and images, which can be scaled without loss of quality and manipulated using CSS and JavaScript. While both technologies can be used for a wide range of graphics applications, they are optimized for different types of graphics and use cases.

Question 2/15

What is BFC (Block Formatting Context)?

BFC (Block Formatting Context) is a CSS layout concept that affects the positioning and layout of HTML elements. A BFC is a self-contained block of HTML elements that is formatted according to certain rules, such as block-level elements stacking vertically and floating elements being contained within their parent element. BFCs are useful for creating complex layouts and controlling the positioning and layout of elements within a webpage. Some common ways to create a BFC include using the overflow property, setting the display property to table-cell or inline-block, or floating elements within a container. While BFCs can be used in combination with other CSS techniques such as flexbox and grid layout, they are a fundamental concept in CSS layout and understanding how they work is important for creating effective and flexible web layouts.

Question 3/15

Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>?

Placing CSS <link>s between the <head></head> tags and JS <script>s just before the </body> tag can improve webpage loading speed. This is because the browser can start loading the CSS and JS files earlier in the rendering process, which can reduce the perceived page load time. Placing <link>s in the head section ensures that the CSS is loaded before the browser starts rendering the page, while placing <script>s just before the </body> tag ensures that they are loaded after the page content has loaded, which can prevent delays in rendering the visible content. While this approach may not be appropriate for all situations, it is generally considered a good practice for improving webpage performance.

Question 4/15

What are CSS pseudo-elements?

CSS pseudo-elements are elements that are not part of the HTML document but can be styled with CSS. They are denoted by a double colon (::) notation and are used to add special styling effects to specific parts of an element's content, such as the first letter or the first line. Pseudo-elements can be used to create a wide range of styling effects, from simple decorative elements like underlines and bullet points to more complex effects like image captions and drop caps. Some examples of commonly used pseudo-elements include ::before and ::after, which are used to add content before or after an element's content, and ::first-line and ::first-letter, which are used to style the first line or first letter of an element's content. While pseudo-elements can be powerful tools for creating complex styling effects, they should be used judiciously to avoid overcomplicating the code and affecting the page's performance.

Question 5/15

What is progressive rendering?

Progressive rendering is a technique for optimizing webpage loading speed by prioritizing the rendering of visible content. The idea is to start rendering the page as soon as possible and prioritize the content that is visible above the fold, or the part of the page that is visible without scrolling. This can be achieved by using techniques such as lazy loading, which delays the loading of non-critical resources such as images and videos until they are needed, and asynchronous loading, which allows resources to be loaded in the background without blocking the rendering of the page. By prioritizing visible content and loading non-critical resources later, progressive rendering can improve the perceived page load time and user experience.

Question 6/15

In JavaScript, what's the difference between an "attribute" and a "property"?

When an HTML document is loaded and parsed by the browser, it creates a tree-like structure of objects that represent the content and structure of the document, known as the DOM. Each HTML element in the document is represented as a node in the DOM tree, and these nodes can have various attributes and properties.

An attribute is a characteristic of an HTML element that is specified in the HTML markup and represents its initial state when the document is first loaded into the browser. The attribute values are typically set by the web developer or designer, and they are used by the browser to determine how the element should be displayed or behave.

On the other hand, a property is a value that represents the current state of an element and can be accessed and modified through JavaScript code. Properties reflect the current state of the element, which may have been changed dynamically through user interaction or programmatic manipulation. For example, if you change the text content of a <div> element using JavaScript, you are modifying its textContent property.

While some attribute and property names are the same, they are not always equivalent. In general, attributes are used to define the initial state of an element, while properties reflect the current state that can be modified and updated through JavaScript code.

Question 7/15

What is the main difference between the Array.forEach() loop and Array.map()

Both Array.forEach() and Array.map() are methods in JavaScript that can be used to iterate over arrays. However, they differ in their behavior and intended use.

The Array.forEach() method iterates over each element of an array and executes a callback function for each element. The callback function can modify the element or perform some other operation, but it does not create a new array. Instead, it modifies the original array in place. This makes Array.forEach() useful for tasks such as updating the UI based on changes to an array, or performing some side effect for each element of an array.

The Array.map() method, on the other hand, creates a new array by applying a callback function to each element of the original array. The callback function takes the current element as its argument, performs some operation on it, and returns the new value that should be included in the new array. This makes Array.map() useful for tasks such as transforming an array of data into a new format, or computing a new array based on an existing array.

So the main difference between Array.forEach() and Array.map() is that the former modifies the original array in place, while the latter creates a new array based on the results of the callback function.

Question 8/15

In JavaScript, what's the difference between host objects and native objects?

In JavaScript, objects play a central role in defining and manipulating data. The language itself comes with a set of built-in objects that are known as native objects. These objects are specified in the ECMAScript standard and are considered the "standard objects" of the language. Native objects include fundamental objects such as Object, Array, Date, and Math, as well as specialized objects like RegExp, Set, and Map.

On the other hand, host objects are objects that are provided by the environment in which the JavaScript code is executed. For example, in a web browser environment, the window and document objects are host objects, as they are provided by the browser's windowing system. Similarly, in a Node.js environment, the fs and http modules are host objects, as they are provided by the Node.js runtime environment.

The key difference between native and host objects is that native objects are part of the JavaScript language itself, and they adhere to the ECMAScript specifications. Host objects, on the other hand, are not specified in the ECMAScript standard and are specific to the particular environment in which they are provided.

Question 9/15

What is an example of an @media property other than screen?

The @media rule in CSS is used to apply styles based on the characteristics of the device or media being used to view the webpage. While the most common media type is "screen", which is used for desktop and mobile devices, there are several other media types that can be targeted with the @media rule. One example is the "print" media type, which is used for printed documents and can be used to apply styles specifically for printed output. For example, you might use the @media print rule to hide certain elements that are only relevant for screen display or to adjust the font sizes and colors for better legibility in printed output. Other examples of media types that can be targeted with the @media rule include "speech" for screen readers, "all" for all media types, and "handheld" for mobile devices with small screens.

Question 10/15

What's the difference between inline and inline-block?

Inline elements are elements that flow with the text and take up only as much width as necessary. They cannot have a width or height set explicitly, and they do not allow for vertical alignment. Examples of inline elements include <span>, <a>, and <em>.

Inline-block elements, on the other hand, also flow with the text but allow for height and vertical alignment. They take up only as much width as necessary but can have their width and height set explicitly using CSS. Examples of inline-block elements include <img>, <button>, and <input>.

So the key difference between inline and inline-block elements is that the latter allows for height and vertical alignment.

Question 11/15

What are data- attributes good for?

Data- attributes are a way to store arbitrary data associated with HTML elements. They are named using the "data-" prefix followed by a descriptive name, such as "data-id" or "data-color". Data- attributes can be useful for storing information that is not visible to the user but is needed for scripting or styling. For example, you could use a data- attribute to store an ID or a custom attribute value that can be used by JavaScript code. While data- attributes can be used to control the behavior of JavaScript code, this is not their primary purpose.

Question 12/15

What are empty elements in HTML?

Empty elements in HTML are elements that have no content or child elements. They are also sometimes referred to as void elements or self-closing elements. Examples of empty elements in HTML include <br>, <img>, and <input>. These elements are unique in that they do not require a closing tag, and are written using a self-closing syntax such as <br/> or <img/> to indicate that they are empty. While some web browsers may not display empty elements, they are supported by all modern web browsers and are an important part of HTML markup.

Question 13/15

What does a doctype do?

A doctype declaration, also known as a Document Type Declaration (DTD), is an instruction that tells web browsers which version of HTML or XHTML is being used in a webpage. It defines the structure and type of a webpage, which helps the browser render the page correctly. Without a doctype, the browser may not be able to parse the markup correctly and may display the page incorrectly. While doctypes can also include information such as character encoding and language, their primary purpose is to define the structure and type of a webpage.

Question 14/15

What is a closure in JavaScript?

In JavaScript, a closure is a function that is defined inside another function and has access to the outer function's variables, even after the outer function has returned. This allows the inner function to "remember" the values of the outer function's variables, even if they are no longer in scope.

To create a closure, you define a function inside another function, and then return the inner function from the outer function. The inner function will have access to the variables in the outer function's scope, even after the outer function has returned. Here's an example:

function outerFunction() {
  const message = 'Hello!';

  function innerFunction() {
    console.log(message);
  }

  return innerFunction;
}

const myFunction = outerFunction();
myFunction(); // Output: Hello!

In this example, outerFunction defines a variable message and a function innerFunction that logs the value of message. The innerFunction is then returned from outerFunction. When outerFunction is called, it creates a closure by returning innerFunction, which still has access to message.

Closures are a powerful feature of JavaScript that allow you to create functions with persistent state and behavior. They are commonly used in functional programming and event handling, among other things.

Question 15/15

What does * { box-sizing: border-box; } do?

The CSS rule "* { box-sizing: border-box; }" sets the default box-sizing property for all HTML elements to border-box. The box-sizing property determines how an element's total width and height are calculated, taking into account the element's content, padding, and borders. The default value for box-sizing is content-box, which means that an element's total width and height are calculated based on its content only, and any padding and borders are added to the element's total width and height. However, by setting the box-sizing property to border-box, any padding and borders are included in the element's total width and height, which can make it easier to create flexible and responsive layouts. The asterisk (*) selector is a universal selector that matches any element, so by applying this rule to all elements on the page, the default box-sizing behavior is standardized across the entire page.

Take Another Quiz

Advanced CSS Quiz

Advanced CSS Quiz designed to test your knowledge of advanced CSS concepts, including layout, positioning, blending, and responsive design. Start quiz

Agile Methodologies Quiz

Test your understanding of Agile methodologies, including Scrum, Kanban, and Lean. Understand how to use Agile principles to enhance the efficiency and productivity of your software development projects. Start quiz

Basic HTML & CSS Quiz

From basic tags and selectors to layout and positioning, this quiz covers essential topics that every beginner frontend web developer should know. Start quiz

Basic JavaScript Quiz

Test your understanding of the fundamental concepts and syntax of JavaScript, including variables, data types, conditionals, loops, and functions. Start quiz

CSS Box Model Quiz

Identify the correct box model properties for various layout scenarios and determine how changes to these properties affect the appearance of an element. Start quiz

CSS Flexbox Quiz

Test your knowledge of the CSS Flexbox layout module with multiple choice questions and their explanations. Start quiz