Skip to content

Commit

Permalink
coder-dojo-homepaeg v2 goals achieved
Browse files Browse the repository at this point in the history 
Homepage colours, text size and layout all more closely match actual webpage.
Introduce ninjas to CSS variables.
Introduce ninjas grid layout.
  • Loading branch information
@jackoconnordev
jackoconnordev committed Oct 1, 2023
1 parent fc53d41 commit 7e05564
Show file tree
Hide file tree
Showing 6 changed files with 222 additions and 130 deletions.
4 changes: 3 additions & 1 deletion coder-dojo-homepage/v1/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@
- Size images better with CSS
- Add margins between sections with CSS
- Using divs/container classes to center content and impose max width on centred content.
- Using grid for section images and text
- Using flex/grid to place grouped elements side by side
- Make the coderdojo and raspberry pi logos links
- Make all clickable images links
- Style buttons and links
- Add embedded video with placeholder image
- Add some Javascript to the site (on the form, on the login button)
- Get everyone's attempts hosted on a subdir of the repo's GitHub page
6 changes: 4 additions & 2 deletions coder-dojo-homepage/v2/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@
- Size images better with CSS
- Add margins between sections with CSS
- Using divs/container classes to center content and impose max width on centred content.
- Using grid for section images and text

## Hold for later

- Using flex/grid to place grouped elements side by side
- Make the coderdojo and raspberry pi logos links
- Using flex to place grouped elements side by side
- Make all clickable images links
- Style buttons and links
- Add embedded video with placeholder image
- Add some Javascript to the site (on the form, on the login button)
- Get everyone's attempts hosted on a subdir of the repo's GitHub page
281 changes: 158 additions & 123 deletions coder-dojo-homepage/v2/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coding clubs for kids and teens | CoderDojo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link href="./styles.css" rel="stylesheet">
</head>

<body>
<!--Login div-->
<div class="login-container">
<div class="content-container">
<img src="assets/raspberry-pi-light.svg" alt="Raspberry Pi logo">
<button class='login-button' type="button">Login</button>
</div>
</div>

<!--Header has logo, navigation links and language button-->
<header class="header">
<div class="content-container">
<!--The logo-->
<img src="assets/coderdojo_main_logo.svg" alt="CoderDojo logo">
<!--The nav links-->
<nav class="header-nav">
<a href="https://coderdojo.com/en/about">About</a>
<a href="https://coderdojo.com/en/get-involved">Get involved</a>
<a href="https://coderdojo.com/en/community">Community</a>
<a href="https://coderdojo.com/en/session-resources">Session resources</a>
<a href="https://coderdojo.com/en/help">Help</a>
</nav>
<!--The language button-->
<button class="language-button" type="menu">
<!--globe_svg_html_snippet.txt-->
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.5044 0.5C4.99039 0.5 0.504395 4.986 0.504395 10.5C0.504395 16.014 4.99039 20.5 10.5044 20.5C16.0184 20.5 20.5044 16.014 20.5044 10.5C20.5044 4.986 16.0184 0.5 10.5044 0.5ZM2.50439 10.5C2.50439 9.601 2.66039 8.738 2.93539 7.931L4.50439 9.5L6.50439 11.5V13.5L8.50439 15.5L9.50439 16.5V18.431C5.56539 17.936 2.50439 14.572 2.50439 10.5ZM16.8344 15.373C16.1814 14.847 15.1914 14.5 14.5044 14.5V13.5C14.5044 12.9696 14.2937 12.4609 13.9186 12.0858C13.5435 11.7107 13.0348 11.5 12.5044 11.5H8.50439V8.5C9.03483 8.5 9.54353 8.28929 9.91861 7.91421C10.2937 7.53914 10.5044 7.03043 10.5044 6.5V5.5H11.5044C12.0348 5.5 12.5435 5.28929 12.9186 4.91421C13.2937 4.53914 13.5044 4.03043 13.5044 3.5V3.089C16.4324 4.278 18.5044 7.15 18.5044 10.5C18.5042 12.2647 17.9167 13.9791 16.8344 15.373V15.373Z"
fill="#767676" />
</svg>
English
</button>
</div>
</header>

