You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Week2/README.md
+17-19Lines changed: 17 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -19,13 +19,11 @@ These are the topics for week 2:
19
19
20
20
### What is GIT?
21
21
22
-
GIT is software that allows you to save your work at any given moment in time during your work. It's typically called a `version control system`, which essentially means that it allows you to create `versions` of your workspace and makes possible to switch between older and newer states.
23
-
24
-
For example, let's say you have a folder with a single file. You can use GIT to make a "snapshot" of the current state of your workspace. This snapshot can be accessed at any given moment, in case something went wrong (files corrupted, complex code that can't easily be reverted).
22
+
GIT is software that allows you to save your work at any given moment in time. It's typically called a `version control system`, which essentially means that it allows you to create `versions` of your workspace and makes possible to switch between older and newer states.
25
23
26
24
You can think of it like a video game. You get to a certain point in the game, after hours of struggle. You're really proud of how far you've come, and don't want to do it over again in case you die. So you decide to _save your game_. If something bad happens after that point you can always reload your game and start from that point on.
27
25
28
-
This is exactly what happens with GIT: however, instead of calling it _saving your game_ we call it **committing your changes**. If you want to ever go back to a previous _game save_ you can load it by **checking out that commit**. You will learn more about that in the next sections.
26
+
This is exactly what happens with GIT: however, instead of calling it _saving your game_ we call it **committing your changes**. If you want to go back to a previous _game save_ you can load it by **checking out that commit**. You will learn more about that in the next sections.
29
27
30
28
### Installing GIT
31
29
@@ -41,41 +39,41 @@ After you've installed it you can use it through the CLI. To verify that it work
41
39
42
40
It should say that the version is **2.21** (or up if you've installed a new version).
43
41
44
-
Now that you have GIT installed, it's important give it some basic configuration. Inside your CLI, type in the following. Replace "Your name" and "[email protected]" with your own name and email address, respectively.
42
+
Now that you have GIT installed, it's important to make a basic configuration. Inside your CLI, do in the following: Replace "Your name" and "[email protected]" with your own name and email address, respectively.
This makes sure GIT is able to identify who is using it.
49
+
This makes sure GIT is able to identify you.
52
50
53
51
### Basic GIT commands
54
52
55
-
Like any software you execute through the CLI, you'll use GIT in the same way.
53
+
You'll use GIT like any software you execute through the CLI.
56
54
57
-
There are different uses for GIT and for now we'll learn one procedure: committing your workspace to a local repository. Let's take that phrase apart first:
55
+
There are different ways of using GIT. For now we'll learn one procedure: committing your workspace to a local repository. Let's take that phrase apart first:
58
56
59
57
-**Committing** is another word for saving or storing the changes you've made to the files in your workspace. For example, changing the content of a file is a "change".
60
58
-**Workspace** is another word for the project folder (and its contents). When making a repository it will be in the root (in other words, the top level) of the folder.
61
59
-**Local** refers to your computer, with no involvement of the internet. When you create a file or folder on your computer, you are creating it "locally".
62
-
-**Repository** is a storage location inside which the data regarding your project folder is kept. GIT creates a hidden folder `.git` that functions as the local repository.
60
+
-**Repository** is a storage location containing the data regarding your project folder. GIT creates a hidden folder `.git` that functions as the local repository.
63
61
64
-
Before we do anything we must know the most basic command of all:
62
+
Before we start we must know the most basic command of all:
65
63
66
64
```
67
65
git init
68
66
```
69
67
70
-
What this does is creating a brand new local repository in your project folder. Only after doing this will you be able the follow along the next procedure.
68
+
What it does is creating a brand new local repository in your project folder. Only after doing this you will be able to follow along the next procedure.
71
69
72
70
No we can continue with the actual procedure itself. This happens in 3 stages:
73
71
74
72
1.**Untracked**. In this stage GIT is not aware of the changes in your workspace.
75
-
2.**Staged**. In this stage the changes are kept track of by GIT.
76
-
3.**Committed** In this stage your changes have been saved into the local repository. If at any moment you need to refer to a previous version of your workspace you can safely do that now.
73
+
2.**Staged**. In this stage the changes will be tracked by GIT.
74
+
3.**Committed** In this stage your changes have been saved into the local repository. If you need to refer to a previous version of your workspace you can safely do that now.
77
75
78
-
This might sound very abstract, and it is. So to illustrate this watch the following videos and code along:
76
+
This might sound very abstract, and it is. So to make it more comprehensible, watch the following videos and code along:
79
77
80
78
-[GIT Tutorial for beginners](https://www.youtube.com/watch?v=HVsySz-h9r4)
81
79
-[Introduction to GIT - Core Concepts](https://www.youtube.com/watch?v=uR6G2v_WsRA)
@@ -113,13 +111,13 @@ When working with GitHub we want to ensure the same level of security. Thus, we
113
111
114
112
## 2. More advanced CSS
115
113
116
-
By now you've gotten some practice with CSS. In the following sections you'll learn about some more essentials concepts in order to write modern stylesheets for the web!
114
+
By now you've had some practice with CSS. In the following sections you'll learn about some more essentials concepts in order to write modern stylesheets for the web!
117
115
118
116
### Flexible organizing with flexbox
119
117
120
118
CSS is used to order and style HTML elements. A big part of this is organising elements in a visually attractive way. This can be done using Flexbox.
121
119
122
-
What this does is helping you to think according to 'grid-based web design': elements are not randomly placed on the page, but are neatly organised along a grid.
120
+
What it does is helping you to think according to 'grid-based web design': elements are not randomly placed on the page, but are neatly organised along a grid.
123
121
124
122
Read the following to learn more about 'grid-based web design':
125
123
@@ -134,7 +132,7 @@ In order to make use of it we have to access it through the `display` CSS proper
134
132
display: flex;
135
133
```
136
134
137
-
This will allow us the Flexbox-specific properties, that allow us to develop clean and organised CSS. Check the following links to understand how this is done:
135
+
This will give us the Flexbox-specific properties, so we can develop clean and organised CSS. Check the following links to understand how this is done:
- [CSS Flexbox Tutorial for Beginners 1/2 ](https://www.youtube.com/watch?v=siKKg8Y_tQY)
@@ -149,15 +147,15 @@ p {
149
147
}
150
148
```
151
149
152
-
However, there are times when a user interacts with an element in a particular way: for example, clicking a button that opens another page. As frontend developers we need to give the user feedback on that particular action. When they place the mouse on top of the button it lights up (we call this a `hover state`). However, we have to write instructions for that to happen.
150
+
There are times when a user interacts with an element. For example: clicking a button that opens another page. As frontend developers we need to give the user feedback on that particular action. When they place the mouse on top of the button it lights up (we call this a `hover state`). We need to write instructions for that to happen.
153
151
154
152
Like the hover state there are others as well: click, focus, visited, and others. For most of these element states we have special selectors. Read the following article to learn about them. Once you do try the out for yourself!:
155
153
156
154
-[Pseudo class selectors](https://css-tricks.com/pseudo-class-selectors/)
157
155
158
156
### Responsive design with media queries
159
157
160
-
Nowadays people use different devices to access websites: desktops, tablets and mobiles of all different sizes. Responsive design is a way to put together a website so that it automatically scales its content and elements to match the screen size on which it is viewed. It keeps images from being larger than the screen width, and prevents visitors on mobile devices from needing to do extra work to read your content.
158
+
Nowadays people use different devices to access websites: desktops, tablets and mobile phones of all different sizes. Responsive design is a way to put together a website so that it automatically scales its content and elements to match the screen size of the viewer. It prevents that images are larger than the screen width, so visitors on mobile devices will see a visually attractive website as well
161
159
162
160
For more information about responsive design, check this article: [Responsive Design](https://internetingishard.com/html-and-css/responsive-design/).
0 commit comments