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%)
- 6. Customize and Create Javascript within the Magento Framework (8%)
- 7. Use CSS Effectively to Customize Magento Look and Feel (9%)
- 8. Customize the Look and Feel of Specific Magento Pages (12%)
- 9. Correctly use the Admin Configuration Scopes (Default/Website/Store View Fallback) (6%)
- 10. Implement Internationalization of Frontend Pages (CE + EE) (4%)
0. Prerequisites
Lets start with the basics and what you should already know.
Which new features are included in HTML5?
The most interesting features are:
- New content specific,elements such as the
<header>,<footer>,<article>and<section>tags help to give new meaning and structure to webpages. - New form types such as
color&date, create colour and date pickers for HTML5 compatible web browsers, (javascript fallbacks are still required for compatibility with older browsers). - Input attributes such as
placeholderallows text to be entered into a form element before a users has entered anything. - The
<canvas>element for drawing in 2D. - The
<video>and<audio>elements which allow media content playback. - Support for local storage. This allows data to be stored while an application is offline on the clients devices such as a phone.The data can then be synced when the device is online.
How can I introduce CSS into an HTML Page?
There are four ways to do this they are:
Linking to a separate CSS file/b>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen">
The most common and generally best approach to adding a style sheet.The link tag should be placed in the <head> of the HTML document.
Embedding CSS into the HTML
<style media="screen" type="text/css">
You can embed CSS directly into the HTML page this should be done in the <head> of the document.
Adding Inline CSS to HTML tags
<h2 style="color:red;background:black;">This is a red heading with a black background</h2>
This allows styling of an individual element.
Importing a CSS file from within CSS
@import "font.css";
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?
Hongkiats guide on web optimisation gives these options
- 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.
This concludes part 1 of this guide but comeback soon for part 2
References
- http://www.w3schools.com/HTML/default.asp
- http://www.w3schools.com/js/default.asp
- http://www.html5rocks.com/en/features/storage
- http://www.hongkiat.com/blog/ultimate-guide-to-web-optimization-tips-best-practices/
- http://javascript.info/tutorial/inheritance
The post Magento Frontend Developer Certification Exam: Part 1 appeared first on Fisheye.