Front End Developer Interview Questions

Q11: When would you use AngularJS vs jQuery?


  • jQuery - is a DOM manipulation library - has nothing to do with models - lacks a two-way binding capability - gets complicated to manage as project size grows - Sometimes additional code is required to provide the same functionality as in Angular.
  • Angular - is an MVVM Framework - Used for developing SPA (Single Page Applications) - Has essential features like routing, directives, two-way data binding, models, dependency injection, unit tests, and so on - is modular - maintainable as project size grows - is fast, and so on.

Essentially, jQuery is a single tool (it addresses a single problem: dom-manipulation), but AngularJS is a full toolbox with a variety of solutions for various issues (routing, modelbindings, dom manipulation, etc.). JqLite (a subset of jQuery) is included with AngularJS and is used to overcome the dom-manipulation problem.

Q12: Name fundamental principles of design

Ans: The following are the fundamental design principles:

  • BALANCE— Design balance is related to physics balance. A big form towards the center can be balanced by a little one near the periphery. A design's stability and structure are provided through balance. It is the amount of weight distributed in the design as a result of the arrangement of your pieces.
  • PROXIMITY— Proximity establishes a connection between components. It serves as a focal point. Proximity does not imply that pieces must be put together; rather, it implies that they should be visually linked in some way.
  • ALIGNMENT— This enables us to build order and organization. Aligning elements enables them to form a visual link with one another.
  • REPETITION— By connecting separate components, repetition strengthens a design. It aids in the formation of associations and consistency. Rhythm may be created by repetition (a feeling of organized movement).
  • CONTRAST— The juxtaposition of opposing components (opposite hues on the color wheel, or value light/dark, or direction — horizontal/vertical) is known as a contrast. We may use contrast to accentuate or highlight crucial components in your design.
  • SPACE— In art, space is defined as the distance or area between, around, above, below, or inside components. Positive and negative space are both essential aspects to consider in any design.

Q13: Why should we suggest JavaScript Or External CSS Versus Inline?

Ans: JavaScript and inline CSS have a negative impact on page performance. When you utilize inline scripts, your HTML code will be heavier, but external scripts reduce the size of the HTML file, allowing for faster webpage interpretation.

HTML code will not be cached for inline scripts. In other words, the web browser visitor would cache external necessities such as JavaScript and CSS files. As a result, whenever the user navigates through online sites, it reduces the number of https requests. It's also tough to keep JavaScript and Inline CSS code up to date. Where it is best to utilize code in a single central area rather than updating the identical code snippets throughout a website's files.

Q14: What are deferred and async attributes on a < script > tag?

Ans: If neither attribute is present, the script is downloaded and performed synchronously, and processing of the document is halted until it is completed (default behavior). Scripts are downloaded and run in the order in which they are encountered.

The defer attribute downloads the script while the document is still parsing but waits until the parsing is complete before running it, which is comparable to executing within a DOMContentLoaded event listener. Deferred scripts will run in the order specified.
The async property downloads the script while processing the page, however it will stop the parser to run the script before it has finished parsing completely. Async scripts are not always executed in the same sequence. Both attributes must be used only if the script includes a src attribute (i.e. not an inline script).

<script src="myscript.js"></script> <script src="myscript.js" defer></script> <script src="myscript.js" async></script>

Q15: What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?


  • Resetting — is intended to remove all default browser styles from components. For example, all elements' margins, paddings, and font sizes are reset to the same value. Styles for popular typographic components will need to be redeclared.
  • Normalizing — rather than "unstyling" everything, it keeps helpful default styles. It also fixes issues with common browser requirements.

It's a good idea to select resetting when you have a highly customized or unusual site design in which I need to perform a lot of my styling and do not want any default styling to be kept.