If you're looking for Frontend Developer Interview Questions for Experienced or Freshers, you are at right place. There are a lot of opportunities from many reputed companies in the world. According to research UI Developer has a market share of about 3.0%. So, You still have opportunity to move ahead in your career in UI Developer. Mindmajix offers Advanced UI Developer Interview Questions 2019 that helps you in cracking your interview & acquire dream career as UI Developer.

UI Developer Interview Questions and Answers

Q1. How do you optimize a website’s assets?

Ans. File concatenation, file compression, CDN Hosting, offloading assets, re-organizing and refining code, etc. Have a few ready.

Q2. What are three ways to reduce page load time?

Ans. Reduce image sizes, remove unnecessary widgets, HTTP compression, put CSS at the top and script references at the bottom or in external files, reduce lookups, minimize redirects, caching, etc.

Q3. What kind of things must you be wary of when the design or developing for multilingual sites?

Ans. setting the default language, using Unicode encoding, using the ‘lang’ attribute, being aware of standard font sizes and text direction, and language word length (may affect layout).

Q4. What is HTML?

Ans. HTML stands for HyperText Markup Language. It is the dominant markup language for creating websites and anything that can be viewed in a web browser. If you want to get some extra bonus points, you can learn the HISTORY OF HTML and throw in some obscure facts.

Q5. What is the difference between HTML elements and tags?

Ans. HTML elements communicate to the browser how to render text. When surrounded by angular brackets <> they form HTML tags. For the most part, tags come in pairs and surround the text.

Q6. What is “Semantic HTML?”

Ans. Semantic HTML is a coding style where the tags embody what the text is meant to convey. In Semantic HTML, tags like for bold, and for italic should not be used, reason being they just represent formatting and provide no indication of meaning or structure. The semantically correct thing to do is use and . These tags will have the same bold and italic effects, while demonstrating meaning and structure (emphasis in this case).

Q7. What does DOCTYPE mean?

Ans. The term DOCTYPE tells the browser which type of HTML is used on a webpage. In turn, the browsers use DOCTYPE to determine how to render a page. Failing to use DOCTYPE or using a wrong DOCTYPE may load your page in Quirks Mode.

Q8. What’s the difference between standards mode and quirks mode?

Ans. Quirks Mode is a default compatibility mode and may be different from browser to browser, which may result in a lack of consistency in appearance from browser to browser.

Q9. What are the limitations when serving XHTML pages?

Ans. Perhaps the biggest issue is the poor browser support XHTML currently enjoys. Internet Explorer and a number of other user agents cannot parse XHTML as XML. Thus, it is not the extensible language it was promised to be.

Check Out UI Developer Tutorials

Q10. How do you make comments without text being picked up by the browser?

Ans. Comments are used to explain and clarify code or to prevent code from being recognized by the browser. Comments start with “*” and end with ” –>“.

Q11. What is the difference between linking to an image, a website, and an email address?

Ans. To link an image, use tags. You need to specify the image in quotes using the source attribute, src in the opening tag. For hyperlinking, the anchor tag, , is used and the link is specified in the href attribute. Text to be hyperlinked should be placed between the anchor tags. Little known fact: href stands for “HYPERTEXT REFERENCE.” When linking to an email, the href specification will be “mailto:send@here.com.”

Q12. My hyperlink or image is not displaying correctly, what is wrong with it?

Ans. It could be any number of things, but the most common mistakes are leaving out a tag bracket or quote missing for href, src, or alt text may be the issue. You should also verify the link itself.

Explore UI Developer Sample Resumes! Download & Edit, Get Noticed by Top Employers!Download Now!
Q13. What is the syntax difference between a bulleted list and numbered list?

Ans. Bulleted lists use the < ul > tag, which stands for “unordered,” whereas < ol > is used to create an ordered list.

Frontend Developers Interview Questions

Q14. How absolute, relative, static and fixed positions are different from each other?

Subscribe to our youtube channel to get new updates..!

Ans: Static: It is a default position, even if we do not specify any position or value for elements, the system automatically sets the default values, and they are unchangeable. The system follows first come first out strategy. That means whatever comes first that will be displayed first.

Syntax: position:static

Relative: If you want to change the position of the elements, you can use relative. When you are changing elements positions to a relative, it changes the position of the elements by using the below attributes. Attributes are as follows

Alignment: In this attribute, you can give the values like top, bottom, right or left according to that element position changes. 

Size: Mention in the pixels.  

Let us consider one example below.  

<html>
<div id="one"></div>
<div id="two"></div>
<style>
#one{position:absolute;right:100px;}
#two{position:relative;left:150px;}
</style>
<h1 id="two">Two</h1>
<h1 id="one">One</h1>
</html>

