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:

<head>
	<style>
		.l-container{
			max-width: 1280px;
			margin-left: auto;
			margin-right: auto;
		}
		/* … */
	</style>
</head>

<head>

<style>

.l-container{

max-width: 1280px;

margin-left: auto;

margin-right: auto;

}

/* … */

</style>

</head>

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

<head>
	<link rel="stylesheet" href="path/to/file.css">
	<!-- … -->
</head>

<head>

</head>

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):

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Vlad

var animal = {
   say: function() {
       return 'I\'m ' + this.name;
   }
};
var dog = {
   name: 'Oxxymiron',
   size: [20, 30],
};
dog.__proto__ = animal;
alert(dog.size);  // 1
alert(dog.say()); // 2

var animal = {

say: function() {

return 'I\'m ' + this.name;

}

};

var dog = {

name: 'Oxxymiron',

size: [20, 30],

};

dog.__proto__ = animal;

alert(dog.size); // 1

alert(dog.say()); // 2

In this case, everything is clear, as alert outputs the size of the object “dog”.
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):

var animal = {
   say: function() {
       return 'I\'m ' + this.name;
   }
};
function Dog(name){
   this.name = name;
}
Dog.prototype = animal;
Dog.prototype.constructor = Dog;
var slava = new Dog('Slava KPSS');
alert(slava.say()); // I’m Slava KPSS

var animal = {

say: function() {

return 'I\'m ' + this.name;

}

};

function Dog(name){

this.name = name;

}

Dog.prototype = animal;

Dog.prototype.constructor = Dog;

var slava = new Dog('Slava KPSS');

alert(slava.say()); // I’m Slava KPSS

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.

Partner With Us Looking for a partner that will help you to grow your business? We are the right company to develop your webstore. Feel free to get in touch with us. We will be happy to discuss your business opportunities and provide you with a Free Quote. Talk to Vlad

Tags: