Magento Front End Developer Certification Exam Study Techniques

When the time finally comes to begin preparing for your Magento Front End Developer Certification Exam it can be hard to figure out where exactly to start. Even though I created the Magento Front End Developer Certification Exam Study Guide for all of those taking the exam, you’ll need a little extra help knowing where exactly to focus your effort. I’m not going to lie, I failed the exam on my first try! After going through it twice, and passing on my second try I now feel more confident in my ability to help guide others by showing them what to focus on while studying. I can tell you which topics you’ll need to know very well and the ones you don’t need to waste time on – this can be one of the most frustrating parts when preparing for the exam.

I won’t be telling you the exact questions and answers, partly because I have heard they updated the exam a few months after I took it, and partly because I don’t remember most of them. I also want you to pass based on your own merits! That being said, I have put together a more general view of each topic I remember being asked about, and I have also added a few studying techniques that I used myself that proved to be effective.

Study techniques

magento study techniques
Practice makes perfect, which is why the best way to study will be to not only read on the topic, but actually play with the code and see if you can make it work! It’ll help you remember things more easily. For this you will want to have a Magento installation available on your computer meant only for testing, something you’re not afraid to break. After you’re done with that step we can get started. Here’s a link to our easy and simple Magento installation guide to help you start the process.

Don’t miss out on our downloadable study guide, available here!

Folder Structure
Know Your Syntax
addItem vs addJs or addCss action methods
XML Layout Handles
Moving Blocks in Local.xml
Xml Update Handles
Admin Panel Configuration
Website, Store, and Store Views
Path Hints
Design Layout Update Field
Category Management Admin Page
CSS Shorthands
CSS Specificity
Javascript
PHP
Prototype
All Magento Translation Methods
Magento Transactional Emails
Theme Fallback

Folder structure

The more you work with Magento, the more sense its structure will make, you’ll begin to see the patterns everywhere and it kind of makes you feel like Neo from The Matrix. You don’t need to know these patterns by heart but you do need to be familiar with Magento’s front end folder structure – especially the parts we use the most like the catalog folder and the page folder – so you want to make sure you’re comfortable with these.

Know your syntax

There will be multiple choice questions where the choices are chunks of code that only differ by a couple words, this is where your syntax knowledge comes into play. You want to be fully confident in your XML syntax skills. Practice writing out XML from memory, try declaring blocks, adding all the necessary attributes and also try typing out some action tags with methods. Type it without looking at an example – of course, and then keep checking back to see if you got it right, a good idea would be to grab a pen or pencil and write it on a piece of paper.

addItem vs addJs or addCss action methods

The syntax of this XML code is also something that would be very good to know by heart. I should point out though that the text inside of some of the tags used as parameters for these methods could be anything. Magento doesn’t look for this text, it simply looks for any opening and closing tag that match each other and that match the position of a certain parameter.

