Skip to content

Commit 622e136

Browse files
sanjay-kvsanjay-kv
committed
added changes to the docs
1 parent 5a68d44 commit 622e136

6 files changed

Lines changed: 449 additions & 171 deletions

File tree

‎docs/GitHub/setup-environment/assets/05-Home-brew terminal.png‎

135 KB
Loading

‎docs/GitHub/setup-environment/assets/06-brew-help.png‎

687 KB
Loading

‎docs/GitHub/setup-environment/git-commands.md‎

Lines changed: 11 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -9,131 +9,11 @@ description: In this tutorial, you will learn about the basic of git and 50 impo
99

1010
> *This is part of GitHub/Git Tutorials and a continuation of the previous post where we discussed what is gitHub. I hope you have a basic understanding of what is Github in general. Let’s get started with Git Cheat Sheet. Git Cheat Sheet. 50 Git commands | Git Tutorials*
1111
12-
Git commands are handy when comes to fix any problems which you cant fix by the UI, for example consider a scenarion you need to fix the conflict in a page. Git Commands will help you to find the root cause and can explore the entire log history. At Git core it help you to keep a history of every change you made in the project files and help the user with track the changes, revert, helps to identify who made the changes.
12+
Git commands are handy when comes to fix any problems which you cant fix by the UI, for example consider a scenario you need to fix the conflict in a page. Git Commands will help you to find the root cause and can explore the entire log history.
1313

14-
## Understanding Git: The Building Blocks
14+
## Understanding Git: Adding the Files to Git
1515

16-
In Setting up git on Windows tutorial you learned to perform how to check the current version of the git. Now below you will see how to add some changes to the files you have created. I assume you have a small project where you created a file called filename.ipynb, now you want to add that into the git.
17-
18-
<Tabs>
19-
<TabItem value="Git Code" label="Git Code">
20-
21-
```html title="Adding file to the repo"
22-
git add filename.ipynb
23-
```
24-
25-
</TabItem>
26-
27-
<TabItem value="how-git-works" label="Output on browser">
28-
![alt text](./assets/image-1.png)
29-
</TabItem>
30-
</Tabs>
31-
32-
In this example, the `<h1>` tag creates a heading, and the `<p>` tag creates a paragraph. The browser interprets these tags and displays the content accordingly. HTML tags can be nested within each other to create more complex structures, such as lists, tables, forms, and more.
33-
34-
35-
## How Web Browsers Render HTML
36-
37-
When a user requests a web page by entering a URL in the browser's address bar or clicking a link, the browser sends a request to the web server hosting the page. The server responds by sending the HTML content of the page back to the browser. The browser then parses the HTML code and renders the page on the user's screen.
38-
39-
<Tabs>
40-
<TabItem value="Git Code" label="Git Code">
41-
42-
```html title="Commiting the changes"
43-
git commit -m "Give some meaningfull comments"
44-
```
45-
46-
</TabItem>
47-
48-
<TabItem value="how-git-works" label="Output on browser">
49-
![alt text](./assets/image-1.png)
50-
</TabItem>
51-
</Tabs>
52-
53-
**Pushing Changes to the branch**
54-
55-
:::info
56-
<Tabs>
57-
<TabItem value="Git Code" label="Git Code">
58-
59-
```html title="Uploading file to the remote"
60-
git push origin [name_of_your_new_branch] -> Push the branch on github :
61-
```
62-
63-
</TabItem>
64-
65-
<TabItem value="how-git-works" label="Output on browser">
66-
![alt text](./assets/image-1.png)
67-
</TabItem>
68-
</Tabs>
69-
:::
70-
71-
3. **Git Pull**: The browser paints the pixels on the screen according to the layout determined in the rendering step. It combines the content, styles, and layout to create the final visual representation of the web page.
72-
:::info
73-
<Tabs>
74-
<TabItem value="Git Code" label="Git Code">
75-
76-
```html title="Uploading file to the remote"
77-
git push origin [name_of_your_new_branch] -> Push the branch on github :
78-
```
79-
80-
</TabItem>
81-
82-
<TabItem value="how-git-works" label="Output on browser">
83-
![alt text](./assets/image-1.png)
84-
</TabItem>
85-
</Tabs>
86-
:::
87-
4. **Reflow and Repaint**: If the user interacts with the page, such as scrolling or resizing the window, the browser may need to reflow and repaint parts of the page to reflect the changes. Reflow involves recalculating the layout of the affected elements, while repaint involves updating the affected pixels on the screen.
88-
:::info
89-
<Tabs>
90-
<TabItem value="Git Code" label="Git Code">
91-
92-
```html title="Uploading file to the remote"
93-
git push origin [name_of_your_new_branch] -> Push the branch on github :
94-
```
95-
96-
</TabItem>
97-
98-
<TabItem value="how-git-works" label="Output on browser">
99-
![alt text](./assets/image-1.png)
100-
</TabItem>
101-
</Tabs>
102-
:::
103-
By understanding how web browsers render HTML content, web developers can optimize their code and design to create fast and responsive web pages. Techniques such as minimizing the use of inline styles, reducing the number of DOM elements, and optimizing images can help improve the performance of web pages and provide a better user experience.
104-
105-
106-
## Useful 50 Git Commands Cheatsheet
107-
108-
In addition to rendering HTML content, web browsers handle various resources associated with a web page, including:
109-
110-
- **CSS Stylesheets**: Browsers download and apply CSS stylesheets to control the presentation of HTML elements. Stylesheets can be linked externally using the `<link>` tag or embedded within the HTML document using the `<style>` tag.
111-
112-
For example, the following HTML code snippet links an external CSS stylesheet to the web page:
113-
114-
<Tabs>
115-
<TabItem value="HTML Code" label="HTML Code">
116-
117-
```html title="git configuration commands"
118-
git --version
119-
git config _\--global #for global level config_
120-
git config _#for project level config_
121-
git config --global user.name <"name">
122-
git config --global user.email <"email">
123-
git config --global core.editor <"editor">
124-
git config --global color.ui true
125-
```
126-
127-
</TabItem>
128-
129-
130-
<TabItem value="Output On Browser" label="Output On Browser">
131-
<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{fontFamily: "Arial, sans-serif", backgroundColor: "#f9f9f9"}}>
132-
<h1 style={{color: "#333"}}>Hello, World!</h1>
133-
<p style={{color: "#666"}}>This is my first web page.</p>
134-
</BrowserWindow>
135-
</TabItem>
136-
</Tabs>
16+
While Setting up git on Windows tutorial before, you learned to perform how to check the current version of the git. Now below you will see how to add some changes to the files you have created. Create a small folder in your local system, where you created a file called filename.ipynb, now you want to add that into the git.
13717

