Zaneta Baran

I am not going to lie, creating Magento 2 tutorials is not a easy things to do. Explaining stuff in detailed and understandable way is a challange. However I can see, Magento posts are the most popular ones on my website. So I decided to share with you with another post related to Magento. Magento 2 frontend developer technical test for an interview. It is a test which I used to use during interviews with frontend developers. It is just an idea what I would expect. If you are looking for even more knowledge, check out frontend Magento 2 developer interview questions.

Feel free to share with me your way of doing frontend Magento 2 developer interview technical test, I would love to here your experiences and learn something new. Also, please, let me know if I made any mistakes in this post, I would really appreciate it!

DO YOU WANNA LEARN MORE ABOUT MAGENTO? SIGN IN BELOW!

SUBSCRIBE TO MAGENTO 2 NEWSLETTER!

Would you like to get information when new Magento tutorial is available?
Subscribe to the newsletter and be up to date!

Magento 2 Interview Frontend Technical Test

Frontend Interview Test based on Magento 2

1. Create new theme (inherit from blank or luma, please, make decision and add comment why you have chosen certain parent)
   It helps to see how the candidate makes decisions and it is good based for rest of the test.
2. Overwrite primary button’s colour and link’s colour on your site to any chosen colour which is different than default one.
   Pretty easy point, helps us to understand how the candidate structure his/her code within styling changes.
3. Remove product name from items on category pages.
   Based on this question we can see if the candidate follow best practices or not, how he/she works with phtml and xml changes.
4. Change title of first tab on product page view to anything different than default one.
   Easy change to understand how the candidate works with xml files.
5. Move the ‘Go to checkout’ button to the bottom of the mini cart (below view and edit cart).
   It can show as how the candidate works with html changes.
6. Create new page with two columns (title and 5 items per column) and add accordion (tabs) to these columns on mobile only.The items of the column should be hidden on mobile. The title of the column should show items after clicking on it on mobile only. On desktop you still should be able to see standard two columns.
   This point can easy shows if the candidate is aware of Magento 2 functionalities and can use it within his/her code. To learn how to resolve this point, click How To Add Tabs (Accordion) Only On Mobile.
7. Add additional link to the footer which will open popup after clicking on it. Popup should include content of new created static block.
   Again, based on this point we can understand how much the candidate knows about Magento 2 functionalities. To resolve this task, check out How To Add Modal PopUp?
8. Change following settings for product gallery
   1. Shows dots as navigation instead of thumbnails.
   2. Remove arrows on the sides of preview
   3. Set transition duration in ms to 1000

   By this task we can learn how much the candidate knows about view.xml file.

9. Display additional text (decide on text) on the checkout shipping step whenever selected country of shipping address is United Arab Emirates.
   This point is slightly more difficult that others one. Based on this you can learn how much candidate knows how to work with the checkout and knockout.js. It is task for more experienced developers. The helper with this task can be this article How To Display Additional Text Based On Selected Shipping Methods In The Checkout.
10. Upload your code to Bitbucket, Gitlab, Github or any other VCS and send link to the code.
    And of course, we want to make sure the candidate knows how to work with code repositories.

Magento 2 Frontend Technical Test – Ready Email

Let me just share with you full email which I send to the candidate. I hope it will help!

Good morning!

Thank you for an interview which we had recently.

We would like to provide you with the technical test based on Magento 2. It can be based on Magento 2.2 or Magento 2.3. We are expecting solutions to be provided within 2 weeks or earlier. Please, let me know if this timeline is doable for you.

Frontend Interview Test based on Magento 2

1. Create new theme (inherit from blank or luma, please, make decision and add comment why you have chosen certain parent)
2. Overwrite primary button’s colour and link’s colour on your site to any chosen colour which is different than default one.
3. Remove product name from items on category pages.
4. Change title of first tab on product page view to anything different than default one.
5. Move the ‘Go to checkout’ button to the bottom of the mini cart (below view and edit cart).
6. Create new page with two columns (title and 5 items per column) and add accordion (tabs) to these columns on mobile only.The items of the column should be hidden on mobile. The title of the column should show items after clicking on it on mobile only. On desktop you still should be able to see standard two columns.
7. Add additional link to the footer which will open popup after clicking on it. Popup should include content of new created static block.
8. Change following settings for product gallery
   1. Shows dots as navigation instead of thumbnails.
   2. Remove arrows on the sides of preview
   3. Set transition duration in ms to 1000
9. Display additional text (decide on text) on the checkout shipping step whenever selected country of shipping address is United Arab Emirates.
10. Upload your code to Bitbucket, Gitlab, Github or any other VCS and send link to the code.

Note, please, follow best practice from Magento documentation. Write clean and high quality code.

If you have any questions, feel free to send me an email.

Thank you,
XXX

That’s pretty much it. For some of the points you can see tutorials with detailed solution on my blog. If you are an candidate, feel free to learn based on this test and tutorials in this section.

I would be more than happy if you could share this post on social media or let me know in the comment section if I made any mistake. Also share your own technical test and let’s create knowledge blog post!

MORE MAGENTO 2 TUTORIALS

DO YOU WANNA LEARN MORE ABOUT MAGENTO? JOIN US ON FB!

JOIN THE GROUP ON FACEBOOK!

PIN ME!