Frontend Interview Questions [Top 250+]

 To be a successful frontend developer, you need a combination of technical skills, problem-solving abilities, and a good understanding of user experience design. Here are some essential skills for frontend development:

1. Proficient in HTML: Understanding the structure, semantics, and best practices of HTML is essential for creating well-structured and accessible web pages.
2. Strong CSS Skills: CSS is used for styling and layout. You should be proficient in CSS fundamentals, including selectors, box model, positioning, responsive design, and CSS frameworks.
3. JavaScript and Frameworks: JavaScript is a core language for frontend development. Familiarity with JavaScript and its libraries/frameworks like React, Angular, or Vue.js is crucial for building interactive and dynamic web applications.
4. Responsive Design: Ability to create responsive layouts that adapt to different screen sizes and devices is essential for delivering a consistent and user-friendly experience across various platforms.

Front End Developer Interview Questions for Freshers

HTML Interview Questions For Freshers

1. What are the new features of HTML5 ?
2. What is the purpose of the doctype declaration in HTML5 ?
3. What would happen if I would not declare doctype in html ?
4. What are data attributes in HTML5 and how are they used ?
5. What is the difference between HTML and HTML5 ?
6. Difference between SVG and Canvas ?
7. What is the difference between localstorage , session storage and cookies ?
8. What are the void elements in HTML ?
9. What is BOM (browser object model ) and what is the root object in it ?
10. What are the various formatting tags in HTML ?
11. In how many ways you can display HTML elements ?
12. What is the difference between a tag and an attribute ?
13. What are data attributes in HTML5 and how are they used ?
14. What are different types of list in HTML ?

CSS Interview Questions For Freshers

1. Explain CSS position properties ?
2. What is the difference between display inline , display inline block and display block ?
3. What are the different types of Selectors in CSS ?
4. What are pseudo elements and pseudo classes ?
5. What are new features in CSS3 ?
6. What is the box model in CSS3 ?
7. In how many ways can we add CSS to our HTML file?

JavaScript Interview Questions For Freshers

1. What are the data types in JavaScript ?
2. What is an object in JavaScript ?
3. In how many ways we can define an object in JavaScript ?
4. How to define a class in JavaScript ?
5. What is defineProperty() method of javascript Object ?
6. What is scope in JavaScript ?
7. Explain variable hoisting ?
8. Explain closures in javascript ?
9. Difference between null and undefined ?
10. Difference between == and === ?
11. What are the new features in ES6 , which were not there in previous JavaScript version ?
12. Explain time complexity ?
13. What is space complexity ?

14. What will be the output of the below code: let obj ={ a: 10, vir : function(){ x(); console.log(this.a); function x(){ console.log(this.a) } } } obj.vir();

15. What will be the output of the below code for (var i= 0; i < 5; i++){ setTimeout(() => console.log(i)); }
16. What will be the output of the below code :- var a = 90; doit(); function doit(){ console.log(a); var a = 10; }
17. Explain call(), bind() and apply() in JavaScript ?
18. Advantage of using arrow functions ?
19. What is webpack and babel ?
20. How can we add an element at the start of a JavaScript array ?
21. How to capitalise all the first letters of a given string ?
22. What will be the output of below code snippet :-function x() {return 2}alert(x());function x() {return 3}
23. What will be output of following code doit(); var doit = function (){ alert('x'); }
24. Difference between pass by value and pass by reference ?
25. What will be the output of following code:- for (var i= 0; i < 5; i++){ (function(i) { setTimeout( () => console.log(i)) })(i); }
26. What is InstanceOf operator ?
27. What is the use of constructor() in a class ?
28. What will be the output of the following :
    console.log(4.toString());
    console.log(4.2.toString());
    console.log(4*undefined);
29. How can we use javascript Set to remove duplicate elements of an array ?
30. What is the data storage limit of a cookie ? and what is the maximum number of characters that can be stored in a cookie string ?
31. How to make deep copy and shallow copy of objects ?
32. What's the difference between for loop and for each loop ?
33. What is a unary function ?
34. What is JSON in javascript and what are its advantages ?
35. What is JSON.stringify() ?
36. What is JSON.parse() ?