13818

13919
**Git Basic Commands**
@@ -158,7 +38,7 @@ git clone _#Create a local copy of a remote repository_
15838
</Tabs>
15939
:::
16040

161-
3. **Git commits**: The browser paints the pixels on the screen according to the layout determined in the rendering step. It combines the content, styles, and layout to create the final visual representation of the web page.
41+
1. **Git commits**: This commit provides all the staged files from your local files to move to remote repository.
16242
:::info
16343
<Tabs>
16444
<TabItem value="Git Code" label="Git Code">
@@ -177,7 +57,8 @@ git commit --amend -m "message" #add additional info to last commit
17757
</TabItem>
17858
</Tabs>
17959
:::
180-
4. **Checking logs and views**: If the user interacts with the page, such as scrolling or resizing the window, the browser may need to reflow and repaint parts of the page to reflect the changes. Reflow involves recalculating the layout of the affected elements, while repaint involves updating the affected pixels on the screen.
60+
4. **Checking logs and views**: Here you can see in detail about the changes and summary of the changes you made.
61+
18162
:::info
18263
<Tabs>
18364
<TabItem value="Git Code" label="Git Code">
@@ -198,7 +79,7 @@ git status git show
19879
:::
19980

20081

201-
4. **Git Diff**: If the user interacts with the page, such as scrolling or resizing the window, the browser may need to reflow and repaint parts of the page to reflect the changes. Reflow involves recalculating the layout of the affected elements, while repaint involves updating the affected pixels on the screen.
82+
4. **Git Diff**: Helps you to see the change in the code as described below. Check out the output session.
20283
:::info
20384
<Tabs>
20485
<TabItem value="Git Code" label="Git Code">
@@ -218,7 +99,7 @@ git diff -staged
21899
:::
219100

220101

221-
4. **to rename a file to directly stage**: If the user interacts with the page, such as scrolling or resizing the window, the browser may need to reflow and repaint parts of the page to reflect the changes. Reflow involves recalculating the layout of the affected elements, while repaint involves updating the affected pixels on the screen.
102+
4. **to rename a file to directly stage**: Changing the file name is important in some case, this mv and rm git helps you to perform the same functions.
222103
:::info
223104
<Tabs>
224105
<TabItem value="Git Code" label="Git Code">
@@ -237,7 +118,7 @@ git rm <filename>
237118
:::
238119

239120

