Tips for the Classic Front End Developer Code Challenge

Lots of website development shops that focus on CMS development: WordPress, Drupal, Joomla, Magento, etc… offer a “classic” test for frontend developers. Even SASS companies will sometimes provide this test.

What is the test? Take a graphic file and “htmlize” it.

Whether or not code test provides a decent understanding of the candidate’s abilities is up to debate.  Personally, I believe hard-skills can be trained and perfected, soft skills and problem-solving abilities are harder to obtain. But, what do I know?

Good or bad, a vast majority of development shops give this test with various degrees of difference. So because of that, here are some tips to help you break through the first round and get that in person interview.

Tip 1: Find your workflow and then practice, practice, practice

As a junior developer, you might not be as fast as others, so you need to practice. It is just like sports, if you want to hit the baseball, you have to take lots and lots of cuts off the hitting tee. (For those who don’t sports ball, you can see what a baseball tee is by clicking here). So practice! Most companies give two test versions for front end junior developer positions:

Number 1: Take this PSD / Sketch/graphic file and htmlize it within an hour

Number 2: Take these PSD / Sketch files / graphic files and htmlize it as fast as you can

So how do you practice? Go to a site like this: and download a PSD. Then set a timer for an hour and htmlize as quickly as you can.  Then the next day do it again, then the next day do it again, repeat over and over using different graphic files.

Helpful Reads.

But here is the secret. When your time is up, reflect and go over your code. What did you spend too much time on? Are there patterns that you can use? Can you recycle coding techniques/frameworks from project to project?  THINK ABOUT IT.
You also need to read and find resources. Research how to write clean code fast. Discover! Because if you keep practicing the wrong techniques you are going to form bad habits. Follow sites like smashing magazine. Read books likeWeb Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett.

Again, step one HTMLize. Step two think! Look for ways to speed up your workflow. Create a naming convention. Use tools like Avocode. Find an IDE you like. Read a lot. It is all practice.

Tip 2: Look at the Freaking Job Description

I feel like this is a no-brainer but look at the freaking job description. Then apply the skills they are looking for into your code tests, unless they tell you not to! What do I mean? If the description says “Has knowledge in LESS and SASS”.  Guess what, you better write some LESS or SASS.

If the front end development description has “GitHub”, then maybe you should… just maybe… you should make some commits.  Maybe… just maybe… you should give them the GitHub repo.

If the description has the word “bootstrap,” then maybe you should use bootstrap….

Get the idea?

Tip 3: Ask Clarifying Questions

If you need to ask questions, then do it! For example, if  you are afraid of just jumping into SASS or SCSS for the test. Ask them, “Can I use SCSS on this code test? I ask because SCSS is in my regular workflow, but I want to make sure it is okay.” They will probably be impressed if you ask.

Tip 4: Write Clean Code

Clean code is pretty evident and where the practice and reflection comes out. Write clean code. Use comments correctly. But, I encourage you to take this a step further! If it is a WordPress development shop, then look at the WordPress Codex.  Follow WordPress’s recommendations, same with other systems.  If you want to take it to an extreme, read some of the HTML/CSS where you are applying, try to model their naming convention.

Tip 5: Have a Naming Convention

Having a naming convention affirms the point “Write Clean Code.” Writing re-usable CSS is harder than it seems. CSS becomes bloated quickly. There are tons of articles about different methodologies for naming.  I prefer BEM (Block Element Modifier) or SMACSS.

Don’t just use a naming convention for CSS do it for image assets as well. Example, if you have multiple SVG icons don’t name them twitter.svg and facebook.svg (unless you decide to have a subfolder called icons) make it something like icon-twitter.svg and icon-facebook.svg.

Tip 6: Turn the Test in on Time, or Early.

Tip 6 is a no brainer, don’t miss your deadline! If you do, turn it in and apologize. You probably won’t get the job, but you should try to save your good name. Your name is your brand.

Tip 7: Don’t Stress

If you don’t get the second interview don’t stress, it wasn’t the job for you. You will get the next one!