25 Common Frontend Developer Interview Q&A

Md. Jamal Uddin
Jan 10 · 10 min read
feature-image
feature-image
source: pexels.com

List of Common Questions:

  1. What is Semantic Element in HTML5?
  2. View port height & width in CSS3?
  3. What is CSS breakpoints?
  4. CSS Best Practice about ID and Class?
  5. What is SASS/SCSS?
  6. What is mixin in Sass/SCSS?
  7. What's new in ES6?
  8. What is Event Bubbling?
  9. What is prototype inheritance in JavaScript?
  10. Abstract function in JavaScript?
  11. What is keyword in Arrow function?
  12. What is keyword in normal function?
  13. What is the difference between localStorage and sessionStorage?
  14. What is CORS?
  15. What is HTTP request?
  16. How many HTTP methods we have?
  17. What is API and REST API?
  18. Make an AJAX request?
  19. How does the browser work?
  20. What is Pure Function in JavaScript?
  21. Event Handling in JavaScript?
  22. JavaScript execution context?
  23. How to manage your state in React?
  24. How Redux works?
  25. What is Presentational Component and Functional Component?

Let’s describes little more:

1. What is Semantic Element in HTML5?

A semantic element clearly describes its meaning to both the browser and the developer.

  • Examples of non-semantic elements: and - Tells nothing about its content.
  • Examples of semantic elements: , , and - Clearly defines its content.

More Details on W3Schools

2. Viewport height & width in CSS3?

The viewport units are a new set of units designed for the challenges we face today. One-pagers, full-width grids, typography, and many other things rely on the size of the viewport. Previously, we hacked these challenges using percentages, or JavaScript.

This new set of units consists of four different units. Two for each axis, and a minimum and maximum value of the two.

  • : 1/100th viewport width
  • : 1/100th viewport height
  • : 1/100th of the smallest side
  • : 1/100th of the largest side

Note: uses instead of It does not support . Just to clarify: equals in portrait mode, whilst in landscape mode, will equal .

More Details on Source

3. What is CSS breakpoints?

CSS breakpoints are points where the website content responds according to the device width, allowing you to show the best possible layout to the user. CSS breakpoints are also called media query breakpoints, as they are used with a media query.

More Details on RWD

4. CSS Best Practice about ID and Class?

We need ways to describe content in an HTML/XHTML document. The basic elements like , , and will often do the job, but our basic set of tags doesn't cover every possible type of page element or layout choice. For this, we need ID's and Classes. For example , this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other unordered lists on our page. Or we might have a section on our page that has no relevant tag to signify it, for example a footer, where we might do something like this: . Or perhaps we have boxes in our sidebar for keeping content over there separated in some way: .

More Details on CSS TRICKS

5. What is SASS/SCSS?

