How to Ace a Front-End Developer Interview

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Interviewing for a position as a front-end developer can be tough, especially if you are new to the industry or you haven’t had an interview for a while. Having a grasp of web fundamentals is, well, fundamental. Selling yourself is also key. Good communication and presentation skills can help you stand out from the crowd.

The interview process will vary from company to company, but there are some safe bets. Knowing what to expect can help you get prepared and handle any curveballs thrown your way. This article can help you get inspired and prepared, so you can ace your interview.

Types of Front End Development

There are typically two camps: design and development. These two often overlap. Depending on the position, they may want someone who is a specialist in a certain area, or someone who can wear many different hats. Below are some links that go over the fundamentals of the web.

Finding the Right Fit

It’s important to consider your own personal goals and values when searching for a position. How does the company culture align with your values? Will you be able to grow and achieve your career goals?

Sometimes we get so focused on landing the job, we forget to consider how it will affect us. While frontend developers are pleasers, we mustn’t forget about ourselves. Come up with your own set of wishes, requirements, and questions to ask.

Don’t be afraid to apply for a position that you may not be qualified for. Many companies try to weed out people with a list of qualifications but don’t be intimidated. The most they can do is say no. Never sell yourself short. Worst case scenario: you will get more insight into what kinds of skills you need to get to reach that level.

Landing the Interview

The first step to acing the interview, is landing it. Having the right skills is essential, but those won’t come over night. Like any industry, experience and ability will be your foundation. If you are doing lots of front-end development you are on the right track. Coding, revising your code, and learning new tricks should be something you are doing all the time. That’s the hard part. The rest is all about selling yourself.

If you can master this, you will find that a lot of opportunities will come to you and you’ll spend less time hitting the digital pavement. Below are some tips to help you accomplish this.

  • Target specific companies: do some research and tailor your marketing efforts toward your desired position. Check out Glassdoor, Careerup, or Quora for additional insight.
  • Get on Upwork: there are freelance sites and job boards that can lead to great opportunities. Upwork is just one example, there are lots of options.
  • Build, build, build: the great thing about front-end web development is that you can objectively show your skills with examples of projects you’ve worked on. Sites like Dribbble, Github and Codepen, and HyperDev are helpful. You can learn, share and collaborate.
  • Portfolio or Website: having a portfolio of your work can get your foot in the door. Look at this Freelance Web Developer template for inspiration. It’s clean, simple, and highlights your work.
  • Create a strong web presence: build a strong presence on the web, social networks are great ways to put out feelers and let people know you are on the job hunt. LinkedIn, Facebook, Twitter, and Google+ are all useful in this regard.
  • Resume: a resume may not always be a requirement these days, but having one can give you an edge. All you need is a simple one or two pages. Tailor this to the company you are applying for.
  • Cover Letter: this is usually just an email message; but you want one that draws the reader in. It should be short and effective.

The Interview

Once you have landed the interview, you can start doing your homework. Presenting yourself as a problem solver who knows how to get things done in a timely manner will make all the difference.

As a front-end developer, you may not be to used explaining your workflow. Many hiring managers understand this, which is why some interviews are short on essay questions and more focused on workflow.

Types of Questions You’ll Encounter

At a minimum, you will be asked about basic to advanced techniques involving HTML, CSS, DOM, JavaScript, HTTP/URL, and browser skills.

Beyond concrete examples of your skills, most hiring managers will be concerned about how well you will fit in with the company. Below are some broad categories that these questions fall into.

  • Skills Demo: they want to see you in action. This is to gauge how efficient your workflow is. These questions can be in quiz form, allowing you to demonstrate your ability to solve specific problems.
  • Ability to Adapt: the web changes rapidly and a front-end developer needs to stay on top of it. Some of the best developers are lifelong learners. They are always learning new skills and keeping up to date with current trends. For example, you may be asked what blogs you like to read.

    • <!–

  • FrontEnd Focus: formerly HTML weekly, great news about everything to do with HTML.
  • JavaScript Weekly: fresh news to keep you up to date on all things JavaScript.
  • Ruby Weekly: stay up to date on the latest developments related to Ruby.
  • Joelonsoftware.com: inspiring blog written by owner of Fog Creek Software (Trello, Kiln and FogBugz). He is cofounder of stackoverflow and has been a central figure in some of the most successful communities on the web.

    • –>

  • Knowledge: these questions are designed to see how deep your general understanding of the industry goes. This can give insight into your shelf life as well as your ambition.
  • Personality: if the interviewer is confident in your abilities, they may just skip everything else and move straight to the personality questions. This is to gauge how well your values align with the company culture and give them insight into your personality.

Example Questions and Answers

Now let’s jump into some questions. Github has a great list of Front-End Developer Questions. We’ve drawn from it and provided answers. But you really should check out all the questions and find the answers.

