Landing a job is hard work. While it’s impossible to know the answer to every question that an interviewer may asks you, there are a few common questions that you can prepare for.
People have no idea of what kind of frontend interview questions to expect when you’re applying for a job.
In this article, I’ll share some frequently asked Frontend interview questions from different interviews for programmers at different levels of experience.
Here is my list of some of the most frequently asked coding interview questions from frontend job interviews:
Machine Coding Interview Questions:
- Create product result page (with filter, sorting) using vanilla JS
- Create autocomplete
- Create Calendar
Top Javascript Interview Questions
- Difference between let, var and const
- What is context in JS?
- Difference between map, reduce and filter
- Difference between class and function
- Normal Function vs Arrow function
- Difference between async and defer
- Difference between == and ===
- Difference between setTimeout and setInterval
- What are the different DOM API’s
- DOM vs Virtual DOM
- How Event loop works
- What is event delegation
- Difference between call, bind and apply
- Explain Promise
- Throttling vs Debouncing
- What is Closure and why should we use closure
- What are the different internal storage and its differences
- What is variable hoisting
- Difference between document.ready(){} and window.onload(){}
- What is async, preload, prefetch in script
- Callback vs Promise
- Explain Currying
- Questions related to flatten array
- Call by value vs Call by reference
- Prototypal inheritance
- How do you optimise page performance
- Write polyfill for Filter, Reduce, Promise
Top CSS Interview Questions
- Explain display properties and its difference
- Explain position properties and its difference
- Difference between div and span
- What is box model
- Difference between display: none; visibility: hidden; opacity: 0;
- Create a Modal
- What do you know about sprites
- What are the different CSS preprocessor
Top HTML Interview Questions
- What is DoctTYPE
- What are the HTML5 tags
- What is semantic HTML
Web Browser Related Questions
- How does browser works
- Cross browser testing
- A/B testing
- HTTP1 vs HTTP2
- CORS
- CI/CD
Tools Related Questions
- Webpack
- Babel
- What is tree shaking
Other framework questions
- Explain how react works
- Why are we using redux, state management.
- React LifeCycle methods
- Hooks Concept
- Explain Context API
- What is ref in React
- Difference between pure component, function component and class component in React
- What is Server Side rendering
- What are the different testing techniques
I will try to add answers for the above questions soon. Good luck and let me know if you have any questions in comment section or @suprabhasupi 😋
| 👩🏻💻 Suprabha.me |
Top comments (24)
It’s good to remind developers and enthusiasts about questions that might be asked in an industry, but I see these kind of almost copy-paste articles about interview questions all the time.
I’ll leave my thoughts for the author and those who are interested in learning more.
I find it a poor style to just randomly add 3 library names in Tools and consider that to be clear to a beginner/mid developer. Most of the time nobody will ask you about how Babel or webpack works unless you need to work directly with these libraries. So if the job does not need these skills directly, learn this on a need to know basis if you wish.
Never have I ever heard questions to write a poly fill. However, might be useful to understand from a standpoint that browsers don’t always have compatibility in all APIs.
How does a browser work? I’m sorry what? Are you asking me how spider monkey engine is working? Or maybe V8 and chromium? Understanding V8 is useful and sometimes asked, but if somebody asks you to tell them how a browser works then it’s either a very specific or high leve position or they have no clue how to conduct an interview.
Other framework questions seem to be from someone only/mostly familiar with react. There’s also angular, vue, svelte, (you might consider also Django, Flask, Vaadin), etc.
CI/CD has nothing to do with web browser. It’s a concept from DevOps. Better browser questions are related to browser tooling (Lighthouse, profiling, etc) and differences in supporting APIs (SVGs, etc)
There should be a string of questions about testing that has nothing to do with frameworks. After those, if needed, you can ask framework testing specifics.
All in all, this article at least reminded me of reiterating my knowledge on some questions like how does event loop work which is an important question imho.
Yes, I agree that there are many copy-paste question on web, that’s why I felt this is important to put out some ‘Real’ interview questions which has been asked during my interviews.
I have been interviewed with 25+ company which includes amazon, microsoft and gojek. This article is intended for frontend devs including beginner and mid-level engineer. As a good engineer, one should try to understand the system. May it be babel or webpack one should understand what role do the play in project.
If you are building something for browser, you should atleast know how it works. Some time interviewer ask vague questions to understand how interviewee approach to unclear statements and how does they clarify by asking counter questions like: do you want to know how does browser render? Or how does it work under the hood? Asking right questions is a very useful skill as a software engineer.
Here in Bengaluru bar is high for frontend dev in good companies and people expect you to know basic understanding of browser and it’s really simple: developer.mozilla.org/en-US/docs/W...
developers.google.com/web/fundamen...
I was mostly asked react related questions. This article is having only the question I was asked but not all the question you might get in frontend interview. There’s a big difference here.
As a frontend engineer you should be familiar with all the parts of software development lifecycle which includes deployment too. At gojek we are responsible for managing our own production setup and deployment and same is true at uber too. Limiting frontend role into just browser is not right and may be harmful in long term.
Thanks for sharing your point of view, I hope this was helpful 🙂
I agree that asking vague questions might make the candidate show his way of thinking. Sometimes I find it not as helpful as concrete questions. On a daily basis you google a lot instead of memorizing everything.
Altogether, as an engineer you should know at least the basics of other concepts that might not be directly related with your day to day responsibilities. However, if you master “just the browser” that goes a long way even without understanding other parts. Emphasis on master. :)
Thats correct
I've just wasted 2 months doing "prep" courses from Flatiron, Kenzie, Springboard, GA and doing online "beginner" tutorials from MDN, freecodecadamey, a course through SoloLearn and Udemy, plus about a half dozen youtube tutorials. .... and find that I can answer only about 3 of the javascript question (and even though, not with complete certainty.
any suggestions of "beginner" tutorials online that would teach all of this, or am I just better off to google each question and take the info in that way?
TIA
I get where you are coming from. I am working through a similar situation and am in the final stages a little tool that should help me with both approaching these questions and memorizing the core concepts. It is functional enough to use if you would like. (link below) I was intending it for my own use, but feel free to see if it will help you, (or anyone reading this).
The main issue I find with most of the articles, sites and courses is they either are way too limited in their content or focused on all the big questions and difficult answers while completely ignoring all of the small questions. I wanted some way to get everything randomly asked,, have a timer running and then be able to log my performance. In other words, as close to simulating an interview experience as possible. Also, I wanted to be able to do this over, and over and over. I have seen many who do well in coding interviews that repetition was key for them.
At any rate, feel free to use this and, if you (or anyone) does, please let me know typos, bugs, etc. Like I said, it is usable, but will likely need some polish and little bug fixes.
Right now it has around 350 questions in five different categories (HTML, CSS, JavaScript, Algorithms & Data Structures and Non-Coding) all marked either "Basic" or "Advanced". You can get all questions or filter by top and/or level.
For Front-End questions, on the filter below the "New Questions" button, click HTML, CSS, JavaScript and Non-Coding to only get these questions. The Algorithms and Data Structures questions might not apply to a Front-End interview.
Note: If you do not click on any filter options then you will get questions from all topics. This si the default behaviour.
Below is the link. Again, if you (or anyone) uses it, please just let me know any issues. Also, I would love to hear feature ideas and definitely let me know if you find the tool helpful.
glassinteractive.com/interview-que...
Enjoy and best wishes on the job search and adventure!
-Mike
The interview questions tool is ready. I had to fix a couple of things I found after I posted the reply above, but it should be fully usable for anyone wanting to use it.
2 months is relatively very short time. I have been coding since past 5years. So don’t beat yourself up, if you don’t know all the answers.
There is nothing called waste here. If you have prepared for 2months, then I am sure you would have learnt many things from that courses.
Also I would recommend you to start giving interviews. It will help you to grow. So, you will understand your weakness and gaps in understanding of technologies. You should also ask your friends to take mock interviews that will help you a lot. (Solving the problem under pressure is very different experience)
The question which I added above, its just a subset of the question which I was asked during my interviews.
Since you have discovered a lot of questions which you don’t know the answers, I would highly recommend to research on web, MDN is a great resource you will find answers of most of the questions from MDN advanced section.
If you have any questions feel free to DM on twitter @suprabha11
All the best 👍🏻
There's a question under HTML - what are the HTML5 Tags... there are 125 of them (as far as I can find). What is this question actually asking?
Explain display properties and its difference... same thing here, as there are 27 of them. and is that a different question from this one:
Difference between display: none; visibility: hidden; opacity: 0;
No you are not suppose to learn all the different HTML5 tags and their usage(we have google for that 😂 ). That being said you have to understand most frequently used HTML5 tags like canvas, video, header etc.
Also you should be aware of all the display properties, because in every interviews they asked different question that are around display properties (i.e. flex, table, block, table, etc).
Yes,
Difference between display: none; visibility: hidden; opacity: 0;is totally different question, as visibility and opacity are different CSS properties.Great list of questions, but I think that in order to really do well during a frontend interview, you also need to determine the right topic areas of interest for a given employer and also make sure that your soft skills shine during the interview. You should be able to provide evidence of your experience in this area. This recently published article of ours shows exactly how to do it: bit.ly/3fwCi9X It was made in cooperation with our Head of Frontend who routinely conducts frontend interviews, so yeah – he knows what he's talking about. ;)
Hey,
This is really a useful resource. Additionally, I was preparing questions from this guide We could also add few more basic questions under HTML like:
1 - What are tags and attributes in HTML?
2 - What are void elements in HTML?
3 - Is the tag and tag same?
4 - Define Image Map?
5 - What are Semantic Elements?
Thanks!!
So many questions to cover! Definirely ooking forward to all your articles/answers 🙏
yeah, sure. 😋
Thanks for these questions. I am currently looking for a front-end dev role in Bengaluru and I believe this blog would be helpful.
Add answers...
Try to resolve and share it via github, everyone can join :-)
yeah, will try to add answers soon.
Perfect, I am curious
Great post!! These are indeed the real questins.
Just fyi. I think you meant to write map, reduce, filter instead of map, reducer, filter.
yeah my mistake 😂 thanks for pointing out. will change it.