-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
162 lines (150 loc) · 5.87 KB
/
Copy pathindex.html
File metadata and controls
162 lines (150 loc) · 5.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Have you always wanted to build your own website but something held
you back? Maybe because you thought you were not that techie after
all? Then these two days are exactly for you! We will take the first few
steps down the web development road together and the best thing is
that it’s all completely free of charge." />
<meta name="keywords"
content="New Devs on the Block, Vienna, Workshop, HTML, CSS, Martin Splitt, Eva Lettner, Cassie Evans, Nico König, Ramón Huidobro" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png" />
<link rel="manifest" href="site.webmanifest" />
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<link href="https://fonts.googleapis.com/css?family=Lato|Oswald&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link rel="stylesheet" href="styles.css" />
<title>NEW DEVS ON THE BLOCK</title>
</head>
<body>
<header id="top">
<nav>
<a href="#schedule">Schedule</a>
<a href="#workshops">Workshops</a>
<a href="#partners">Partners</a>
</nav>
<img src="images/logo.png" class="logo" alt="kickass new devs on the block logo" />
</header>
<main>
<article id="about">
<h2>About us</h2>
<p>
Have you always wanted to build your first own website, but didn't know where to start? Or maybe you thought you
weren't technical enough? Then these two days are for you! We'll take the first few steps down the web
development road together. And here comes the best part: It’s completely free!
</p>
<p>
NEW DEVS ON THE BLOCK is a two-day workshop for web development made and supported by the beautiful people
of the web community.
</p>
<p>
We'll teach you the fundamentals and guide you through coding your first website.
</p>
</article>
<article id="schedule">
<h2>Schedule</h2>
<p>
The workshop is divided into different topics that build on top of each other.
Each topic contains a theoretical part, where we go over some slides, and a coding part, where you will turn
theory into code.
</p>
<h3>Topics</h3>
<p>By the end of the workshop, you'll learn about or build the following:</p>
<ul>
<li>History of the Web</li>
<li>Basic structure of a website</li>
<li>Styling (i.e. fonts and colors) your website</li>
<li>Working with images</li>
<li>Creating layouts</li>
<li>Minimal animations</li>
<li>Rotating image gallery</li>
</ul>
<h3>Technical Topics</h3>
<p>We'll cover the following technical aspects throughout the workshop:</p>
<h4>HTML</h4>
<ul>
<li>Semantic HTML & Accessibility</li>
<li>Headings and document structure</li>
<li>Sectional elements</li>
<li>Text elements</li>
</ul>
<h4>CSS</h4>
<ul>
<li>Selectors</li>
<li>Pseudo-classes and elements</li>
<li>Colors</li>
<li>Flexbox</li>
<li>Transitions</li>
</ul>
<h4>JavaScript</h4>
<ul>
<li>Flow Control</li>
<li>Types</li>
<li>Functions</li>
<li>DOM API</li>
</ul>
</article>
<article id="workshops">
<h2>Workshops</h2>
<h3>Vienna Workshop Postponed</h3>
<p>
Due to the current situation around the COVID-19 outbreak, <strong>we've decided to postpone our Vienna workshop.</strong>
We want to be sure that we're running the workshop under safe conditions. So once there's more certainty that we can do that,
we'll announce the new dates and re-open registration.
</p>
<p>
In the meantime, please stay safe and healthy 🖤
</p>
<section>
<h3>Past events</h3>
<ol class="past-events">
<li>Nürnberg, 29th & 30th July 2019</li> <!-- TODO: create page with old resources -->
</ol>
</section>
</article>
<article id="partners">
<h2>Partners</h2>
<p>
This event would not have been possible without the support of our sponsors and community partners.
</p>
<ul class="partners__list">
<li>
<a href="https://www.ebcont.com/" title="Link to Ebcont website">
<img src="images/ebcont.png" class="partner__image" alt="Ebcont logo" />
</a>
</li>
<li>
<a href="https://www.storyblok.com/" title="Link to Storyblok website">
<img src="images/storyblok.png" class="partner__image" alt="Storyblok logo" />
</a>
</li>
<li>
<a href="https://www.honeypot.io/" title="Link to Honeypot website">
<img src="images/honeypot.png" class="partner__image" alt="Honeypot logo" />
</a>
</li>
<li>
<a href="https://viennajs.org/" title="Link to ViennaJS website">
<img src="images/viennajs.svg" class="partner__image" alt="ViennaJS logo" />
</a>
</li>
</ul>
</article>
<article>
<h2>Code of Conduct</h2>
<p>
Because this event should be awesome for everybody, we have a
<a href="/code-of-conduct">Code of Conduct</a> everyone should abide by.
</p>
</article>
</main>
<footer></footer>
</body>
</html>