<!--Main content goes here - this content is specific to the homepage-->
<main>
<!--Section 1: landing section + call to actions-->
<section class="landing-section">
<div class="content-container">
<img src="assets/coderdojo_class.jpg" alt="Youtube video placeholder. CoderDojo mentor teaches kids.">

<head>
<title>Coding clubs for kids and teens | CoderDojo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link href="./styles.css" rel="stylesheet">
</head>

<body>
<!--Login div-->
<div class="login-container">
<!--Centre content + max-width-->
<div class="content-container">
<img src="assets/raspberry-pi-light.svg" alt="Raspberry Pi logo">
<button class="login-button" type="button">Login</button>
</div>
</div>

<!--Header has logo, navigation links and language button-->
<header class="header">
<!--Centre content + max-width-->
<div class="content-container grid">
<!--The logo-->
<img src="assets/coderdojo_main_logo.svg" alt="CoderDojo logo">
<!--The nav links-->
<nav class="header-nav">
<a href="https://coderdojo.com/en/about">About</a>
<a href="https://coderdojo.com/en/get-involved">Get involved</a>
<a href="https://coderdojo.com/en/community">Community</a>
<a href="https://coderdojo.com/en/session-resources">Session resources</a>
<a href="https://coderdojo.com/en/help">Help</a>
</nav>
<!--The language button-->
<button class="language-button" type="menu">
<!--globe_svg_html_snippet.txt-->
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.5044 0.5C4.99039 0.5 0.504395 4.986 0.504395 10.5C0.504395 16.014 4.99039 20.5 10.5044 20.5C16.0184 20.5 20.5044 16.014 20.5044 10.5C20.5044 4.986 16.0184 0.5 10.5044 0.5ZM2.50439 10.5C2.50439 9.601 2.66039 8.738 2.93539 7.931L4.50439 9.5L6.50439 11.5V13.5L8.50439 15.5L9.50439 16.5V18.431C5.56539 17.936 2.50439 14.572 2.50439 10.5ZM16.8344 15.373C16.1814 14.847 15.1914 14.5 14.5044 14.5V13.5C14.5044 12.9696 14.2937 12.4609 13.9186 12.0858C13.5435 11.7107 13.0348 11.5 12.5044 11.5H8.50439V8.5C9.03483 8.5 9.54353 8.28929 9.91861 7.91421C10.2937 7.53914 10.5044 7.03043 10.5044 6.5V5.5H11.5044C12.0348 5.5 12.5435 5.28929 12.9186 4.91421C13.2937 4.53914 13.5044 4.03043 13.5044 3.5V3.089C16.4324 4.278 18.5044 7.15 18.5044 10.5C18.5042 12.2647 17.9167 13.9791 16.8344 15.373V15.373Z"
fill="#767676" />
</svg>
English
</button>
</div>
</header>

<!--Main content goes here - this content is specific to the homepage-->
<main>
<!--Section 1: landing section + call to actions-->
<section class="landing-section">
<!--Centre content, set max-width, start a grid-->
<div class="content-container grid">
<!--Position the section image-->
<img src="assets/coderdojo_class.jpg" class="section-image grid-item grid-left"
alt="Youtube video placeholder. CoderDojo mentor teaches kids.">

<!--Position the section description-->
<div class="description-container grid-item grid-right">
<h1>The community of free, local coding clubs for kids and teens</h1>
<p>In over 100 countries, CoderDojo is the free, fun way to learn coding for kids and teens.</p>

<a href="https://coderdojo.com/find">Find a Dojo</a>
<a href="https://coderdojo.com/start-a-dojo">Start a Dojo</a>
</div>
</section>
</div>
</section>

<!--Section 2: landing section continued, extra information on dojos-->
<section class="landing-section">
<div class="content-container">
<!--Section 2: landing section continued, extra information on dojos-->
<section class="landing-section">
<!--Centre content, set max-width, start a grid-->
<div class="content-container grid">
<!--Position the section description-->
<div class="description-container grid-item grid-left">
<h3>Public, accessible venues</h3>
<p>Dojos take place in public, accessible spaces such as libraries, community centres, and even cinemas. Some
venues provide equipment for kids and teens (Ninjas) to use.</p>
Expand All @@ -69,16 +81,24 @@ <h3>Enthusiastic volunteers</h3>