Angular Interview Questions For Freshers

1. What is a Single page application ?
2. What is Angular and what are its key features ?
3. What are the lifecycle hooks in an Angular component ?
4. What is the difference between ng serve and npm start?
5. What is the difference between ‘dependencies’ and ‘dev-dependencies’ properties in package.json ?
6. What are the types of forms available in Angular ? Explain with syntax.
7. How to implement routing in Angular ?
8. What are the ways to share data between 2 components in Angular ?

Git Interview Questions For Freshers

1. What is git and what are the most useful commands ?
2. Why git is most popular ?
3. Explain the difference between 'git pull' and 'git fetch' ?
4. What command is used in git to change your working branch ?
5. What is the difference between git and GitHub ?
6. How do you rename a branch in Git ?
7. Describe the purpose and functionality of the '.gitignore' file ?
8. What things to be considered while reviewing a pull request ?
9. What is the purpose of the 'git stash' command ?
10. How do you resolve a merge conflict in Git ?
11. What is the difference between Git's "merge" and "rebase" operations ?

Source:- Frontend Interview Questions For Freshers

Frontend Interview Questions For Experienced

HTML Interview Questions For Experienced

1. What is the use of aria hidden attribute ?
2. What are some important points related to accessibility ?
3. For accessibility which screen reader is used for which browser ?
4. What are web workers ?
5. Which html elements were used before HTML5 for embedding video into the website ?
6. What is an image map ?
7. What does semantic HTML mean ?
8. What are the new features of HTML5 ?
9. Explain use of meta tags in HTML ?
10. What is view state and session state ?
11. What should be preferred for storing tokens localstorage or session storage or cookies and why ?

CSS Interview Questions For Experienced

1. Difference between Display none and Visibility hidden ?
2. What are the new features in CSS3 ?
3. What is the difference between active and focus pseudo classes ?
4. What is CSS box sizing property ?
5. What is the box model in CSS ?
6. What is the meaning of 1. div ~ p 2. div + p 3. Div > p in CSS ? important
7. How do you create a responsive design using CSS3 ?
8. How to align an element both vertically and horizontally at the center of it’s parent element ?
9. How to animate in css ?
10. How to create a half circle using css ?
11. How to create a triangle using css ?
12. What are the limitations of CSS ?
13. How to create a carousel using css ?
14. What is SCSS ?
15. What are mixins in SCSS ?
16. What are the benefits of using CSS preprocessors ?
17. How can you implement responsive images ?
18. Explain CSS flexbox with example ?
19. In CSS flexbox how to to put a child div which is on 3rd position inside the parent to top inside the parent container ?
20. What is the difference between CSS grid and CSS flexbox ?
21. How to create a 9 square boxes with 3 rows and 3 columns using css ?

JavaScript Interview Questions For Experienced

1. What is Callback hell ?
2. Explain promises in JavaScript ?
3. Difference between observable and a promise
4. How to create custom events in JavaScript ?
5. Difference between prototype and _proto_ ?
6. Explain prototypal inheritance in JavaScript ?

7. Difference between for in and for of loop ?

