Skip to content

Commit ec1cbac

Browse files
8BitAdam8BitAdam
committed
Adding git tutorals
1 parent 2444d88 commit ec1cbac

26 files changed

Lines changed: 5647 additions & 247 deletions

‎Git/Git-Index.html‎

Lines changed: 336 additions & 0 deletions
Large diffs are not rendered by default.

‎Git/GitCommand/add.html‎

Lines changed: 388 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,388 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Git Add - Article Template</title>
7+
8+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
9+
10+
<style>
11+
:root {
12+
--sidebar-width: 220px;
13+
--sidebar-bg: #003366;
14+
--accent: #ff3333;
15+
--text: #111;
16+
--bg: #ffffff;
17+
--card: #f7f7f7;
18+
--border: #ddd;
19+
}
20+
21+
body {
22+
margin: 0;
23+
font-family: Arial, sans-serif;
24+
background: var(--bg);
25+
color: var(--text);
26+
}
27+
28+
.sidebar {
29+
height: 100vh;
30+
overflow-y: auto;
31+
position: fixed;
32+
width: var(--sidebar-width);
33+
background-color: var(--sidebar-bg);
34+
color: white;
35+
padding-bottom: 20px;
36+
box-shadow: 2px 0 10px rgba(0,0,0,0.15);
37+
}
38+
39+
.sidebar h2 {
40+
margin: 0;
41+
padding: 16px 12px 10px;
42+
font-size: 18px;
43+
text-align: center;
44+
color: white;
45+
border-bottom: 1px solid rgba(255,255,255,0.15);
46+
}
47+
48+
.sidebar h3 {
49+
margin: 18px 0 6px;
50+
padding: 0 12px;
51+
color: var(--accent);
52+
font-size: 14px;
53+
text-transform: uppercase;
54+
letter-spacing: 0.04em;
55+
}
56+
57+
.sidebar a {
58+
display: block;
59+
padding: 8px 12px;
60+
text-decoration: none;
61+
color: white;
62+
font-size: 14px;
63+
border-radius: 4px;
64+
margin: 2px 8px;
65+
}
66+
67+
.sidebar a:hover {
68+
background-color: var(--accent);
69+
color: white;
70+
}
71+
72+
.main-content {
73+
margin-left: calc(var(--sidebar-width) + 10px);
74+
padding: 24px;
75+
max-width: 1000px;
76+
}
77+
78+
.article-header {
79+
background: var(--card);
80+
border: 1px solid var(--border);
81+
border-radius: 10px;
82+
padding: 20px;
83+
margin-bottom: 24px;
84+
}
85+
86+
.article-title {
87+
margin: 0 0 8px 0;
88+
color: #003366;
89+
font-size: 2rem;
90+
}
91+
92+
.article-meta {
93+
color: #666;
94+
font-size: 0.95rem;
95+
margin-bottom: 0;
96+
}
97+
98+
.article-section {
99+
margin-bottom: 28px;
100+
}
101+
102+
.article-section h2,
103+
.article-section h3 {
104+
color: #003366;
105+
margin-bottom: 10px;
106+
}
107+
108+
.article-box {
109+
background: var(--card);
110+
border: 1px solid var(--border);
111+
border-radius: 10px;
112+
padding: 16px;
113+
margin: 14px 0;
114+
}
115+
116+
.article-box code {
117+
background: #ececec;
118+
padding: 2px 6px;
119+
border-radius: 4px;
120+
}
121+
122+
.note {
123+
border-left: 4px solid var(--accent);
124+
padding-left: 12px;
125+
color: #444;
126+
}
127+
128+
.darkmode {
129+
--bg: #1e1e1e;
130+
--text: #f1f1f1;
131+
--card: #2a2a2a;
132+
--border: #444;
133+
}
134+
135+
.darkmode .article-title,
136+
.darkmode .article-section h2,
137+
.darkmode .article-section h3 {
138+
color: #ff6666;
139+
}
140+
141+
.toggle-btn {
142+
background-color: var(--accent);
143+
color: white;
144+
border: none;
145+
padding: 8px 14px;
146+
border-radius: 6px;
147+
cursor: pointer;
148+
margin-bottom: 18px;
149+
font-size: 14px;
150+
}
151+
152+
.toggle-btn:hover {
153+
background-color: #cc0000;
154+
}
155+
156+
.bottom-nav {
157+
display: flex;
158+
justify-content: space-between;
159+
gap: 12px;
160+
margin-top: 40px;
161+
padding-top: 18px;
162+
border-top: 1px solid var(--border);
163+
}
164+
165+
.bottom-nav .w3-button {
166+
min-width: 160px;
167+
}
168+
169+
@media (max-width: 800px) {
170+
.sidebar {
171+
position: static;
172+
width: 100%;
173+
height: auto;
174+
}
175+
176+
.main-content {
177+
margin-left: 0;
178+
padding: 16px;
179+
}
180+
181+
.bottom-nav {
182+
flex-direction: column;
183+
}
184+
185+
.bottom-nav .w3-button {
186+
width: 100%;
187+
}
188+
}
189+
190+
.sidebar .active-page {
191+
background-color: #222;
192+
border-left: 4px solid #ff3333;
193+
}
194+
195+
.sidebar .active-section {
196+
background-color: #ff3333;
197+
color: white;
198+
}
199+
200+
html {
201+
scroll-behavior: smooth;
202+
}
203+
</style>
204+
</head>
205+
<body>
206+
207+
<!-- Sidebar / Navigation -->
208+
<div class="sidebar w3-card">
209+
<h2>Git Docs</h2>
210+
211+
<!-- GLOBAL COMMAND LIST -->
212+
<h3>Previous</h3>
213+
<a href="init.html">init</a>
214+
<a href="clone.html">clone</a>
215+
216+
<h3>This Page</h3>
217+
<a href="#intro" class="nav-link">Introduction</a>
218+
<a href="#syntax" class="nav-link">Syntax</a>
219+
<a href="#basic-use" class="nav-link">Basic Use</a>
220+
<a href="#examples" class="nav-link">Examples</a>
221+
<a href="#options" class="nav-link">Options</a>
222+
<a href="#troubleshooting" class="nav-link">Troubleshooting</a>
223+
<a href="#practice" class="nav-link">Practice</a>
224+
225+
<!-- NEXT ARTICLES -->
226+
<h3>Next Articles</h3>
227+
<a href="commit.html">git commit</a>
228+
<a href="status.html">git status</a>
229+
<a href="log.html">git log</a>
230+
</div>
231+
232+
<!-- Main Content -->
233+
<div class="main-content" id="mainContent">
234+
<button class="toggle-btn" onclick="toggleDarkMode()">Toggle Dark Mode</button>
235+
236+
<div class="article-header">
237+
<h1 class="article-title">Git Add</h1>
238+
<p class="article-meta">
239+
Command: <strong>git add</strong> · Topic: <strong>Staging changes</strong> · Level: <strong>Beginner</strong>
240+
</p>
241+
</div>
242+
243+
<div class="article-section" id="intro">
244+
<h2>Introduction</h2>
245+
<p>
246+
<code>git add</code> is used to stage changes before committing them. It tells Git which files or file changes you want included in the next commit.
247+
</p>
248+
<div class="article-box note">
249+
Use <code>git add</code> after editing files and before running <code>git commit</code>.
250+
</div>
251+
</div>
252+
253+
<div class="article-section" id="syntax">
254+
<h2>Syntax</h2>
255+
<div class="article-box">
256+
<pre><code>git add &lt;file&gt;</code></pre>
257+
</div>
258+
<p>
259+
You can add one file, multiple files, or all changes in the current folder.
260+
</p>
261+
</div>
262+
263+
<div class="article-section" id="basic-use">
264+
<h2>Basic Use</h2>
265+
<p>
266+
The most common use is to stage a single file or all modified files.
267+
</p>
268+
<div class="article-box">
269+
<pre><code>git add index.html</code></pre>
270+
</div>
271+
<div class="article-box">
272+
<pre><code>git add .</code></pre>
273+
</div>
274+
<p>
275+
After staging, the changes are ready to be committed.
276+
</p>
277+
</div>
278+
279+
<div class="article-section" id="examples">
280+
<h2>Examples</h2>
281+
282+
<div class="article-box">
283+
<h3>Stage one file</h3>
284+
<pre><code>git add README.md</code></pre>
285+
<p>Adds only <code>README.md</code> to the staging area.</p>
286+
</div>
287+
288+
<div class="article-box">
289+
<h3>Stage all changes</h3>
290+
<pre><code>git add .</code></pre>
291+
<p>Adds all new and modified files in the current directory and below.</p>
292+
</div>
293+
294+
<div class="article-box">
295+
<h3>Stage all tracked changes</h3>
296+
<pre><code>git add -u</code></pre>
297+
<p>Stages modifications and deletions to files that Git already knows about.</p>
298+
</div>
299+
</div>
300+
301+
<div class="article-section" id="options">
302+
<h2>Common Options</h2>
303+
<ul>
304+
<li><code>.</code> — stages everything in the current directory.</li>
305+
<li><code>-A</code> — stages all changes, including deletions.</li>
306+
<li><code>-u</code> — stages modifications and deletions for tracked files only.</li>
307+
</ul>
308+
309+
<div class="article-box">
310+
<pre><code>git add -A</code></pre>
311+
</div>
312+
</div>
313+
314+
<div class="article-section" id="troubleshooting">
315+
<h2>Troubleshooting</h2>
316+
<div class="article-box">
317+
<h3>Problem: File is not added</h3>
318+
<p>
319+
Make sure the file path is correct and that the file is inside the repository.
320+
</p>
321+
</div>
322+
<div class="article-box">
323+
<h3>Problem: Wrong files were staged</h3>
324+
<p>
325+
Use <code>git status</code> to check the staging area, then remove files from staging with <code>git restore --staged &lt;file&gt;</code>.
326+
</p>
327+
</div>
328+
<div class="article-box">
329+
<h3>Problem: Changes still do not show up</h3>
330+
<p>
331+
Confirm the file is saved before running <code>git add</code>.
332+
</p>
333+
</div>
334+
</div>
335+
336+
<div class="article-section" id="practice">
337+
<h2>Practice</h2>
338+
<p>
339+
Try editing a file and then staging it:
340+
</p>
341+
<div class="article-box">
342+
<pre><code>git status
343+
git add .
344+
git status</code></pre>
345+
</div>
346+
<p>
347+
The second <code>git status</code> should show the files as staged.
348+
</p>
349+
</div>
350+
351+
<div class="bottom-nav">
352+
<button class="w3-button w3-blue" onclick="window.location.href='./init.html'">Previous: Init</button>
353+
<button class="w3-button w3-grey" onclick="window.location.href='../Git-Index.html'">Back to Index</button>
354+
<button class="w3-button w3-red" onclick="window.location.href='./mv.html'">Next: Mv</button>
355+
</div>
356+
</div>
357+
358+
<script>
359+
const content = document.getElementById('mainContent');
360+
361+
function applyPreference() {
362+
const saved = localStorage.getItem('darkmode');
363+
if (saved === 'true') {
364+
content.classList.add('darkmode');
365+
} else if (saved === 'false') {
366+
content.classList.remove('darkmode');
367+
} else {
368+
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
369+
content.classList.add('darkmode');
370+
}
371+
}
372+
}
373+
374+
function toggleDarkMode() {
375+
if (content.classList.contains('darkmode')) {
376+
content.classList.remove('darkmode');
377+
localStorage.setItem('darkmode', 'false');
378+
} else {
379+
content.classList.add('darkmode');
380+
localStorage.setItem('darkmode', 'true');
381+
}
382+
}
383+
384+
window.addEventListener('load', applyPreference);
385+
</script>
386+
387+
</body>
388+
</html>

0 commit comments

Comments
 (0)