-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathhelp.html
137 lines (131 loc) · 6.63 KB
/
help.html
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./router.js"></script>
<title>Join</title>
<link rel="shortcut icon" href="./favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="./assets/styles/reset.css" />
<link rel="stylesheet" href="./assets/styles/font.css" />
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./assets/styles/help.css" />
<link rel="stylesheet" href="./assets/styles/header.css" />
<link rel="stylesheet" href="./assets/styles/navbar.css" />
</head>
<body onload="init()">
<header id="header"></header>
<nav id="navbar" class="navbar"></nav>
<div class="head-and-arrow">
<h1>Help</h1>
<a class="blue-arrow" onclick="goBack()"
><svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.0097 17.8855H30.1871C31.0362 17.8855 31.7246 18.5739 31.7246 19.4231C31.7246 20.2722 31.0362 20.9606 30.1871 20.9606H13.0097L20.17 28.1209C20.7704 28.7213 20.7704 29.6946 20.17 30.295C19.5697 30.8954 18.5963 30.8954 17.996 30.295L8.53824 20.8373C7.75719 20.0562 7.75719 18.7899 8.53824 18.0089L17.996 8.55115C18.5963 7.9508 19.5697 7.9508 20.17 8.55115C20.7704 9.1515 20.7704 10.1249 20.17 10.7252L13.0097 17.8855Z"
fill="#29ABE2" />
</svg>
</a>
</div>
<div class="help-below-section">
<p class="inter-extralight">
Welcome to the help page for <span>Join</span>, your guide to using our kanban project management tool. Here,
we'll provide an overview of what <span>Join</span> is, how it can benefit you, and how to use it.
</p>
</div>
<main class="help-main">
<div class="whats-join-section">
<h4 class="inter-medium">What is Join?</h4>
<p class="inter-extralight">
<span>Join</span> is a kanban-based project management tool designed and built by a group of dedicated
students as part of their web development bootcamp at the Developer Akademie.
</p>
<p class="inter-extralight">
Kanban, a Japanese term meaning "billboard", is a highly effective method to visualize work, limit
work-in-progress, and maximize efficiency (or flow). <span>Join</span> leverages the principles of kanban to
help users manage their tasks and projects in an intuitive, visual interface.
</p>
<p class="inter-extralight">
It is important to note that <span>Join</span> is designed as an educational exercise and is not intended for
extensive business usage. While we strive to ensure the best possible user experience, we cannot guarantee
consistent availability, reliability, accuracy, or other aspects of quality regarding <span>Join</span>.
</p>
</div>
<h4 class="how-to-use-head inter-medium">How to use it</h4>
<p class="inter-extralight how-to-use-p">Here is a step-by-step guide on how to use <span>Join</span>:</p>
<div class="how-to-use-section">
<div class="how-to-use-containers">
<h3 class="inter-medium">1.</h3>
<div class="howto-heading-and-p">
<h4 class="inter-medium">Exploring the Board</h4>
<p class="inter-extralight">
When you log in to <span>Join</span>, you'll find a default board. This board represents your project and
contains four default lists: "To Do", "In Progress", “Await feedback” and "Done".
</p>
</div>
</div>
<div class="how-to-use-containers">
<h3 class="inter-medium">2.</h3>
<div class="howto-heading-and-p">
<h4 class="inter-medium">Creating Contacts</h4>
<p class="inter-extralight">
In <span>Join</span>, you can add contacts to collaborate on your projects. Go to the "Contacts" section,
click on "New contact", and fill in the required information. Once added, these contacts can be assigned
tasks and they can interact with the tasks on the board
</p>
</div>
</div>
<div class="how-to-use-containers">
<h3 class="inter-medium">3.</h3>
<div class="howto-heading-and-p">
<h4 class="inter-medium">Adding Cards</h4>
<p class="inter-extralight">
Now that you've added your contacts, you can start adding cards. Cards represent individual tasks. Click
the "+" button under the appropriate list to create a new card. Fill in the task details in the card, like
task name, description, due date, assignees, etc.
</p>
</div>
</div>
<div class="how-to-use-containers">
<h3 class="inter-medium">4.</h3>
<div class="howto-heading-and-p">
<h4 class="inter-medium">Moving Cards</h4>
<p class="inter-extralight">
As the task moves from one stage to another, you can reflect that on the board by dragging and dropping
the card from one list to another.
</p>
</div>
</div>
<div class="how-to-use-containers">
<h3 class="inter-medium">5.</h3>
<div class="howto-heading-and-p">
<h4 class="inter-medium">Deleting Cards</h4>
<p class="inter-extralight">
Once a task is completed, you can either move it to the "Done" list or delete it. Deleting a card will
permanently remove it from the board. Please exercise caution when deleting cards, as this action is
irreversible.
</p>
<br />
<p>
Remember that using <span>Join</span> effectively requires consistent updates from you and your team to
ensure the board reflects the current state of your project.
</p>
<br />
<p>
Have more questions about <span>Join</span>? Feel free to contact us at
<a href="mailto:[email protected]">[email protected]</a>. We're here to help you!
</p>
</div>
</div>
<br />
<div class="how-to-use-containers">
<h3 class="inter-medium">Enjoy using Join!</h3>
</div>
</div>
</main>
<script src="./scripts/helper/initials.helper.js"></script>
<script src="./scripts/templates/header.template.js"></script>
<script src="./scripts/templates/navbar.template.js"></script>
<script src="./scripts/help.js"></script>
<script src="./scripts/header.js"></script>
</body>
</html>