240-
4. **Working with Git branch**: If the user interacts with the page, such as scrolling or resizing the window, the browser may need to reflow and repaint parts of the page to reflect the changes. Reflow involves recalculating the layout of the affected elements, while repaint involves updating the affected pixels on the screen.
121+
4. **Working with Git branch**:
241122
:::info
242123
<Tabs>
243124
<TabItem value="Git Code" label="Git branch">
@@ -260,7 +141,7 @@ git merge <source name> <Target name> #Merge a branch into a target branch
260141
:::
261142

262143

263-
4. **Undo Changes**: If the user interacts with the page, such as scrolling or resizing the window, the browser may need to reflow and repaint parts of the page to reflect the changes. Reflow involves recalculating the layout of the affected elements, while repaint involves updating the affected pixels on the screen.
144+
4. **Undo Changes**:
264145
:::info
265146
<Tabs>
266147
<TabItem value="Git Code" label="Git Code">
@@ -282,7 +163,7 @@ git clean -f #remove untracked files
282163
</Tabs>
283164
:::
284165

285-
4. **Adding Changes to remote**: If the user interacts with the page, such as scrolling or resizing the window, the browser may need to reflow and repaint parts of the page to reflect the changes. Reflow involves recalculating the layout of the affected elements, while repaint involves updating the affected pixels on the screen.
166+
4. **Adding Changes to remote**:
286167
:::info
287168
<Tabs>
288169
<TabItem value="Git Code" label="Git Code">
@@ -300,12 +181,7 @@ git push -u origin main #Push changes to remote repository and remember the bran
300181
</TabItem>
301182
</Tabs>
302183
:::
303-
By managing these resources efficiently, web developers can create engaging and interactive web pages that deliver a rich user experience. Understanding how HTML works with web browsers and how browsers render content is essential for building modern web applications that meet user expectations and performance standards.
304-
305-
< />
306-
307184

308-
< />
309185
<iframe width="880" height="480" src="https://www.youtube.com/embed/jE8nqWSbUQs?list=PLrLTYhoDFx-kiuFiGQqVpYYZ56pIhUW63" title="Understanding the GitHub Flow" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
310186

311187
## Practice Git Interactively

‎docs/GitHub/setup-environment/setup-git-on-mac.md‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ In the last tutorial you have learned about how to get the setup done in the win
1818

1919
### Step 1: Installing Git on Mac
2020

21+
```html title="Homebrew official website"
22+
https://brew.sh/
23+
```
24+
2125
There are four ways we can install Github on mac
2226

2327
#### 1. Install Via Homebrew
@@ -34,23 +38,31 @@ Here in this post, we will be using homebrew to install, Go to the homebrew webs
3438
</BrowserWindow>
3539

3640

37-
### Step 2: Select your Version you want to insatll.
41+
### Step 2: Install Git via Homebrew
3842

3943
1. Once Installed use the below command to check version of the brew on terminal brew -v
4044

41-
Now you can install git on mac system by entering below command on terminal, In future if you want to update the version of git installed on mac or windows use the git clone https://github.com/git/git command on terminal or git bash.
45+
Now you can install git on mac system by entering below command on terminal, In future if you want to update the version of git installed on mac use the "git clone brew upgrade" gitcommand on terminal or git bash.
4246

43-
44-
```html title="create a new repository on the command line"
45-
brew install git-gui
47+
```html title="Copy paste this Homebrew command"
48+
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
4649
```
4750

48-
- **Installer:** Get the Installer
49-
<BrowserWindow url="https://git-scm.com/downloads/win" bodyStyle={{padding: 0}}>
50-
[![GitHub](./assets/7-git-installer.png)](https://git-scm.com/downloads/win)
51+
```html title="To install git on Mac System"
52+
brew install git
53+
```
54+
55+
### Step 3: Run the commands in the Mac Terminal
56+
Copy paste the command the terminal shows, one by one on the terminal and press enter to execute it, Once all has been done, enter brew help to see if homebrew has been succesfully installed or not.
57+
<BrowserWindow url="https://git-scm.com/downloads/Mac" bodyStyle={{padding: 0}}>
58+
[![GitHub](./assets/06-brew-help.png)](https://git-scm.com/downloads/mac)
5159
</BrowserWindow>
5260

61+
Once the setup is completed, open your visual studio code and run the command brew -v or git -v to see whethere the git has been installed or not.
5362

63+
```html title="To Check git on Mac System"
64+
brew -v
65+
```
5466
## Conclusion
5567

56-
In conclusion, I hope you enjoyed reading this article on “Setting up your Git Enviornment?”. In the next post, will be discussing using Git to create a Repository and clone a project Github. Signing off Sanjay Viswanathan.
68+
In conclusion, I hope you enjoyed reading this article on “Installing Git On Mac?”. In the next post, will be discussing using Git commands and indepth usage on Github. Signing off Sanjay Viswanathan.

0 commit comments

Comments
 (0)