-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
ghubprep.html
268 lines (245 loc) · 11.3 KB
/
ghubprep.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="./favicon.png" />
<title> Web Dev Book 📚</title>
<link rel="stylesheet" type="text/css" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<div class="logo">
<img src="./favicon.png" />
</div>
<h1>
Web Dev Book 📚
</h1>
<h3> GitHub: Beginning our diary of code. </h3>
</div>
<div class="topnav">
<a href="./index.html">Home 🏡</a>
<a href="./codeequip.html"> Code equipment 💼 </a>
<a href="./links.html">Links and resources 🔗</a>
<a href="./github.html"> GitHub Sign Up</a>
<a href="./ghubprep.html"> GitHub Basics.</a>
<a href="./js.html">JavaScript Links.</a>
<a href="./html.html">HTML Links.</a>
<a href="./css.html">CSS Links.</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>
Now we made our account...
</h2>
<h3>
What do we do now?
</h3>
<img src="./images/octocat.png" width="950" height="480" />
<h3> Here is the list of what we will cover now:</h3>
<p>
🎯 Covering key GitHub terminology.
<br>
🎯 Walk through GitHub.
<br>
🎯 Creating our first Hello World Project.
<br>
🎯 Personalising GitHub.
<br>
🎯 Sharing good repositories to star.
<br>
🎯 Finding good users to follow.
</div>
<div class="card">
<h2>
The first page you see when you start GitHub:
</h2>
<h3>
To start, press the link: <a href="https://github.com/">https://github.com/</a>
</h3>
<img src="./images/Github/Guide/1.png" />
<h3> 🎨 Color Coded:</h3>
<p>
🟣 = This top navigation will send you to all your open 👉 <a
href="https://docs.github.com/en/issues/tracking-your-work-with-issues/about-issues">issues </a>
👈, <a
href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests">
👉 Pull Requests 👈</a> , <a
href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjmq_jM68f1AhWCYMAKHdXOAf0QFnoECAwQAw&url=https%3A%2F%2Fdocs.github.com%2Fen%2Fgithub%2Fcustomizing-your-github-workflow%2Fexploring-integrations%2Fabout-github-marketplace&usg=AOvVaw32xYgmr9s9FIaEAyO5VG7N">
👉 GitHub Marketplace👈</a> and to explore others work.
<br>
🟠 = Whatever activity you are a part of in GitHub, you will get notifications, that will show up
next to the bell. The plus icon lets you create repos, files and more.
<br>
🟡 = Your profile and settings and all your work will show up here. We will cover this more later.
<br>
Grey = Here, we will create a new repo, the original Hello World. We will cover this later as well.
<br>
🐻❄️ (white) = All your issues, and open pull reuqests will show as recent activity.
<br>
🟢 = Whoever you follow, whoever's project you are watching, all their activity will show up their.
<br>
🔵 = Here, you make your own profile readme, where others will see a quick overview of you, we will
discuss this later!
</p>
</div>
<div class="card">
<h2>
Our first 👋 Hello World! 👋 Repository!
</h2>
<h3>
<a href="https://docs.github.com/en/get-started/quickstart/hello-world">👉 Use this as a
guide!👈</a>
</h3>
<p>
1️⃣ Lets make a repository:
</p>
<p> As seen in the above color coded image, see the button that says <b> Create repository </b>,
outlined in red and click it!</p>
<img src="./images/Github/Guide/2.png" />
<p>
🔴 = Here, you add a suitable name for your repo, in this case, <b> Hello World </b>.
<br>
🟠 = Here, you add a quick simple intro about your repo.
<br>
🟢 = If you choose to set your repo as public, you allow others on the internet to view your work.
If it is confidential, the set it as private.
<br>
🟣 = Add a README.md for a longer aesthetically pleasing description about your work.
<br>
🟡 = Pick a license, we use MIT.
</p>
<h2> Now press, Create repository!</h2>
</div>
<div class="card">
<h2>
Clone your repository locally!
</h2>
<h3>
Make sure Git is installed, the steps are on the right.
</h3>
<img src="./images/Github/Guide/3.png" />
<p>
🟠 = Here, you can star, fork (get your own copy) and watch the activity of your repository.
<br>
🔴 = You can see the dashboard of all your work and settings.
<br>
🟡 = Here are all the files of your code.
<br>
🔵 = Now, you can edit your description, and see those who are involved with your repo.
<br>
🟢 = Where the README.md is. You can style it using <a href="https://www.markdownguide.org/"> 👉 Markdown 👈</a>
<br>
🟣 = What to press to clone. <code> https://github.com/USERNAME/REPO.git</code>
</p>
<h2> Cloning Locally.</h2>
<img src="images/Github/Guide/4.png" />
<p> Use this to learn about Command Prompt: <a href="https://www.techrepublic.com/article/16-terminal-commands-every-user-should-know/">https://www.techrepublic.com/article/16-terminal-commands-every-user-should-know/</a></p>
<p>
🎯 Now, we open up where we saved the repo, to make the code changes.
</p>
<img src="images/Github/Guide/5.png" />
<h3> Now we add, commit, push to the remote!</h3>
<img src="images/Github/Guide/6.png" />
<h3> See the changes now online and remotely!</h3>
<img src="images/Github/Guide/7.png" />
</div>
<div class="card">
<h2>
THIS IS CURRENTLY IN PROGRESS
</h2>
<!-- <h3>
Add your own username, so others can identify you!
</h3>
<p>
4️⃣ Make sure it is one you like, and want, like your name, or something that you wouldn't want to
change!
</p>
<img src="./images/Github/4.png" style="height:500px;" /> -->
</div>
<!-- <div class="card">
<h2>
Email Preferences.
</h2>
<h3>
Choose if you want emails.
</h3>
<p>
5️⃣ You will still get important emails, but you can choose if you want news and updates.
</p>
<img src="./images/Github/5.png" style="height:500px;" />
</div>
<div class="card">
<h2>
Verify
</h2>
<h3>
Verify your account.
</h3>
<p>
6️⃣ Choose the correct answers to verify your account.
</p>
<img src="./images/Github/6.png" style="height:500px;" />
</div>
<div class="card">
<h2>
Add Code.
</h2>
<h3>
Add the code, as a final step.
</h3>
<p>
6️⃣ Type the 8 digit code, that you will have been sent in your email.
</p>
<img src="./images/Github/7.png" style="height:500px;" />
</div> -->
</div>
<div class="rightcolumn">
<div class="card">
<h2>
GitHub terminology:
</h2>
<img src="./images/GitHub-logo.png" style="height: 200px; width: 275px;" />
<p>
📝 <b> Repository </b>: A project, where all the code is kept.
<br>
📝 <b> Pull Request </b>: A draft of code, where others check, review and approve it, before it is
merged, to the acutal main code.
<br>
📝 <b> README.md </b>: A file that contains the information about the other files in the directory.
<br>
📝 <b> Git</b>: Language that tracks the changes that are made in the local copy of your repo
(repository) to update the remote copy.
<br>
<p>👉<a href="https://docs.github.com/en/get-started/quickstart/github-glossary"> Full GitHub Glossary
</a> 👈 </p>
</p>
</div>
<div class="card">
<h3>
Download Git Bash, to write local code.
</h3>
<p> To push all your code to the remote work, you need Git Bash:</p>
<a href="https://git-scm.com/downloads">👉 Download Git Bash 👈</a>
<img src="images/git.png" />
<p> <a href="https://www.atlassian.com/git/tutorials/git-bash"> Steps through Git Bash </a></p>
<h3>
See frequently asked code questions...
</h3>
<p>Stackoverflow, the home of code questions!</p>
<a href="https://stackoverflow.com/"><img src="./images/stackoverflow.png" /></a>
<h3>Welcome to your coding journey! 🎒</h3>
<p>Enjoy learning to code!</p>
<img src="./images/enjoy.png" />
</div>
</div>
</div>
<div class="footer">
<img src="./favicon.png" style="height: 100px; width: 100px; float: left;" />
<h2>
Web Dev Book!
</h2>
</div>
</body>
</html>
</html>