Magento Front End Developer Certification. Prerequisites

Magento Front End Developer Certification. Prerequisites

The article is dedicated to the basic knowledge any web developer should possess. The structure of the article is based on the question-answer approach that helps to acquire knowledge in double-quick time.

Which new features are included in HTML5?

1. New short doctype <!DOCTYPE html>

2. The attribute type for tags <script src="app.js"> and <link rel="stylesheet" href="styles.css"> is no longer required

3. New tags:

  • article
  • aside
  • figure/figurcaption
  • header/footer
  • main
  • nav
  • section

4. New attributes for an HTML form:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • list
  • multiple
  • novalidate
  • pattern
  • placeholder
  • required

5. New types for HTML form fields:

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

6. Multimedia content is supported now. It’s allowed to embed video into the page with the tag <video> and audio with the tag <audio>.

7. The tag <canvas> has been added. Using js and API you can work with graphics in the browser.

8. There are a great number of Javascript API available: Canvas, Drag and Drop, File API, File System API, Fullscreen, Indexed DB, Offline, Performance, Pointer Lock, SVG, Typed Arrays, Web Audio, Web Sockets, Web Storage, Web Video, Web Workers, WebGL, WebRTC.

How can CSS be introduced into an HTML page?

CSS can be introduced by several ways:

1. Using the attribute html of the tag style, for example: <span style="color: red">red text</span>
2. Using the tag <style>, for example:

3. Linking an external style file with the tag <link>, which is declared in the header of the document, for example:

wherein the attribute href you should specify a file path relative to the document or domain.

What methods of inheritance implementation are used in JavaScript? How do they work?

Currently, there are 2 methods based on object prototype chain which is used for inheritance implementation.

1. Inheritance with __proto__

A connecting link between objects is __proto__ property, in which we record the object, its properties, and methods which we want to inherit (it is not compatible with IE 10 and earlier versions):

  1. In this case, everything is clear, as alert outputs the size of the object “dog”.
  2. In this case, alert turns to the method “say” of the object “dog”, but can’t find. Then it starts searching in its prototype dog.__proto__, which is reference to the object “animal”.

Searching for properties/methods of the object by the chain __proto__ will be repeated until we reach the last __proto__. Usually, this is the prototype of the global object “Object” which such methods as toString, hasOwnProperty are specified with.

2. Inheritance with constructor function creating objects via “new”

The method described above is not cross-browser and works for objects. In order to assign new objects with prototype automatically, it’s necessary to set the constructor with prototype property. When creating an object via “new“, the reference from constructor function prototype is stored in its prototype.

For example (it works in all browsers):

Which methods of page speed optimization do I know?

There are a lot of ways to enhance speed optimization:

  • Compress all resources (js CSS HTML) and images;
  • Decrease the number of requests. You can combine all js or CSS files;
  • Don’t block page rendering. We need to transfer all scripts (<scripts>) keeping their order before the tag </body> (exceptions are scripts with the attribute async);
  • Use browser caching;
  • Reduce the server response time.

Moreover, the list of online services to check your page load performance is presented here.

  1. webpagetest;
  2. gtmetrix;
  3. pagespeed.


Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *