Top Questions For A Frontend Developer Interview

The field of front-end development has a lot of demand for developers. Companies are working on hiring front-end developers, offering them quite attractive salary packages. If you have the skill that is required for becoming a front-end developer, this article can help you find your career in the field, by helping you crack the front-end interview. The list of questions compiled here is gathered from various frameworks and languages that are commonly used and are expected to be known in the field of front-end development. 

Git Interview Questions

1. What is meant by a ‘Version Control System’? 

A system of version control is essentially a program that helps in recording the changes that have been to a set of data or a file that it becomes easy to restore to a previous version if it should become necessary at some point. This acts as a guarantee to those working on a team that they are all working on the updated version of their file data or file. 

2. Difference Between Centralized Version Control System and a Distributed Version Control System

The working of the centralized version control system is as follows:

• Storing all the versions of the file is done on a central server.
• No one developer will have a copy of the files of the local system that is complete.
• If the central server of the project fails, the data of the project is lost. 

The working of the distributed version control system is as follows:

• Each developer on the project will have a copy of the code on their own system.
• If the server crashes, it does make the project lose progress. 
• It is capable of improving the working in the offline mode and eliminating the need for one backup location. 

3. Explain Git Push and Pull

The command Git Push works by pushing the content that is present on the local repository to a repository that is remote. The push works after there have been changes made in the local repository in order to share those changes with the remote team. The command Git Pull works by pulling the changes that have been made from a remote repository and merging them to the local repository. The entire command consists of 2 commands, git fetch after which a git merge command is used. 

4. Name some Git Commands and their function

• Git Config – This command configures usernames and email addresses.
• Git init – This command initializes a local Git repository.
• Git Diff – This command works by viewing the changes made to the file.
• Git Commit – This command commits the changes made to the head but not the remote repository.
• Git Merge – This command merges one branch into an active branch.

5. Difference Between Git Fetch and Git Pull

A git fetch command will download new data alone. The data will download from a remote repository. The new information will not be included in the working files. A git fetch command can be helpful in updating remote branches. The git pull command works by pulling new data and integrating it with the current files in working. The current HEAD of the branch is updated with new modifications from the remote server. The attempt of this command is to combine the remote modifications with the modifications that are made to the local files. 

6. What is a Merge Conflict and what is it’s resolution in Git?

When a merge of branches is attempted that have opposing commits, a conflict of merge occurs. In this situation, git will need help for selecting the changes that should be included in the final merge. 

For resolving the Github conflict, when there is a condition the line changes, that means when modifications have been made by different users to the same line, the following steps should be followed to avoid the conflict. 

• Step 1: Click Pull requests that are under the name of the repository. 
• Step 2: Click the merge conflict that you would like to resolve in the list of “Pull Requests”. Click Resolve conflicts that appear near the bottom of the pull request.
• Step 3: Decide whether you want to keep the changes of your branch, the changes of the other branche, or make new modifications that include changes from both branches. 
• Step 4: Next step is deleting the conflict markers and making the changes you want to be incorporated in the final merge. 
• Step 5: If the file has more than one merge conflict, go down to find the next conflict markers, and work by repeating the 4th and 5th steps for resolving the issue. Once done, the file should be marked as resolved. 
• Step 6: If there are a number of files that have the conflict, see the left part of the screen, and select the file you wish to work on under the conflicting files list. Resolving can be done by just following the above steps and merging the conflict in the pull requests. 
• Step 7: Click the button, commit merge, after all the conflicts have been resolved. Next, you should be clicking the merge pull request for combining the pull requests. 

7. What is Git Stash?

When the developer is working with the current branch and wants to switch to another branch for working in some other part, and does not want to commit the changes to the unfinished work, the solution is git stash. It takes the modified tracked files, saving them on a stack made for storing unfinished changes that the developer will be able to reapply at a later time. 

8. Difference Between Git Rebase and Git Merge

