Front-End Development

Skills Evaluation Framework

Technical Brief

Introduction responsive applications.

Front-End engineers are responsible for This paper goes into detail about our
the planning, designing, building and imple- guidelines for creating the framework based
mentation of user interface systems for web- on consultation with subject matter experts
based applications and/or software with an emphasis on common core skills. We
programs. The demand for this role is will then illustrate how the score is calculated
projected to grow by 13% from 2020 to 2030 1 as well as how the results map to the core
as there is more emphasis across the industry skills for Front-End engineers.
around what product excellence means and Framework Specifications
how to design for an intuitive and excellent
user experience. While many companies are This framework is designed to model
looking for front-end engineers who have closely to what the engineer would be
experience in one of the common frame- expected to perform on the job. It can be
works such as React, Angular, and Vue.js, this utilized across different methods of delivery,
framework paper will dive into the impor- assessment or interview, while preserving its
tance of mastering the fundamental building objectivity by automatically calculating the
blocks of front-end development that include final score.
HTML, CSS, JavaScript. The maximum allowed completion time
Although front-end engineers share many for the framework is 90 minutes and it
of the core skills and knowledge with Soft- consists of 4 levels that are progressive in
ware engineers such as problem solving and nature in mimicking a real world scenario.
code-writing, the Front-End Development The scenario and what is being assessed
Framework is designed specifically to assess should be common applications and/or
additional skills that are unique to Front-End features that ideally would not create any
engineers such as being able to translate UX unfair advantages or disadvantages to candi-
design into functional applications, coordi- date populations (e.g. asking a candidate to
nating and handling back-end APIs, and implement a short order or support limit
understanding how to design intuitive and feature are not ideal since it can create unfair

1 Bureau of Labor Statistics, U.S. Department of Labor, Occupational Outlook Handbook, Web Developers and Digital
Designers, at https://www.bls.gov/ooh/computer-and-information-technology/web-developers.htm

1
advantages for candidates who may have The average time for solving this level
prior trading knowledge as well as the should be 25 minutes.
concepts require too much elaboration in a Expected Knowledge
limited time setting). Possible scores range
• Everything from the prior level
from 200 to 600.
• Dynamic interactions using JavaScript
Level 1 – Common Layout and Basic and advanced CSS
Rendering
Can Include
The average time for solving this level
• Handling user actions in JavaScript
should be 15 minutes.
• Mutating the DOM using JavaScript
Expected Knowledge
• Implementing data inputs and data
• HTML layout and structure
validation
• Document-Object Model (DOM)
Should Exclude
• CSS styling
• CSS animations/transitions
Can Include
• Responsive design
• Standard HTML tags and attributes
• Interaction with APIs
that are supported by common
browsers (Chrome, Safari, Firefox, • Cross-browser compatibility
Edge) • Knowledge of particular HTML/
• Simple scripting with JavaScript (e.g., templating or CSS/styling frameworks,
rendering UI elements based on stati- including jQuery
cally provided JSON-style data) Level 3 – Consuming an API
• Straightforward use of CSS for styling The average time for solving this level
Should Exclude should be 30 minutes.
• Complex scripting with JavaScript Expected Knowledge
(e.g., user interactions, calling APIs) • Everything from the prior levels
• CSS animations/transitions • Using asynchronous JavaScript to
• Tricky CSS cascading/selector speci- interact with an API
ficity logic Can Include
• Responsive design • Knowledge of REST API standards
• SVG markup • Knowledge of how to asynchronously
• Cross-browser compatibility call remote APIs from the browser
• Knowledge of particular HTML/ • Basic/simple auth strategies like
templating or CSS/styling frameworks, putting a token or password in HTTP
including jQuery headers
Level 2 – Dynamic Interaction • Handling API errors and response

2
 codes • Knowledge of particular JS libraries
• Working with APIs that include pagi- used for API interaction (e.g., axios,
nation jQuery)
• Calling multiple, possibly dependent, Level 4 – Extending Design Functionality
API endpoints asynchronously The average time for solving this level
Should Exclude should be 20 minutes. Level 4 does not intro-
• Less commonly used API protocols duce any new fundamental skills or knowl-
(e.g., WinForms, SOAP, RPCs, edge that are being evaluated, but it is
GraphQL) focused on evaluating how candidates have
approached the requirements up to this point
• HTML form submissions (non-AJAX)
and evolve its design to accommodate the
• Complex auth strategies like OAuth
expanded, yet related, requirements.
• Websockets
Expected Knowledge
• Server-side knowledge or implementa-
• Everything from the prior levels
tion of the API

