-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprep.html
122 lines (118 loc) · 8.77 KB
/
prep.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
<!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="#welcome">Welcome</a></li>
<li><a href="#prep">Preparation</a></li>
<ul>
<li><a href="#sublime">Sublime Text 2</a></li>
<li><a href="#chrome">Google Chrome</a></li>
<li><a href="#sourcetree">SourceTree</a></li>
<li><a href="#github">GitHub</a></li>
</ul>
<li><a href="#help">Help</a></li>
</ul>
</div>
</div>
<div id="rightPane" class="col-xs-9">
<h1 id="welcome">Code First: Girls - Code & Create</h1>
<p class="first-child">Congratulations on being accepted onto the Code First: Girls Code & Create course.</p>
<p>This short 2 day introductory course will introduce you to the basics of web programming. You will develop your understanding of how the internet works, learn to code a basic site using HTML, CSS & JavaScript, and learn how to manage your code and get your site online using a tool called git.</p>
<p>By the end of the weekend you will all have built <a href="final.html">this website</a> <img class="inpara" src="images/learn.jpg">, an e-commerce of your own. Together we will build a e-commerce store for girls that want to get into tech, but you can select your own products and images if you so wish. There will also be time at the end for you to customize your site if you'd rather have a different site to show off.</p>
<p>
Throughout the weekend we'll often break out into mini groups and do <em>pair programming</em> - completing a series of mini side projects in groups of 2/3 people.
</p>
<p>
The site that we build together is designed to teach you the all of the core concepts of HTML, CSS and JavaScript. It is expected that you will be able to take these skills and build websites of your own independanty after the course.
</p>
<p>Interspersed within the notes you will find these blue exercise boxes, check things off as you complete them and come back later to start where you left off.</p>
<tasks>
<item title="Check me off when you understand">
</tasks>
<h2 id="prep">Preparatory Work</h2>
<p>
The session will require you to install three pieces of Software onto your Laptop: </p>
<ol>
<li><a href="http://www.sublimetext.com/2">Sublime Text 2</a></li>
<li><a href="http://www.google.co.uk/chrome">Google Chrome</a></li>
<li><a href="http://www.sourcetreeapp.com/">SourceTree</a></li>
</ol>
<h3 id="sublime">Sublime Text (2)</h3>
<div class="inset">
<p>
<a href="http://www.sublimetext.com/2">Sublime Text</a> is a text editor - a program that can be used for writing code.
</p>
<p>
When you write code it is important that the editor stores just the text you wrote, so that it can be properly interpreted when you run it. Word processors, like MS Word, add a lot of extra information to the text you write - layout, font styles, etc. - so can't be used for this purpose.
</p>
<p>
You probably already have a text editor, such as notepad or textedit, on your laptop that could be used for writing code. Sublime Text is better because it also does syntax highlighting - it will colour your code, making it easier to see what's going on.
</p>
<tasks>
<item title="Download and install the appropriate version of Sublime Text for your computer"></item>
</tasks>
</div>
<h3 id="chrome">Google Chrome</h3>
<div class="inset">
<p>
Chrome is a free web browser provided by Google. There are several other web browsers that you might have used, including Internet Explorer, Safari, Firefox and Opera. We will be using Chrome as it comes with a good set of developer tools that we will be using over the course.
</p>
<tasks>
<item title="Download and install Google Chrome"></item>
</tasks>
</div>
<h3 id="sourcetree">SourceTree</h3>
<div class="inset">
<p>
SourceTree is a free Git client that makes using Git easier, a program traditionally used from the command line. SourceTree allows us to avoid having to remember cumbersome commands by providing a graphical user interface that we can interact with.
</p>
<p>We'll cover what Git is later today, but for now know that it's a tool that software developers use to track changes in their code, collaborate and backup their work. We'll also use Git to publish our site onto the Internet.</p>
<tasks>
<item title="Download and install SourceTree"></item>
</tasks>
</div>
<h3 id="github">GitHub</h3>
<div class="inset">
<p>GitHub is a website that hosts your Git repositories, this makes the collaborative nature of Git really easy.<p>
<p>GitHub also allows you to put a static website online for free, using <a href="http://pages.github.com/">GitHub Pages</a>. We will be making use of this feature during the weekend.</p>
<tasks>
<item title="Sign up for a GitHub account"></item>
<item title="Verify your GitHub email address"></item>
</tasks>
</div>
<h3 id="help">Got stuck?</h3>
<div class="inset">
<p>If you get stuck completing any of the above tasks, please email your instructor.</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="controllers.js"></script>
<script type="text/javascript" src="directives.js"></script>
</body>
</html>