forked from auxfuse/hackathon-git-labs
-
Notifications
You must be signed in to change notification settings - Fork 1
/
basic.html
436 lines (413 loc) · 15.3 KB
/
basic.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
<title>Basics guide to making your first Pull Request (PR)</title>
</head>
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300&family=Roboto:wght@300&display=swap");
* {
box-sizing: border-box;
margin: 0;
}
/* nav bar */
nav{
background: #1f5d64;
height:4.8rem ;
width: 100%;
border-radius: 0px 0pc 14px 14px;
}
label.logo
{
color: white;
font-family: var(--primary-font);
font-size: 2rem;
padding: 0rem 1rem;
line-height: 4.5rem;
font-weight: bold;
margin: 0;
}
nav ul {
float: right;
margin-left: -3rem;
margin-right: 2rem;
}
nav ul li {
display: inline-block;
list-style-type: none;
line-height:4.5rem ;
padding-left: 1rem;
}
nav ul li a {
color: white;
font-size: 1rem;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
padding: 1rem;
border-radius: 10px;
}
ul li a:hover{
color: #072c30;
background-color: antiquewhite;
transition: .5s;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}
.checkboxbtn span
{
font-size:2rem ;
color: white;
float: right;
line-height: 4.5rem;
margin-right:20px;
cursor: pointer;
display: none;
}
#checkbox{
display: none;
}
/* nav media Queries */
@media (max-width: 992px)
{
label.logo
{
font-size:1.5rem;
padding-left: 2rem;
}
nav ul li a {
font-size: 0.8rem;
}
}
@media (max-width:786px)
{
.checkboxbtn span {
display: block;
}
nav ul li{
display: block;
}
nav ul{
display:block;
position:fixed;
width: 100%;
height: 100vh;
background-color: #072c30;
top: 4.8rem;
margin: 0;
text-align: center;
left: -100%;
transition: all .5s;
border-radius: 14px;
}
nav ul li a{
font-size: 1rem;
}
nav ul li a:hover{
color: antiquewhite;
background: none;
transition: .5s;
}
#checkbox:checked ~ul {
left: 0;
}
}
/* nav end */
body {
font-size: 16px;
line-height: 2rem;
font-weight: 400;
font-family: "Roboto", sans-serif;
margin: 0 auto;
height: 100%;
}
.bodydiv
{
padding: 0 2% 2% 2%;
}
pre {
padding: 0.66001rem 9.5px 9.5px;
line-height: 2rem;
background: linear-gradient(to bottom,#fff 0,#fff 0.75rem,#f5f7fa 0.75rem,#f5f7fa 2.75rem,#fff 2.75rem,#fff 4rem);
background-size: 100% 4rem;
border: 1px solid #D3DAEA;
}
code {
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family: 'monospace', monospace;
}
a {
text-decoration: none;
cursor: pointer;
color: #0B826E;
}
h3 {
font-size: 1.6rem;
font-weight: 700;
}
img {
width: 50%;
height: auto;
margin: 0 auto;
}
</style>
<!-- mav -->
<nav>
<input placeholder="#" type="checkbox" id="checkbox" />
<label for="checkbox" class="checkboxbtn">
<span class="material-symbols-outlined">
menu
</span></i
></label>
<label class="logo">Hackathon Git Labs</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a class="active" href="#">Pages</a></li>
<li><a class="active" href="#">Pages</a></li>
<li><a class="active" href="#">Form</a></li>
<li><a class="active" href="#">Contact Us</a></li>
</ul>
</nav>
<body>
<div class="bodydiv">
<header>
<h1>Basics guide to making your first Pull Request (PR)</h1>
</header>
<main>
<p>
By following the below guide, your actions will have created a card on the
Landing page of the project, with some information displayed about you.
It's a fun little exercise that gives you the steps to navigate the
project and make your first Open Source Contribution to this project (or
maybe it is your very first ever!) via Pull Request (PR). 🤜
</p>
<p>
Get started! Make your first PR and get going into the world of open
source!
</p>
<h2>👇 Participant steps: 👇</h2>
<h3>1. Project Setup</h3>
<hr />
<ul>
<li>
Fork the repo. Super simple here, go to
<a href="https://github.com/auxfuse/hackathon-git-labs">the repo</a>
, and click on the "Fork" button in the top right of the screen. The
window should then refresh, and you should be redirected to your newly
created Fork of the project.
</li>
<p>
🍴 <-- So what is a fork? It's a copy of the original repository. But
one that you own. Any changes you make to the project in the fork won't
affect the original. To affect the original, continue following the
steps below to make a Pull Request! 😉
<a
href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks"
>Learn more about Forks</a
>
</p>
<li>
Go to your preferred IDE/Editor and clone the Forked repo.
<ul>
<li>
Go to the forked repository in Github. This can be found in your
account, under "repositories".
</li>
<li>
Hit the green "Code" button, and then click on "HTTPS" and copy the
link.
</li>
</ul>
<img src="docs/images/clone.png" alt="Repository clone" />
</li>
<li>
<ul>
<li>
In your IDE/Editor, open a terminal/command line, and enter the
following: <code>git clone {insert copied url here}</code> and hit
"Enter" on your keyboard.
</li>
<li>
The Forked repository will now clone to your preferred development
method.
</li>
<ul>
<li>
If you are using Gitpod, you do not need to do these steps.
Instead, you can go to the forked repository and click on the
green "Gitpod" Extension button to open the project for editing.
</li>
</ul>
</ul>
</li>
<li>
Your project should already be opened in your preferred IDE/Editor at
this point, but just in case. Open your IDE/Editor, and then open the
project. 😀
</li>
<li>Before doing any code, lets open a terminal/command line.</li>
<li>
Set the upstream by running this command
<code
>git remote add upstream
https://github.com/auxfuse/hackathon-git-labs.git</code
>, in your opened terminal/command line.
<ul>
<li>
We can then check to ensure that the remote has been added correctly
by running <code>git remote -v</code> in the terminal. And you
should get this type of response.
</li>
</ul>
<pre>
<code>
$ git remote -v
origin https://github.com/YOUR_USERNAME/hackathon-git-labs.git (fetch)
origin https://github.com/YOUR_USERNAME/hackathon-git-labs.git (push)
upstream https://github.com/auxfuse/hackathon-git-labs.git (fetch)
upstream https://github.com/auxfuse/hackathon-git-labs.git (push)
</code>
</pre>
<p>
The <em>"origin"</em> in the above snapshot is your Forked repository.
The <em>"upstream"</em> is the link we just set so that our newly
Forked repository can <b>see</b> the original repository and
vice-versa. Lots of thought here, and it does take a bit of getting
used to! So stick with it. 🤔💭 Basically all we are doing here, is
setting up the relationship between the original repository and the
fork. 🤝 Without this step, we can't make a Pull Request.
</p>
<p>
<b>N.B</b>: If you are using Gitpod, and you open the forked
repository using Gitpod this step will be done for you by default. But
make sure to double check using the
<code>git remote -v</code> command. 😀
</p>
</li>
<li>
Our last step before we jump into the project is to Create a branch.
</li>
<ul>
<li>
A branch is another layer of security for us to lean on. It's a
diverging path from the main branch that exists by default in every
repository.
<a
href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches"
>
Learn more about Branches</a
>
</li>
<li>
Inside your terminal/command line in your IDE/Editor, run this
command: <code>git checkout -b branch-name</code>, replacing the
"branch-name" with something more unique to you.
</li>
<li>
This command creates a branch, and automatically moves you into that
branch 😁.
</li>
<li>
Lastly, we need to tell Git that this new branch is to be the current
<b>tracked</b> branch. Back into our terminal, we now run:
<code>git push -u origin branch-name</code>. 🌿🌳
</li>
</ul>
</ul>
<p>
<em>
<b>
All of the initial git setup is done. All in all, if you follow this
to the letter, this is a few minutes of work. 😅 Crazy to think of
something you do regularly just by muscle memory alone, when viewed in
the written word, is quite a lengthy process. 🤯🧠
</b>
</em>
</p>
<h3>2. Adding to Project</h3>
<hr />
<ul>
Go to the <code>community.json</code> file and copy the following JSON
object and replace the <b>values</b> with your own:
</li>
<pre>
<code>
{
"name": "your_name_or_alias",
"course_start": "year_of_course_start",
"course_stage": "student_alum_staff_mentor",
"favorite_language": "favorite_language",
"currently_learning": "latest_learning"
}
</code>
</pre>
<p>For reference, the <b>values</b> are on the right side of the colon <code>(:)</code>, and are contained inside the double quotes (""). Take a look at this snapshot:</p>
<img src="docs/images/JSONvalue.png" alt="JSON values">
<p>Keep these short and sweet. This is just a small blurb about you as a developer. <em>Anything that exceeds the bounds of the card itself will be truncated.</em></p>
<li> Paste this updated JSON Object after the latest object in the <code>community.json</code> file. Keeping to the current format. Separate your pasted JSON Object from the last using a comma, (,).</li>
<li>A small example of the json file, to take note of the structure, including the separation of each JSON Object using a comma, (,):</li>
<img src="docs/images/JSONseparator.png" alt="JSON separator">
<li>The JSON is formatted as follows:</li>
<ul>
<li> Notice that the JSON objects, those inside the curly braces, and inclusive of the curly braces {}, are separated by a comma. 👈 <b>This part is super important when pasting in your own JSON Object.</b></li>
<li>Each individual set of key/value pair inside the JSON objects, are also separated by a comma.</li>
<li>Keys and values are separated by a colon, <code>:</code>. With keys on the left of the colon, and values on the right. And both are surrounded by double quotes, ("").</li>
<li>Take note of the following example of a Key/Value pair:</li>
<img src="docs/images/KVpair.png" alt="Json format">
<li>After you have added yourself to the <code>community.json</code> file, you can now view the project in preview mode to see your card added to the website.</li>
<ul>
<li> Depending on your IDE/Editor of choice, there are a few ways to do this. Most IDEs/Editors will have a built in preview option. If you are unsure, a quick google search on how to do this for your editor is the best course of action.</li>
</ul>
</ul>
</ul>
<h3>3. Git and The Pull Request</h3>
<hr>
<ul>
<li>Add all your work to the branch using <code>git add .</code>, using the terminal/command line in your IDE/Editor.</li>
<li>Commit it using <code>git commit -m "meaningful commit message here".</code></li>
<li> Push your work using <code>git push</code>. 👋 And say goodbye to your IDE/Editor for now....because now it's time to go to our Forked Repository in our Github account 💻😁.</li>
<ul>
<li>At this stage, if you didn't earlier, you might be reminded to set the branch as the current trackable option. In that case just run <code>git push -u origin branch-name</code>. 🌿🌳 Don't worry, the terminal is very good and will tell you if it needs to be set or not.</li>
<p>We are almost there!</p>
<li> Go to the original repo: https://github.com/auxfuse/hackathon-git-labs.</li>
<li>From here, click on the "Pull requests" tab, located in the top navigational menu of the repository.</li>
<img src="docs/images/PRtab.PNG" alt="Pull request tab">
<li>You should see the following screen:</li>
<ul>
<li> As long as you have followed all the steps above to this point, you should see a banner at the top of this screen with a Green Github Button saying "Compare & Pull Request".</li>
<p><b>N.B</b>: If you do not see this, make sure that you have added, commited, and pushed your work to a branch within your forked repository.</p>
</ul>
<img src="docs/images/ComparePR.PNG" alt="Compare PR">
</ul>
<li>Click on the green button, "Compare & Pull Request" to start the PR process.</li>
<ul>
<li>You should see the following, and more so you should see the PR Template information in the "Write" tab.</li>
</ul>
<img src="docs/images/PRwindow.PNG" alt="Pull request window">
<li>On this screen we have multiple things going on, but the main thing is to follow the template and replace the values with your own.
- When you are ready, click on "Create pull request". 🎉💥💥🎉</li>
</ul>
<h3>4. Closing comments:</h3>
<hr>
<p>And Voila! Well done...you've just added your very first Pull Request. So what happens now?</p>
<p>Now, your PR will go through some simple checks and balances, and if all is satisfied it will be approved and merged by one of a few select Maintainers of this repo.</p>
<p>If there is anything wrong, we will notify you back through the PR itself, which you will get notified via email.😉</p>
<p>This is just the start. Get your PR in, wait for it to be reviewed/approved/merged. And then throw your efforts at adding another PR, but this time following along to the <a href="intermediate.md">Intermediate guide</a>, and making adding a HTML & CSS Single page creation.</p>
<p>🤜 Thank you! 😀</p>
</main>
</div>
</body>
</html>