First published in Great Britain 2016 by Egmont UK Limited, The Yellow Building, 1 Nicholas Road, London W11 4AN.
© 2016 CoderDojo Foundation
Written by Clyde Hatter Edited by Emil Fortune Illustrations by Gary Lucken Designed by Maddox Philpot
Special thanks to: all the brilliant team at CoderDojo Bray, especially Keelin Donohoe, Tom Morley and Trevor Craig in the HTML stream; Marta Sikora for technical advice; Laura Ivers for Sushi excellence; Giustina Mizzoni for keeping the show on the road; Maeve, Helen and Daniel for all-round solidarity.
Dedicated to Bray ninjas: you rock!
ISBN 978 1 7803 1789 2 60757/1 Printed in Italy
All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying or otherwise, without the prior consent of the copyright owner.
ONLINE SAFETY FOR YOUNGER READERS Spending time online is great fun! Here are a few simple rules to help younger fans stay safe and keep the internet a great place to spend time:
• Never give out your real name – don’t use it as your username. • Never give out any of your personal details. • Never tell anybody which school you go to or how old you are. • Never tell anybody your password except a parent or a guardian. • Be aware that you must be 13 or over to create an account on many sites. • Always check the site policy and ask a parent or guardian for permission before registering. • Always tell a parent or guardian if something is worrying you.
Stay safe online. Any website addresses listed in this book are correct at the time of going to print. However, Egmont is not responsible for content hosted by third parties. Please be aware that online content can be subject to change and websites can contain content that is unsuitable for children. We advise that all children are supervised when using the internet.
<ABOUT CODERDOJO>
This book is about coding. Maybe the first steps you’ll take towards becoming a seriously good coder. And, if you’re interested in coding, you may have heard of CoderDojo.
CoderDojo is a coding club for young people which lets you hang out with other coders, learn new stuff and generally have fun with computers. It’s free and you work with your friends. If you’re lucky, there’s a Dojo near you. Maybe you’ve been down and done some coding? But maybe there isn’t – or maybe you just want to do even more coding?
If so, don’t worry. You can just get your own official mini-Dojo, a Dojo Nano, up and running. How? It’s easy.
Ingredients for a Dojo Nano:
one or more friends
a computer
this book
WHAT’S A DOJO NANO?
What happens at your Dojo Nano? Basically, whatever you think is cool coding-wise. In this book we’re going to meet the Nanonauts, who have set up their own Dojo Nano where they will be learning to make a website for their band. They’ll be combining HTML, CSS and JavaScript to make their website, and you can learn these skills to make your own website as well!
IDEAS + FRIENDS + CODE = DOJO NANO
As a start, with the help of this book, you’re going to make your Dojo Nano website, and then maybe a couple of sites for your friends. It’s easy, it’s fun, and this book will set you on the way! You can follow along with building the site at http://nano.tips, and find more about CoderDojo at http://coderdojo.com
<INTRODUCING THE NANONAUTS>
Holly, Dervla, Daniel and Sam are in a band called the Nanonauts. Holly plays guitar, Dervla piano, Daniel sings and Sam plays bass. They’ve started to play quite a few concerts and think it would be great if they could build a website to tell the world about their music.
HOLLY
DERVLA
DANIEL
SAM
As soon as the Nanonauts start talking about it they had loads of ideas for their site –
• we could tell people when we were playing our next concert
• we could advertise our CD and T-shirt
• we could have links to our YouTube videos
• we could have tips on buying instruments – and taking care of them
• we could have tips on practising without driving the neighbours crazy
... which they eventually turn into this site map:
HOME
ABOUT US
OUR SONGS
SEE US PLAY
PLAYING A CONCERT
OUR NEW CD
VIDEOS
UPCOMING CONERTS
TOP TIPS
BUY OUR T-SHIRT
In this book, we’ll start to build the site that the Nanonauts sketched in their site map. If you want to, you can follow the examples and build a site about the Nanonauts. But if you have your own band, or want to make the pages about something completely different, that’s fine too! Just get stuck into the code and don’t be afraid to experiment. If something doesn’t work at first, don’t get disheartened. Look at your code carefully and see if you can spot where it’s not working. Programmers call that ‘debugging’.
Read on to find out how to turn Holly’s site map into a real website!
THINGS TO DO NEXT
Why not sketch out a site map of your own for a website that you’d like to make? If you don’t want to make one about a band, here are some ideas:
a site about your pets
a site about your favourite games
a site about your school friends
a site about your hobby
a site about things to do in your town
NINJA TIP
All of the pages you will make in this book are online. You can follow along as the Nanonauts build their website, and copy the code to save time. For more information, go to http://nano.tips/examples
<ABOUT US>
EDITING YOUR FIRST WEB PAGE
So, let’s get going! This is the code for a simple web page:
1. Type this code into a simple plain-text editor such as Notepad (Windows), GEdit (Ubuntu) or in a code editor such as Brackets, Notepad++ or Atom. If you’re not sure how to do this go to http://nano.tips/ texteditors
<!DOCTYPE html> <html> <head> <title>About