<h3>Free learning resources</h3>
<p>Our website provides cool, free projects and other learning resources that anyone can use!</p>

<img src="assets/coder_dojo_ninjas_celebrating.jpg" alt="CoderDojo ninjas celebrating">
</div>
</section>

<!--Section 3: volunteer at a dojo-->
<section class="volunteer-section">
<div class="content-container">
<img src="assets/coderdojo_volunteer_helps_class.jpg" alt="CoderDojo volunteer helps class">
<!--Position the section image-->
<img src="assets/coder_dojo_ninjas_celebrating.jpg" class="section-image grid-item grid-right"
alt="CoderDojo ninjas celebrating">
</div>
</section>

<!--Section 3: volunteer at a dojo-->
<section class="volunteer-section">
<!--Centre content, set max-width, start a grid-->
<div class="content-container grid">
<!--Position the section image-->
<img src="assets/coderdojo_volunteer_helps_class.jpg" class="section-image grid-item grid-left"
alt="CoderDojo volunteer helps class">

<!--Position the section description-->
<div class="description-container grid-item grid-right">
<h2>Volunteer at a Dojo</h2>
<p>There are lots of ways for volunteers to support their computer coding club: they can plan coding sessions,
promote sessions locally, communicate with parents, decide on learning resources, mentor young coders, and
Expand All @@ -92,13 +112,15 @@ <h2>Volunteer at a Dojo</h2>

<a href="https://coderdojo.com/volunteer">Learn more about volunteering</a>
</div>
</section>

<!--Section 4: start a dojo-->
<section class="start-dojo-section">
<div class="content-container">
<img src="assets/coderdojo_mentor_writing_on_whiteboard.jpg" alt="CoderDojo mentor writes on whiteboard">
</div>
</section>

<!--Section 4: start a dojo-->
<section class="start-dojo-section">
<!--Centre content, set max-width, start a grid-->
<div class="content-container grid">
<!--Position the section description-->
<div class="description-container grid-item grid-left">
<h2>Start a Dojo</h2>
<p>Another way to volunteer is to start your own Dojo and become a CoderDojo champion. A CoderDojo champion
takes
Expand All @@ -111,13 +133,22 @@ <h2>Start a Dojo</h2>

<a href="https://coderdojo.com/start-a-dojo">Find out more</a>
</div>
</section>

<!--Section 5: Get in touch form-->
<section class="contact-section">
<div class="content-container">
<img src="assets/graphic_with_people_waving.jpg" alt="Cartoon characters waving towards the viewer" s screen">
<!--Position the section image-->
<img src="assets/coderdojo_mentor_writing_on_whiteboard.jpg" class="section-image grid-item grid-right"
alt="CoderDojo mentor writes on whiteboard">

</div>
</section>

<!--Section 5: Get in touch form-->
<section class="contact-section">
<!--Centre content, set max-width, start a grid-->
<div class="content-container grid">
<img src="assets/graphic_with_people_waving.jpg" class="section-image grid-item grid-left"
alt="Cartoon characters waving towards the viewer's screen">

<div class="description-container grid-item grid-right">
<h2>Get in touch</h2>
<form>
<label for="name">Your name</label>
Expand All @@ -142,61 +173,65 @@ <h2>Get in touch</h2>
</select>
</form>
</div>
</section>
</main>

<!--Section 6: Sign up for newsletter - note not in main tags, not specific to homepage-->
<section class="newsletter-section">
<div class="content-container">
<h3>Keep up to date with our newsletter</h3>
<p>You can unsubscribe at any time.</p>

<form>
<label for="email">Your email</label>
<input type="text" name="email" value="">
<button type="submit">Subscribe</button>
</form>
</div>
</section>
</main>

<!--Section 6: Sign up for newsletter - note not in main tags, not specific to homepage-->
<section class="newsletter-section">
<!--Centre content, set max-width, start a grid-->
<div class="content-container">
<h3>Keep up to date with our newsletter</h3>
<p>You can unsubscribe at any time.</p>

<form>
<label for="email">Your email</label>
<input type="text" name="email" value="">
<button type="submit">Subscribe</button>
</form>
</div>
</section>

