/
Ten_Resources_To_Start_Learning.html
195 lines (161 loc) · 6.8 KB
/
Ten_Resources_To_Start_Learning.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
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 ROCKS!</title>
<meta name="viewport" content="width=1024">
<!-- Replace path with correct path to deck.core.css. -->
<link rel="stylesheet" href="src/deck.js/core/deck.core.css" type="text/css">
<!-- Core and extension CSS files -->
<link rel="stylesheet" href="src/deck.js/extensions/navigation/deck.navigation.css">
<link rel="stylesheet" href="src/deck.js/extensions/status/deck.status.css">
<link rel="stylesheet" href="src/deck.js/extensions/hash/deck.hash.css">
<link rel="stylesheet" href="src/deck.js/extensions/menu/deck.menu.css">
<link rel="stylesheet" href="src/css/prettify.css">
<link rel="stylesheet" href="src/css/deck.coder.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,900' rel='stylesheet' type='text/css'>
<!-- Theme -->
<link rel="stylesheet" id='style-theme-link' href="src/css/coderdeck.css" type="text/css" >
<link rel="stylesheet" href="src/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="src/codemirror/theme/default.css">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
<!-- Replace path with correct path to Modernizr file. -->
<script src='src/jquery.min.js'></script>
<script src="src/modernizr.js"></script>
</head>
<body class="deck-container">
<script type='text/coderdeck' id='coderdeck-default'>
<html>
<head>
<script src='src/jquery.min.js'>SCRIPTEND
</head>
<body>
CODE
</body>
</html>
</script>
<script type='text/coderdeck' id='coderdeck-plain'>
<html>
<title>test</title>
<link rel="stylesheet" href="reset.css">
<body>
CODE
</body>
</html>
</script>
<script type='text/coderdeck' id='coderdeck-css-playground'>
<html>
<title>test</title>
CODE
<body>
<h1>I'm a H1 heading</h1>
<h2>I'm a H2 heading</h2>
<p>Pargraph of text <p></p>
<div class='stuff'><div> with class "stuff"</div>
<div id='my-div'><div> with id "my-div"</div>
</body>
</html>
</script>
<script type='text/coderdeck' id='coderdeck-style-example'>
<html>
<title>test</title>
<style>
CODE
</style>
<body>
<h1>I'm a H1 heading</h1>
<h2>I'm a H2 heading</h2>
<h3>Pargraph of text <p> here</p>
<div class='stuff'>I'm a div <div> with class "stuff"</div>
<div id='my-div'>I'm a <div> with id "my-div"</div>
</body>
</html>
</script>
<!-- Create any number of elements with class slide within the container -->
<article class='slide slide-subhead'>
<h1>RampUp Tips</h1>
<h2>Ten Resources To Start Learning <br> HTML & CSS</h2>
<p>Use your left/right arrows to navigate</p>
</article>
<article class='slide slide-list'>
<h2>#10</h2>
<h1><a href="http://www.dontfeartheinternet.com">Don't Fear the Internet</a></h1>
<p>from the wonderful Jessica Hische & Russ Maschmeyer</p>
</article>
<article class='slide slide-list'>
<h2>#9</h2>
<h1><a href="http://learn.shayhowe.com/html-css/">Shay Howe</a></h1>
<p>Primarily text based tutorials - great resource for you to review and bookmark for reference</p>
</article>
<article class='slide slide-list'>
<h2>#8</h2>
<h1><a href="http://www.amazon.com/gp/product/1118008189/ref=as_li_ss_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1118008189&linkCode=as2&tag=eatbee-20">HTML and CSS: Design and Build Websites</a></h1>
<p>by Jon Duckett. This is the best designed text on HTML/CSS. A must have if you are getting into Front-End Dev.</p>
</article>
<article class='slide slide-list'>
<h2>#7</h2>
<h1><a href="http://www.amazon.com/gp/product/0987153021/ref=as_li_ss_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=0987153021&linkCode=as2&tag=eatbee-20">The CSS3 Anthology: Take Your Sites to New Heights</a></h1>
<p>by Rachel Andrew</p>
</article>
<article class='slide slide-list'>
<h2>#6</h2>
<h1><a href="http://www.webplatform.org/">Web Platform</a></h1>
<p>an official resource convened by W3C and supported by Adobe, Facebok, Google, Microsoft, Opera, etc.</p>
</article>
<article class='slide slide-list'>
<h2>#5</h2>
<h1><a href="http://teamtreehouse.com//">Team Treehouse</a></h1>
<p>Another in the browser resource with a 30 day free trial. Go through this tutorial first!</p>
</article><article class='slide slide-list'>
<h2>#4</h2>
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML">Mozilla Developer Network</a></h1>
<p>A great resource that you need to bookmark ASAP. This one is kept up to date</p>
</article>
</article><article class='slide slide-list'>
<h2>#3</h2>
<h1><a href="http://css-tricks.com/">CSS Tricks</a></h1>
<p>An 8 week career accelerator, with a track focusing on front-end web development</p>
</article>
</article><article class='slide slide-list'>
<h2>#2</h2>
<h1><a href="rampup.startupinstitute.com">RampUp, by Startup Institute</a></h1>
<p>A part time program deisgned to help you beef up your front-end skills. Sign up <a href="http://rampup.startupinstitute.com/curriculum/frontend-webdev">Here</a></p>
</article><article class='slide slide-list'>
<h2>#1</h2>
<h1>Just go do it!</h1>
<p> Sign up for an account on Github and fork this repository. Experiment modifying this slidedeck in <a href="http://www.sublimetext.com/2">Sublime Text 2</a>
</p>
</article>
<article class='slide slide-subhead'>
<h1>RampUp Tips</h1>
<h2>A few places to avoid</h2>
</article>
<article class='slide slide-list'>
<h2>#-1</h2>
<h1>W3 Schools</h1>
<p>They are very good at SEO, but not good at teaching. When you search for a topic they will come up first. They are not affiliated with the Official <a href="http://www.w3.org/">W3C</a>, and their content is typically out of date. Check out <a href="http://www.w3fools.com/">W3Fools</a> for more information of why you should avoid this one.</p>
</article>
<!-- Update these paths to point to the correct files. -->
<script src="src/jquery.tmpl.min.js"></script>
<script src="src/deck.js/core/deck.core.js"></script>
<!-- Code Mirror -->
<script src="src/codemirror/lib/codemirror.js"></script>
<script src="src/codemirror/mode/xml/xml.js"></script>
<script src="src/codemirror/mode/css/css.js"></script>
<script src="src/codemirror/mode/javascript/javascript.js"></script>
<script src="src/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<!-- Prettify -->
<script src="src/prettify.js"></script>
<!-- Deck Core and extensions -->
<script src="src/deck.js/extensions/status/deck.status.js"></script>
<script src="src/deck.js/extensions/navigation/deck.navigation.js"></script>
<script src='src/deck.coder.js'></script>
<script src="src/deck.js/extensions/hash/deck.hash.js"></script>
<script src="src/deck.js/extensions/menu/deck.menu.js"></script>
<script>
$(function() {
$.deck('.slide');
});
</script>
</body>
</html>