8. Difference between get and post methods ?
9. Difference between post and put methods ?
10. When we pass an object to a function are they passed by reference or by value ?
11. What do u understand by the terms mutable and immutable in JavaScript ?
12. What is Async and Await in JavaScript ?
13. Is array a data type ?
14. How can we overwrite any JavaScript inbuilt property (like array.push())
15. Explain exception handling in JavaScript ?
16. Difference between a transpiler and a compiler ?
17. How to check if a number is an integer without using math function and without converting number into string or array ?
18. Use of JavaScript clearInterval() ?
19. How to define a private method or variable inside a class in JavaScript or ES6 ?
20. Can arrow functions be used as constructor functions ?
21. What is Map in JavaScript ?
22. How to implement authentication in a website ?
23. How would you implement pagination using JavaScript ?
24. Difference between a browser tab and a window in context of localstorage and sessionstorage ?
25. What is oauth in context of jwt ?
26. What is nginx used for ?
27. How to change the redirection URLs after the build has been made ?
28. What is a JWT , what are it's parts and what is its use ?
29. What are ‘set’ in javascript ?
30. Do we have reverse() method on javascript string ?
31. Name some array methods in JavaScript ?
32. Which operation is faster among == and === ?
33. Explain Array's sort method for sorting numbers. What is the time complexity of this method ?
34. What is Micro frontend architecture ?
35. What is the difference between first class function and higher order function ?    
36. What is temporal dead zone ?
37. Difference between put and patch method in javascript ?
38. How to convert an object to an Array in JavaScript ?
39. What is memoization in JavaScript ?
40. How to write a function ‘Sum’ such that on calling sum(a)(b)(c)....() where a,b,c etc are numbers , the output will be a+b+c+....(function calls with parameters) ?
41. What are the design patterns in JavaScript ?
42. What is event loop in JavaScript ?
43. How to deep clone in JavaScript ?
44. How to flatten an array in JavaScript ?
45. What is debounce in JavaScript ?
46. Write a code to flatten the contents of an object ?
47. How to create virtual dom in JavaScript ?
48. What is critical rendering path ?
49. What is a freeze method in JavaScript ?
50. What are solid principles in JavaScript ?
51. What is the seal method in JavaScript ?
52. Difference between Angular and React ?
53. How to watch variable changes in JavaScript ?
54. How to create a change detection mechanism of JavaScript framework ?
55. What is functional programming in JavaScript ?
56. What is the use of function currying in JavaScript ?
57. What is quick sort and what is it’s time complexity ?
58. Explain bubble sort and insertion sort with example ?
59. What is a REST API ?
60. How to apply conditional breakpoints in chrome browser debugging tool ?
61. Why storing JWT in cookie is safer than storing JWT in session storage or local storage? Is storing in cookie 100 percent safe ? what if I copy JWT from cookie in the browser debug panel and use it in a CSRF attack ?
62. What is an execution context and lexical environment in JavaScript ?
63. What is generator function in JavaScript ?
64. What are JavaScript iterators ?

Angular Interview Questions For Experienced

