Front-End Developer Jobs: Interview Questions and Answers in 2019
March 4, 2019
Front-end web developers work on user-facing features, and combine their programming expertise with their creative skills to build the interactive and visual elements of web applications. They build reusable code, and are responsible for optimizing web applications for high performance, speed and scalability.
Front-end developers translate the UI/UX design to code in order to create the visual components of web applications. This requires working with the UI/UX designer to integrate elements of graphic design with technical aspects. Front-end developers will also work with back-end developers to assist with the integration of user-facing features with server-side logic. This includes ensuring that user input is validated before it is submitted to the back-end. Front-end developers will therefore have good interpersonal skills, and can expect to problem solve and think critically in a collaborative environment.
1. What role does UX (User Exp.) have in front-end development?
Front-end developers work on the client side to build user-facing features. As a result, they ensure a good user experience by designing visual elements and content that looks seamless on a company’s site. Front-end developers are likely to work with the UX team to create web pages that both represent the brand, and deliver a highly user-centric experience. Candidates should think about the ways UX and front-end development come together in the process of web design when answering this question.
2. What can you do to increase page performance?
3. Describe the function of the doctype.
<!DOCTYPE> is a required declaration, and the first line of code in an HTML file. This tells the browser the version of HTML the page uses. Candidates should know that this declaration helps the browser interpret content correctly.
4. How does XHTML differ from HTML?
XHTML is optional, and used to provide more accessibility to a webpage. When used, it adds the XML markup language to a webpage.
5. Describe the difference between cookies, local storage and session storage.
Cookies allow applications to store data in a client’s browser. Local storage allows applications to store data without expiry limits. Session storage allows applications to store data for the duration that a window is open.
6. Describe the new elements to HTML.
Answering this question well indicates that a candidate understands and keeps up with changes to HTML. Candidates can discuss both design-related and more technical elements that are new to HTML. Some features candidates could mention are changes to the multimedia and graphic elements available (ex. Audio, canvas), and semantic tags (ex. Header, footer etc.).
8. Describe the difference between classes and IDs.
Classes and IDs are hooks for CSS styles. Classes are used to style different elements in the same way (ex. Various links). IDs are used to style elements that are only featured once on a page (ex. One instance of a navigation menu).
9. What is the box model? How do you tell the browser to use it?
The box model is useful to designing the layout of a webpage. All elements on a page are boxes. As a result, the box model is used to position elements on a webpage. The box model consists of:
- Content: Where the content is located; the innermost part
- Padding: Transparent area surrounding the content
- Border: Border that frames the content
- Margin: Transparent area outside the border
10. How do floats work?
A CSS float pushes an element to the left or right. A float property has four values: left, right, inherit, and none.
11. What is the purpose of the z-index?
The z-index stacks elements on the z-axis. It only applies to positioned elements, and overrides the default stacking order of HTML.
12. How do you deal with browser-specific style incompatibility?
Candidates may identify various methods to answer this question. For example, using a conditional statement in the head tag of the HTML will allow you to identify the browser and load an external stylesheet.
13. What is the function of pseudo-elements?
Pseudo-elements style an aspect of an element (ex. The first letter of a paragraph). It also allows you to wrap text around images, create a body border or make multiple shapes using a single element.
15. What is functional programming?
16. What are the benefits and downsides to functional programming versus object-oriented programming (OOP)?
Functional programming avoids shared state or side effects. It also offers features like point freestyle (tacit programming), and highly simplified functions that are more easily re-composed for reusable code than OOP. However, if these features are overused, the readability of the code may become jeopardized. Functional programming is also harder to learn than OOP due because it requires prior, foundational knowledge on various forms of mathematical theory.
As a result, OOP is easier to understand, and uses an imperative style, which means that it reads more like a set of instructions for the computer. However, OOP depends on shared state. Objects and behaviors tend to be attached to the same entity, and this leads to behaviors like race conditions.