Assuming that the developer is working on a feature that is new for a dedicated branch, another member of the team pushed their commit to the master branch. 

Merge will be useful for incorporating the new commits in the feature branch. Every time the developer needs to include some modifications, they require an extra merging commit. This will taint the history of the feature branch. 

Rebase of a feature branch into the master branch can be done instead of merging. This will incorporate the new commits into the master branch. It will also re-write the history of the project using a brand new commit for each commit made in the original branch. 

HTML Interview Questions

1. Explain the meaning of Attribute in HTML?

An attribute is a property that can be placed in a tag in HTML. This can make changes to how the tag is displayed or even how it behaves. An attribute is added soon after the name of the tag inside the bracket. 

2. Explain Marquee in HTML?

A marquee tag is used to give a scrolling property to the text that is displayed on the webpage. The image will either scroll in any of the four directions. The element should be wrapped in a marquee tag. 

3. Explain Semantic HTML and its working?

The main feature is using HTML markup for emphasizing the semantics of the content or its meaning. In semantic HTML, the <b> tag is not used for making an element bold but the <i> tag is used for making an element italic. The <em> and <strong> tags could also be used. 

4. How is a Table displayed on an HTML Webpage?

For displaying data in the format of a table in HTML, the <table> tag is used. It is used for controlling the layout of the page similar to the head section, the body content, the navigation bar or the footer section. 

5. What is SVG in HTML?

This is a language that is used for describing the vector graphics. SVG pictures as well as their associated behavior is defined by the XML text files. The general use of it is for the x y coordinate system, diagrams such as pie charts and 2D graphs. 

6. How is a section of text separated in HTML?

The tags listed below can be useful for dividing sections of texts. 

• <br> tag – This is a tag that is useful in breaking a line of text. It will transfer the flow of the page to a new line by introducing a break in the existing line.
• <p> tag–This tag is useful for creating a paragraph of text.
• <blockquote> This tag is useful for indicating passages with big quotes.

7. How are Nested Web Pages created in HTML?

This can be easily done by referring to a webpage inside a webpage to make it a nested webpage. The use of built-in iframe tags in HTML can be an easy way of creating nested web pages. 

8. Difference Between Ordered and Unordered List

<ul> tags are used for making an unordered list and the elements in an unordered list are wrapped with a <li> tag. <ol> tag is used for making an ordered list and the elements of an ordered list are wrapped with a <li> tag as well. 

CSS Interview Questions

1. What are the different ways as well as the best way for including Styling in HTML?

The 3 major ways that are used to incorporate CSS in an HTML page are as follows:

• Inline CSS is the method in which a single element is styled within the tag. This method is generally used when the styling required is minimal for the element. 
• External Style Sheet: In this method, the style is incorporated into the HTML and is generally used when there is a need to apply styling to a number of elements. 
• Internal Style Sheet: This method is used when one HTML document has a large number of elements and a distinct style. 

2. Name the types of CSS Selectors

