Learning the Language of Code
1 How does it do that? (Hook)
I generally ask students to identify a few websites they like not necessarily for their function but for the way they look.
1. Give students a few minutes to talk in small groups or browse the web to find a few sites they like.
2. Ask them to identify the elements they like.
3. Once they do, put a few of them up on the board for everyone to see.
4. Pick one or two and then, using 'View Source Code' in the View Menu under 'Developer', ask students if they can identify in the code where some of those elements they like are (colour, borders, etc.).
1. Talk with a partner or two and identify a couple of websites you think really look good. What is it about them that you like? Why do they work well together?
2. Take a look at this code on the board. Can you see where some of the things you like are coded? Take a couple of minutes and then we'll talk as a group.
2 Meet Ruby (Direct Instruction and Guided Practice)
1. Introduce CodeAcademy by demonstrating the first lesson on the board for all students to see.
2. Show them how it starts in small manageable chunks then have them sign up for an account.
3. Give them about fifteen-twenty minutes per class period for the next few days to try and work through some of the lessons. Encourage students to work in pairs but don't require it.
4. Go around as 'support' rather than teacher, helping them troubleshoot any of the places they get stuck.
5. After their work time is up, give a few minutes for students to show what they made to the class. If you can screen share to the board, that is ideal.
1. Sign up for a free CodeAcademy account.
2. Once you have signed in, start working on some of the Ruby lessons. You will have about 15-20 minutes for the next week to work on the lessons. I'll be helping you answer your own questions or get through any places you are stuck.
3 Principles of Design
This is a departure from the coding to be explore how design works. Unless you are a really proficient coder yourself, students will likely come up with ideas here that you could not simply execute yourself. That's okay. Just be up front about that. When you come back to the coding in a couple of class periods, you will be in the role again of helping students work through the obstacles they encounter (but you don't have to know every answer).
1. Choose a common item that almost every student has or uses, but make it a non-tech item. I have had a lot of fun using a school backpack, but other options could be a wallet, a pair of shorts, a shopping bag, etc.
2. Have students break into pairs or trios. In each grouping, have students make a list of things they like to do in their free time. The list should be on a note card and take just a few minutes.
3. Have students pass the card to their partners to read over. After reading over the card, let students ask up to four questions of their partner to clarify anything or ask for more details.
4. On paper, have students sketch out the ideal backpack for their partner. Have them label the different features of the backpack. The bag each student designs is not for him/herself but for their partner. Give about 15 minutes.
5. Once the sketching is done, have students explain their backpack design to their partners. Conversations should start along the lines of, "I designed this bag this way for you because..." Five minutes
6. Have the student for whom the bag was designed give feedback about whether they like the design or not. Five minutes.
7. Each designer should take the feedback and go back and tweak the design, adding or subtracting features (unless their peer said it was perfect).
8. After one final round of this, have students join a whole class discussion about what they did well or did not do well in terms of designing for someone else. Explain that they will now use this process to design an app or website on paper.
1. Choose one or two partners for this next step.
2. Write down at least 5 things you like to do in your free and school time on the note card you received.
3. Pass the note card to your partner and read the one s/he gives to you.
4. Look over the note card you received. You can ask a few questions to get more detail or to clarify anything.
5. Now, on paper, try designing the perfect backpack for your partner. It doesn't have to be for all the things they listed on their card, but it should reflect the personality they have. Does it need tons of pockets? Should you be able to attach things to it? Should it be fashionable? Rugged?
6. Explain your design to your partner starting the conversation like this: "I designed the bag like this because you seem_______"
7. Give feedback to your partner about his/her ideas. Do they seem like they would be good ones FOR YOU? Be honest.
8. Take the feedback and use it to improve your design. In five minutes you will present your final design to your partner.
4 Application and Independent practice
Today, you will have students return to coding on Codeacademy, but first, have them partner up with one or two people to begin the same process for an app or website.
Remind them that they are:
- Not making an app/site for themselves
- They are trying to design something that other people will like
- Have them decide who their target audience is (girls who like to skateboard? boys who like Star Wars? adults who have teenage kids?
Students will not be coding for this yet (unless they are advanced). Instead, they should be using sketches and notes, and photos. They can do this in a notebook or on a site like Thinglink.
Over the next few weeks, keep giving students time to code on Codeacademy, but have them come back to their design ideas at the end of every other class. When they are ready, they can start building the app or site. Mistakes will be made.
Student should present their ideas for design after two weeks. Listeners should give feedback, trying to think from the perspective of the target audience (not their own perspective).
These check-ins should happen every couple of weeks as students develop the skills to get closer to realizing their ideas. If they don't have the skills to start building, it's okay if they stick to ideas, images, and sketches.
Codeacademy can remain the heart of their code learning.