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: _sessions/c1s2/1_using_git.md
+10-108
Original file line number
Diff line number
Diff line change
@@ -12,122 +12,24 @@ Git works on a folder level. To set up a folder to work with git you need to ope
12
12
13
13
There are some other hidden files (e.g. those used by your operating system) that you don't want to be version controlled. An example of these is the `.DS_Store` file on macs. We'll talk more about this later - for now we'll just quickly exclude them from our repository.
14
14
15
-
To do this you need to create a file called `.gitignore` in your the folder containing your repo and put the line `.DS_Store` in it. You can do this with sublime text:
15
+
To do this you need to change the settings on your repository.
16
16
17
-
1. Open Sublime Text and write `.DS_Store` in a new window.
18
-
2.Save this file as `.gitignore` in your repo folder.
17
+
1. Open the settings tab of your repository.
18
+
2.Add `.DS_Store` on the first line of the 'Ignored files' section, and press 'Save Changes'.
19
19
20
20
If you're on Windows you don't need to worry about this.
21
21
22
-
### Adding files to the repository
22
+
### Committing files to the repository
23
23
24
-
Suppose we've now created a file called `index.html` in the folder. It's in the folder but currently isn't being tracked by git. You can see this by doing `git status`:
24
+
Suppose we've now created a file called `index.html` in the folder. It's in the folder but currently isn't being tracked by git.
25
25
26
-
$ git status
26
+
Adding files to a git repository is actually a two-stage process: you have to **add** them and then **commit** them. This is useful when you get more advanced, but we'll usually do those things together for the time being.
27
27
28
-
# On branch master
29
-
#
30
-
# Initial commit
31
-
#
32
-
# Untracked files:
33
-
# (use "git add <file>..." to include in what will be committed)
34
-
#
35
-
# index.html
36
-
nothing added to commit but untracked files present (use "git add" to track)
37
-
38
-
Adding files to a git repository is actually a two-stage process: you have to **add** them and then **commit** them. This is useful when you get more advanced, but we'll usually do those things together for the time being. To add the changes to the repository do:
39
-
40
-
$ git add --all
41
-
$ git status
42
-
43
-
# On branch master
44
-
#
45
-
# Initial commit
46
-
#
47
-
# Changes to be committed:
48
-
# (use "git rm --cached <file>..." to unstage)
49
-
#
50
-
# new file: index.html
51
-
#
52
-
53
-
It is possible to add files one at a time - again, useful when you get more advanced. For the time being the `--all` flag tells git to add everything to the folder. In other tutorials you might see `git add .`. This also adds everything in the folder **but doesn't remove files you have deleted**. I'd encourage you to stick with `git add --all` for the time being.
54
-
55
-
We will now commit these changes to our repository, along with a description of the changes we have made.
56
-
57
-
$ git commit -m "Created index.html"
58
-
59
-
[master (root-commit) e91b6be] Created index.html
60
-
0 files changed
61
-
create mode 100644 index.html
62
-
63
-
<divclass='alert alert-error'markdown="1">
64
-
#### How to get out of vim
65
-
66
-
If you forget to supply a message with the `-m` tag git will drop you into a text editor (probably vim) so that you can write one. If this happens you will need to do the following:
67
-
* Press `i` to get into insert mode, so you can write.
68
-
* Write your message.
69
-
* Press `esc` then `:` then `wq` then `Enter`.
70
-
* Never forget your message again...
71
-
* ... or make a note of these instructions!
72
-
73
-
</div>
74
-
75
-
You can check that the commit worked with git status:
or you can get a nice diagram showing your repo by doing
93
-
94
-
$ gitk --all
95
28
96
29
{% exercise %}
97
-
Enable your `first_site` folder as a git repository:
98
-
1. Navigate to the `first_site` folder in the command line
99
-
2. Type
100
-
101
-
$ git init
102
-
103
-
2.**If you are on a mac**, tell git to ignore your `.DS_Store` files:
104
-
1. Open Sublime Text and write `.DS_Store` in a new window.
105
-
2. Save this file as `.gitignore` in your `first_site` folder.
106
-
107
-
3. Do a git status to see what it says
108
-
109
-
$ git status
110
-
111
-
4. Commit your changes to the repository:
112
-
113
-
$ git add --all
114
-
$ git commit -m "Created index.html"
115
-
116
-
5. Do a git status and then a git log to see what has happened:
117
-
118
-
$ git status
119
-
$ git log
120
-
30
+
1. Set up your `first_site` folder as a git repository: open up the github app, select `File > Add Local Repository ...` and select the `first_site` folder.
31
+
2.**If you are on a mac**, tell git to ignore your `.DS_Store` files: in the settings panel of the github app, add the line `.DS_Store` in the 'Ignored files' section.
32
+
3. Commit your work to the repository: in the 'Changes' panel, click 'Select all', write a 'Commit Summary' in the box (e.g. "Created index.html") and click 'Commit'.
121
33
6. Make some change to index.html (in Sublime Text)
122
-
7. Go back to the command line and do a git status:
123
-
124
-
$ git status
125
-
126
-
8. Add and commit your changes but forget the `-m`:
127
-
128
-
$ git add --all
129
-
$ git commit
130
-
131
-
9. Use the warning above to add you commit message and escape from vim
132
-
34
+
7. Go back to the 'Changes' panel. Select and commit your changes, with a 'Commit Summary' describing what you did.
Copy file name to clipboardExpand all lines: _sessions/c1s2/2_pushing_to_github.md
+13-14
Original file line number
Diff line number
Diff line change
@@ -5,24 +5,23 @@ title: Pushing code to Github
5
5
6
6
Github is a site which will host a git repo online for you, making it easy to collaborate with others. We'll now see how to put some code online.
7
7
8
-
Go to github, login, and click "Create New Repo" in the top left hand corner.
8
+
### Aside: serving a site via Github Pages
9
9
10
-
10
+
Normally when we push code up to github, it just sits there for others to see and contribute to. The code we're about to push up happens to be the code for a website. Instead of the files just sitting there, we want github to *serve* them as a website. The way github does this is through its [github pages](http://pages.github.com/).
11
11
12
-
Follow the instructions, calling it something like `first_site`. **Do not** click the box which says 'Create a readme with this repository'. You'll get to a page when it'll describe how to get your code online. You want to follow the instructions for "Pushing an existing repository to github".
12
+
There are several ways of getting GitHub to publish your site as a GitHub page. We're going to use a simple trick: in the branches panel of the GitHub app, change the name of the current branch from `master`to `gh-pages`.
13
13
14
-
14
+
<divclass="alert alert-warning">If you haven't verified your email with github (you'll see a warning at the top of the screen when you log in). Your GitHub won't serve your page at all. Make sure you've verified you email address, before continuing!</div>
15
15
16
-
If you've set up ssh keys, go for the ssh option, if not, go for https. You should end up doing something like:
To push code up to GitHub, in the GitHub app select the 'Push to Github' button (on the top right). You'll be prompted to choose a name (which might as well be `first_site`).
20
19
21
-
You might now be prompted to add your github username and password (if you're doing the https method). If all goes well, when you go to github you should see the `first_site` folder containing your html file.
22
-
23
-
{% exercise %}
24
-
Push your `first_site` folder to GitHub!
25
-
26
-
1. Create the new repository on GitHub. (**Don't** create it with a README.)
27
-
2. Follow the instructions for "Pushing an existing repository to github" to push your repository up.
20
+
{% endexercise %}
21
+
1. Log in to GitHub and check you've verified your email address.
22
+
1. In the 'Branches' panel of the GitHub app, change the name of the current branch from `master` to `gh-pages`.
23
+
2. Click the 'Push to Github' button in the GitHub app.
24
+
3. On Github check you can see your `first_site` code.
25
+
4. On the code page on github, click on Settings. It should tell you (about half way down) the url where they've published your site. Have a look to see whether you can see it!
26
+
5. (If you finish early) Make a change to `index.html` in Sublime Text. Commit the change to the repository and then push it to GitHub. Make sure you can see the change in the code on GitHub and also in the published page.
Copy file name to clipboardExpand all lines: _sessions/c1s2/5_separate_css_file.md
+26-24
Original file line number
Diff line number
Diff line change
@@ -53,9 +53,9 @@ Linking to other files (stylesheets, javascript files, images) can be done in se
53
53
54
54
and you're going to deploy your site to "http://www.my_first_site.com". Suppose you want to link to `main.css` from `index.html` and to `background.jpg` from `main.css`. There are three different styles of links you can use:
55
55
56
-
#### 1. Absolute external links
56
+
#### 1. Absolute links
57
57
58
-
Absolute external links include the complete url to the resource you're linking to:
58
+
Absolute external links include the complete url to the resource you're linking to. **Absolute links start with either http:// or https://**.
59
59
60
60
{% highlight html %}
61
61
<!-- in index.html -->
@@ -68,11 +68,11 @@ body {
68
68
}
69
69
{% endhighlight %}
70
70
71
-
Absolute external links can be used to link to resources held on different sites, but wouldn't usually be used for links between your own site. They're a bit fragile - if you change your domain name all the links will break. They also won't work when you're developing locally.
71
+
Absolute external links can be used to link to resources held on different sites, but wouldn't usually be used for links within your own site. They're a bit fragile - if you change your domain name all the links will break. They also won't work when you're developing locally.
72
72
73
-
#### 2. Absolute local links
73
+
#### 2. Root-relative links
74
74
75
-
Absolute local links contain the path to the resource *relative to the site's root*. The site's root is (roughly) the folder that contains the site - in this case, `first_site`. **Absolute local links begin with a `/`**:
75
+
Root-relative links contain the path to the resource *relative to the site's root*. The site's root is (roughly) the folder that contains the site - in this case, `first_site`. **Root-relative links begin with a `/`**:
76
76
77
77
{% highlight html %}
78
78
<!-- in index.html -->
@@ -85,11 +85,11 @@ body {
85
85
}
86
86
{% endhighlight %}
87
87
88
-
Absolute local links are a bit more flexible than absolute external links: e.g. if you change your domain name everything will still be fine. They're sometimes useful for your own static sites, but probably won't work when developing locally (because the root will be taken to be the root of your file system and not the folder containing the site!).
88
+
Root-relative links are a bit more flexible than absolute external links: e.g. if you change your domain name everything will still be fine. They're sometimes useful for your own static sites, but probably won't work when developing locally (because the root will be taken to be the root of your file system and not the folder containing the site!).
89
89
90
-
#### 3. Relative local links
90
+
#### 3. Document-relative links
91
91
92
-
Relative local links contain the path to the resource *relative to the file where the link is written*. **Relative local links don't begin with `/`**:
92
+
Document-relative links contain the path to the resource *relative to the file where the link is written*. **Document-relative links don't begin with `/`**:
93
93
94
94
{% highlight html %}
95
95
<!-- in index.html -->
@@ -104,27 +104,29 @@ body {
104
104
105
105
To link to the stylesheet from `index.html` we use `stylesheets/main.css` which says "look in the same folder I'm in (`first_site`) and find a folder called `styleheets` and a file in it called `main.css`".
106
106
107
-
To link to the image from the stylesheet is slightly more complicated: we use `../images/background.jpg`. This means "go to the folder above the one I'm in (I'm in `stylesheets`, so that's `first_site`) and find a folder called `images` and a file in it called `background.jpg`". Notice how `..` is used to go up a folder, just like in the command `cd ..`.
107
+
To link to the image from the stylesheet is slightly more complicated: we use `../images/background.jpg`. This means "go to the folder above the one I'm in (I'm in `stylesheets`, so that's `first_site`) and find a folder called `images` and a file in it called `background.jpg`".
108
+
109
+
<divclass="panel panel-primary">
110
+
<divclass="panel-heading">
111
+
<h3 class="panel-title">Important to know</h3>
112
+
</div>
113
+
<divclass='panel-body'>
114
+
In document-relative links (and in many other places e.g. command line navigation)
115
+
<ul>
116
+
<li><code>.</code> means in the folder <strong>that I'm in</strong></li>
117
+
<li><code>..</code> means in the folder <strong>above the one that I'm in</strong></li>
118
+
</ul>
119
+
</div>
120
+
</div>
108
121
109
122
Relative links are the most flexible - they will work on your local file system. The only think you have to be careful about is moving your files into different folders, which can cause links to break.
110
123
111
124
**You should be using relative local links in these exercises.**
112
125
126
+
For a recap of all this, read [this article](https://www.inkling.com/read/dreamweaver-cs6-missing-manual-david-sawyer-mcfarland-1st/chapter-4/understanding-links).
113
127
114
128
{% exercise %}
115
-
1. Move to your `coding_course` folder and clone the repository for this session:
116
-
117
-
git clone https://github.com/code61/html3.git
118
-
119
-
2. Open `exercise1.html` in Sublime Text and Chrome.
120
-
3. Link in the external stylesheet `exercise1.css`. Save, add and commit. Make sure the results show up in Chrome when you refresh.
121
-
4. Open `exercise2.html` in Sublime Text and Chrome.
122
-
5. Move the css from the `head` into a separate stylesheet, which you should call `exercise2.css`. Link to this stylesheet in the head.
123
-
6. Create another stylesheet called `exercise2-custom.css`.
124
-
7. In this stylesheet write:
125
-
126
-
.color-info { border: 5px dotted purple; }
127
-
128
-
8. Link in this stylesheet too, so that the changes take effect.
129
-
9. If you have time, move any styles you have added to your `first_site` into a separate stylesheet.
129
+
1. Return to `exercise1.html` and separate the CSS out into a separate file (called `exercise1.css`).
130
+
2. Check that the CSS still shows up when you view the site in the browser.
131
+
3. Make a change in `exercise1.css` and check that you can see that in the browser. (You might need to refresh the page a few times).
Finish off both CSS exercises from class. Check your solutions online:
9
+
* Find the HTML2 repository on Code61's github page.
10
+
* In the `branch` dropdown (just above the list of files) select the `solution` branch.
11
+
* Click on the files below to see the solution
12
+
{% endexercise %}
13
+
14
+
### More HTML/CSS
15
+
16
+
{% exercise %}
17
+
1. Complete the whole of Project 3 on the [General Assembly Dash](https://dash.generalassemb.ly/projects) site.
18
+
2. Make some changes to your `first_site` based on what you've learnt. Make sure you add them to git, push them to github and check you can see them online.
19
+
3. (Optional) Do the projects from the [Codecademy Web Track](http://www.codecademy.com/tracks/web) Sections 7, 8 & 9.
20
+
4. (Optional) Read [this article](https://www.inkling.com/read/dreamweaver-cs6-missing-manual-david-sawyer-mcfarland-1st/chapter-4/understanding-links) about absolute vs. relative links.
Copy file name to clipboardExpand all lines: _sessions/c3s2/2_post_requests.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -41,5 +41,5 @@ Note that, like the words matched in the url, the value of the `user_name` field
41
41
2. Clone down your fork of the repository onto your laptop.
42
42
3. Open the `sinatra_c3s2` project in Sublime Text and have a read through `app.rb`. See if you can predict what the app will do.
43
43
4. Run the app from the command line (`ruby app.rb`), to see if you were right.
44
-
5. (Optional) Add the line `raise params.inspect` right at the top of the post block. Restart the app and see what happens.
44
+
5. (Optional) Add the line `raise params.inspect` right at the top of the post block. Restart the app and see what happens. When you've had a look, make sure you remove the line again!
0 commit comments