• Universal Selector (*)
• Child Combinator
• ID Selector (#)
• Class Selector (.)
• Descendent Combinator
• General Sibling Combinator
• Attribute Selector 
• Element type Selector

3. What are Sass, Less, and Stylus?

Sass stands for for syntactically awesome style sheets. It is generally preceded by a $ sign. Less stands for leaner stylesheets and it makes use of the @ sign for defining variables. Stylus lets the developer make use of a lot of flexibility while writing their syntax. It does not use the $ or @ sign for variable definition. 

4. Explain Box Sizing Property

This is the property that is used to define how the width and height of the box of elements are to be calculated.  

• Content Box – The width and height that is set by default here will be what is applied to the content of the elements. The border and the padding lie outside the box. 
• Padding Box – The dimensions are added to the contents of the elements as well as the padding. This is used for adding a border on the box outers. 
• Border Box – The dimensions mentioned here are the ones that are introduced gk the border, padding as well as the content of the elements. 

5. What are the different methods of hiding Elements in CSS?

• display: none – This will hide the content of the element and will not store it in the document object.
• visibility: hidden – This will add the element to the document objects and take up space. But it won’t be visible to the users. 
• position: absolute – This can make an element be visible outside the screen. 

6. What does ‘Important’ in CSS mean?

The keyword important is used for indicating that styling has the highest precedence. It will override the cascaded property. 

7. What are CSS Sprites?

An image sends an HTTP request which means that a webpage that has a larger number of images will take a longer loading time. A CSS sprite is useful in minimizing the time of loading the webpage. It is done by combining many small images into one image. This helps by decreasing the number of HTTP requests that are made and results in the page taking less time for loading. 

JavaScript Interview Questions

1. What is Callback?

It is a JavaScript function that is generally sent as a parameter or an argument for another method. This function is called when the function to which it is sent gets a call. 

2. Differentiate between Function Declaration and Expression?

Function Declaration in a JavaScript code is in a separate statement. It can be invoked before the function has been given a definition. This helps in improving the readability of the program. Function Expression is created inside a construct or some other expression. Its general purpose is as a function’s conditional declaration.  

3. Explain Cookies in JavaScript? 

It is a small piece of data that is sent by a webpage and stored in the device of the user by the browser that was accessing the webpage. A cookie is useful for remembering information for use later on as well as for keeping track of a browsing activity of a webpage. For deleting a cookie a user can set a date of expiry and a time limit. 

4. What are Closures in JavaScript?

A closure is the feature of javascript that allows an inner method to have access to the variables of an outer method. It has 2 scope chains:

• Access is given for variables that are defined within its curly braces, which is also its scope.
• It is given the ability to access a global variable.

5. Differentiate between Undefined, Null, and undeclared in JavaScript?

An undefined variable is one that is declared without assigning a value to it. A null is a value that can be assigned to a variable, meaning that variable will contain no value. A variable that is undeclared means that it does not have existence in the program. 

6. What is the best method of removing Duplicates from a JavaScript Array?

A duplicate can be deleted from an array in JavaScript with the help of a filtering technique. It makes use of a filter() function that is called using 3 arguments. The 3 arguments are the current element, it’s index and the array. A loop stores the elements that are related in another empty array.

ReactJS Interview Questions 

1. What Is JSX?

This term is used in react for describing how the UI should be. It is a syntactic extension of JavaScript. Structures in HTML can be coded in the same file as the JavaScript program with the help of JSX. This helps because it avoids the complication of structures of JS DOM. The comprehension and debugging of the code become easier with the help of JSX. 

2. What is Virtual DOM?

A virtual document object is a lightweight version of a real document object that is retained in the memory of React. Since nothing is on screen when the document object is being processed, it is slower than a virtual document object. When there is a change in the state of an object, a virtual document object will only work on the updation of that object and a real document object will update all. 

3. What are Extensions in  React Extensions? Name some.

React has numerous extensions that can cover the complete architecture of the application. It has a feature for rendering the server-side, provides support for creating mobile apps, and also has Redux and Flux in the mix. Flux is an application architecture of Facebook that helps in the development of online applications. For creating mobile applications, Native is helpful. 

4. What is a React Event? 

It is an action that is triggered by the system or the user action, such as the press of a button or a key. 

5. What is a Component in ReactJS?

A component is a block of an application in React, it represents a part of the UI. A component can be used in a single area of the application and reused in another. This is helpful in speeding up the process of development. Components can contain several other components. A render method must be defined by a component, and it should specify how the components will render the document object in a minimal form. A component can receive properties that are passed by the parent for specifying values. 

6. What is a State in React? 

It is an object that is meant for storing the value of the properties that belong to a component that could undergo a change in the future. A state can change because of the actions of a user or because of a change in the network. The component is rendered by React to the browser when there is a change in the state of an object. The state of the object can be initialized by a constructor. Multiple properties can be stored in the state object.