The answers we’ve provided here are just examples. Most of them can be answered in a number of ways.

General Questions

Have you learned anything interesting this week?
I recently got into Elm. I’ve been hearing about how great of a functional programming language it is for a while now. It may not be replacing JavaScript anytime soon but it is a very interesting alternative. I also got around to learning Regex. I’ve dabbled with it in the past but I never dove in deep. It’s a nice tool to add to my bag of tricks.
What do you find interesting about coding?
It allows me to be creative and learn a wide variety of skills. There’s nothing like that feeling of accomplishment that comes from coming up with an elegant solution to a problem. When I’m in the zone, it feels like I am using all of my brain. There’s an endless amount of possibilities and problems to solve. Watching a script I wrote come alive is a magical experience.

Tell me about a recent technical challege you faced. How did you solve it?
I installed a caching plugin to lower latency on one of my sites running a CMS. It was working but not as well as I’d hoped. It runs on Apache, so I used the mod_rewrite module to define rewrite condition to run the caching plugin via the .htaccess file. This way I was able to bypass PHP and the Expiry directive to get the full speed of the plugin.
What are three easy ways to decrease page load time?
Optimize your images with compression. Use caching to make more efficient use of server resources. Use a content delivery network (CDN) to accelerate the delivery of your content.

Assuing you had the time, what new technology would you like to learn?
I’m currently a PC person. I’d like to use Mac for design purposes so I can utilize tools like Sketch.
What is the importance of coding standards?
Standards bodies like the W3C and WHATWG are essential for productivity, continuity, and collaboration. Just like with language, if everyone used different rules (standards) we wouldn’t be able to understand each other.

HTML Questions

What is the purpose of the doctype?
A doctype is a required declaration. <!DOCTYPE> should be the first line of code included in an HTML file. It instructs the browser about which version of HTML the page is written in. For example, a webpage using HTML5 would use <!DOCTYPE html> to instruct that the browser render the page with HTML5 specs.

How is XHTML different from HTML?
Basically, XHTML adds the power of the XML markup language to your webpage. While many people opt not to use XHTML, doing so can provide you with more control and offer more accessibility to your webpage.

What’s new about HTML5?
The most obvious things are the new multimedia and graphic elements — audio, canvas, and so on. But from a developer standpoint, I think the semantic tags — header, footer, and so forth — are more important.

What is the difference between cookies, local storage, and session storage?
Cookies enable applications to store data in a client’s browser. The sessionStorage property enables applications to store data until the window is closed. And the localStorage property enables applications to store data without an expiration.

  • Webstorage: a primer on the subject from W3Schools.

CSS Questions

Why would you use CSS over JavaScript animations — and vise versa?
I like CSS for simple state transitions. It’s light on resources but the code can be a bit verbose. JavaScript has the edge when it comes to backward compatibility but it typically causes more performance issues related to latency.

  • JavaScript vs CSS: a helpful reference that compares and contrasts JavaScript to CSS.
What’s the difference between classes and IDs?
Both the class and ID selectors are used as hooks for CSS styles. ID’s are generally used to style elements that only appear once on a page, such as one instance of a navigational menu. Classes are used to style multiple elements in the same fashion, such as the appearance of links.

What is the box model and how you would tell the browser to use it?
The box model helps to conceptualize the layout. Every element in the page is considered to be a box. The box model wraps around every element and you can use it to position the way elements appear in relation to other elements. The parts of the box model are:

Content: this is the innermost part, where the content will be located.
Padding: transparent area around the content.
Border: border that frames the content.
Margin: transparent area that’s outside the border.
How do floats work?
The CSS float property is a box that can be shifted left or right horizontally. The float property has four values: left, right, inherit, and none. If you apply { float: right; } to an element, it will move to the furthest right of it’s parent element. If you apply { float: left; } to an element, it will move to the furthest left. { float: inherit; } causes the element to inherit the float value of its parent.

  • Floats: more information from W3.org.
  • CSS Floats 101: a thorough guide on CSS floats.
What does the z-index do?
The z-index property is used to stack elements on the z-axis. It only applies to positioned elements. You can use z-index to override HTML’s default stacking order.

How do you deal with browser-specific style incompatibility?
There are many ways to go about this. One way to go would be to use a conditional statement in the head tag of your HTML. This way you can identify the browser and load an external stylesheet.

What are pseudo-elements used for?
The pseudo element property is used to style one aspect of an element, such as the first letter of a paragraph. You can do lots of amazing things with them like wrap text around images, make several different shapes with a single element or create a body border.

Summary

The most important thing to keep in mind is that hiring managers will want to know how efficiently you work and how well you will fit in with the company culture. Don’t sweat the details too much. Just like any industry, if you keep your skills sharp and you know your stuff, you should be okay.

Frank
Frank Moraes is an editor and writer at HTML.com and other nerdy websites.