-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgit.html
153 lines (144 loc) · 10.4 KB
/
git.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
<!DOCTYPE html>
<html ng-app="IntroductionApp">
<head>
<title>CodeFirst:Girls Introductory Course</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui/build/angular-ui.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-ui/build/angular-ui.min.css">
</head>
<body ng-controller="ContentController">
<div class="container" style="padding-top: 20px;">
<div class="row">
<div id="leftPane" class="col-xs-3">
<img class="cfg" src="cfg.png" alt="Code First Girls Logo" />
<p class="mini-bio">A short taster session into the fundamental technologies powering the world wide web.</p>
<div class="progress progress-danger">
<div class="progress-bar" role="progressbar" aria-valuenow="{{completedPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="width: {{completedPercentage()}}%;">
<span class="sr-only">{{completedPercentage()}}% Complete</span>
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="#first">Introduction to Git</a></li>
<li><a href="#two">Two stage commit</a></li>
<li><a href="#sourcetree">SourceTree</a></li>
<li><a href="#firstcommit">Our First Commit</a></li>
<li><a href="#external">External CSS Files</a></li>
</ul>
</div>
</div>
<div id="rightPane" class="col-xs-9">
<h1 id="first">Git? What?</h1>
<p>
Git is a <em>version control system</em> - a tool that software develoers use to allow them to keep the entire history of your code. It also makes it easy to share and collaborate with others.
</p>
<p>
Git lets you take a shapshots of your code in time that you can always roll back too. This makes it crucial as a backup tool, you can never lose your code again.
</p>
<p>
Git isn't GitHub though! This is an important distinction to make. Git is a program that runs on your computer, tracking changes in your files. GitHub is a website that provides you with cloud hosting for your GitHub repositories.
</p>
<p>
Git is the tool that developers use to avoid ugly file names like: <code>index_version1.html, index_version2.html, index_version3.html</code>. When using Git we can have just our latest <code>index.html</code> file, knowing that we can rollback to any of the previous snapshots at any point.
</p>
<h3 id="two">The Two Stage Commit Process</h3>
<p>
Okay - when we said <em>snapshot</em> earlier, we actually meant commit. In Git taking a snapshot of your code is called <em>committing</em> code. We'll use this term from now on.
</p>
<p>
The commit process is actually a two stage process:
<ol>
<li>Add the files you want to save</li>
<li>Commit the files</li>
</ol>
This is important, whenever you make a significant change to your code that you want to commit you must add all of the files that have changes and then commit.
</p>
<h2 id="sourcetree">Introducing SourceTree</h2>
<p>
Git is a tool that is usually used from the <em>command line</em>, but this can be a bit intimidating for beginners, so we'll use an equally powerful (and free!) tool called <a href="http://www.sourcetreeapp.com/">SourceTree</a> that gives us a graphical way of interacting with Git.
</p>
<p>
We'll now use SourceTree to set up our site as a Git repository, using Git to track changes to our files.
</p>
<tasks>
<item title="Open SourceTree"></item>
<item title="Set up our folder as a Git repository"> File -> New/Clone</item>
<item title="Select the Create Repository Tab"></item>
<item title="Set the Repository type to Git"></item>
<item title="In Destination Path: navigate to your website folder"></item>
<item title="Hit Create"></item>
</tasks>
<p>
Git is now set up to track changes in our files. But we haven't committed anything yet!
</p>
<h2 id="firstcommit">Our First Commit</h2>
<p>
We'll now make our first commit into our Git repository, adding and committing our <code>index.html</code> file.
</p>
<tasks>
<item title="Select index.html from the bottom box and hit add"> This moves it to the staging area, the box above. Add button is in the top menu</item>
<item title="Commit!">The commit button is in the top menu</item>
<item title="Give the commit a good message and hit commit"> The message is what will be displayed if we want to rollback to this commit, so make it descriptive.</item>
<item title="Verify that the index.html file is no longer in the bottom box"></item>
<item title="Make a change (small) to index.html"></item>
<item title="index.html should have reappeared in the bottom box"> This is becuase git is tracking changes in our files</item>
<item title="Repeat the two stage commit process"></item>
</tasks>
<p>
Throughout the weekend we'll be using Git to track changes to our files!
</p>
<h2 id="external">External CSS files</h2>
<p>
Recall that we said there were three ways to add CSS to our site:
<ol>
<li>Put the css inline in the html.</li>
<li>Put the css in a <code><style>..</style></code> section in the <code><head></code></li>
<li>Link to a separate <code>.css</code> file in the <code><head></code></li>
</ol>
</p>
<p>
So far you have written your CSS rules directly in the <code>head</code> section of your html page:
</p>
<pre><code class="html"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>My page<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">type=</span><span class="s">"text/css"</span><span class="nt">></span>
<span class="nt">h1</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span> <span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="c"><!-- body goes here --></span>
<span class="nt"></html></span>
</code></pre>
<p>We did this to make your first experiments with CSS quick an easy. In a live site it is considered bad practice to put your CSS inside the <code>head</code> section: Typically a site will have one set of styles that apply to all the pages. By separating these CSS rules into their own file you (a) reduce repetition in your code and (b) reduce the amount of information that has to be sent to the browser for each page - if the CSS file applies to the whole site, it only needs to be sent to the visitor once.</p>
<p>
To link to an external CSS file you can do the following:
</p>
<pre><code class="html"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>My page<span class="nt"></title></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">'stylesheet'</span> <span class="na">type=</span><span class="s">'text/css'</span> <span class="na">href=</span><span class="s">'path/to/my_css_file.css'</span><span class="nt">></span>
<span class="nt"></head></span>
<span class="c"><!-- body goes here --></span>
<span class="nt"></html></span>
</code></pre>
<tasks>
<item title="Create a main.css file"> Use sublime to save a new empty file in the root of your website folder</item>
<item title="Copy the contents of your style tag into the new file"> Your path will just be main.css</item>
<item title="Delete the style tags"> You don't need to use style tags with external css sheets</item>
</tasks>
</div> <!-- rightPane -->
</div>
<script type="text/javascript" src="controllers.js"></script>
<script type="text/javascript" src="directives.js"></script>
</body>
</html>