Skip to content

Commit 0ff0ed5

Browse files
author
filtercake
committed
add mentoring info page and link on host page. refs nodeschool#286 
1 parent c406467 commit 0ff0ed5

File tree

5 files changed

+225
-7
lines changed

5 files changed

+225
-7
lines changed

‎host.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ <h2 data-i18n="host-recommendation-header">Hosting Suggestions</h2>
6565
<li data-i18n="host-recommendation-list-4">Adopt a code of conduct for the event to help create a safe space and to minimize potential harassment scenarios (<a href="http://confcodeofconduct.com/">here's a ready-made one</a>)</li>
6666
<li data-i18n="host-recommendation-list-5">If you are unsure if your venue has adequate WiFi capacity then have an offline plan (e.g. thumbdrives)</li>
6767
<li data-i18n="host-recommendation-list-6">If needed reach out to local software companies etc and ask for donations of space, wifi, food and drinks</li>
68+
<li data-i18n="host-recommendation-list-7">In case possible mentors feel unsure, send them the link to the <a href="/mentor-at-event.html">mentoring info page</a> </li>
6869
</ul>
6970
</div>
7071
</div>

‎images/mentoring-by-oleharland-cropped.jpg

738 KB
Loading

‎images/mentoring-by-oleharland.jpg

1.86 MB
Loading

‎mentor-at-event.html

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!DOCTYPE html>
2+
<html class="host">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="google" content="notranslate" />
6+
<link rel="stylesheet" href="style.css">
7+
<link rel="shortcut icon" href="favicon.ico">
8+
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Source+Code+Pro" rel="stylesheet" type="text/css">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
<title>NodeSchool - Mentoring at events</title>
11+
</head>
12+
<body class="host">
13+
<div class="first-photo"></div>
14+
<header>
15+
<div class="container">
16+
<div class="full">
17+
<a href="index.html"><img class="logo" src="images/schoolhouse.svg" alt="nodeschoolhouse"></a>
18+
<ul class="nav">
19+
<li><a href="index.html" data-i18n="menu-index">Home</a></li>
20+
<li><a href="events.html" data-i18n="menu-events">Events</a></li>
21+
<li><a href="chapters.html" data-i18n="menu-chapters">Chapters</a></li>
22+
<li><a href="about.html" data-i18n="menu-about">About</a></li>
23+
<li><a href="building-workshops.html" data-i18n="menu-building-workshops">Build</a></li>
24+
<li class="current-page"><a href="host.html" data-i18n="menu-host">Host</a></li>
25+
</ul>
26+
</div>
27+
</div>
28+
</header>
29+
<div id="main" name="main" role="main">
30+
31+
<div class="mentoring-quote-full-width">
32+
33+
<div class="mentoring-headline-container">
34+
<div class="container">
35+
<div class="full">
36+
<h1 data-i18n="mentoring-header" class="mentoring-headline">Mentoring at a NodeSchool Event</h1>
37+
</div>
38+
</div>
39+
</div>
40+
41+
</div>
42+
43+
44+
45+
<div class="container">
46+
<div class="half centered">
47+
<blockquote class="mentoring-intro-quote" data-i18n="mentoring-intro-quote">
48+
Mentors basically hover around the room during the event and try to find people who are stuck and then they help them get un-stuck. Many students are shy to ask, so it is important to hover around and offer help.
49+
</blockquote>
50+
</div>
51+
</div>
52+
53+
54+
55+
56+
<div class="container" style="background-color: #fff;">
57+
<div class="two-thirds centered">
58+
<p data-i18n="mentoring-intro-part1">
59+
So an organizer has asked you to mentor at a NodeSchool event, but you're a bit unsure what you're getting into or if can do it? No worries :)
60+
</p>
61+
<p data-i18n="mentoring-intro-part2">
62+
First of all, if you have been asked about mentoring, you probably have some time of experience in JS and node. Students will likely ask questions you have had yourself beack then.
63+
</p>
64+
<p data-i18n="mentoring-intro-part3">
65+
Second, it is totally okay to not know the solution to all questions. Besides raw JS knowledge, the students can learn something else from you: how to figure out what you do not know.
66+
</p>
67+
68+
</div>
69+
</div>
70+
71+
72+
<div class="container" style="background-color: #fff;">
73+
<div class="two-thirds centered" data-i18n="mentoring-list-expected">
74+
<h2 data-i18n="mentoring-list-expected-headline">What is expected of you?</h2>
75+
<ul>
76+
<li data-i18n="mentoring-list-expected-1">Show learners that coding is nothing to be afraid of, but rather a lot of fun!</li>
77+
<li data-i18n="mentoring-list-expected-2">Keep up a friendly and optimistic enviroment.</li>
78+
<li data-i18n="mentoring-list-expected-3">Motivate and ancourage students, emphasize with their struggles.</li>
79+
</ul>
80+
</div>
81+
</div>
82+
83+
<div class="container" style="background-color: #fff;">
84+
<div class="two-thirds centered" data-i18n="mentoring-list-not-expected">
85+
<h2 data-i18n="mentoring-list-not-expected-headline">What is <em>not &nbsp;</em>expected of you?</h2>
86+
<ul>
87+
<li data-i18n="mentoring-list-not-expected-1">Talking in front of the group.</li>
88+
<li data-i18n="mentoring-list-not-expected-2">Preparing all learning materials and their solutions.</li>
89+
<li data-i18n="mentoring-list-not-expected-3">Have an answer to every question.</li>
90+
</ul>
91+
</div>
92+
</div>
93+
94+
95+
96+
<div class="container" style="background-color: #fff;">
97+
<div class="two-thirds centered" data-i18n="mentoring-still-unsure">
98+
<h2 data-i18n="mentoring-still-unsure-headline">Still not sure if you can do it?</h2>
99+
<p data-i18n="mentoring-still-unsure-part1">
100+
Just try out some of the <a href="/#workshopper-list">core workshoppers</a>.
101+
</p>
102+
</div>
103+
</div>
104+
105+
106+
107+
<div class="container">
108+
<div class="container" style="background-color: #fff;">
109+
<footer>
110+
<div class="third">
111+
<p><strong>nodeschool.io</strong></p>
112+
<small>Photos by <a href="https://www.flickr.com/photos/matthewbergman" target="_blank">Matthew Bergman</a></small>
113+
</div>
114+
<div class="two-thirds">
115+
<ul>
116+
<li><strong data-i18n="footer-contact-header">Contact</strong></li>
117+
<li><a href="https://twitter.com/nodeschool" target="_blank">t/@nodeschool</a></li>
118+
<li><a href="https://github.com/nodeschool" target="_blank">gh/nodeschool</a></li>
119+
</ul>
120+
<ul>
121+
<li><strong data-i18n="footer-contribute-header">Contribute</strong></li>
122+
<li><a href="https://github.com/nodeschool/discussions/issues/new" target="_blank" data-i18n="footer-contribute-question">Open an Issue</a></li>
123+
<li><a href="https://github.com/nodeschool/discussions/issues" target="_blank" data-i18n="footer-contribute-answer">Answer a Question</a></li>
124+
</ul>
125+
<ul>
126+
<li><strong data-i18n="footer-about-header">About</strong></li>
127+
<li><a href="building-workshops.html" data-i18n="footer-about-build">Build a workshopper</a></li>
128+
<li><a href="host.html" data-i18n="footer-about-host">Host a workshop</a></li>
129+
</ul>
130+
</div>
131+
</footer>
132+
</div>
133+
134+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
135+
<script type="text/javascript" src="js/dependencies.js"></script>
136+
<script type="text/javascript" src="js/lang.js"></script>
137+
<script>
138+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
139+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
140+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
141+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
142+
143+
ga('create', 'UA-49267600-1', 'nodeschool.io');
144+
ga('send', 'pageview');
145+
146+
</script>
147+
</body>
148+
</html>

