Scribd
Upload
10 views37 pages

Junior Front End Developer Interview Questions

The document provides a comprehensive list of common interview questions for junior front-end developers, covering topics such as HTML, CSS, JavaScript, software tooling, and personal experiences. It includes specific technical questions about coding practices, design principles, and web security. Additionally, it outlines concepts like load balancing, user-centered design, and the importance of frameworks like Node.js and jQuery.

Uploaded by

Simo
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views37 pages

Junior Front End Developer Interview Questions

The document provides a comprehensive list of common interview questions for junior front-end developers, covering topics such as HTML, CSS, JavaScript, software tooling, and personal experiences. It includes specific technical questions about coding practices, design principles, and web security. Additionally, it outlines concepts like load balancing, user-centered design, and the importance of frameworks like Node.js and jQuery.

Uploaded by

Simo
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Now for the moment you’ve been waiting for, here are some of the most

common junior front end developer interview questions:

• What has been the most dif cult problem you have ever had to solve

• Have you built an admin dashboard before

• What tags would you use to make text bold or italic using HTML

• What is CSS speci city

• When would you use RGBA instead of a hex value for a color

• Explain the difference between classical and prototypal inheritance

• Explain what AJAX is and its advantages/disadvantage

• What will this code output? [Link](“122” + 344

• How would you write a function that takes in two numbers and multiplies them
without using the multiplication sign

• How would you handle a situation where a client asks for something that is out of
scope

HTML/CSS
1. In the context of CSS styling can you explain what does display-style:
inline-block stand for?

2. If you have a <ul> element with several <li> elements, how would you go
about setting up these elements in a row by using HTML and CSS?

3. In CSS styling when would you use floats? How do they work?

4. When would you use: clear: both;?

5. What is Bootstrap? When would you use it? How does its grid system work?

6. Explain the notion of responsive design and how it works? Use an example if
you like.
?

fi
?

fi
?

7. What is a DOM? What do you know about it?

8. What is SASS? What are the advantages of using it?

JavaScript
1. What is ECMAScript?

2. What is jQuery and what is it commonly used for?

3. What is the difference between == and === in JS?

4. Can you enumerate all JavaScript data types?

5. What is a callback function in JS and when would you use one?

6. What is the difference between undefined and null?

7. What is an async response?

8. What does JSON stand for? What is it used for?

9. How would you explain an API request?

10. What APIs have you worked with?

11. How would you send out/convert to JSON format?

12. What is the difference between GET and POST when specifying an AJAX
request?

Software/Tooling
1. Have you worked with Photoshop as a front end developer? For what purpose?

2. What software versioning system have you used? Could you describe how a
work ow would look like in this system?

About You
1. What was the hardest project you ever worked on? Why was it dif cult? If it is
an application/algorithm can you explain how it works?
fl
fi
2. How do you stay up to date with technology news?

3. What side projects have you been working on?

4. Are there any languages or frameworks that you would like to learn in the
future? How would you go about teaching yourself? Why did you pick those
languages/frameworks?

5. What are the most important skills and qualities that a junior front end
developer should have?

Q1: Explain meta tags in HTML


Entry
HTML5 55
Answe

•
Meta tags always go inside head tag of the HTML pag
•
Meta tags is always passed as name/value pair
•
Meta tags are not displayed on the page but intended for the browse
•
Meta tags can contain information about character
encoding, description, title of the document etc
Example

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="I am a web page with
description">
<title>Home Page</title>
</head>
<body>

</body>
</html>

Q2: Name some basic design elements


Entry

UX Design 78
Answer
 

The elements of design are

• LINE – The linear marks made with a pen or brush or the edge created
when two shapes meet
• SHAPE – A shape is a self contained de ned area of geometric
(squares and circles), or organic (free formed shapes or natural
shapes). A positive shape automatically creates a negative shape
• DIRECTION – All lines have direction – Horizontal, Vertical or Oblique.
Horizontal suggests calmness, stability and tranquillity. Vertical gives a
feeling of balance, formality and alertness. Oblique suggests movement
and actio
• SIZE – Size is simply the relationship of the area occupied by one
shape to that of another
• TEXTURE – Texture is the surface quality of a shape – rough, smooth,
soft hard glossy etc
• COLOUR – Colour is light re ected off objects. Color has three main
characteristics: hue or its name (red, green, blue, etc.), value (how light
or dark it is), and intensity (how bright or dull it is)

Q3: What Is Load Balancing?


Entry

Software Architecture 70
Answer

Load balancing is simple technique for distributing workloads across multiple


machines or clusters. The most common and simple load balancing algorithm
is Round Robin. In this type of load balancing the request is divided in circular
 

fl
fi
.

order ensuring all machines get equal number of requests and no single
machine is overloaded or underloaded

The Purpose of load balancing is to

•
Optimize resource usage (avoid overload and under-load of any
machines
• Achieve Maximum Throughpu
• Minimize response tim
Most common load balancing techniques in web based applications are

1. Round robi
2. Session af nity or sticky sessio
3. IP Address af nit

Q4: What is [Link]?


Entry

[Link] 88
Answer

[Link] is a web application framework built on Google Chrome's JavaScript


Engine (V8 Engine)

[Link] comes with runtime environment on which a Javascript based script


can be interpreted and executed (It is analogus to JVM to JAVA byte code).
This runtime allows to execute a JavaScript code on any machine outside a
browser. Because of this runtime of [Link], JavaScript is now can be
executed on server as well

[Link] = Runtime Environment + JavaScript Library

Q5: What is SQL injection?


Entry
 

fi
n

fi
y

Web Security 58
Answer

Injection attacks stem from a lack of strict separation between program


instructions (i.e., code) and user-provided (or external) input. This allows an
attacker to inject malicious code into a data snippet

SQL injection is one of the most common types of injection attack. To carry it
out, an attacker provides malicious SQL statements through the application

How to prevent

• Prepared statements with parameterized queries


• Stored procedures
• Input validation - blacklist validation and whitelist validatio
• Principle of least privilege - Application accounts shouldn’t assign
DBA or admin type access onto the database server. This ensures that
if an application is compromised, an attacker won’t have the rights to
the database through the compromised application

Q6: What is Scope in JavaScript?


Entry

JavaScript 142
Answer

In JavaScript, each function gets its own scope. Scope is basically a


collection of variables as well as the rules for how those variables are
accessed by name. Only code inside that function can access that function's
scoped variables
 

A variable name has to be unique within the same scope. A scope can be
nested inside another scope. If one scope is nested inside another, code
inside the innermost scope can access variables from either scope

Q7: What is npm?


Entry

[Link] 88
Answer

npm stands for Node Package Manager. npm provides following two main
functionalities

• Online repositories for [Link] packages/modules which are searchable


on [Link]
• Command line utility to install packages, do version management and
dependency management of [Link] packages

Q8: What is webpack?


Entry

Webpack 32
Answer

Webpack is a build tool that puts all of your assets, including Javascript,
images, fonts, and CSS, in a dependency graph. Webpack lets you
use require() in your source code to point to local les, like images, and
decide how they're processed in your nal Javascript bundle, like replacing
the path with a URL pointing to a CDN
 

fi
.

fi
.

Q9: Why and when should I Use Webpack?


Entry

Webpack 32
Answer

If you're building a complex Front End application with many non-code static
assets such as CSS, images, fonts, etc, then yes, Webpack will give you
great bene ts

If your application is fairly small, and you don't have many static assets and
you only need to build one Javascript le to serve to the client, then Webpack
might be more overhead than you need

Q10: Compare SQL databases and MongoDB at a high level


Junior

MongoDB 83
Answer

SQL databases store data in form of tables, rows, columns and records. This
data is stored in a pre-de ned data model which is not very much exible for
today's real-world highly growing applications. MongoDB in contrast uses a
exible structure which can be easily modi ed and extended

Q11: Explain the CSS “box model” and the layout


components that it consists of
Junior

CSS 50
fl
 

fi
.

fi
fi
.

fi
.

fl
Answer

The CSS box model is a rectangular layout paradigm for HTML elements that
consists of the following

• Content - The content of the box, where text and images appea
• Padding - A transparent area surrounding the content (i.e., the amount
of space between the border and the content
• Border - A border surrounding the padding (if any) and conten
• Margin - A transparent area surrounding the border (i.e., the amount of
space between the border and any neighboring elements

Q12: How JavaScript and jQuery are different?


Junior
jQuery 51
Answe

JavaScript is a language While jQuery is a library built in the JavaScript


language that helps to use the JavaScript language

Q13: What are advantages of REST web services?


Junior

API Design 46
Answer

Some of the advantages of REST web services are

• Learning curve is easy since it works on HTTP protoco


• Supports multiple technologies for data transfer such as text, xml, json,
image etc
• No contract de ned between server and client, so loosely coupled
implementation
 

fi
.

• REST is a lightweight protoco


• REST methods can be tested easily over browser

Q14: What is Callback Hell?


Junior
[Link] 88
Answer

The asynchronous function requires callbacks as a return parameter. When


multiple asynchronous functions are chained together then callback hell
situation comes up

Q15: What is Content Security Policy?


Junior
Web Security 58
Answer

Content Security Policy (CSP) is an HTTP header that allows site operators
ne-grained control over where resources on their site can be loaded from.
The use of this header is the best method to prevent cross-site scripting
(XSS) vulnerabilities. Due to the dif culty in retro tting CSP into existing
websites, CSP is mandatory for all new websites and is strongly
recommended for all existing high-risk sites

The primary bene t of CSP comes from disabling the use of unsafe inline
JavaScript. Inline JavaScript – either re ected or stored – means that
improperly escaped user-inputs can generate code that is interpreted by the
web browser as JavaScript. By using CSP to disable inline JavaScript, you
can effectively eliminate almost all XSS attacks against your site
fi
 

fi
.

fi
fl
.

fi
.

Q16: What is Cross-Site Scripting (XSS)?


Junior

Web Security 58
Answer

Cross-Site Scripting (XSS) is an attack that occurs when an attacker uses a


web application to send malicious code, generally in the form of a browser
side script, to a different end user

The page provided by the server when someone requests it is unaltered.


Instead, an XSS attack exploits a weakness in a page that include a variable
submitted in a request to show up in raw form in the response. The page is
only re ecting back what was submitted in that request

Q17: What is Flux?


Junior

React 155
Answer

Unidrectional application ow paradigm popular a few years back in React;


mostly superceded by Redux these days

Q18: What is Sass?


Junior

CSS 50
Answer
 

fl
fl
.

Sass or Syntactically Awesome StyleSheets is a CSS preprocessor that


adds power and elegance to the basic language. It allows you to use
variables, nested rules, mixins, inline imports, and more, all with a fully CSS-
compatible syntax. Sass helps keep large stylesheets well-organized, and get
small stylesheets up and running quickly

A CSS preprocessor is a scripting language that extends CSS by allowing


developers to write code in one language and then compile it into CSS

Q19: What is User Centered Design?


Junior

UX Design 78
Answer

User-centered design is an iterative design process in which designers


focus on the users and their needs in each phase of the design process. UCD
calls for involving users throughout the design process via a variety of
research and design techniques so as to create highly usable and accessible
products for them

User-centered design demands that designers employ a mixture


of investigative (e.g., surveys and interviews) and generative (e.g.,
brainstorming) methods and tools to develop an understanding of user needs

Q20: What is strict mode?


Junior

JavaScript 142
Answer
 

Strict Mode is a new feature in ECMAScript 5 that allows you to place a


program, or a function, in a "strict" operating context. This strict context
prevents certain actions from being taken and throws more exceptions

// Non-strict code...

(function(){
"use strict";

// Define your library strictly...


})();

// Non-strict code...

Q21: What is a CSS rule?


Junior

CSS 50
Answer

Web browsers apply CSS rules to a document to affect how they are
displayed. A CSS rule is formed from

• A set of properties, which have values set to update how the HTML
content is displayed
• A selector, which selects the element(s) you want to apply the updated
property values to
A set of CSS rules contained within a stylesheet determines how a webpage
should look

Q22: What is encapsulation?


Junior

OOP 54
Answer
 

Encapsulation is de ned as the process of enclosing one or more items


within a physical or logical package. Encapsulation, in object oriented
programming methodology, prevents access to implementation details

Q23: What is meant by the KISS principle?


Junior

Software Architecture 70
Answer

KISS, a backronym for "keep it simple, stupid", is a design principle noted by


the U.S. Navy in 1960. The KISS principle states that most systems work best
if they are kept simple rather than made complicated; therefore simplicity
should be a key goal in design, and that unnecessary complexity should be
avoided

Q24: What is polymorphism?


Junior

OOP 54
Answer

The word polymorphism means having many forms. In object-oriented


programming paradigm, polymorphism is often expressed as one interface,
multiple functions

Q25: What is the difference between span and div?


Junior
 

fi
.

HTML5 55
Answer

• div is a block elemen


• span is inline elemen
For bonus points, you could point out that it’s illegal to place a block element
inside an inline element, and that while div can have a p tag, and a p tag can
have a span, it is not possible for span to have a div or p tag inside

Q26: Why do we use jQuery?


Junior

jQuery 51
Answe

Due to following advantages

• Easy to use and learn


• Easily expandable
• Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+
• Easy to use for DOM manipulation and traversal
• Large pool of built in methods
• AJAX Capabilities
• Methods for changing or applying CSS, creating animations
• Event detection and handling
• Tons of plug-ins for all kind of needs

Q27: If [Link] is single threaded then how it handles


concurrency?
Mid
 

[Link] 88
Answer

Node provides a single thread to programmers so that code can be written


easily and without bottleneck. Node internally uses multiple POSIX threads
for various I/O operations such as File, DNS, Network calls etc

When Node gets I/O request it creates or uses a thread to perform that I/O
operation and once the operation is done, it pushes the result to the event
queue. On each such event, event loop runs and checks the queue and if
the execution stack of Node is empty then it adds the queue result to
execution stack

This is how Node manages concurrency

Q28: Mention what is the difference between PUT and POST?


Mid

API Design 46
Answer

PUT puts a le or resource at a particular URI and exactly at that URI. If there
is already a le or resource at that URI, PUT changes that le or resource. If
there is no resource or le there, PUT makes on

POST sends data to a particular URI and expects the resource at that URI to
deal with the request. The web server at this point can decide what to do with
the data in the context of speci ed resourc

PUT is idempotent meaning, invoking it any number of times will not have an
impact on resources
 

fi
fi
.

fi
fi
.

fi
.

However, POST is not idempotent, meaning if you invoke POST multiple


times it keeps creating more resource

Q29: Name fundamental principles of design


Mid

UX Design 78
Answer

The fundamental principles of design are

• BALANCE — Balance in design is similar to balance in physics. A large


shape close to the center can be balanced by a small shape close to
the edge. Balance provides stability and structure to a design. It’s the
weight distributed in the design by the placement of your elements
• PROXIMITY — Proximity creates a relationship between elements. It
provides a focal point. Proximity doesn’t mean that elements have to be
placed together, it means they should be visually connected in some
way
• ALIGNMENT — Allows us to create order and organization. Aligning
elements allows them to create a visual connection with each other
• REPETITION — Repetition strengthens a design by tying together
individual elements. It helps to create association and consistency.
Repetition can create rhythm (a feeling of organized movement)
• CONTRAST — Contrast is the juxtaposition of opposing elements
(opposite colors on the color wheel, or value light/dark, or direction —
horizontal/vertical). Contrast allows us to emphasize or highlight key
elements in your design
• SPACE — Space in art refers to the distance or area between, around,
above, below, or within elements. Both positive and negative space are
important factors to be considered in every design
 

Q30: What are defer and async attributes on


a <script> tag?
Mid

HTML5 55
Answer

If neither attribute is present, the script is downloaded and executed


synchronously, and will halt parsing of the document until it has nished
executing (default behavior). Scripts are downloaded and executed in the
order they are encountered

The defer attribute downloads the script while the document is still parsing
but waits until the document has nished parsing before executing it,
equivalent to executing inside a DOMContentLoaded event
listener. defer scripts will execute in order

The async attribute downloads the script during parsing the document but will
pause the parser to execute the script before it has fully nished
parsing. async scripts will not necessarily execute in order

Note: both attributes must only be used if the script has a src attribute (i.e.
not an inline script)

<script src="[Link]"></script>
<script src="[Link]" defer></script>
<script src="[Link]" async></script>

Q31: What does SOLID stand for? What are its


principles?
Mid

Software Architecture 70
 

fi
.

fi
.

fi
Answer

S.O.L.I.D is an acronym for the rst ve object-oriented design (OOD)


principles by Robert C. Martin

• S - Single-responsiblity principle. A class should have one and only one


reason to change, meaning that a class should have only one job
• O - Open-closed principle. Objects or entities should be open for
extension, but closed for modi cation
• L - Liskov substitution principle. Let q(x) be a property provable about
objects of x of type T. Then q(y) should be provable for objects y of type
S where S is a subtype of T
• I - Interface segregation principle. A client should never be forced to
implement an interface that it doesn't use or clients shouldn't be forced
to depend on methods they do not use
• D - Dependency Inversion Principle. Entities must depend on
abstractions not on concretions. It states that the high level module
must not depend on the low level module, but they should depend on
abstractions

Q32: What is ClickJacking?


Mid

Web Security 58
Answer

ClickJacking is an attack that fools users into thinking they are clicking on
one thing when they are actually clicking on another. The attack is possible
thanks to HTML frames (iframes)

Its other name, user interface (UI) redressing, better describes what is going
on. Users think they are using a web page’s normal UI, but in fact there is a
 

fi
fi
.

fi
.

hidden UI in control; in other words, the UI has been redressed. When users
click something they think is safe, the hidden UI performs a different action

Q33: What is Coercion in JavaScript?


Mid

JavaScript 142
Answer

In JavaScript conversion between different two build-in types called coercion.


Coercion comes in two forms in JavaScript: explicit and implicit

Here's an example of explicit coercion

var a = "42";

var b = Number( a );

a; // "42"
b; // 42 -- the number!
And here's an example of implicit coercion

var a = "42";

var b = a * 1; // "42" implicitly coerced to 42 here

a; // "42"
b; // 42 -- the number!

Q34: What is IIFEs (Immediately Invoked Function


Expressions)?
Mid

JavaScript 142
Answer
 

It’s an Immediately-Invoked Function Expression, or IIFE for short. It executes


immediately after it’s created

(function IIFE(){
[Link]( "Hello!" );
})();
// "Hello!"
This pattern is often used when trying to avoid polluting the global
namespace, because all the variables used inside the IIFE (like in any other
normal function) are not visible outside its scope

Q35: What is a Grid System in CSS?


Mid

CSS 50
Answer

A grid system is a structure that allows for content to be stacked both


vertically and horizontally in a consistent and easily manageable fashion. Grid
systems include two key components: rows and columns

Some Grid Systems

• Simple Gri
• Pur
• Flexbox Gri
• Bootstra
• Foundatio

Q36: What is a Mixin and how to use on?


 

Mid

CSS 50
Answer

A Mixin is a block of code that lets us group CSS declarations we may reuse
throughout our site

To de ne mixin

@mixin grid($flex: true /*default argument*/) {


@if $flex {
@include flex;
} @else {
display: block;
}
}
To use a Mixin, we simply use @include followed by the name of the Mixin
and a semi-colon

/*scss*/
.row {
@include grid(true);
}

/*css*/
.row {
display: -webkit-flex;
display: flex;
}

Q37: What's new in HTML 5?


Mid

HTML5 55
Answer
 

fi
:

HTML 5 adds a lot of new features to the HTML speci catio

New Doctype

Still using that pesky, impossible-to-memorize XHTML doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"[Link]
If so, why? Switch to the new HTML5 doctype. You'll live longer -- as Douglas
Quaid might say

<!DOCTYPE html>
New Structure

• <section> - to de ne sections of page


• <header> - de nes the header of a pag
• <footer> - de nes the footer of a pag
• <nav> - de nes the navigation on a pag
• <article> - de nes the article or primary content on a pag
• <aside> - de nes extra content like a sidebar on a pag
• <figure> - de nes images that annotate an articl
New Inline Elements

These inline elements de ne some basic concepts and keep them


semantically marked up, mostly to do with time

• <mark> - to indicate content that is marked in some fashio


• <time> - to indicate content that is a time or dat
• <meter> - to indicate content that is a fraction of a known range - such
as disk usag
• <progress> - to indicate the progress of a task towards completio
New Form Types

• <input type="datetime">
• <input type="datetime-local">
• <input type="date">
• <input type="month">
• <input type="week">
• <input type="time">
• <input type="number">
• <input type="range">
fi
e

fi
fi
fi
fi
fi
.

fi
fi
e

fi
e

• <input type="email">
• <input type="url">
New Elements

There are a few exciting new elements in HTML 5

• <canvas> - an element to give you a drawing space in JavaScript on


your Web pages. It can let you add images or graphs to tool tips or just
create dynamic graphs on your Web pages, built on the y
• <video> - add video to your Web pages with this simple tag
• <audio> - add sound to your Web pages with this simple tag
No More Types for Scripts and Links

You possibly still add the type attribute to your link and script tags

<link rel="stylesheet" href="path/to/[Link]" type="text/


css" />
<script type="text/javascript" src="path/to/[Link]"></script>
This is no longer necessary. It's implied that both of these tags refer to
stylesheets and scripts, respectively. As such, we can remove
the type attribute all together

<link rel="stylesheet" href="path/to/[Link]" />


<script src="path/to/[Link]"></script>
Make your content editable

The new browsers have a nifty new attribute that can be applied to elements,
called contenteditable. As the name implies, this allows the user to edit any
of the text contained within the element, including its children. There are a
variety of uses for something like this, including an app as simple as a to-do
list, which also takes advantage of local storage

<h2> To-Do List </h2>


<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
Attributes
.

fl
.

• require to mention the form eld is require


• autofocus puts the cursor on the input el

Q38: What’s the difference between “resetting” and


“normalizing” CSS? Which would you choose, and
why?
Mid

CSS 50
Answer

• Resetting — is meant to strip all default browser styling on elements.


For e.g. margins, paddings, font-sizes of all elements are reset to be
the same. You will have to redeclare styling for common typographic
elements
• Normalizing — preserves useful default styles rather than “unstyling”
everything. It also corrects bugs for common browser dependencies
It's a good idea to choose resetting when you have very a customized or
unconventional site design such that I need to do a lot of my own styling do
not need any default styling to be preserved

Q39: When would you use AngularJS vs jQuery?


Mid

jQuery 51
Answer

• jQuery - is a library used for DOM Manipulations - Has nothing to do


with models - don't have two-way binding feature - becomes complex
 

fi
fi
d

and dif cult to maintain when size of project increases - Sometimes you
have to write more code to achieve the same functionality as in Angular

• Angular - is a MVVM Framework - Used for creating SPA (Single Page


Applications) - Has key features like routing, directives, two way data
binding, models, dependency injection, unit tests etc - is modular -
Maintainable, when project size increases - is Fast and many more.

Basically jQuery is a single tool (solves one speci c problem: dom


manipulation) where AngularJS is a whole toolbox with all kind of tools for
different problems (routing, modelbindings, dom manipulation, etc.). Actually
jqLite (subset of jQuery) is part of the AngularJS and you use it to solve the
dom-manipulation thing

Common HTML Interview Question

• Rewrite given sample of code using proper HTML elements

• Which parts of HTML have the greatest impact on SEO

• What you should include to change site thumbnail when sharing on social
media

• How to optimize images for the best performance and quality

• What is defer and async attribute in script element and what's the
difference

What you need to know about CSS as Junior Front-end Develope

As a Junior Front-end Developer you should know most of CSS properties

You should know how to build common UI elements such as a Modal or Multi-level
Navigation, how to implement CSS Animations and use Flexbox and CSS Grid

Knowledge of Responsive Design and good practices of developing for smaller


screens is often must have
.

fi
?

fi
.

In commercial projects you will rarely see a plain CSS les. Learn about are CSS
preprocessors such as SCSS, BEM methodology and CSS-in-JS

Common CSS Interview Question

• What is the difference between box-sizing: content-box and box-sizing:


border-box

• What are the good practices of CSS Animations? What you should avoid and
why

• Rewrite given sample of code in SCSS using BEM methodology

• What values of display property you know? What are the differences

What you need to know about JavaScript as Junior Front-end Develope

During job interview you should expect questions about DOM manipulation, using
the most common array methods and many others parts of JavaScript. It's hard to
list all of them. In the end you should be able to understand code written in
JavaScript and write simple features. I would recommend you to take a look
at Functional Programming in Javascript Series from Fun Fun Function channel on
Youtube and free JavaScript Algorithms And Data Structures course on
freeCodeCamp. After you complete it you should be able to answer most of the
questions related to JavaScript

Common JavaScript Interview Question

• What is the difference between var, let and const

• Use lter array method to remove every odd number from given array

• Implement reverse method, which is available on every String. Ex.


using "string".reverse() gives "gnirts"

• How does this behave in arrow function and regular function

What you should know about JavaScript Framework such as React, Angular
or Vu

Knowledge of JavaScript framework doesn't have to be required to get hired as a


Junior Frontend Developer. But for some companies it is needed to start working in
the project, for others you will gain extra points during the interview

The most common way to test your framework knowledge will be a task to complete
before the interview. You should know how to interact with external REST APIs,
?

fi
e

fi
?

manage and send form data, implement simple UI elements such as a modal,
dropdown, tabs or slider

It's good to know code testing techniques so you can at least talk about them

Common React/Angular/Vue Interview Question

• Create application, which fetches list of movies from API, can sort them and
display movie details on a separate page (task before interview

• Use state management library (ex. Redux or Mobx in React) to implement


counter. You should be able to increment and decrement counter using
buttons

• Describe how to debug web application in given framework

Bonus: Soft skill

It is very important to have good soft skills when applying for a job. Developing
apps is almost always done as a team. During interview you should present
yourself as a person which is easy to communicate and work with

Be truly interested and engaged in a conversation. Try to explain and describe your
solutions. You will have much bigger chance to get hired if the interviewer will like
you

Before the interview look for information about the company you are applying for
and try to use it during the conversation

1. Build a Blog Template with HTML and CSS

When you just start


learning front-end
development it's
important to consolidate
your knowledge about
HTML and CSS.
Building a Blog Template
.

is a good idea for your rst bigger project. Do not worry about design, there
are many resources available online

Requirements

• build a homepage, single post page, and contact pag

• try using CSS Gri

• your page should be responsive (RWD

Nice to haves

• add a slide

• use real content instead of Lorem Ipsu

2. Build a Tic-tac-toe game with Pure JavaScript

Building a game in a browser


can be a great exercise to test
your JavaScript skills. You will
have to react to user events,
interact with DOM, and store
game data. It's also a great
project to show to your
colleagues and family

Requirements

• welcome screen with name and symbol input for each playe

• rendering a symbol when a user clicks on the empty cel

• win veri catio

Nice to haves

• creating a scoreboard and saving it to local storag

• playing with the computer, using ex. minmax algorithm or your own solutio

3. Location sharing with Pure JavaScript and Maps Servic


fi
r

fi
.

A simple app where you can share location with your friend can be both a
demanding project and a very useful tool you can use. In this project, you will use
JavaScript to interact with external services for maps (ex. Google Maps or
OpenStreetMap)

Requirements

• displaying your current location on a ma

• "Share" button which creates a link with your current locatio

• a page which displays a location embedded in UR

Nice to haves

• sharing your realtime location, you will have to save it and read it every few
seconds from an external database (ex. Firebase

• displaying the realtime location of your friend when he accesses the pag

4. Build TV Series Tracker with JS Framework (React, Vue, Angular or other

This project will help every TV Series fan, track premieres of new episodes. It will
be a great opportunity to use a JavaScript framework you are comfortable with
:

Requirements:

•searching for TV Series


using external API (ex.
TVMaze API

•adding TV Series to the


tracking lis

•displaying tracked TV
Series list along with
newest episode
premiere dat

•single page view with


more details about TV
Serie

•saving tracking list to


local storag

Nice to haves

• sending emails or push noti cations when a premiere is comin

5. Home Budget App with JS Framework (React, Vue, Angular or other

Creating a home budget App will be an ultimate check for your skills as a Junior
Front-end Developer. It will check your ability to create forms and store information,
but it can also help you save money

Requirements

• adding a categor

• adding expense with name, amount and categor

• sum up of monthly spendings split into categorie

• saving data to an external database (ex. Firebase

Nice to haves

• sign up, log in, and handling multiple user


s

fi
!

Summar

Side projects are a great way to show your skills to land rst job as Junior Front-
end Developer. Let your potential employer know what did you build so far. They
will not only look at the webpage but also analyze your code, so make sure it's
clean

Before you start building something new create a list of requirements for MVP
(Minimum Valuable Product). During development, you will discover more
interesting functionalities your application can have, just add it as a nice to have to
the list. It will help you nish the project on schedule

Frontend developer interview – key area


These are de nitely the most important areas you should expect during a frontend
interview in 2021

• Very good understanding of JavaScript – that one is quite obvious. Aside of the
language itself, you should be familiar with static code analysis tools

• Good knowledge of top frameworks/libraries (depending on speci c needs of the


company you’re applying for): React, Angular, [Link] etc

• HTML5 and CSS – writing semantically correct HTML, pixel perfect


implementations of designs into CSS, attention to detail, responsive web design

• English – you should be able to communicate uently and make your points
clearly

• Browsers – practical knowledge of browsers, how they work and how to debug
your code in the browser

• Practical experience working with APIs (Rest APIs and/or GraphQL)

• Experience in working with GIT repos

• Experience in writing tests


.

fi
:

fi
.

fl
.

fi
fi
.

Frontend interview question


Typical frontend interview questions in 2021 include

• Do you use CSS preprocessors? What are their pros and cons

• Explain the difference between Flexbox and CSS Grid. When would you use
any of these? What are their strengths and weaknesses

• What is and why to use the Block Element Modi er (BEM) convention

• JavaScript: Explain how you can use JavaScript functions such as forEach,
Map, or Reduce.

• JavaScript: Common questions are often related to ECMAScript 6+, including


arrow functions and how they work, difference between var, let, const etc

• JavaScript: Explain the difference between Async/Await and Promises

• React: What is and how you can take advantage of PureComponent

• React: What are higher-order components (HOC) and how you can use them
in practice

• React: What do you think about the latest updates of React – go over the
bene ts and uses of React Hooks

CSS
1. When you do relative design you have different units of relativity like em, %, etc. One
of them is called em and another one rem. Can you tell me the difference between
these two?
EM are relative to the immediate parents while REM is only relative to the html (root) font-
size.
2. How do you position something to the bottom right page?
Let’s say we have a code like this:

Then our CSS needs to look like this:

The way this works is that absolutely positioned elements are always positioned with
respect to the first relatively positioned parent element, or the window. Because we set the
fi
.

fi
:

box’s position to relative, .box-text positions its right edge to the right edge of .box and its
bottom edge to the bottom edge of .box.
JavaScript
3. Besides callbacks what are other ways to handle asynchronous programming in JS?
Using Promises — standard way.
4. Speaking of Promises do you know what async-await is?
What is the difference between async/await and Promises?
None! Async/await is a different API to use promises. Async/Await provide a much nicer
syntax in more complex scenarios. In particular, anything dealing with loops or certain
other constructs like try/catch.
5. What are the two most popular Ajax libraries?
Axios and fetch.
React
6. React — When you want to make Ajax call, what hook would you normally use?
useEffect hook.
7. React — If you are rendering array of objects what would you normally pass with the
key proper? What is the best value to use?
Some unique id. The GUID from database or something.
8. React — Do you know what a Fragment is in React?
Multiple parts of the component needs to be wrapped with something to become a node.
Fragment is a wrapper around multiple components that then becomes a single node but it
doesn’t render anything to the DOM — it is an invisible wrapper.
9. React — Talking about Fragments, do you know why are Fragments better to use
than divs?
There are couple of reasons for that. Fragments are a bit faster and use less memory by not
creating an extra DOM node. But, this only has a real benefit on very large and deep trees.
Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child
relationships, and adding divs in the middle makes it hard to keep the desired layout. Also,
The DOM Inspector is less cluttered.
HTTP
10. Let’s say your are making a API and you want to modify a resource, what HTTP
verb would you use?
PUT or PATCH.

What is a CSS oat and why might you use it?

Why this matters:

This technical question is best suited to more junior front end developers and tests their
understanding of the CSS language. While the technical knowledge is important, it’s the
“why” that’s really important here. The candidate’s reason for using oats can help you
determine their approach to styling website—and whether or not they’re a good t for your
company

What to listen for:


.

fl
fl
fi
• Candidates should be able to clearly and concisely describe what the CSS oat
property is and when it’s appropriate to use
• If they mention that they use oats to create their entire website layout, this may be
a sign that they’re following outdated practices

What is Ajax? What are the advantages of using it?

Why this matters:

Ajax stands for asynchronous JavaScript and XML (although in modern usage, JSON may
be substituted for XML). Essentially, Ajax is a set of web development tools that enable
developers to change parts of a web page in the background without reloading the entire
page. It’s a good question to test candidates’ basic understanding of different web
programming languages and their depth of knowledge

What to listen for:

• Listen for answers that mention advantages like improved interactivity and
maintaining Javascript variables and DOM state on a page
• Strong answers might also touch upon some of the disadvantages, such as the fact
that it’s more dif cult to bookmark dynamic pages

What JavaScript templating libraries do you use and why?

Why this matters:

JavaScript templating is a simple and useful strategy used to separate HTML structures
from the JavaScript strings they contain. Since this strategy allows developers to be more
ef cient, all candidates should ideally have a few libraries that they regularly use and can
discuss con dently

What to listen for:

• Answers may include libraries like [Link] and [Link]


• The candidates’ reasoning is ultimately more important than their preferences—for
example, [Link] is better suited for performance-critical projects or ones that
require block expression

Thinking back on the last website or web application that you


worked on, what steps did you take to ensure it was user-friendly
and accessible?

Why this matters:


 

fi
fi
fi
.

fl
.

fl
Front end developers should always have the end user in mind when developing a new
website or web application, so the best candidates will take the user experience (UX) very
seriously. What best practices have they applied to previous projects? Have they tested
assistive solutions to make sure the website or application is accessible to all potential
users

What to listen for:

• Look for candidates who have rst-hand experience implementing usability and
accessibility standards
• Top answers may mention performing user testing across various devices, ensuring
the site or app worked seamlessly and intuitively no matter how a user engaged
with it

Talk me through your process for xing cross-browser compatibility


issues. Provide an example of a speci c challenge you might face
and how you would x it.

Why this matters:

Users often have different preferences when it comes to browsers, so it’s important for
your company to provide the same exceptional experience, no matter how they choose to
access your website. Browser compatibility can be a pain to troubleshoot, so this question
can give you a real insight into a candidate’s patience

What to listen for:

• Candidates should demonstrate that they’re dedicated to working through the kinks,
no matter how frustrating they may be
• A good response will show strong attention to detail and a passion for delivering the
best possible user experience to the website’s visitors

If you could master one technology this year, which would you
choose, and how would you go about doing it?

Why this matters:

This question lets you test a candidate’s ambition and their willingness to learn. The
development landscape evolves fast, so these traits can help a candidate stay ahead of
the curve. Dig a little deeper by asking them why they chose that particular technology. Do
they think it will be relevant to their work? Do they want to bring more value to their
employer
 

fi
fi
.

fi
fi
.

What to listen for:

• Strong answers might mention taking a boot camp in their spare time or following
forums and blogs that center around the technology
• Ideally, candidates will already be taking steps to master their chosen technology

What were the last questions you viewed on Stack Over ow? What
were the last questions you answered?

Why this matters:

Stack Over ow is an invaluable resource for front end developers, allowing them to source
advice and answers to development questions from the wider tech community. This
question allows you to test how advanced a candidate’s skills are based on the level of
questions they’re viewing and answering—as well as their passion for their eld

What to listen for:

• Look for signs that the candidate is actively engaged in the community at large and
willing to share their expertise with others
• If they mention that they’re always looking up answers to simple problems, they
might struggle with more complex challenges
fl
.

fl
fi
.

You might also like