-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathInstructions.htm
98 lines (92 loc) · 2.32 KB
/
Instructions.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
<title>Instructions - CTM UI test</title>
<meta charset="UTF-8">
<style>
html {
padding: 30px 0 50px;
font-family: sans-serif;
background: #eee;
color: #222;
}
h2 {
margin-bottom: 0;
}
li {
margin-bottom: 5px;
}
/*img {*/
/*max-width: 100%;*/
/*margin: 20px auto;*/
/*display: block;*/
/*}*/
.main {
width: 70%;
margin: 0 auto;
}
.screenshot {
max-width: 1200px;
margin: 20px auto;
display: block;
}
</style>
</head>
<body>
<div class="main">
<h1>comparethemarket.com UI test instructions</h1>
<p class="p">
The aim of this assessment is to allow you to demonstrate your skills in developing user interfaces for the web. We want to see both how you approach web UI construction and also the strength of the implementation you arrive at.
</p>
<p class="p">
Skills that we are particularly keen for you to exhibit are:
</p>
<ul>
<li>
An approach to writing code that follows industry best practice and displays an understanding of web standards.
</li>
<li>
A knowledge and use of tools and frameworks that aids UI / Front-end development.
</li>
<li>
An appreciation of building websites for both small and large screen devices, and different browsers.
</li>
</ul>
<h2>
Assessment task
</h2>
<p class="p">
Comparethemarket.com want to build a new credit card comparison webpage. The below design visual has been created and you are tasked with building a working prototype with JavaScript, HTML and CSS.
</p>
<p class="p">
<img src="visuals.png" class="screenshot">
</p>
<p class="p">
The prototype you build should:
</p>
<ul>
<li>
Take you approximately 2-4 hours to develop.
</li>
<li>
Retrieve the credit card data from the JSON file and show the cards on screen with the images. Find all these files on the <code>assets</code> folder.
</li>
<li>
Work in most modern browsers.
</li>
<li>
Look good on small screens through to large.
</li>
</ul>
<p class="p">
You can use whatever technology or tools you want to develop the web page.
</p>
<p class="p">
Good luck,
</p>
<p class="p">
CTM recruiting team
</p>
</div>
</body>
</html>