‎style.css

Lines changed: 76 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,10 @@ ul.nav-lang li.selected {text-decoration: none; color: #666;}
136136
.half {width: 45%; display: inline-block; vertical-align: top;}
137137
.half + .half {padding: 0 20px;}
138138

139+
.centered.half { margin-right: 25%; margin-left: 25%;}
140+
.centered.third { margin-right: 33%; margin-left: 33%;}
141+
.centered.two-thirds { margin-right: 16.5%; margin-left: 16.5%;}
142+
139143
.third {width: 30%; display: inline-block; vertical-align: top; }
140144
.third + .third {padding-left: 30px;}
141145
.third p, .third h3, .third h4 {margin-top: 0; line-height: 28px;}
@@ -233,8 +237,9 @@ footer .container {padding: 0 40px;}
233237
.container {padding: 20px;}
234238
.first-photo {background-image: none;}
235239
p {font-size: 1em;}
236-
.third, .two-thirds, .full {width: 100%;}
240+
.third, .two-thirds, .full, .half {width: 100%; }
237241
.two-thirds + .third, .third + .third, .third + .two-thirds {padding-left: 0;}
242+
.half, .two-thirds { margin-left: 0 !important; margin-right: 0 !important; }
238243
header .container {padding: 40px 20px;}
239244
header .full { width: 80%; }
240245
header img {width: 100%; padding: 0;}
@@ -263,12 +268,76 @@ footer .container {padding: 0 40px;}
263268
background-color: white;
264269
}
265270

266-
a.skip:active,
267-
a.skip:focus,
271+
a.skip:active,
272+
a.skip:focus,
268273
a.skip:hover {
269-
left: 0;
274+
left: 0;
270275
top: 0;
271-
width: auto;
272-
height: auto;
273-
overflow: visible;
276+
width: auto;
277+
height: auto;
278+
overflow: visible;
279+
}
280+
281+
282+
.mentoring-intro-quote {
283+
font-size: 20px;
284+
font-style: italic;
285+
position: relative;
286+
}
287+
288+
.mentoring-intro-quote::before {
289+
content: "“";
290+
position: absolute;
291+
left: -0.6em;
292+
font-size: 5em;
293+
top: -0.3em;
294+
}
295+
296+
@media only screen and (min-width : 768px) {
297+
.mentoring-intro-quote::before {
298+
font-size: 10em;
299+
}
300+
}
301+
302+
303+
.mentoring-quote-full-width {
304+
background-image: url('images/mentoring-by-oleharland-cropped.jpg');
305+
background-size: cover;
306+
background-position: center;
307+
min-height: 500px;
308+
309+
position: relative;
310+
}
311+
312+
.mentoring-headline-container {
313+
position: absolute;
314+
/*bottom: 0em;*/
315+
316+
background-color: rgba(00,00,00,0.6);
317+
width: 100%;
318+
height: 100%;
319+
}
320+
321+
.mentoring-headline-container .container {
322+
height: 100%;
323+
/*width: 100%;*/
324+
position: relative;
325+
}
326+
327+
328+
329+
.mentoring-headline {
330+
color: white;
331+
font-size: 2em;
332+
position: absolute;
333+
bottom: 2em;
334+
left: 0;
335+
width: 94%;
336+
text-align: center;
274337
}
338+
339+
@media only screen and (min-width : 1366px) {
340+
.mentoring-headline {
341+
bottom: 5em;
342+
}
343+
}

0 commit comments

Comments
 (0)