Output

One 
    Two 

Absolute: User can change the element position, and generally absolute will place relative to the parent. If a parent is not available to the page itself then default it placed as a relative position. 

Syntax:

position:absolute

Fixed: It will place the relative element to the browser window or viewport. When scrolling happens viewport doesn’t change. So the position is fixed for the element.

Syntax:

position:fixed
Q15. What is meant by a responsive website?

Ans: Any website that means to be responsive, when it fits any system screen resolution device types, looks good at any size, and understandable to the user. 

Q16. Explain the difference between inline, inline-block and block?

Ans:  Block: It will always starts in the new line and fills the right and left horizontal space on the web page. It can add margins and padding to the page. 

Examples of the Block are <div>, <p> tags. 

Let us consider an example here: 

.block-example
{
  background-color:green;
  Padding:20px;
}

2. Inline- Element: These elements do not start in the new line. They appear in the same line. In this, you cannot add space to top and bottom paddings to the page, but you can add space to the left and right on an inline element. Examples of inline elements are span, strong, img tags.

Let us consider an example here: 

.block-example
{
  background-color:green;
  Padding:20px;
}
strong
{
background-color:white;
padding-left: 20px;
padding-right: 20px;
}
span
{
background-color:white;
padding-left: 20px;
padding-right: 20px;
}

 

3. Inline-block: In these elements are similar to inline elements, but padding and margins added on all four sides. 

Let us consider an illustration over here.

.nav
{
  background-color:#F0B27A;
  Padding:20px;
list-style-type: none;
text-align: center;
}
.nav li
{
  display: inline-block;
 font-size: 20px;
  padding-left:20px;
  padding-right:20px;
}

 

Q17. Does HTML need a compiler?

Ans:  No, HTML need not to have any compiler, because it is a front end language, whereas Java, C, C+ need a compiler to convert the code into machine understandable language. 

Q18. What is the difference between document and window?

Ans:  Window is the first thing that loads into the browser. It has properties like inner width, inner height, length, name. 

The Document gets loaded inside the window object. It is similar to HTML, PHP, and other documents which are loaded into the browser and has properties like title, URL, cookies, etc.

Q19. What is web accessibility?

Ans: Web accessibility means to provide access to the website for differently-abled and disabled persons. So that disabled persons can understand, navigate, and interact with the web easily.

Q20. What is JavaScript hoisting?

Ans: This was frequently asked UI Developer Interview question. To access the variables in javascript the first thing you need to do is declaring the variables. If variables are defined at the bottom of the script but JavaScript throws the variables before it is undefined. In JavaScript, only assigned variables are hoisted.

Q21. Create An Array In Javascript With A-List Of5 Cities, Assign That Array To The Variable, City?

Ans: var City= [New york, ‘Texas’, ‘Chicago’, ‘Hyderabad’, ‘Montreal’];

Q22. How Do You Select All Elements With The Class Of “Apple” In Jquery?

Ans: To select all elements with the class of “Apple’ in Jquery is 

Q23. Declare A New Variable In Php Equal To The Number 6?

Ans: A variable in Php equal to the number 6 is  $number = 6;

Q24. How Do You Check If A Variable Has been Set In Php?

Ans: To check the variable in PHP use: isset($var);

Q25. How Do You Access A Get Requests Url Parameter With Php?

Ans: To access a Get Request URL parameter with the Php is  $_GET[“turkey”]

 Q26. What is the difference between HTML and XHTML?

Ans: Html is a hypertext markup language where XHTML is extensible hypertext markup language. Both languages are used to create web pages. XHTML is XML based while HTML is SGML based. Compare to HTML XHTML is strict and does not allow the users to get away with the lapses in coding and structures. 

File extensions of HTML:  .html, .htm
File extensions of XHTML: .xhtml, .xht, .xml, .html, .htm.
Q27. What is the difference between local storage, session storage, and cookies?
  • Local storage: It allows to store the data without expiry limits.
  • Cookies: It allows to store the data within the client-server.
  • Session Storage: It stores the data when the window was opened.
Q28. What can you do to increase page performance?

Ans: To increase the page performance, the following are the few steps.

  • Reduce image size.
  • Clear the cache.
  • Reduce the external HTTP requests.
  • Load the JavaScript asynchronously
  • Code your site for mobile. 
Q29.  Describe the new elements to HTML.

Ans: To change some of the features in HTML new elements used, they are semantic tags and multimedia and graphics tags. Semantic tags are a figure, header, footer, mark and multimedia, and graphics tags are audio, canvas.

Q30. Write about how floats work?

Ans: It pushes the element to the right or left. Float property has four values, and they are inherited, left, right and none.