Top 5 Frontend Interview questions you must know! Ans with Example
Tags: frontend, interview, react, javascript
Published: 2022-09-23 08:29:24

Today's topic is about **FRONTEND** interview with most frequently asked in interview.

> Time is money, let's drive to the point

**1. What skills does a front-end developer need?**
Frontend developers utilize different web technologies to change coded data into user-friendly interfaces. Many among these are Cascading Style Sheets (CSS), JavaScript, HyperText Markup Language (HTML), etc. 

- **HTML**: HyperText Markup Language depicts the content on the page like buttons, links, headings, paragraphs, and lists. It is the building block of websites and is utilized to define and mark content, so a browser shows it correctly.

Ex:
```html
<html>
<head>
  <title>Home</title>
</head>
<body>
 Hi, Im HTML
</body>
</html>
```
- **CSS**: CSS stands for Cascading Style Sheets and is accountable for the style of your web pages such as animations, colours, and layouts.

Ex:
```css
body{
    background-color: orange;
    font-size: 2em;
    height: 100vh;
}
```

- **JS**:JavaScript is one of three main elements, in front-end web development, that is required to end up with a web page that can be rendered accurately. It is now challenging to visualize websites without JavaScript as it allows programmers to make the sites interactive. This programming language can transform website content on the basis of a user’s action. 

Ex:
```javascript
<html>
<head>
  <title>Home</title>
</head>
<body>
 
<script>
    document.write('Hello JS');
</script>
</body>
</html>
```

- **CSS**Frameworks: Frameworks were designed as a way to help hasten the development process. Tailwind, Sass, Bootstrap etc are css frameworks.

Ex: SASS
```scss
body{
    background-color: orange;
    div{
        color:red;
        p{
            margin: 0;
        }
    }
}
```

- **Testing and Debugging skills**: As you are creating your application, there will be mistakes in your code that require to be fixed. Debugging is the act of recognizing those bugs and resolving them. Another essential skill to know is debugging. Documenting tests for your code is a way to assure that your code is accomplishing what it is meant to do.

- **Version Control**: he way of tracking and the modifications to the project's code is version control. Git is regarded as a popular software that is utilized to track your code. If your code gets messed up, you can utilize Git to go back to an earlier version of your code rather than manually rewriting everything. 


##2. What is meta tag in HTML, Explain.
- Meta tags always go inside head tag of the HTML page
-     Meta tags is always passed as name/value pairs
-     Meta tags are not displayed on the page but intended for the browser
-     Meta tags can contain information about character encoding, description, title of the document etc.
Ex:
```html
<head>
  <meta name="description" content="This is description"> 
  <title>Home</title>
</head>

```

##3. What npm is used for?
npm stands for Node Package Manager. npm provides the following two main functionalities:    

1. Online repositories for Node.js packages/modules which are searchable on search.nodejs.org
2. Command-line utility to install packages, do version management and dependency management of Node.js packages.
3. Another important use for npm is dependency management. When you have a node project with a package.json file, you can run npm install from the project root and npm will install all the dependencies listed in the package.json.

Ex:
```npm
npm install
npm create-react-app myapp
```

##5. What is Load Balancing? ****
Load balancing is a method in which requests are allocated and handled by numerous machines rather than a single device. This ensures that the load does not rely on a single point and is allocated efficiently.
The most commonly used load balancing technique is called Round Robin. In this method, the 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.

visit for more [DevvSakib.me](https://devvsakib.me/blog)