Magento Frontend Developer Certification Exam: Part 1

The Magento Frontend Developer Exam is a great way to prove your knowledge of Magento, some of my work colleagues were looking for guidance on how to prepare for the exam and simply what it involves. I felt it would beneficial to write a post on our blog for others should they need guidance.

No pain, no gain

Once you’ve applied for the exam you will probably go straight to download the Magento study guide expecting this to be your bed time reading for the next month. The study guide will only tell you what you should know, you will need to do some research to find the answers, this is where this set of blog posts come in.

So what’s the plan?

Over the coming weeks I shall be going through the Magento study guide and helping to give some answers and context to each of the questions posed. It should be noted this guide does not guarantee you will pass, but should be the start of your research process, hands on experience with Magento in a working environment is essential.

First things first

Download the Study Guide from the Magento Website, for each question we cover it is highly recommended you look at the Magento source code this will give you a practical example and help to improve your overall understanding of Magento. I also recommend starting with a fresh Magento install so any changes you make will be the result of the code you have added and not a conflict somewhere else.

Lets break it down

The best way to look at the Magento Exam is to break it down into several sections and the amount of questions they roughly take up in the exam.

0. Prerequisites

1. Use the Magento Design Fallback System (7%)

2. Use Layout XML to Customize a Theme (19%)

3. Create and Customize Template Files (16%)

4. Effectively use the Magento Block-Template Design System (11%)

5. Identify Where to Locate Files and Create New Files in the Theming-Related Directory Structure (7%)

Useful when compiling multiple sass files, the import rule allows the linkage of one css file from another.

What is the scope of variables in Javascript?

A variable declared outside a function, is a global variable. A global variable has a global scope, all scripts and functions on a web page can access it.

An undeclared variable that is assigned a value, will always be a global variable even if it executed inside a function.

If a variable is declared inside of a function it will have be a local variable. The variable will be deleted once the function it was declared in has been run. It will only be usable inside of that function.

How do closures work in Javascript?

This code should help to give some meaning to the explanation.

You would expect a variable is defined in a function to only exist while the function is being executed. A closure is a special kind of object that includes a function, and the environment in which that function was created.

The environment consists of any local variables that were in-scope at the time that the closure was created. In the example above showWorkplace is a closure that incorporates both the outputWorkplace function and the workplaceIntro string that existed when the closure was created.

What methods of inheritance implementation can I name in Javascript? How do they work?

In most languages, there are classes and objects. Classes inherit from other classes.
JavaScript has a prototypal inheritance as opposed to a classical inheritance.
Javascript uses prototypal inheritance this means that Javascript uses objects that act like classes.
This article should help to give a good understanding on prototypal inheritance.

What methods of page speed optimisation do I know?

Choose a decent Web Hosting company to reduce headaches when optimising your webpages.

Host assets such as images and videos on a separate server.

Enabling file compression on your server, the method to do this will vary based on your web server.

Minimise Redirects, the more redirects you have, the longer it will take a user to get to the destination page.

Reduce DNS Lookups,it can take around 20-120 milliseconds to resolve an IP address for a given hostname or domain name and the browser cannot do anything until the process is properly completed.

Minify Javascript & CSS files, this removes unnecessary or redundant data (such as code comments and whitespace, removing unused code, using shorter variable and function names) without affecting how the resource is interpreted by the browser.

Customise the header expiry date, using a customised expiry header means images, static files, CSS, Javascript skip a second http request when the same user reloads the page.

Optimise images, they should be compressed as much as possible without a obvious deterioration in quality, images should be resized for their purpose (double for retina images) and not be resized using CSS if possible.

Optimise CSS, using sass will help to greatly reduce the amount of code required to perform the same action, variables and mixins mean code can be repeated easily. CSS frameworks like Compass ensure browser compatibility.

How Google AdWords Paid Search Can Work For your Company

Magento Imagine 2017 Retrospective – Part 2: Keynotes

From Our Blog

Friday the 19th of January saw FrontEndNorth kick in to full swing for the 3rd time. Hosted by Make Do, FENorth, is a full day conference crammed full of Web Design, Development and Digital talks with a focus on FrontEnd technologies. Held every other year, it…