In our previous posts, we have provided HTML Interview questions and CSS Interview questions with answers, but in this post, we will be focusing on front-end developer interview questions and answers, which will include questions from HTML, CSS, jQuery, Bootstrap etc.

front-end-developer-Interview-Questions-min.jpg

What is the difference between HTML and HTML5?

HTML5 is the newest version of HTML, here is the difference between them:

  • HTML5 supports both audio and video whereas none of these was a part of HTML
  • HTML5 allows JavaScript to run in background using Web-Worker API while it is not possible with HTML.
  • In HTML5 vector graphics are possible with new html tags <canvas> or <svg> while in old HTML you had to use silverlight or flash for it.
  • HTML5 allows drag and drop, while HTML doesn't allow it.
  • Using HTML5 it is possible to draw shapes like cicular, rectangular, while it is not possible with old HTML.
  • Attributes like charset, async and ping are absent in HTML while Attributes of charset, async and ping are a part of HTML 5.
  • Elements like nav, header were not present in HTML while HTML5 contains web-structure elements like nav, header.

What is the difference between SVG and Canvas?

SVG:

  • SVG is Object Model-based.
  • Scalable Vector Graphics (SVG) is used to define 2D vector based graphics for the Web
  • The Document Object Model (DOM) has the subpart as multiple graphical elements.
  • With HTML, Visual presentation is created and by CSS it is modified or programmatically through the script.
  • Accessibility is supported by SVG markup and object model directly.
  • Good scalability, can be used at any resolution, with high quality.

Canvas:

  • Canvas is pixel based.
  • Canvas can be used for either a 2D or 3D drawing context.
  • Through script, we can create visual presentation and modified programmatically.
  • Worst scalability, not suitable for higher resolution and printing.

What does a doctype do?

DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.

How do you serve a page with content in multiple languages?

We can use language attribute in HTML to declare default HTML language.

When the page contains content in another language, add a language attribute to an element surrounding that content.

Use the lang attribute for pages served as HTML, and the xml:lang attribute for pages served as XML. For XHTML 1.x and HTML5 polyglot documents, use both together.

What is the difference between a cookie, sessionStorage and localStorage?

LocalStorage as it's called it's local storage for your browsers, it can save up to 10MB but it persists even when the browser is closed and reopened.

SessionStorage does the same, but as it's name saying, property maintains a separate storage area for each given origin that's available for the duration of the page session i.e as long as the browser is open, also can save less than LocalStorage, like up to 5MB.

Cookies are very tiny data storing in your browser, that can save up 4KB and can be accessed through server or using browser.

What are the benefits of Coffee Script over JavaScript?

  • CoffeeScript allows you to express your program with a lot less code than JavaScript
  • Easier to use than Javascript
  • Has lots of light-weight addons
  • Encourages the use of good JavaScript patterns
  • Makes code more readable.

How do you ensure that your web-design is User Friendly?

You can ensure your web-page is user friendly by providing sample pages to real users and you should also make your website mobile friendly in design using CSS Responsive media queries or Bootstrap.

What is CSS Float?

Float is used when you want to keep your web page element pushed to the left or right and want to place all other elements around it.

What is CSS Rule?

A CSS rule consists of a selector and declaration and holds for all instances of an element. You can create a CSS class that provides an exception to a stated rule. You can also create a CSS ID, which is an exception that applies to only one element, one time in a page.

What is SASS? What are it's benefit?

Sass (which stands for 'Syntactically awesome style sheets') is an CSS preprocessor that enables you to use things like variables, nested rules, inline imports and more.

It also helps to keep things organised and allows you to create style sheets faster.

  • Sass facilitates you to write clean, easy and less CSS in a programming construct.
  • It contains fewer codes so you can write CSS quicker.
  • It is more stable, powerful, and elegant because it is an extension of CSS.
  • It provides nesting so you can use nested syntax and useful functions like color manipulation, math functions, and other values.

When and Why we should use Webpack?

 Webpack is a bundler. So, webpack basically bundles all your assets and files into bundles.

  • We use webpack because we need to import stuff from place, This is a good pattern.
  • We use webpack because we know we need to concatenate and compress our JavaScript
  • It improves performance.

What is Ajax? What are the advantages of using it?

Ajax stands for asynchronous JavaScript and XML (although in modern usage, JSON may be substituted for XML). Essentially, Ajax is a set of web development tools that enable developers to change parts of a web page in the background without reloading the entire page.

What is RESTful Web Service?

REST stands for Representational State Transfer, an architectural style that has largely been adopted as a best practice for building web and mobile applications.

RESTful services are designed to be lightweight, easy to maintain, and scaleable. They are typically based on the HTTP protocol, make explicit use of HTTP methods (GET, POST, PUT, DELETE), are stateless, use intuitive URIs, and transfer XML/JSON data between the server and the client.

How do you get Data from REST API and show it in front-end?

We can get data from REST API in the form of JSON and then append the content of JSON data or use it in the HTML page.

For example, we can call C# API using jQuery Ajax and then loop through JSON data to append it in HTML table or show it to user in dropdown etc.

What is the difference between XHTML and HTML?

HTML and XHTML are both markup languages in which web pages are written. The main difference between the two is that HTML syntax is SGML based while XHTML syntax is XML based.

Explain what are the difference between Get and Post?

A GET request is generally used for get data from server using API, whereas a POST request is typically utilized to save data in a database or submit data through a form, using API.

Explain the difference between classes and IDs?

Classes and ID selectors, both are utilized as hooks for CSS styles or to add events like click, change using jQuery/Javascript.

You can assign same class to multiple HTML elements, while you can only assign a ID to one element in HTML page.

What does this keyword do in JS?

this is used to refer to the object it belongs to. The concept of this is similar to dynamic binding in other high-level programming languages.

var student = {
  firstName: "John",
  lastName : "Doe",
  id       : 007,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

What is Sass?

Sass stands for Syntactically Awesome Stylesheet. It is a CSS Preprocessor that can optimize the CSS code by introducing features like variables, nested rules, mixins, and in-line imports.

What are CSS image sprites and why it is used?

CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.

Image sprites come is useful as image resources will have to be loaded only once.

What is stringify in Javascript?

Stringify is a JSON method that is used to convert a JavaScript object into a string.

JSON is a standard structure to send and receive data between client and web server, and when we want to send data to the webserver, the object needs to be a string.

Example:

const newJoke = {
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke));

You may also like to read:

Javascript interview questions and answers

jQuery Interview Questions and Answers

XML Interview questions and Answers