Top 100+ Front End Developer Interview Questions And Answers
Question 1. Explain What Is The Lazy Loading?
Answer :
Lazy loading is a design pattern typically used in laptop programming to defer initialization of an object until the factor at which it is wished.
Lazy loading is loading code most effective once person needs it. For Example, there's a button at the page, which shows specific layout once person pressed it. So there may be no need to load code for that format on preliminary page load.
Question 2. Explain What Is The Difference Between Null And Undefined?
Answer :
null is an item without a value. Undefined is a type.
Typeof null; // "object"
typeof undefined; // "undefined"
HTML 5 Interview Questions
Question 3. What Is Variable Scope?
Answer :
JavaScript variables have functional scope.
Question 4. Explain What Is An Iife?
Answer :
IIFE stands for right now-invoked characteristic expression; it executes at once after created through including a () after the function.
HTML five Tutorial
Question five. What Is A Callback Function?
Answer :
JavaScript is study line with the aid of line. Sometimes, this will result in what looks like a next line of code being carried out previous to an in advance line of code. A callback characteristic is used to prevent this from taking place, as it isn't known as till the previous line of code has fully achieved.
HTML DOM Interview Questions
Question 6. Tell Me Why Do We Recommend External Css Or Javascript Versus Inline?
Answer :
Inline CSS or Javascript has terrible impact on web site overall performance.
Your HTML code will weigh greater as you operate inline scripts, while external scripts reduces HTML record length which enables speedy rendering of website.
HTML code will by no means be cached so inline scripts. Contrary to that, external dependencies, which includes CSS and JavaScript files, can be cached by way of the traveler's web browser. So it reduces https requests whenever person click on thru net pages.
It is hard to maintain Inline CSS and Javascript code. Where having code in just one centralized place is a lot more most excellent than changing precisely the same kind of code snippets spread all around the files within the net website online.
Question 7. Explain What "this" Is In Javascript?
Answer :
In JavaScript, 'this' commonly refers back to the object which 'owns' the technique, but it relies upon on how a characteristic is called.
CSS Tutorial CSS Interview Questions
Question eight. Do You Know What Is Cors? How Does It Work?
Answer :
Cross-beginning aid sharing (CORS) is a mechanism that lets in many assets (e.G., fonts, JavaScript, and so on.) on an internet web page to be asked from another area outdoor the area from which the aid originated. It's a mechanism supported in HTML5 that manages XMLHttpRequest get entry to to a site unique.
CORS provides new HTTP headers that provide get entry to to authorized beginning domains. For HTTP techniques aside from GET (or POST with positive MIME types), the specification mandates that browsers first use an HTTP OPTIONS request header to solicit a list of supported (and available) methods from the server. The real request can then be submitted. Servers also can notify customers whether or not "credentials" (including Cookies and HTTP Authentication records) ought to be sent with requests.
Question nine. What Is The Difference Between Json And Jsonp?
Answer :
JSONP is JSON with padding.
CSS Advanced Interview Questions
Question 10. Explain How To Use A Function A Class?
Answer :
feature functionName(call)
this.Call = call;
// Creating an item
var functionName = new functionName("WTEN");
console.Log(functionName.Name); //WTEN
CSS Advanced Tutorial
Question 11. Tell Me How Do You Clear A Floated Element?
Answer :
clean:both
WordPress Interview Questions
Question 12. Explain Why Table-much less Layout Is Very Important?
Answer :
There are several reasons why web designers need to forestall the use of tables for layouts, and undertake using CSS for controlling HTML layouts.
It adheres to modern-day W3C net standards and it improves accessibility of the statistics to a greater variety of customers, the use of a wide style of person agents.
There are bandwidth financial savings as big numbers of semantically meaningless <table>, <tr> and <td> tags are eliminated from dozens of pages leaving fewer, but greater meaningful headings, paragraphs and lists.
Layout commands are transferred into website online-extensive CSS stylesheets, which may be downloaded once and cached for reuse at the same time as every traveller navigates the web site.
If coded properly, CSS makes it easy to use worldwide modifications to the format
Web pages often have less code, and are an awful lot thinner while XHTML and CSS are used
Sites may additionally come to be more maintainable as the complete website can be restyled or re-branded in a unmarried bypass merely with the aid of changing the mark-up of the specific CSS, affecting every web page which is based on that stylesheet.
New HTML content material can be delivered in this sort of manner that regular format policies are straight away applied to it through the existing CSS with none similarly attempt.
HTML five Interview Questions
Question thirteen. Explain What Is An Anonymous Function?
Answer :
Anonymous functions are capabilities without a call. They are saved in a variable and are mechanically invoked (known as) using the variable name.
Var x = feature(a, b)
console.Log(a * b)
x(three, five); // 15
WordPress Tutorial
Question 14. Explain What Is Ajax? Write An Ajax Call?
Answer :
AJAX stands for asynchronous JavaScript and XML and lets in applications to ship and retrieve data to/from a server asynchronously (in the heritage) with out refreshing the web page. For example, your new Gmail messages appear and are marked as new even if you have not refreshed the page.
Question 15. Explain What Event Bubbling Is?
Answer :
Event effervescent causes all occasions within the infant nodes to be robotically passed to its determine nodes. The advantage of this method is pace because the code most effective needs to traverse the DOM tree once.
Java Abstraction Interview Questions
Question sixteen. What Is Stringify?
Answer :
stringify is used to convert JSON right into a string.
Javascript Advanced Tutorial
Question 17. What Are This And That Keywords?
Answer :
This and which are critical to variable scope in JavaScript. Here are some stackoverflow posts in this, that and self.
Javascript Advanced Interview Questions
Question 18. What Is Event Delegation?
Answer :
Event delegation allows you to keep away from including occasion listeners for unique nodes. Instead, you could add a unmarried event listener to a discern detail.
HTML DOM Interview Questions
Question 19. Why Do We Need To Use W3c Standard Code?
Answer :
The goals of such standards are to ensure pass-platform compatibility and extra compact document sizes. The awareness of those standards has been to split "content material" from "formatting" via implementing CSS. It eases upkeep and development.
Performance Management Tutorial
Question 20. How To Clear A Floated Element?
Answer :
A floated element is taken out of the file flow. To clear it you'll want to do a clean:both or strive overflow:auto on the containing div.
JQuery Mobile Interview Questions
Question 21. What Is A Float?
Answer :
Floats are used to push elements to the left or proper, so different factors wrap around it.
Question 22. Tell Us The Purpose Of Each Of The Http Request Types When Used With A Restful Web Service?
Answer :
The cause of every of the HTTP request kinds while used with a RESTful net provider is as follows:
GET: Retrieves statistics from the server (need to most effective retrieve facts and have to don't have any other effect).
POST: Sends information to the server for a new entity. It is regularly used whilst importing a record or filing a completed web form.
PUT: Similar to POST, but used to replace an current entity.
PATCH: Similar to PUT, however used to update handiest positive fields within an existing entity.
DELETE: Removes records from the server.
TRACE: Provides a way to test what a device along the network route receives while a request is made. As such, it in reality returns what changed into despatched.
OPTIONS: Allows a consumer to request records about the request strategies supported via a carrier. The applicable reaction header is Allow and it surely lists the supported strategies. (It can also be used to request information about the request techniques supported for the server in which the provider resides by means of the use of a * wildcard within the URI.)
HEAD: Same as the GET technique for a aid, but returns most effective the reaction headers (i.E., and not using a entity-frame).
CONNECT: Primarily used to establish a network connection to a aid (usually thru some proxy that may be requested to ahead an HTTP request as TCP and keep the connection). Once set up, the response sends a two hundred reputation code and a "Connection Established" message.
Question 23. How To Optimize The Page Using Front End Code Or Technology?
Answer :
Below is the listing of first-rate practices for front-stop generation, which enables to optimize page.
Improve server response by using reducing aid usage in keeping with web page
Combine all external CSS files into one document
Combine all outside JS files into one report
Use responsive layout as opposed to making tool based totally redirects
Use asynchronous Javascript and do away with block stage Javascript
Use Minify version of stylesheet and javascript.
Optimize Image and use correct format of Image. Use the lazy loading design pattern for large length of photos.
Use browser facet cache with Cache manage.
Avoid plugins to drive functionality.
Configure view port and use CSS nice practices.
Prioritize seen content material.
Load style-sheets in header and script in footer.
Advanced jQuery Interview Questions
Question 24. Have You Ever Used A Css Preprocessor/precompiler? What Are The Benefits?
Answer :
CSS preprocessors, including SASS, have numerous benefits, which includes variables and nesting.
CSS Interview Questions
Question 25. Do You Know What Is The Importance Of The Html Doctype?
Answer :
DOCTYPE is an guidance to the net browser about what model of the markup language the web page is written. Its written earlier than the HTML Tag. Doctype assertion refers to a Document Type Definition (DTD).
Question 26. What Is The Difference Between Responsive And Adaptive Development?
Answer :
In a nutshell, responsive is fluid and bendy, whereas adaptive adapts to the detected tool/display screen size.
Bootstrap3 Interview Questions
Question 27. Tell Me Where Do You Place Your Javascript On The Page?
Answer :
It may additionally rely upon what you're using it for. There is a few debate on this but typically an excellent query to invite to get an expertise of the JS information.
CSS Advanced Interview Questions
Question 28. Explain The Difference Between Inline, Block, Inline-block And Box-sizing?
Answer :
inline is the default. An example of an inline detail is <span>.
Block shows as a block element, which includes <div> or <p>.
Inline-block shows an element as an inline-degree block container. Here's an article on the topic.
Box-sizing tells the browser sizing homes.
Question 29. Explain What Is Web A Application?
Answer :
A high-quality question to feel out the intensity of the applicants expertise and experience.
A internet utility is an application utilizing internet and [web] browser technology to perform one or more duties over a network, typically via a [web] browser.
Performance Management Interview Questions
Question 30. Explain What Is The Importance Of The Html Doctype?
Answer :
The doctype announcement need to be the very first aspect in an HTML record, before the html tag.
The doctype statement is not an HTML tag; it is an education to the internet browser approximately what version of the markup language the web page is written in.
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, in order that the browsers can render the content effectively.
Question 31. What Are The Difference Between Get And Post?
Answer :
A GET request is normally used for things like AJAX calls to an API (insignificant modifications), whereas a POST request is commonly used to shop facts in a database or put up information through a shape (vast adjustments). GET requests are much less comfy and may be visible by means of the user inside the URL, while POST requests are processed in steps and are not visible by way of the user. Therefore, POST requests are more cozy.
Question 32. Explain What Is The Difference Between A Prototype And A Class?
Answer :
Prototype-based totally inheritance permits you to create new gadgets with a unmarried operator; class-primarily based inheritance lets in you to create new objects through instantiation. Prototypes are more concrete than classes, as they are examples of gadgets in preference to descriptions of format and instantiation.
Prototypes are critical in JavaScript due to the fact JavaScript does not have classical inheritance based on training; all inheritances happen thru prototypes. If the JavaScript runtime cannot locate an object's property, it appears to the item's prototype, and maintains up the prototype chain till the assets is found.
Question 33. What Is The Difference Between Call And Apply?
Answer :
observe helps you to invoke the characteristic with arguments as an array. Call requires the parameters to be listed explicitly. Also, test out this stackoverflow solution.
WordPress Interview Questions
Question 34. Explain The Difference Between Visibility:hidden; And Display:none?
Answer :
Visibility:Hidden; - It is not seen but takes up it is original space.
Display:None; - It is hidden and takes no space.
Question 35. Tell Me The Difference Between Visibility:hidden; And Display:none;?
Answer :
Visibility:Hidden; - It is not visible but takes up it's original area.
Display:None; - It is hidden and takes up certainly no space as though it changed into in no way there.
Question 36. How To Increase Page Performance?
Answer :
Sprites, compressed photos, smaller pictures;
encompass JavaScript at the bottom of the web page;
minify or concatenate your CSS and JavaScript; and
caching.
Java Abstraction Interview Questions
Question 37. Do You Know What Is A Sprite? How Is It Applied Using Css? What Is The Benefit?
Answer :
A photo sprite is a collection of pics placed into one single picture.
Using css positioning you could display and disguise exclusive components of the sprite depending on what you want.
Sprites reduces the number of http requsts hence lowering load time of web page and bandwidth
Buy Buttons using Sprite as heritage:
Both buttons use the equal history image. The simplest differece is within the positioning.
Here is the actual historical past photo:
And the CSS.
<style>
.OrangeBuyBtn
background: url('buyButtons-bg.Gif') repeat-x zero zero;
border-coloration: #5B5752 #6B6B6B #808080;
border-fashion: solid;
border-width: 1px;
coloration: #FFFFFF;
cursor: pointer;
font-length: 14px;
font-weight: formidable;
.GreenBuyBtn
background: url('buyButtons-bg.Gif') repeat-x zero -24px;
border-colour: #5B5752 #6B6B6B #808080;
border-fashion: strong;
border-width: 1px;
colour: #FFFFFF;
cursor: pointer;
font-length: 14px;
font-weight: formidable;
</style>
Question 38. Explain The Difference Between Static, Fixed, Absolute And Relative Positioning?
Answer :
static is the default.
Constant is positioned relative to the browser.
Absolute is placed relative to its parent or ancestor element.
Relative is located relative to everyday positioning/the item itself. Used by myself it accomplishes nothing.
Question 39. How Do Browsers Read Css?
Answer :
From right to left.
Question 40. Explain Some Common Ie6 Bugs And How You Dealt With Them?
Answer :
Ie6 is not dead, just ask China which represents a nice chew of the worlds online population. Your pages have to at the least be functional on IE6, except you dont care approximately half the worlds populace.
Javascript Advanced Interview Questions
Question 41. What Is A Clear?
Answer :
A clear is used when you don't need an detail to wrap round some other element, which include a go with the flow.
Question forty two. What Is The Difference Between Html And Xhtml?
Answer :
HTML is HyperText Markup Language used to increase the website.
XHTML is cutting-edge version of HTML four. XHTML is an HTML that follows the XML rules which ought to be well-formed.
JQuery Mobile Interview Questions
Question forty three. What Is A Javascript Object?
Answer :
A collection of information containing both properties and techniques. Each element in a file is an object. Using the DOM you can get at each of these elements/gadgets and perform a little cool sh*t.
Question 44. What Is The Difference Between Form Get And Form Post?
Answer :
Get:
With GET the form statistics is encoded right into a URL by way of the browser. The shape records is seen inside the URL allowing it to be bookmarked and saved in net records. The form statistics is restrained to ASCII codes. Because URL lengths are limited there may be barriers on how a great deal form statistics can be sent.
Post:
With POST all of the call price pairs are submitted within the message body of the HTTP request which has no restrictions on the duration of the string. The call cost pairs can not be seen inside the net browser bar.
POST and GET correspond to unique HTTP requests and they range in how they are submitted. Since the records is encoded in in another way, different deciphering can be wished.
Question 45. Explain The Difference Between == And === ?
Answer :
The 3 same symptoms suggest "equality with out kind coercion". Using the triple equals, the values have to be equal in kind as nicely.
== is identical to
=== is exactly same to (fee and kind)
zero==false // genuine
0===fake // fake, because they are of a different kind
1=="1" // genuine, car kind coercion
1==="1" // fake, because they're of a extraordinary kind
Question 46. Do You Know What Is A Closure?
Answer :
Closures are expressions, normally features, which could paintings with variables set within a positive context. Or, to try and make it less complicated, inner features referring to nearby variables of its outer feature create closures.
Question forty seven. Do You Know What Is The Difference Between == And === ?
Answer :
== is same to
=== is exactly equal to (cost and kind)
Question 48. Tell Me Are You Familiar With Jasmine Or Qunit?
Answer :
Jasmine and QUnit are JavaScript checking out frameworks. I would familiarize yourself with the fundamentals.
Question 49. What Is The Difference Between A Host Object And A Native Object?
Answer :
Native - present in JavaScript. Host - existing inside the surroundings.