Framework Example Content

Below is an example of a question that is developed based on the structure of the frame -
work. Similar questions are also created and monitored on an ongoing basis to ensure overall
consistency as well as preventing widespread cheating and plagiarisms.

Scenario: Implement a simple task tracking application

Level 1 – Common Layout and Basic Rendering
The designer has provided you with the starting HTML template, the requirement is to take the provided JSON
file data.json (see below) to properly assign the provided tasks into their corresponding columns based on the
returned values: “To-do”, “In Progress”, “Done”.

Starting HTML Template

1 <div className="board">
2 <h2 className="board__title">Tasks</h2>
3 <div className="board__columns">
4 <div className="column">
5 <h2 className="column__title">TO_DO</h2>
6 <div className="column__cards">
7 <div className="card">
8 <h3 className="card__title">Task 1</h3>
9 <p className="card__description">Detailed task 1 description</p>
10 </div>
11 </div>
12 </div>
13 </div>
14 </div>

3
 data.json
1 {
2 "todoItems": [
3 {
4 "title": "Task 3",
5 "description": "Detailed task 3 description",
6 "status": "TO_DO",
7 "userId": "userId2"
8 }
9 ],
10 "inProgressItems": [
11 {
12 "title": "Task 1",
13 "description": "Detailed task 1 description",
14 "status": "IN_PROGRESS",
15 "userId": "userId1"
16 }
17 ],
18 "doneItems": [
19 {
20 "title": "Task 2",
21 "description": "Detailed task 2 description",
22 "status": "DONE",
23 "userId": "userId2"
24 }
25 ]
26 }

Level 2 – Dynamic Interaction

The designer has provided you with the following HTML template to add a form so that new tasks can be added
to the board:

New Task HTML Template

1 <form>
2 <div class="input-container">
3 <input name="taskTitle" placeholder="Task title*" value=""></div>
4 <div class="input-container">
5 <textarea name="taskDescription" placeholder="Task description*"></textarea></div>
6 <div>
7 <input type="submit" value="Create task"></div>
8 </form>

You are asked to support the following requirements:

• Enable users to create and append a new task that by default gets added to status TO_DO.

Level 3 – Consuming an API

The back-end API is now available to consume which allows you to get a list of all tasks to display on the board.
The response of the API is slightly different format compared to the static JSON that is provided in Level 1:

Response to https://contentapi.codesignal.com/tasks

4
 1 {
2 "data": [
3 {
4 "title": "Task 1",
5 "description": "Detailed task 1 description",
6 "status": "IN_PROGRESS",
7 "assignedUser": "userId1"
8 },
9 {
10 "title": "Task 2",
11 "description": "Detailed task 2 description",
12 "status": "DONE"
13 },
14 {
15 "title": "Task 3",
16 "description": "Detailed task 3 description",
17 "status": "TO_DO",
18 "assignedUser": "userId2"
19 }
20 ]
21 }

You are asked to use the updated task card template so that you can appropriately display the assigned user by
consuming a separately API endpoint:

Response to https://contentapi.codesignal.com/users/{userId}
1 {
2 "id": "userId1",
3 "firstName": "Andrew",
4 "lastName": "Quill"
5 }

Level 4 – Extending Design Functionality

Enable users to move the tasks between different columns on the board - “Move right” and “Move left”. When the
user presses the “Move right” button, the card must be moved to the column on the right unless it is at the right -
most column. Apply the same logic to “Move left” as well. The very left column tasks shouldn’t include the “Move
left” button, as well as the very right column tasks shouldn’t include the “Move right” button. The designer has
provided you with the HTML template for the new buttons rendering:

Move card buttons HTML template

1 <div className="card__buttons">
2 <button
3 aria-label="button left"
4 className="card__button card__button--left"
5 type="button"
6 />
7 <button
8 aria-label="button right"
9 className="card__button card__button--right"
10 type="button"
11 />
12 </div>