Skip to content

Commit 1c1e894

Browse files
jackoconnordevjackoconnordev
committed
Semantic html for coder dojo homepage
1 parent 3244618 commit 1c1e894

File tree

2 files changed

+137
-0
lines changed

2 files changed

+137
-0
lines changed

‎coder-dojo-homepage/index.html

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Coding clubs for kids and teens | CoderDojo</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link href="styles.css" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
<!--Login div-->
13+
<div>
14+
<button type="button"></button>
15+
</div>
16+
17+
<!--Header has logo, navigation links and language button-->
18+
<header>
19+
<!--The logo-->
20+
<img src="" alt="CoderDojo logo">
21+
<!--The nav links-->
22+
<nav>
23+
<a href="">About</a>
24+
<a href="">Get involved</a>
25+
<a href="">Community</a>
26+
<a href="">Session resources</a>
27+
<a href="">Help</a>
28+
</nav>
29+
<!--The language button-->
30+
<button type="menu">English</button>
31+
</header>
32+
33+
<!--Main content goes here - this content is is specific to the homepage-->
34+
<main>
35+
<!--Section 1: landing section + call to actions-->
36+
<section>
37+
<img src="" alt="Youtube video">
38+
39+
<h1>The community of free, local coding clubs for kids and teens</h1>
40+
<p>In over 100 countries, CoderDojo is the free, fun way to learn coding for kids and teens.</p>
41+
42+
<a href="">Find a Dojo</a>
43+
<a href="">Start a Dojo</a>
44+
</section>
45+
46+
<!--Section 2: landing section continued, extra information on dojos-->
47+
<section>
48+
<h3>Public, accessible venues</h3>
49+
<p>Dojos take place in public, accessible spaces such as libraries, community centres, and even cinemas. Some
50+
venues provide equipment for kids and teens (Ninjas) to use.</p>
51+
52+
<h3>Enthusiastic volunteers</h3>
53+
<p>Dojos are run by amazing, supportive volunteers who give their time to support kids and teens.</p>
54+
55+
<h3>Free learning resources</h3>
56+
<p>Our website provides cool, free projects and other learning resources that anyone can use!</p>
57+
58+
<img src="" alt="CoderDojo ninjas celebrating">
59+
</section>
60+
61+
<!--Section 3: volunteer at a dojo-->
62+
<section>
63+
<h2>Volunteer at a Dojo</h2>
64+
<p>There are lots of ways for volunteers to support their computer coding club: they can plan coding sessions,
65+
promote sessions locally, communicate with parents, decide on learning resources, mentor young coders, and
66+
organise the space.</p>
67+
<p>You don’t need to be a programmer or technology specialist to get involved! Lots of volunteers are parents and
68+
guardians of Dojo participants, and they start with no technical experience. Dojos benefit from having
69+
volunteers with different skills, backgrounds, and levels of knowledge to support and encourage kids and teens.
70+
</p>
71+
72+
<a href="">Learn more about volunteering</a>
73+
</section>
74+
75+
<!--Section 4: start a dojo-->
76+
<section>
77+
<h2>Start a Dojo</h2>
78+
<p>Another way to volunteer is to start your own Dojo and become a CoderDojo champion. A CoderDojo champion takes
79+
charge of setting up and maintaining a Dojo.</p>
80+
<p>All you need to do is find a public venue to host your Dojo sessions and complete our simple application
81+
process. Our website provides resources and training to support you, plus we have a dedicated system to help you
82+
to manage your Dojo sessions.
83+
</p>
84+
85+
<a href="">Find out more</a>
86+
</section>
87+
88+
<!--Sectoin 5: Get in touch form-->
89+
<section>
90+
<img src="" alt="">
91+
92+
<h2>Get in touch</h2>
93+
<form>
94+
<label for="name">Your name</label>
95+
<input type="text" name="name" value="">
96+
97+
<label for="email">Your email</label>
98+
<input type="text" name="email" value="">
99+
100+
<label for="subject">Subject</label>
101+
<select name="subject">
102+
<option value="">Please select a subject</option>
103+
<option value="fad">Find a Dojo</option>
104+
<option value="sad">Start a Dojo</option>
105+
<option value="volunteer">Volunteer at a Dojo</option>
106+
<option value="partnerships">Support CoderDojo’s work</option>
107+
<option value="growthpartner">Become a CoderDojo Growth Partner</option>
108+
<option value="events">Invite CoderDojo to an event</option>
109+
<option value="safeguarding">Report a safeguarding concern</option>
110+
<option value="press">Discuss a media opportunity</option>
111+
<option value="feedback">Give feedback</option>
112+
<option value="other">Other</option>
113+
</select>
114+
</select>
115+
</form>
116+
</section>
117+
</main>
118+
119+
<!--Section 6: Sign up for newsletter - note not in main tags, not specific to homepage-->
120+
<section>
121+
<h3>Keep up to date with our newsletter</h3>
122+
<p>You can unsubscribe at any time.</p>
123+
124+
<form>
125+
<label for="email">Your email</label>
126+
<input type="text" name="email" value="">
127+
<button type="submit">Subscribe</button>
128+
</form>
129+
</section>
130+
131+
<!--Footer: Less important nav links and CoderDojo business information-->
132+
<footer>
133+
134+
</footer>
135+
</body>
136+
137+
</html>

‎coder-dojo-homepage/styles.css

Whitespace-only changes.

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy