Lesson 3

Live Coding & Visual Coding

Introductions (30 minutes)

Let's make sure we know each other!

Warm up game

Online icebreaker

Shout out your questions (10 minutes)

Instructors see here for instructions

Let's make a list of all of the programming questions we'd like to get answered today, and put them on the Miro whiteboard just like we did last week.

  1. Log into Miro (your instructor will give you the link for your Miro Board)

  2. Find the sticky notes on the board.

  3. Write your question on a sticky note (you must ask a question)

  4. If you have more than 1 question, write each on a separate stiky note. To add a new note, use the toolbar on the left hand side to select a new note.

Getting Unstuck (30 minutes)

Instructors see here for instructions

We'll now spend 30 minutes where you can ask the volunteers with help on serious questions that have really been blocking your progress through the Khan Academy course.

If you have other more advanced questions that aren't blocking you, please don't ask them yet (unless you see that the volunteers are clearly not busy helping with more fundamental issues). We'll have time later for those questions.

Live Coding (60 minutes)

Instructors see here for instructions

The instructor will do some live-coding to demonstrate solutions to some of the class's common questions. This means they will be showing their screen on the projector and working on solving a problem. This is a very effective way to learn! The instructors are professionals and there are many small (and large!) tips you can pick up from them.

Can you spot the instructor's coding mistakes before they do? (There will definitely be some, that is normal!)

The instructor will likely ask for suggestions on how to do something from the class = speak up, it helps the their teaching. Don't worry about getting the answer "wrong" - there is no one correct way. They might also ask you to do some of the coding, please contribute and don't worry about mistakes!

Tip: A quiet class with no questions or suggestions is a difficult class to teach

Present Your Favourite Project (30 minutes)

You will give a very, very simple 2 minute presentation to 2 or 3 other students and a volunteer (if one is available). Before the presentations we'll have 5 minutes to prep. Pick your favourite project (or the one that's most interesting to talk about) and get ready to explain:

  • What you added to it

  • What was difficult

  • What you like and don't like about it

  • What you would add if you had time

  • Any parts of the code you still don't understand and might want help with

With your group, find a quiet space, and set a stopwatch for 2 minutes and present. Here are some tips:

  • Present to your classmates, not just to the volunteer

  • Cover the above points

  • Speak clearly

  • Face the people you're talking to, as much as possible. Don't just face the screen

  • Try to make it fun!

  • Stick to the time. The volunteer will cut you off at 2 minutes!

  • Don't go into too much detail on one point - 2 minutes is NOT much time at all

Improve Your Favourite Khan Academy Project (80 minutes)

Now we'll work in pairs to make the changes to your favourite Khan Academy you described in your presentation earlier. Remember that if you and your pair are totally stuck on something, ask a volunteer to help you - they're here to help!

Paired Programming

Instructors see here for instructions

It's good to code with a friend. You learn SO much. Programmers call this pair programming and many professional teams program in pairs for a part of each day.

We'll talk VERY briefly about what pair-programming is and how you can do it. Here are some tips on how to pair well:

  • Pick a partner who is roughly at your level and ideally who is interested in a similar programming task (e.g. animating a fish in the fish tank project, or improving the text on an Ad Design project)

  • Define a small task clearly that you are both happy to work on together. You need clarity or you may be "pulling in two different directions". Example dialogue that you might have with your partner:

    • "Well, I'd like to add a column of bubbles above each fish."

    • "Yes, I like that idea"

    • "But let's not try to animate them, at least not in this first task?"

    • "Yep, let's keep it simple! Once we've got them showing up correctly, we can decide what's next!"

    • "So, just like.. 5 bubbles spaced out in a vertical line above the front of each fish?"

    • "Let's do it! :)"

    • ... they are successful

    • "hmm, maybe let's add a little randomness to their position so it looks more natural"

    • "ooh, sounds good. i don't know how to do that"

    • "well, it's your turn on the keyboard now, anyway. i'll talk you through it. do you know what the random() function does?"

    • ...

  • Switch between driver and navigator roles every 10 minutes

    • The "driver" is the person typing on the keyboard, just thinking about what needs to be written

    • The "navigator" reviews what the driver is doing and is thinking about to write next

  • Don't dominate - this is teamwork

    • Even when you're in charge of the keyboard you are not in charge of all the decisions

    • Try to find agreement with your partner

    • If you think you know more and better than your partner then take the opportunity to help them learn. The more they do, the more decisions they make, the more chance they'll have to reflect and learn

  • Defend yourself - some partners will try to dominate and rule the keyboard or dictate every decision

    • Make sure you get your turn at the keyboard, and speak up when you have ideas

    • Ask for your partner to slow down if they're going too fast or to explain if they are adding code you don't understand

    • Take responsibility for gaining that understanding, and ask for help from your partner in getting there

I'm stressing out!

This will only be a short (20-30 minutes) pairing task, so don't stress if you find don't get on with your partner. This happens to professionals, and employers REALLY care how you behave in a pairing session, so treat it as important practice, and try to find a way to get on.

Often this stress can arise between two dominant personalities both of whom think they are right. If this is your case it might be clever for you to let the other person make more of the decisions.

Reflect on pair-programming

  • two minutes

  • easy/hard?

  • advantages? disadvantages?

  • any tips?

  • in perspective: this happens in industry and in coding interviews. we'll keep practicing.

You will be free (and encouraged) to work like this in some of the sessions this afternoon. Provided you follow the guidelines above (importantly, there is driver and navigator there is no back seat to fall asleep in.

Super important rule for the future

If you are working in a pair (or team) so that you can hide what you don't understand, but you think it is ok because the team are getting the work done, you are failing yourself. Hiding like this is one of the few ways to genuinely mess up.

SHOW what you don't understand, and get help with it. Otherwise you will never learn, and there won't be other people there to support you. Find a team to work in that is at YOUR level, and work on a simpler task that is one you fully understand, at your speed.

1-to-1 programming problem with an instructor

Whilst the above exercise is happening, each student will have a pairing session with one of the instructors to solve a programming problem using the Khan Academy Intro to JavaScript environment. We'll see how you're getting on, what help you need, and hopefully you'll get some tips from the instructor!


To make our course better we love to hear your feedback. Please spend two minutes completing this form.

Class Feedback Form


Make sure you understand the homework for next week before you leave the classroom. See Google Classroom for the definitive list of homework assignments. Make sure you check it regularly.

1) Khan Academy: Intro to JS

Continue to work on the Khan Academy: Intro to JS course.

First, make sure that you have completed everything up to the "Text and Strings" section.

If you have already done that, then you should continue AT LEAST UP TO the "Writing Clean Code" section.

2) Learning How to Learn course

Continue to Week 3 of the Learning How to Learn course. It should take around 4 hours to complete.

2a) Learning Online: Communicating and Collaborating (do this if you have already completed the Learning How to Learn course)

Work through Week 2 of the Learning Online: Communicating and Collaborating course. It should take around 2 hours to complete.

You need to submit your comments in threads on Slack not in the comments section on Future Learn.