1. What are the ways to share data between 2 components ?
2. What is lazy loading in Angular ?
3. What are custom directives in Angular and how to create them ?
4. What is the difference between ng serve and npm start ?
5. What is the difference between ng add and npm install ?
6. Can we use jQuery in Angular 2/4/5 ?
7. What is replay subject in angular ?
8. What is the difference between adding styles and scripts in angular.json and adding styles and scripts in index.html ?
9. What is the difference between cold observables and hot observables ?
10. What are the properties inside @ngModule decorator ?
11. How to generate a component using cli command without creating its spec file ?
12. What is RxJS ?
13. What is the use of HttpClientModule ?
14. Is it necessary to define a constructor in a component ?
15. What are the security features in angular ?
16. What is testbed in Jasmine ?
17. What is the difference between Subject and Behaviour Subject ?
18. What are the advantage of using observable instead of promise for http request ?
19. Difference between authorization and authentication. Explain the basic difference and also in the context of an angular application ?
20. What is AOT in Angular ?
21. How to create custom pipe in Angular ?
22. What are inbuilt Angular pipes ?
23. Explain Software version nomenclature (semantic versioning) ?
24. What is the use of tilde(~) and caret(^) sign in package.json ?
25. What are interceptors in Angular ?
26. Can we rename dist folder in Angular Project ?
27. How would the browser Know that your app is an Angular based app ?
28. How to make multiple http calls in parallel in Angular ?
29. What is a module in TypeScript, and how can you use it ?
30. How to hit an API before the loading of the appComponent ?
31. If there is a package(or say library) that is not available through NPM , then how would you use it in your angular application ?
32. How to implement treeshaking in Angular ?
33. What can be the values of 'providedIn' property of @injectable decorator ?
34. How to optimize Angular application using OnPush change detection strategy ?
35. Can event triggered in parent cause change detection in child with OnPush strategy in Angular ?
36. Can event triggered in child cause change detection in parent with OnPush strategy in Angular ?
37. What is the latest Angular version and what are the new features added in it ?
38. What are the types of forms available in Angular ? Explain with syntax.
39. What are dynamic forms and how to create them in Angular ?
40. How to show error messages on form controls ?
41. How to use a service only for a specific component instead of the whole module ?
42. Can you put ngIf and ngFor on same element ?
43. What's the difference between Observable and Subject ?
44. How does ng serve work ?
45. How to improve Angular app performance ?
46. What is AuthGuard in Angular ?
47. Explain the canActivateChild route guard ?
48. What is the difference between Canload and canActivate route guards ?
49. Explain switch map , mergemap , forkjoin, combineLatest, concatMap, exhaustMap . what would happen if any of the requests fails in switch map , merge map or forkjoin ?
50. What is dependency injection ?
51. What's the difference between debounce and setTimeout ?
52. What are RxJS key features ?
53. What is the difference between 'from' and 'of' operator in RxJS ?
54. How do you handle errors in RxJS observables ?
55. What is the purpose of operators in RxJS, and can you give an example of a common operator ?
56. What are services in Angular ?
57. What is the difference between AOT and JIT ?
58. What are the different building blocks of Angular ?
59. How do you use the retry() operator in RxJS, and what is its purpose ?
60. What is Angular change detection and how does it work ?
61. How to dynamically create form fields with FormArray in Angular ?
62. How to optimize an Angular application ?
63. Explain pure and impure pipe in Angular ?
64. Explain unit testing in Angular ?
65. How to test an Angular Service ?
66. Explain ngAfterContentInit hooks ?
67. Explain ngAfterViewInit hook with example ?
68. Difference between ngAfterContentInit and ngAfterViewInit ?
69. What is View Encapsulation in Angular ?
70. What is the use of polyfills ?
71. What is scan operator in RxJS ?
72. How does spyOn work in Angular ?
73. How to mock http request in Angular ?
74. What is zone js in Angular ?
75. What is ngZone in Angular ?
76. What is reduce operator in RxJS ?
77. What is the use of trackBy in Angular ?

Git Interview Questions For Experienced

1. How do you remove a file from a Git repository ?
2. How do you undo the last Git commit ?
3. How do you view the Git commit history ?
4. What is tagging in git ?
5. What is rollback in git ?
6. What is git bisect command ?
7. What is the use of Reflog in git ?
8. How does Git handle file conflicts when merging branches ?
9. What are Git hooks, and how can they be used in a repository ?
10. Explain the concept of "cherry picking" in Git and how it can be done ?

  Source:- Frontend Interview Questions For Experienced

JavaScript Coding Interview Questions (Freshers/Experienced)

1. Write a code to display which character is coming how many times in a given string ?
2. Write a function to check whether a string is a palindrome or not with time complexity of the code ?
3. Given an array containing some numbers write a code to that will find out the missing numbers in the array's range ?
4. Write a code to reverse all the words of a given string. For example :
   Input : “how are uoy”
   Output : “Woh era you”
5. How to segregate 0s and 1s in an array in Javascript ?
6. Write a function to check if an anagram of a string is palindrome or not ?
7. Write a code to check if two strings are anagram of each other ?
8. Write a code to group items of array by category ?
9. How to get the maximum count of consecutive 1's in an array ?
10. How do you write a factorial code in JavaScript ?
11. Given an integer array, find the subarray with the largest sum, and return its sum ?
12. How to merge two sorted arrays in JavaScript ?
13. How do you check if a value is a prime number ?
14. How to reverse a string in JavaScript using recursion ?

Source:- JavaScript Coding Interview Questions

Frequently Asked Questions

1. What skills do you need for front end ?
2. What makes a good UI developer ?
3. Is frontend more difficult ?

Source:- Frontend Interview Questions Top 250+

For more questions and answers visit our website at  frontend interview questions