forked from LITWorkExperience/ProjectTemplate
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathreferenceGuide.html
More file actions
181 lines (159 loc) · 9.36 KB
/
referenceGuide.html
File metadata and controls
181 lines (159 loc) · 9.36 KB
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Work experience project, Reference guide, Web development, Coding">
<meta name="author" content="Andrew Hiles">
<title>LIT Work XP Reference Guide</title>
<!-- Bootstrap Core CSS -->
<link href="Reference-Guide/css/bootstrap.min.css" rel="stylesheet">
<!-- Reference Guide CSS -->
<link href="Reference-Guide/css/referenceGuide.css" rel="stylesheet">
<!-- Octicons CSS -->
<link href="Reference-Guide/octicons/octicons.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Work XP Reference Guide</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#intro">Introduction</a>
</li>
<li>
<a href="#coding">Programming Basics</a>
</li>
<li>
<a href="#tech">Technologies</a>
</li>
<li>
<a href="#examples">Workshop Examples</a>
</li>
<li>
<a href="#reading">Further Reading</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1 class="page-header">
<span class="glyphicon glyphicon-file"></span>
LIT Work XP
<small>Reference Guide</small>
</h1>
<h2>
<a name="intro">Introduction</a>
</h2>
<h3 class="leadHeaders"><span class="mega-octicon octicon-chevron-right"></span>What are we doing?</h3>
<p>
We at Liberty Information Technology have been looking at a way to improve our current work experience program. The aim has been to create a project that will incorporate modern-day technologies coupled with an importance on the world of insurance.
</p>
<p>
After various meetings and discussions, we came to the agreement that it would be interesting to let students have the opportunity to create their very own web application using a blend of different programming languages and technologies. In a digital world where we use the internet to perform mass amounts of our daily tasks(reading news, sending emails, updating our status on social media, etc) it felt only right to push students in that direction.
</p>
<p>
As a student, you will create a new <a class="link" href="http://en.wikipedia.org/wiki/Single-page_application" target="_blank">single-page application</a> that will enable users to enter both their personal details and vehicle details before submitting the information and retrieving an insurance quote. The layout of the application is very simple and easy to construct due to the usage of Twitter's <a class="link" href="http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)" target="_blank">Bootstrap</a> technology - A <a class="link" href="http://www.slideshare.net/Diacode/frontend-frameworks-a-quick-overview" target="_blank">front-end framework</a> which gives developers a more efficient option for creating prototypes fit for the world wide web.
</p>
<p>
One of the biggest features the application has is the ability to transform depending on the device that is being used to view it. In the UK, approximately <a class="link" href="http://mobilemarketingmagazine.com/7-10-people-uk-now-own-smartphone/" target="_blank">7 out of 10 people now use a smartphone</a> so it's important that when we develop applications we consider the device that it will be viewed on. Originally where developers only catered for desktop computers, we now have to be aware of tablets and smartphones as well. The application will use what is known as <a class="link" href="http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design" target="_blank">Responsive Web Design</a> or <i>'RWD'</i> to cater for this and it really does improve the usability of anything on the web as it accomodates a much wider user base and promotes the incentive for a user to return to the application in the future.
</p>
</div>
<div class="col-md-8">
<h2>
<a name="coding">Programming Basics</a>
</h2>
<h3 class="leadHeaders"><span class="mega-octicon octicon-chevron-right"></span>What is programming?</h3>
<p>
If you are unfamiliar with programming, fear not! We have created a guide that will explain the basics and give you enough of a knowledge that you will be able to complete the workshop with ease. Even if you are familiar with programming, it's worth checking out. Simply click <a class="link" href="Reference-Guide/referenceGuide/programmingBasics.html">here</a> to read a brief tutorial.
</p>
</div>
<div class="col-md-8">
<h2>
<a name="tech">Technologies</a>
</h2>
<h3 class="leadHeaders"><span class="mega-octicon octicon-chevron-right"></span>What are we using?</h3>
<ul>
<li>
<span class="octicon octicon-book"></span>
<a class="link" href="Reference-Guide/referenceGuide/html.html">HTML</a>
</li>
<li>
<span class="octicon octicon-book"></span>
<a class="link" href="Reference-Guide/referenceGuide/css.html">CSS</a>
</li>
<li>
<span class="octicon octicon-book"></span>
<a class="link" href="Reference-Guide/referenceGuide/javascript.html">JavaScript</a>
</li>
<li>
<span class="octicon octicon-book"></span>
<a class="link" href="Reference-Guide/referenceGuide/jquery.html">jQuery</a>
</li>
<li>
<span class="octicon octicon-book"></span>
<a class="link" href="Reference-Guide/referenceGuide/twitterBootstrap.html">Twitter Bootstrap</a>
</li>
<li>
<span class="octicon octicon-book"></span>
<a class="link" href="Reference-Guide/referenceGuide/node.html">Node.js</a>
</li>
</ul>
</div>
<div class="col-md-8">
<h2>
<a name="examples">Workshop Examples</a>
</h2>
<h3 class="leadHeaders"><span class="mega-octicon octicon-chevron-right"></span>Want to see more?</h3>
<p>
Examples are important when it comes to explaining things. Click <a class="link" href="Reference-Guide/referenceGuide/workshopExamples.html">here</a> to view several pre-made goodies that we've created to illustrate things.
</p>
</div>
<div class="col-md-8">
<h2>
<a name="reading">Further Reading</a>
</h2>
<h3 class="leadHeaders"><span class="mega-octicon octicon-chevron-right"></span>Want to know more?</h3>
<ul>
<li>
<span class="octicon octicon-book"></span>
<a class="link" href="Reference-Guide/referenceGuide/responsiveWebDesign.html">Responsive Web Design(RWD)</a>
</li>
<li>
<span class="octicon octicon-book"></span>
<a class="link" href="Reference-Guide/referenceGuide/github.html">GitHub</a>
</li>
<li>
<span class="octicon octicon-book"></span>
<a class="link" href="Reference-Guide/referenceGuide/apis.html">APIs</a>
</li>
</ul>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p><span class="glyphicon glyphicon-copyright-mark"></span> Liberty Information Technology, Belfast 2014</p>
</div>
</div>
</footer>
</div>
<!-- js source links... -->
<script src="Reference-Guide/jquery-2.1.1.js"></script>
<script src="Reference-Guide/js/bootstrap.min.js"></script>
</body>
</html>