Sass (Syntactically awesome style sheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. … Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.

More Details:

6. What is mixin in Sass/SCSS?

One of the most powerful features of the preprocessor is the , an abstraction of a common pattern into a semantic and reusable chunk. Think of taking the styles for a button and, instead of needing to remember what all of the properties are, having a selector include the styles for the button instead.

when this code we compile to CSS looks like below type:

7. What's new in ES6?

JavaScript ES6 brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules… and more.

  • arrows
  • classes
  • enhanced object literals
  • template strings
  • destructuring
  • default + rest + spread
  • let + const
  • iterators + for..of
  • generators
  • unicode
  • modules
  • module loaders
  • map + set + weakmap + weakset
  • proxies
  • symbols
  • subclassable built-ins
  • promises
  • math + number + string + array + object APIs
  • binary and octal literals
  • reflect api
  • tail calls
  • More Details: ES6 Features

8. What is Event Bubbling?

The bubbling principle is simple.

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

Let’s say we have 3 nested elements FORM > DIV > P with a handler on each of them:

  • A click on the inner first runs onclick:
  • On that .
  • Then on the outer .
  • Then on the outer .

And so on upwards till the document object.

More Details: JavaScript.info

9. What is prototype inheritance in JavaScript?

Inheritance refers to an object’s ability to access methods and other properties from another object. Objects can inherit things from other objects. Inheritance in JavaScript works through something called prototypes and this form of inheritance is often called prototypal inheritance.

More Details on DigitalOcean

10. Abstract function in JavaScript?

In object-oriented programming, abstraction is one of the four central principles (along with encapsulation, inheritance, and polymorphism). Abstraction is valuable for two key reasons:

  • Abstraction hides certain details and only show the essential features of the object. It tries to reduce and factor out details so that the developer can focus on a few concepts at a time. This approach improves understandability as well as maintainability of the code.
  • Abstraction helps us to reduce code duplication. Abstraction provides ways of dealing with crosscutting concerns and enables us to avoid tightly coupled code.

The lack of abstraction inevitably leads to problems with maintainability.

More Details on CSS TRICKS

11. What is “ keyword in Arrow function?

In classic function expressions, the keyword is bound to different values based on the context in which it is called. With arrow functions however, is lexically bound. It means that it usesthis from the code that contains the arrow function.

For example, look at the setTimeout function below:

In the ES5 example, is required to help pass the context into the function. Otherwise, by default would be undefined.

ES6 arrow functions can’t be bound to a keyword, so it will lexically go up a scope, and use the value of in the scope in which it was defined.

More Details on freeCodeCamp Blog

12. What is " keyword in normal function?

A function’s keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

In most cases, the value of is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the method to set the value of a function's regardless of how it's called, and ES2015 introduced arrow functions which don't provide their own binding (it retains the value of the enclosing lexical context).

More Details on MDN

13. What is the difference between localStorage and sessionStorage?

OK, localStorage as it’s called it’s local storage for your browsers, it can save up to 10MB, sessionStorage does the same, but as it’s name saying, it’s session based and will be deleted after closing your browser, also can save less than localStorage, like up to 5MB, but cookies are very tiny data storing in your browser, that can save up 4KB and can be accessed through server or browser both…

More Details on MDN

14. What is CORS?

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.

More Details: MDN

15. What is HTTP request?

HTTP Request is a packet of Information that one computer sends to another computer to communicate something. To its core, HTTP Request is a packet of binary data sent by the Client to server. An HTTP Request contains following parts. Request Line. Headers, 0 or more Headers in the request.

More Details on Codecademy

16. How many HTTP methods we have?

HTTP defines a set of to indicate the desired action to be performed for a given resource. Although they can also be nouns, these request methods are sometimes referred as HTTP verbs. Each of them implements a different semantic, but some common features are shared by a group of them: e.g. a request method can be safe, idempotent, or cacheable.

GET

  • The method requests a representation of the specified resource. Requests using should only retrieve data.

HEAD

  • The method asks for a response identical to that of a request, but without the response body.

POST

  • The method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.

PUT

  • The method replaces all current representations of the target resource with the request payload.

DELETE

  • The method deletes the specified resource.

CONNECT

  • The method establishes a tunnel to the server identified by the target resource.

OPTIONS

  • The method is used to describe the communication options for the target resource.

TRACE

  • The method performs a message loop-back test along the path to the target resource.

PATCH

  • The method is used to apply partial modifications to a resource.

17. What is API and REST API?

API:

a set of functions and procedures that allow the creation of applications which access the features or data of an operating system, application, or other services.

More Details on freeCodeCamp blog

REST API:

REST or RESTful API design (Representational State Transfer) is designed to take advantage of existing protocols. While REST can be used over nearly any protocol, it usually takes advantage of HTTP when used for Web APIs. This means that developers do not need to install libraries or additional software in order to take advantage of a REST API design. REST API Design was defined by Dr. Roy Fielding in his 2000 doctorate dissertation. It is notable for its incredible layer of flexibility. Since data is not tied to methods and resources, REST has the ability to handle multiple types of calls, return different data formats and even change structurally with the correct implementation of hypermedia.

More Details on SitePoint

18. Make an AJAX request?

Here is a generic jQuery AJAX request:

More Details on jQuery official docs

19. How does the browser work?

The web server locates and then sends the information to the web browser, which displays the results. When web browsers contact servers, they’re asking to be sent pages built with Hypertext Markup Language (HTML). Browsers interpret those pages and display them on your computer.

More Details on html5rocks

20. What is Pure Function in JavaScript?

Pure functions are functions that accept input and returns a value without modifying any data outside its scope(Side Effects). Its output or return value must depend on the input/arguments and pure functions must return a value. … Here is a pure function.

More Details on freeCodeCamp blog

21. Event Handling in JavaScript?

JavaScript’s interaction with HTML is handled through events that occur when the user or the browser manipulates a page.

When the page loads, it is called an event. When the user clicks a button, that click to is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.

More Details on Eloquent Javascript

22. JavaScript execution context?

Execution context (EC) is defined as the environment in which JavaScript code is executed. By environment I mean the value of this, variables, objects, and functions JavaScript code has access to, constitutes it’s environment.

More Details on medium

23. How to manage your state in React?

There’s always been a myriad of ways to manage state in React. Redux has always been a popular choice, but with React 16, and recently released libraries, there are now even more options. you can manage your state using React Context API, Redux or Mobx etc.

More Details on Medium

24. How Redux works?

Actions, reducers, action creators, middleware, pure functions, immutability… Most of these terms seem totally foreign.

Redux is astonishingly simple. It uses a function called a reducer (a name derived from the JavaScript reduce method) that takes two parameters: An action, and a next state. The reducer has access to the current (soon to be previous) state, applies the given action to that state, and returns the desired next state.

More Details on Dave Ceddia’s blog

25. What is Presentational Component and Functional Component?

Presentational Component: Rarely have their own state (when they do, it’s UI state rather than data).

More Details on Dan Abramov blog

Functional Component: A React component can be considered pure if it renders the same output for the same state and props.

More Details on Log Rocket

Note: this post all data collected from various internet sources and I have mentioned a name of few.

Want to know about Full Stack Interview Questions visit below Toptal article. it's really insightful and I loved it.

Thanks for your learning. please feel free to comment and do some claps

Md. Jamal Uddin

Written by

Life Long Learner | Programmer | JavaScript | React | Gatsby | https://github.com/jamal-pb95