Easy Interview Questions

Question 1

What is the purpose of the alt attribute on images?

Answer 1

The alt attribute provides alternative information for an image if a user cannot view it.
- Decorative images should have an empty alt attribute.

• Web crawlers use alt tags to understand image content, so they are considered important for Search Engine Optimization (SEO).
• Put the . at the end of alt tag to improve accessibility.

Question 2

What is CSS BEM?

Answer 2

Alternative solutions to scope issues like CSS-in-JS
The BEM(Block Element Modifier) methodology is a naming convention for CSS classes in order to keep CSS more maintainable by defining namespaces to solve scoping issues.
A Block is a standalone component that is reusable across projects and acts as a “namespace” for sub components (Elements). Modifiers are used as flags when a Block or Element is in a certain state or is different in structure or style.
navbar__link–active

Question 3

What is the purpose of cache busting and how can you achieve it?

Answer 3

Browsers have a cache and the server is set up to send headers to store the file for a given amount of time. This greatly increases website speed and preserves bandwidth.
But, when the website has been changed by developers while the user’s cache still references old files, it can leave them with old functionality or break a website if the cached CSS and JavaScript files are referencing elements that no longer exist, have moved or have been renamed.
- Cache busting is the process of forcing the browser to download the new files. This is done by :
- naming the file something different to the old file.
- to append a query string to the end of the file
src=”js/script.js” => src=”js/script.js?v=2”

Question 4

What are the advantages of using CSS preprocessors?

Answer 4

• They allow us to write more maintainable and scalable CSS by enabling DRY (Don’t Repeat Yourself) principles.
• allow nested selectors and provide variables
• Some disadvantages of using CSS preprocessors (setup, re-compilation time can be slow etc.)

Question 5

What is the difference between the equality operators == and ===?

Answer 5

Triple equals (===) checks for strict equality, which means both the type and value must be the same. Double equals (==) on the other hand first performs type coercion(values are converted into the same type) and then applies strict comparison.
 Hint: Mention of falsy values and their comparison.

Question 6

What is the difference between an element and a component in React?

Answer 6

Elements are immutable, plain objects that describe the DOM nodes or components you want to render.

Components can be either classes or functions, that take props as an input and return an element tree as the output.

Question 7

Can a web page contain multiple /header/ elements? What about /footer/ elements?

Answer 7

W3 recommends having as many as you want, but only 1 of each for each “section” of your page, i.e. body, section etc.

Question 8

Describe the correct usage of the HTML5 semantic element: header

Answer 8

header is used to contain introductory and navigational information about a section of the page. This can include the section heading, the author’s name, time and date of publication, table of contents, or other navigational information.

Question 9

Describe the correct usage of the HTML5 semantic element: article

Answer 9

article is meant to house a self-contained composition that can logically be independently recreated outside of the page without losing its meaning. Individual blog posts or news stories are good examples.

Question 10

Describe the correct usage of the HTML5 semantic element: section

Answer 10

section is a flexible container for holding content that shares a common informational theme or purpose.

Question 11

Describe the correct usage of the HTML5 semantic element: footer

Answer 11

footer is used to hold information that should appear at the end of a section of content and contain additional information about the section. Author’s name, copyright information, and related links are typical examples of such content.

Question 12

What does lifting state up in React mean?

Answer 12

When several components need to share the same data, then it is recommended to lift the shared state up to their closest common ancestor. For example, if two child components share the same data, it is recommended to move the shared state to parent instead of maintaining the local state in both child components.

Question 13

Can you name the four types of @media properties?

Answer 13

• all, which applies to all media type devices
• print, which only applies to printers
• screen, which only applies to screens (desktops, tablets, mobile etc.)
• speech, which only applies to screenreaders

Question 14

What is the difference between the postfix i++ and prefix ++i increment operators?

Answer 14

The postfix increment operator evaluates to the value before it was incremented.

let i = 0
i++ // 0
// i === 1

The prefix increment operator evaluates to the value after it was incremented.

let i = 0
\++i // 1
// i === 1

Question 15

In which states can a Promise be?

Hide answer

Answer 15

A Promise is in one of these states:

• pending: initial state, neither fulfilled nor rejected.
• fulfilled: meaning that the operation completed successfully.
• rejected: meaning that the operation failed.

Question 16

What is a stateful component in React?

Answer 16

Stateful components have internal state that they depend on.

Stateful components are class components or function components that use stateful Hooks.

Stateful components have their state initialized in the constructor or with useState().

Question 17

What is a stateless component?

Answer 17

Stateless components are independent of their state.

Stateless components can be either class or functional components.

Stateless functional components avoid the ‘this’ keyword altogether.