The main differences between these two methods is that addItem is more general, it can have conditional <if> parameters to target different browser versions, and you can specify in which directory Magento looks for your file. addJs and addCss on the other hand are more specific as their names suggest, they have a parameter to specify any extra details to include in the <script> or <link> tag and they have set paths where Magento will look for the file without the need to specify it (addJs will grab the script from the root/js directory and addCss will grab it from the skin directory) . To get a good idea on how to use these, you can look at the default/layout/page.xml file. What will matter the most for the exam will be the syntax, so take a good look and remember how the parameters are used for each.
(reference blog post: http://blog.liip.ch/archive/2013/10/24/adding-javascript-and-css-files-to-head-section-of-magento.html)

XML layout handles

What are these? What are they for? How do you use them? Those should be easy for you to answer! Knowledge of XML layout handles are a huge part of a Magento Front End Developer skill set. They are the handles that tell Magento in which pages it should be rendering a particular set of blocks. Every page in a Magento site has at least one handle associated with it. Make sure you know the most used ones by heart, which again will be anything related to product list <catalog_category_view>, product view <catalog_product_view> and product types like <PRODUCT_TYPE_simple> for example.

To see all other product type handles, check out our Magento Front-end Certification Exam Guide Q&A.

You will also want to know the difference between <catalog_category_view>, <catalog_category_default> and <catalog_category_layered>. As you may already know, Magento categories can be filterable by attributes if the “Is Anchor” option in its Display Settings is set to “Yes”. If that is the case, the attributes filter will be displayed in the sidebar, which then adds a “layered” navigation functionality to the category. The <catalog_category_layered> handle will target this type of category page, but if you ever needed a block to be rendered only when the category has no attribute filter (which means no layered navigation) you would need to use the <catalog_category_default> handle instead. The <catalog_category_view> makes things simple by targeting both types of category pages.

I learned recently a neat way to display all the available handles on a particular page, just place this line of code

<?php var_dump(Mage::app()->getLayout()->getUpdate()->getHandles()) ?>

in any template that gets rendered on the page you’re checking and a list of all the handles that target that page will be displayed, give it a try!

Moving blocks in local.xml

Understand clearly how to move blocks from one place to another in local.xml. You first have to unset the child and use the method insert or append to put it somewhere else.

You need to know the difference between the unsetChild and remove methods. When you use unsetChild think of the block as a sticker you’re peeling off to stick somewhere else, and remove would mean you’re peeling off the sticker and throwing it in the garbage where it will stay forever until someone makes a new sticker just like it. To have a better understanding on how to do this, take a look at this other blog post (link to moving blocks in magento xml blog post). You can use that Magento install I mentioned earlier, the one you’re not worried about breaking and actually move some blocks around yourself to see how it works. Hint, you will need to know how to move the layered navigation block from the sidebar to on top of the product listing on the category page, so inside of content instead of left.

XML update handles

You will be asked about this as well. All you need to know is that <update handle=""> is used inside of another handle to make that other handle render all of the blocks and rules found inside of the update handle. If you want to see how it is used, you can find an example of it in base/default/layout/catalog.xml. Basically, the update handle is being merged with the current handle that is wrapping it.

Admin Panel Configuration

To pass the Magento Front End Developer Certification Exam you need to be fully comfortable with certain parts of the admin panel as well. Make sure you know the Design tab under System > Configuration like the back of your hand. Know all the fields under the Themes tab by heart; Translations, Templates, Skin (Images / CSS), Layout and Default. Understand the relation between packages and themes. A package should always contain one default theme, and any other themes in there should be a variation of default. If a theme is completely different, it should probably go in a separate package.

To learn more about themes and packages click here.

You may have never used it but there is actually another Design area in the System drop down on the same level as Configuration but closer to the top. You need to know what this area is for and it’s actually very easy to decipher; if you take a close look you’ll see that all it’s for is to set a scheduled design change on the site from one date to another. This is something that you would probably do on events or holidays such as Black Friday/Cyber Monday and Christmas.

Website, Store and Store Views

The relationship here is very straight forward, all you should know is that these are configuration scopes and that a website can contain one or more stores and stores can contain one or more store views. When you’re in the System > Configuration panel you are able to switch between these scopes with the drop down menu in the top left corner. After one of those is selected you will see check boxes next to each field on the right that will let you know if that configuration field is defaulting to a parent scope or if it’s only targeting its own scope.

Configuration-scope-checkboxes

In the image above, you can see that the Configuration Scope is set to Store View, which is why the check boxes say Use Website which is the parent scope of Store View. Those fields are defaulting to whatever was set on the Website Configuration Scope and are uneditable until that check box gets unchecked.

Path Hints

If you are a Magento front end developer and you don’t know what the template path hints are, you’re missing out. They will show up as red lines that wrap around each block on your page and they can tell you which template file is responsible for rendering these blocks as well as showing you the block class they are using.

Turning them on is very simple, you can find them under System > Configuration > Advanced tab in sidebar > Developer and once you are there it will be the third tab called Debug. Make sure your Current Configuration Scope in the top left is not set to Default Config because that is the only scope it will not work on. Select either your Website or Store View scope and change both drop down options to “Yes” and voilà. Save it and go refresh your website. It may look very broken but don’t freak out! Everything will be back to normal after you turn them off.

It gets a bit more advanced when you get into the different configuration scope check boxes and when you add specific Allowed IPs but all you need to worry about is what these path hints are for, as explained two paragraphs ago.

Reasons why template path hints may not show up:
1. You’re in the wrong configuration scope.
2. Some configuration scope has specific “Allowed IPs” in the Developer Client Restrictions tab.
3. You haven’t cleared cache.

Design Layout Update Field

Have you ever played with these? They can come in handy very often! These fields can be found under the Design and/or Custom Design tabs for many elements in the admin panel, including but not limited to CMS Pages, Category Pages and Product Pages. This field is meant as an extension of your local.xml file where specifying the handles needed for the blocks or actions is not required, because you’re kind of making these changes directly on the page already so you can just start with the reference tags.

Design-layout-update-field

Category Management Admin Page

Become very familiar with this page. You can access it by going to Catalog > Categories > Manage Categories. Ask yourself questions like, what can I use this page for? What does the Add Root Category button do? What is a Root Category? What does the Add Subcategory button do? Silly questions I know, but I’m trying to draw your attention to where it needs to be. Look through all the tabs. There is no need to memorize anything here, just make sure you know where to go whenever you want to do something specific to your Magento site’s category tree.

CSS Shorthands

No news here for a front end developer, CSS shorthands should be second nature. Who wants to write out a style for each top, right, bottom, and left margins each in a line of their own when you can just do margin: top right bottom left; some of my favourites are background: and border: shorthands. Knowing all of these will help you be a more efficient front end developer and you will also add more points to your exam results.

My advice here while studying would be to make sure you pay close attention to the order in which the styles are placed inside of the brackets (remembering this is very important) and do not forget the font: shorthand!

CSS specificity

This is something else that shouldn’t be news to a front end developer, we all know that CSS selectors have different weights and specificity levels. A basic list from highest weight to lowest will include attributes, IDs, classes and HTML elements; however there are also pseudo-classes, pseudo-elements, inline styles and more. And of course, the more selectors you combine into one, the highest the specificity of your styles, which means they’ll be harder to overwrite.

Even though this is all pretty straight forward, calculating specificity just by looking at a group of selectors can get tricky. I’d suggest playing around with an actual calculator like this one.

You will want to be comfortable calculating these on the fly before you take your certification exam. They will give you some HTML markup with a few CSS selector combinations with different styles in each, and you will have to choose the style that was able to overwrite all the others, the most specific one.

JavaScript

It’ll be very helpful to know your JavaScript basics, nothing too complicated. Make sure you know about variables, how to stop events and items similar to these.

PHP

Become familiar with the way Magento uses PHP variables in template files, what does it mean when a variable name has a leading underscore? Or what makes a PHP variable public, private or protected?

Prototype

If you are like me, you dread the moment the word prototype comes up while working with Magento; it’s just one of those steep learning curve things that we keep putting off. Prototype may be outdated, but in Magento it is actually quite powerful if you take the time to understand it. There are plenty of useful functions in there! It is worth knowing how it works and how to extend it. Don’t worry too much if this is not your forte, prototype is not too big of a component in the exam. If you are aiming for a perfect score though, a good place to start your research/studying is Alan Storm‘s website – he’s the kind of guy any Magento developer can look up to.

And here’s a quote from Phil Winkle (another very well known Magento developer who now has all four Magento certifications)

“Aside from jQuery being lightly adopted during the development of Magento we must consider another aspect:

Magento was developed around 2007 at a time when TC39 was proposing EcmaScript 5 and it was not fully implemented or developed. Prototype.JS aimed to solve this issue by bringing ECMA5 features to legacy browsers which lacked support at the time. Prototype attempted to fill this need first and foremost and so it was adopted by the developers of Magento to bring ECMA5 features to the frontend framework being developed.

Another consideration is that one of the pillars of the Magento platform was extreme flexibility and extendability. Prototype provides the ability to have OOP-like features where you can create new objects that extend or inherit from other given objects and call the super class directly from child classes. It’s quite powerful in that regard. Even today in jQuery this is possible to some extent with widgets but now we use native ECMA5 OOP features found in modern browsers.

Let’s also consider AJAX. Google Maps and Gmail are largely considered to be the landmark uses of AJAX from that era, with Maps being launched just 2 years prior to Magento in 2005. AJAX was not terribly uncommon or painful to work with at the time but using a library gave you a standard API in 2007 to achieving cross-browser compatibility without extra complexity. Magento was very ambitious in its use of AJAX (for a free product!) for the checkout, admin panel, and therefore it adopted the best library for managing AJAX at the time. That library was Prototype.”

All Magento translation methods

Magento has a few translation methods and it is very useful to know them all, especially to be able to know when to use one or the other. Study how to translate with a .csv file and where the correct locale folder is, learn how to do inline translations, how to use a translation package and last but not least learn how to properly use translate.js (although this one steps into the back end side a little bit).

There are many good articles to help you out while practicing these methods, you can check out our Certification Guide again, BELVG BLOG is a really good one too, and you can also take a look at this, Alan Storm explains very clearly what a translate=”label” attribute means in layout XML.

Magento Transaction Emails

Have you ever worked with Magento email templates? Do you know where to find them? What is the best practice way to edit them? You can find these email templates under app/locale/en_US (if it’s an english store) and they will be inside of the template/email folder. Pay attention to the syntax used for the variables in there.

Theme Fallback

This one is a very, very important part of your exam, the questions relating to Magento’s theme fallback will be the longest and the ones that will need the most of your focus.

A good way to be comfortable here is to grab your Magento test install and create a bunch of theme packages and themes, then go into the System > Configuration > Design and set up as many different situations here as you can, playing around with the configuration scopes as well. In the exam you will be given a few different set up situations with different themes and different scopes, with template files that are found in some folders and not in others. You will be asked to figure out according to the Magento Theme Fallback System where is Magento going to find a specific template file in the particular set up provided (For these questions it helps to write stuff down, make sure you get a pad and a pen from the test center before you start your exam).

Check out this article by BELVG BLOG on Magento Fallback.
http://blog.belvg.com/magento-fallback-configuration-default-and-specific-themes-packages-design-exceptions-temporary-theme-configuration.html

Not required for the exam but still good to know:
The one thing not many people have heard about Magento’s theme fallback system is that there can actually be up to four fallback steps. This situation occurs when you have a theme package with one theme called default but in the System Congifuration Design panel you set the Default field to use another theme that’s not called default.

For example look at this package
Theme-package

And then look at this theme set up
Theme-setup

The package in the image above has a theme called default, but in the admin panel you can see that the black theme is in the Default field. Magento’s theme fallback system will look for a template in the blue theme first (step 1), if it can’t find it there it will look for it in the black theme since it has been set up as the default theme (step 2), if it can’t find it there either, it will actually look for a theme called default and our package has one (step 3), and finally it will look for the template in the base/default theme (step 4).

Last thoughts

magento front end developer certification exam
Hope that you have found all of these tips helpful. I’ll give you one more before you go: book your exam! Trust me, if you’re a procrastinator like me and like most people you are probably thinking of booking it after you’ve studied and after you feel ready, but you will most likely keep putting it off again and again. If you book it before studying, the deadline will give you the pressure you need to get that studying done once and for all and get certified. Good luck! And enjoy those well deserved bragging rights.

P.S.: Magento sometimes offers free retake coupons on their site, so keep an eye out for those!