Front End Interview Questions One
What is Clear?
A clear is used when you do not require an element to twist another element, for example, float.
How do you ensure that your web design is user-friendly?
A front-end developer should talk about working together with user experienced designers to conceptualize and design a webpage that promotes a user-oriented experience, you can test your website with a sample of real customers to guarantee optimal design and promising the web page is optimized for mobile devices also.
What do you think are the fundamental skills a front end developer must have?
An effective front-end developer should have experience in the following languages: HTML jQuery CSS JavaScript Above are some of the basic skills that should be known to be a front-end developer. Other than all the technical skills a front-end developer must-have. Experience of using any Content Management Systems such as Drupal, Joomla, and WordPress. Knowledge about PHP and OOP. Cross-browser testing knowledge. Knowledge about SEO & tools like Flash and Dreamweaver that are used to present web-based knowledge to end-users.
What is the difference between Block, Inline, Box-sizing and Inline-block?
Block displays as an element of block, such as <p> or <div>. Inline is the default. <span> is an example of an inline element. Box-sizing expresses browser sizing properties. Inline-block shows an element as a container of the inline-level block.
What is CSS Rule?
CSS rules are applied by the web browsers to a file to affect the way it is displayed. A CSS rule is formed from: A set of properties that have values set to inform how to display HTML content. A selector that selects the elements you want to put on to updated values of the property. A CSS rule-set within a stylesheet controls the display of a webpage.
What is ClickJacking?
ClickJacking is a security attack in which the user fools to click on something while they think they are clicking on something else. The attack is most happened by the HTML frames. It is also known as the user interface redressing. It makes the user think that they are using a normal user interface in the web page, but actually, there is an unseen user interface in control; you can say that the user interface has been redressed. When users click something, thinking it is secure and safe, the hidden user interface performs another action.
Tell Me What Do You Know What Is A Closure?
Closures are usually functions, expressions that can function with a set of variables within a specific context. To make it easier, inner functions concerning the local variables of outer function generate closures.
Tell me about Cors and how does it work?
Cross-origin resource sharing (CORS) lets numerous resources (for example, JavaScript, fonts, etc.) on a web page to be demanded from another domain name from which resource initiated. It is said to be an instrument supported in HTML5 that controls the access of XMLHttpRequest to a different domain. New HTTP headers are also added by CORS that offers access to allowed domains. For HTTP approaches except GET (or POST with some types of MIME), the requirement orders that browsers should use HTTP OPTIONS request header to petition a list of supported approaches from the server. A real request can be submitted. Servers can inform customers whether "credentials" (including HTTP and Cookies Verification data) must be shown with requests.
Why HTML DOCTYPE is important?
DOCTYPE is like an instruction to web browser concerning in which markup language version the page is written. The declaration of DOCTYPE should be the first thing in a document of HTML, before <html> tag. The declaration of doctype points to a Document Type Definition. It offers rules for the markup language, so it allows the browser to understand the content properly.
What do you know about CSS float?
Float is used when you required to keep your web page element pushed to the left or right and make all other elements cover around it.
What are the benefits of REST web services?
Following are some of the benefits of REST web services: The learning curve is easy as it functions on the HTTP protocol No contract clears between client and server, so roughly coupled application. REST approaches can be easily tested on the browser. It also supports numerous technologies for data transfer, for example, XML, text, image, json, etc. It is a lightweight protocol
How to optimize the page through front end technology or code?
Following are some of the best practices of front-end technology that allows you to optimize the web page. Improve overall server response by dropping per page resource usageCombine all external documents of JavaScript into one document Eliminate block-level JavaScript and use asynchronous JavaScript Optimize image and use the correct image format. Use the design pattern of lazy loading for images with large size. Don't use plugins to improve the overall functionality. Prioritize noticeable content.Combine external files of CSS into a single file Use responsive design rather than making redirects based on device Use Minify JavaScript and stylesheet version. Use CSS best practices and arrange viewport. Load script in footer and style-sheets in the header.
Explain how variables differ in CoffeeScript than JavaScript?
For variables, you have to use a semi-colon at the end to execute it in JavaScript. There is no requirement to add a semi-colon at the end of the statement in CoffeeScript.
How do you make the structure of CSS and JavaScript easier to understand for other developers?
Front end developers have to work on the code that was previously formed by employees or function as team part. Following are some of the practices that a front-end developer should adopt to make their code understandable for other employees and team members. Should use proper comments in the code All the code is well organized Avoid using understandable Comments Use a consistent naming scheme Don't do Deep Nesting Reliable Indentation Code Grouping DRY Principle Limit Line Length All of the above-mentioned practices would help the fronded developers to make their code more readable and understandable.
What is the main difference between Prototypal and Class inheritance?
In JavaScript, inheritance is different from a lot of other development languages. In JavaScript the object system based on a prototype, not the class. Objects are only a collection of value pairs and name. As far as the inheritance is a concern, there is only one construct JavaScript: objects. Each object has a private property that comprises a link to other object known as the prototype of that object.
Why should we suggest JavaScript Or External CSS Versus Inline?
JavaScript or Inline CSS has a bad influence on the performance of the website. When you use inline scripts, your HTML code will weigh higher, while external scripts decrease the size of HTML file that helps to fast webpage interpretation. The code of HTML will not be cached on inline scripts. In other words, external needs, for example, JavaScript and CSS files, would be cached by the web browser visitor. Therefore, it decreases requests of https whenever the user clicks via web pages. It is also difficult to maintain JavaScript and Inline CSS code. Where it is more preferable to use code in one central location rather than changing the same code snippets spread all the files on a website.
Name some basic elements of design
LINE - The linear marks created with a brush or pen or the edge formed when two shapes encounter. DIRECTION - every line has a direction -Oblique, Horizontal or Vertical. Horizontal recommends stability, tranquillity and calmness. Vertical offers a feeling of, alertness formality, and balance. Oblique gives action and movement TEXTURE - Texture is the surface shape quality- soft hard glossy, smooth, rough etc. SHAPE - A shape is a self-contained well-defined geometric area (circles and squares), or organic (natural shapes or free-formed shapes). A negative shape is automatically made by a positive shape. SIZE - Size is just the connection of the area occupied by one shape to another. COLOUR - Color is light objects that reflect off. There are three main characteristics of colour, type or its name (red, blue, green, etc.), value (dark or light), and intensity (dull or bright).
What Is Load Balancing?
Load balancing is a very easy method for allocating capacities across numerous clusters or machines. The most simple and common algorithm of load balancing is called Round Robin. In this type of load balancing the request is divided in circular order ensuring all machines get an equal number of requests and no single machine is overloaded or underloaded.
Explain HTML meta tags.
Meta tags are passed as pairs of value/name Meta tags can comprise data about character description, encoding, document title, etc, Meta tags go inside HTML page's head tag Meta tags are not showed on the page but it is to be displayed on the browser
What is ReactJS?
ReactJS is an open-source front-end JavaScript library that is primarily used for creating user interfaces specifically for one-page applications. It is also used for managing the view layer for mobile and web apps. React was formed by a software engineer named Jordan Walke, who worked for Facebook. In 2011, ReactJS was organized on the newsfeed of Facebook and in 2012, on Instagram.
What is meant by SOLID? Explain its principles?
S.O.L.I.D stands for the first five principles of the object-oriented design by Robert C. Martin. S - Single-responsibility principle. A class must have only one purpose to change, it means that each class should have just one responsibility. O - Open-closed principle. entities or Objects must be open for extension but should be closed for adjustment. L - Liskov substitution principle. Allow the q(x) be provable about x objects of T type. Then q(y) must be verifiable for type S objects of y, where S is said to be a subtype of T. I - Interface segregation principle. A customer must never be enforced to apply an interface that it does not use or the customers must not enforce to base on methods they are not using. D - Dependency Inversion Principle. Entities should base on abstractions, rather than concretions. It states that the high-level unit should not base on the low-level module, but they must base on abstractions.
Tell me some benefits of Coffee Script over JavaScript?
Some of the major benefits of coffee Script over JavaScript are as follow: CoffeeScript has many lightweight add-ons such as Python style list comprehension and Ruby string Interpolation. It makes code of JavaScript more legible. It allows you to express the program in a shorter code. Using this you can make your everyday tasks easier to execute with CoffeeScript as compared with JavaScript.
What is Sass?
Syntactically Awesome Stylesheets also known as Sass is a CSS preprocessor that elegance and adds power to the basic language. It lets you use nested rules, variables, inline imports, mixins, etc. the syntax should be compatible with CSS. Sass supports to organized the large stylesheets, and keep the small stylesheets up and running. The CSS preprocessor is also a scripting language that widens CSS by permitting the developers to use one language to write code and then accumulate it in the CSS. What's the difference between "normalizing" and "resetting" CSS? Which one you would choose? Normalizing — conserves valuable default styles before "unstyling" everything. It fixes the errors and bugs for common browser needs. Resetting — is intended to strip the styling of default browser on elements. For instance, paddings, margins, font-sizes of elements are rearranging to be same. For common typographic elements, you have to redeclare the styling. It is a nice idea to select resetting when you have a very unconventional or customized website design that I want to do my own designing, there is no need for any default styling to be well-maintained.
Why do We Use the W3C standard code?
The goals of the W3C Standard Code are to guarantee cross-platform compatibility and compact sizes of file. These standards focus to separate "formatting " from "content " by applying CSS. It makes development and maintenance easier.
What is user-centred design?
User-centred design is said to be an iterative design procedure that allows the designers to focus on the customers and their requirements in each design process phase. The user-centred design calls for linking users in the design process throughout a variability of design and research methods so as to make highly accessible and usable products. User-centred design requires that designers use a combination of investigative (interviews and surveys) and generative (such as brainstorming) ways and instruments to build an understanding of user requirements.
Tell me about a Callback Function?
We can read JavaScript line by line. It can also result in a successive code line being performed before an earlier code line. A callback function prevents this situation since it is not called until the preceding code line has completely performed.
Tell me when and Why should I Use Webpack?
While making a complex Front-End application with a lot of non-code static possessions, for example, fonts, images, CSS, etc, then yes, you should use Webpack as it a lot of great benefits. If your application is very small, and do not have a lot of static resources and you just require to build one file of JavaScript to assist the customers, then Webpack should be more overhead than required.
Why should we use jQuery?
jQuery is a good option to choose because of the enormous benefits it holds. It is easy to learn and use. Cross-browser support (FF 1.5+, IE 6.0+, Opera 9.0+, Safari 2.0+) Large pool of built in approaches. Methods for applying or changing CSS, creating simulations. Loads of plug-ins for all types of requirements. Easily expandable. Easy to use for traversal and DOM manipulation. AJAX Capabilities. Event handling and detection
What is the difference between div and span?
span is an inline element div is a block element For bonus points, it is illegal to put a block element in an inline element, and though div can have a p tag, and a p tag can have a width, for span, it is not possible to have a p or div tag inside.
