forked from moinworld/wtm-website
/
resources.html
203 lines (167 loc) · 9.89 KB
/
resources.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
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html>
<head>
<!-- Metadata for Search Engines like Google -->
<meta charset="utf-8">
<title>Women Techmakers Hamburg</title>
<meta name="description" content="Women Techmakers Hamburg Group">
<!-- Favicons for the Browsers -->
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="apple-touch-icon" href="img/apple-favicon.png" >
<!-- Responsive and Mobile Friendly Stuff -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Font -->
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,500' rel='stylesheet' type='text/css'>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="css/normalize.css" media="all">
<link rel="stylesheet" href="css/col.css" media="all">
<link rel="stylesheet" href="css/2cols.css" media="all">
<link rel="stylesheet" href="css/3cols.css" media="all">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<header class="header">
<div class="wrapper">
<!-- Logo -->
<h1 class="logo"><a href="index.html">Women Techmakers Hamburg</a></h1>
<!-- Mobile Navigation Open Button -->
<a href="#nav" class="menu--open visible-mobile" title="Open Navigation">Menu</a>
<!-- Navigation -->
<nav id="nav" class="nav transition-all">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a class="active" href="resources.html">Resources</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="community.html">Community</a></li>
<li><a href="mentors.html">Mentors</a></li>
</ul>
</nav>
<!-- Mobile Navigation Close Button -->
<a href="#" class="menu--close visible-mobile transition-all" title="Close Navigation">X</a>
</div>
</header>
<!-- Resources Section Starts -->
<main>
<section class="sec--resources sec--content">
<div class="wrapper">
<!-- Headline -->
<div class="section group">
<h2 class="h2">Resources</h2>
</div>
<!-- Column Group: 3 columns -->
<div class="section group">
<!-- Column #1 -->
<article class="col span_1_of_3">
<h3 class="h3">Cheat Sheets</h3>
<!-- Unordered List of Links -->
<ul>
<li><a href="https://www.bluehost.com/blog/website-design/html-css-cheat-sheet-infographic-4181/" target="_blank">HTML and CSS Cheat Sheet</a></li>
<li><a href="http://www.studyweb.com/wp-content/uploads/html5_cheat_sheet_tags.png" target="_blank">HTML Cheat Sheet</a></li>
<li><a href="http://www.sitepoint.com/web-foundations/css-selectors/" target="_blank">CSS Selectors</a></li>
<li><a href="https://coolestguidesontheplanet.com/getting-selective-css-styling/" target="_blank">CSS Styling Selectors</a></li>
<li><a href="http://makeawebsitehub.com/the-html-5-mega-cheat-sheet/" target="_blank">HTML MEGA Cheat Sheet</a></li>
<li><a href="http://www.justinaguilar.com/animations/" target="_blank">CSS3 Animation Cheat Sheet</a></li>
</ul>
</article>
<!-- Column #2 -->
<article class="col span_1_of_3">
<h3 class="h3">Tutorials and Forums</h3>
<!-- Unordered List of Links -->
<ul>
<li><a href="http://learnlayout.com/" target="_blank">Learn CSS Layout</a></li>
<li><a href="https://css-tricks.com/" target="_blank">CSS Tricks: Blog, Tutorials, Snippets, Forum</a></li>
<li><a href="http://stackoverflow.com/">Stackoverflow: Community Forum to Ask or Answer Coding Questions</a></li>
<li><a href="https://www.khanacademy.org/computing/computer-programming/html-css" target="_blank">Khan Academy: Online Tutorial on HTML and CSS</a></li>
<li><a href="http://www.w3schools.com/" target="_blank">W3 Schools: Guide and Tutorials for CSS, HTML, JS, PHP, etc</a></li>
<li><a href="https://www.javascript.com/" target="_blank" title="Learn JavaScript">JavaScript</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">MDN: Learning JavaScript</a></li>
</ul>
</article>
<!-- Column #3 -->
<article class="col span_1_of_3">
<h3 class="h3">Games</h3>
<!-- Unordered List of Links -->
<ul>
<li><a href="https://eraseallkittens.com" target="_blank">Learn HTML</a></li>
<li><a href="http://thehtml5quiz.com/" target="_blank">Name the HTML5 Elements</a></li>
<li><a href="http://flexboxfroggy.com/" target="_blank">Learn CSS Flexbox with Froggy</a></li>
</ul>
</article>
</div>
<!-- END Column Group -->
<!-- Column Group: 3 columns -->
<div class="section group">
<!-- Column #1 -->
<article class="col span_1_of_3">
<h3 class="h3">Online Courses</h3>
<!-- Unordered List of Links -->
<ul>
<li><a href="https://www.codecademy.com/" target="_blank" title="Learn to Code for Free">Codecademy</a></li>
<li><a href="https://teamtreehouse.com" target="_blank" title="Learn to Code or Design">Treehouse</a></li>
<li><a href="https://www.skillshare.com/classes/technology?via=homepage" target="_blank" title="Learn to Code or Design">Skillshare</a></li>
</ul>
</article>
<!-- Column #2 -->
<article class="col span_1_of_3">
<h3 class="h3">Validation Tools</h3>
<!-- Unordered List of Links -->
<ul>
<li><a href="http://caniuse.com/" target="_blank" title="Caniuse Website">CSS3 Properties Browser Support Matrix</a></li>
<li><a href="http://csslint.net/" target="_blank" title="CSS Lint">CSS Validator</a></li>
<li><a href="https://validator.w3.org/#validate_by_input" target="_blank" title="W3C Markup Validation Service">HTML Validation</a></li>
<li><a href="https://jigsaw.w3.org/css-validator/" target="_blank" title="W3C CSS Validation Service">CSS Validation</a></li>
</ul>
</article>
<!-- Column #3 -->
<article class="col span_1_of_3">
<h3 class="h3">Online Editors</h3>
<!-- Unordered List of Links -->
<ul>
<li><a href="https://jsfiddle.net/" target="_blank" title="Create and Edit your HTML, CSS and JS">JSFiddle</a></li>
<li><a href="http://codepen.io/" target="_blank" title="Create and Edit your HTML, CSS and JS">CodePen</a></li>
<li><a href="https://jsbin.com/" target="_blank" title="Create and Edit your HTML, CSS and JS">JSBin</a></li>
</ul>
</article>
</div>
<!-- END Column Group -->
<!-- Column Group: 3 columns -->
<div class="section group">
<!-- Column #1 -->
<article class="col span_1_of_3">
<h3 class="h3">Frameworks</h3>
<!-- Unordered List of Links -->
<ul>
<li><a href="http://www.responsivegridsystem.com/" target="_blank">Responsive Grid System Framework</a></li>
<li><a href="http://muellergridsystem.com/" target="_blank">MUELLER: Modular Grid System </a></li>
</ul>
</article>
<!-- Column #2 -->
<article class="col span_1_of_3">
<h3 class="h3">Meet-Ups Slides</h3>
<!-- Unordered List of Links -->
<ul>
<li><a href="" target="_blank">Lorem 1</a></li>
<li><a href="" target="_blank">Lorem 2</a></li>
<li><a href="" target="_blank">Lorem 3</a></li>
<li><a href="" target="_blank">Lorem 4</a></li>
</ul>
</article>
<!-- Column #3 -->
</div>
<!-- END Column Group -->
</div>
</section>
</main>
<!-- Resources Section Ends -->
<!-- Sticky scroll link -->
<a href="#" title="Back to top" id="scroll" class="scroll transition-all">v</a>
<footer class="footer">
<div class="wrapper">
<p>© 2016 Women Techmakers Hamburg.</p>
</div>
</footer>
<!-- Include our scroll-to-top JS file -->
<script src="js/scroll-to-top.js"></script>
</body>
</html>