An exercise and programming tutorial for beginning CoderDojo students and mentors.
When new Students and new Mentors join CoderDojo, there needs to be a welcoming, fun, and easy way for everyone to get to know each other as well as get started with learning the basics. In Atlanta, we liked to start with HTML, CSS, and JavaScript because they are so ubiquitous and foundational to the modern information economy.
At the end of the first session for both new students and new mentors, they will have:
- Created a collection of HTML, CSS, and JavaScript that they can go home and load again and show off to friends and family
- Created their first simple guessing game -- one that helps them learn about their classmates and mentors
- Learned enough that going into other on-line tutorials will have a context and motivational mindset for taking it further
- Know how to deface their school's web site -- or any other web site (don't worry: it's only within their own web browser)
- Have sticky notes, of at least two separate colors
- Have students and mentors write their names on one color
- Next on the different color write down some "Facts" and "Favorites", especially things that will, in the next exercise have a better on-screen media experience:
- Birthday
- What school they go to
- What grade are they in
- What programming languages or tools they already have tried
- Favorite color
- Favorite school subject
- Favorite web site
- Favorite YouTube video
- Favorite video game
- Favorite sport
- Favorite athlete or other public figugre
- Favorite food
- Etc, you can have categories and just ask them to do 4 or 5 of these...
- After this, have everyone put these up on a big white board or wall
- Now ask everyone to read the other people's notes for a few minutes
- Next say, "We're going to play a memory game now. Everyone grab a bunch of stickies and rearrange them in random order!"
- Now say "Ok, now try to rearrange them with the correct person, but don't cheat: don't put your own back. That's no fun."
Now that mentors and students have played this collaboration game, it's time to redo the sticky notes using HTML and CSS!
- Start with a basic template that shows HTML5 section elements for each Fact and Favorite.
- Give the students just enough about HTML tags so they can create notes about each fact in HTML.
- Have snippets and "recipes" that show them things like:
- How to embed an image (to show their school logo or favorite sports team or public figure)
- Using colors via CSS (to demonstrate their favorite color)
- How to create a link (to link to favorite web site)
- Embedding YouTube videos (to embed their favorite YouTube video)
- TODO: finish this outline
Ok, now that students all have create little HTML and CSS Facts and Favorites about themselves, it's time to build a fun little game by adding in JavaScript. This game will have to tie in to a pre-made mini framework that we've developed. The main point for students is that they will be creating most of the game logic inside their own web pages.
- Start by showing them the structure of the HTML tags they just created via the Chrome Developer Tools
- Start showing them what JavaScript is by using it to pull out the values of the tags and modify it. Use commands like:
document.getElementById('#someElement').innerHTML = '<b>Hello world!</b>'var allLinks = document.getElementsByTagName('a'); ... do a for loop next- You can even start this demonstration by asking for one of the students to come type in the address of their school, and then telling them what to type, and show them how to insert a funny image into their school's home page. This makes them laugh and feel a little devious -- a good thing!
- TODO: complete this outline and link to prototype code...