<!--Footer: Less important nav links and CoderDojo business information-->
<footer class="footer">
<!--Centre content + max-width-->
<div class="content-container">
<!--More navigation links-->
<nav class="footer-nav-links">
<a href="https://coderdojo.com/en/about">About</a>
<a href="https://coderdojo.com/en/get-involved">Get involved</a>
<a href="https://help.coderdojo.com/cdkb/s/">Helpdesk</a>
<a href="https://coderdojo.com/en/help">Support</a>
<a href="https://coderdojo.com/news">Blog</a>
<a href="https://coderdojo.com/en/safeguarding">Safeguarding</a>
<a href="https://raspberrypi.org/donate/">Donate</a>
<a href="https://projects.raspberrypi.org/en/projects/translating-for-raspberry-pi">Help us translate</a>
<a href="https://coderdojo.com/en/policies-and-guidelines">Policies and guidelines</a>
</nav>

<!--Social media navigation icons-->
<nav class="footer-nav-socials">
<img src="assets/twitter_icon.svg" alt="Twitter logo">
<img src="assets/facebook_icon.svg" alt="Facebook logo">
<img src="assets/email_icon.svg" alt="Email logo">
<img src="assets/instagram_icon.svg" alt="Instagram logo">
<img src="assets/linkedin_icon.svg" alt="LinkedIn logo">
<img src="assets/slack_icon.svg" alt="Slack logo">
</nav>

<!--Raspberry Pi foundation promotion-->
<div class="raspberry-pi-promotion-container">
<img src="assets/raspberry-pi-light.svg" class="footer-raspberry-pi-promotion-icon" alt="Raspberry Pi logo">
<img src="assets/coderdojo_icon.svg" class="footer-raspberry-pi-promotion-icon" alt="CoderDojo logo">
<p>CoderDojo is part of the Raspberry Pi Foundation.</p>
<a href="https://www.raspberrypi.org/about/">Find out more</a>
</div>

<!--Footer: Less important nav links and CoderDojo business information-->
<footer class="footer">
<div class="content-container">
<!--More navigation links-->
<nav class="footer-nav-links">
<a href="https://coderdojo.com/en/about">About</a>
<a href="https://coderdojo.com/en/get-involved">Get involved</a>
<a href="https://help.coderdojo.com/cdkb/s/">Helpdesk</a>
<a href="https://coderdojo.com/en/help">Support</a>
<a href="https://coderdojo.com/news">Blog</a>
<a href="https://coderdojo.com/en/safeguarding">Safeguarding</a>
<a href="https://raspberrypi.org/donate/">Donate</a>
<a href="https://projects.raspberrypi.org/en/projects/translating-for-raspberry-pi">Help us translate</a>
<a href="https://coderdojo.com/en/policies-and-guidelines">Policies and guidelines</a>
</nav>

<!--Social media navigation icons-->
<nav class="footer-nav-socials">
<img src="assets/twitter_icon.svg" alt="Twitter logo">
<img src="assets/facebook_icon.svg" alt="Facebook logo">
<img src="assets/email_icon.svg" alt="Email logo">
<img src="assets/instagram_icon.svg" alt="Instagram logo">
<img src="assets/linkedin_icon.svg" alt="LinkedIn logo">
<img src="assets/slack_icon.svg" alt="Slack logo">
</nav>

<!--Raspberry Pi foundation promotion-->
<div class="raspberry-pi-promotion-container">
<img src="assets/raspberry-pi-light.svg" alt="Raspberry Pi logo">
<img src="assets/coderdojo_icon.svg" alt="CoderDojo logo">
<p>CoderDojo is part of the Raspberry Pi Foundation.</p>
<a href="https://www.raspberrypi.org/about/">Find out more</a>
</div>
<!--Business info-->
<p>CoderDojo Foundation (CRO No: 524255 a registered charity: CHY 20812), Dogpatch Labs Unit 1, The CHQ building,
Custom House Quay, Dublin, Ireland, D01 Y6H7</p>
</div>
</footer>
</body>

<!--Business info-->
<p>CoderDojo Foundation (CRO No: 524255 a registered charity: CHY 20812), Dogpatch Labs Unit 1, The CHQ building,
Custom House Quay, Dublin, Ireland, D01 Y6H7</p>
</div>
</footer>
</body>
</html>
Loading

0 comments on commit 7e05564

Please sign in to comment.