F
F
Fundamentals Course
Search…
Introduction
About This Course
Sessions
Week 1
Week 2
Week 3
Week 4
After the course
Teacher Resources
Other resources
Powered By GitBook
Week 4
More JavaScript, Reflection & Wrapping Up

Introductions (30 minutes)

Let's make sure we know each other! Ask for a name tag if you don't already have one.

Warm up game

Some students will teach Zip-Zap-Boing to the others (face to face class).

Shout out your questions (10 minutes)

Let's make a list of all of the programming questions we'd like to get answered today, and put them on the whiteboard. When you have time, put your initials next to the questions that interest you the most.

Getting unstuck (30 minutes)

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)

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.
If you need a reminder of how to give a good presentation, see the tips from lesson 3​

Improve your Khan Academy Projects with Arrays and Objects (80 minutes)

Like last week, 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!
If you have finished all of the Khan Academy projects up to and including the arrays and objects sections and you need some inspiration, here is a list of further challenges. These mostly challenge you to return to an earlier project and make a spin-off which uses objects and/or arrays to make it better, cleaner, and to make it easier for you to do cooler things!

Pair-programming (2 students)

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.
If you need a reminder on how to pair-program effectively, see the the notes from lesson 3.

1-to-1 programming problem with an instructor

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!

Ship It! (60 minutes)

Objectives
  • Export your Codepen to zip
  • Upload your folder to Github
  • Deploy your folder to Netlify

Exercise

In ITC you built a Landing Page or Tribute Page in Codepen . Now we’ll ship it to become a “real” website! When developers talk about shipping or deployment they mean turning the version that they’re developing into something that users can access.
You’ll export your page to a folder on your computer, upload it to Github, and deploy it to Netlify.

You will need:

Step by step

Step One : Codepen

Find your landing page on Codepen and click Export > Export as zip

Step Two : Github

Create a new repo by going to repo.new or by clicking the + icon in the top navigation
  1. 1.
    Leave the Repository Template as “No template”
  2. 2.
    Type in a name for your project. It can be anything, but “landing-page” or “tribute-page” are probably good choices
  3. 3.
    Leave the rest of the options as the defaults
  4. 4.
    Click “Create repository”. Once it’s created it will take you to your new repo
Now click the link to upload an existing file, which takes you to https://github.com/YOUR_GITHUB_NAME/YOUR_PROJECT_NAME/upload
Find your downloaded zip file on your computer, unzip it and drag the folder on to your Github web interface.

Step Three: Netlify

Log in to Netlify and follow this workshop to deploy your site. https://syllabus.codeyourfuture.io/workshops/deployment/workshop/instructions
​🎉 Congratulations! You shipped it!
Stretch goal? Follow the instructions in the workshop to change the site name to YOUR_GITHUB_NAME-landing-page or YOUR_GITHUB_NAME-tribute-page

Kahoot - again! (15 minutes)

Let's do the first Kahoot quiz again, to find out if you feel any differently about programming now.

Reflection: How is all this relevant in the real world? (30 minutes)

Looking back at the concept roadmap, believe it or not, you've been learning the basics of programming, relevant to a whole range of coding jobs.
Now the instructors will look at specific elements you've learned about and how they're relevant elsewhere.

Different JavaScript environments

Outside of the Khan Academy course platform, you'll see some differences in JavaScript:
  • let and const used instead of var
  • Functions can be created many ways (the Khan Academy way is uncommon)
  • More features to learn about
  • ...

Other Free Resources

We'll have a look at some of our favourite free resources - both online and in person - which can help you towards a career in programming and web development.
See Free Resources for this content

Coursework

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

1) Khan Academy: Intro to JS

IMPORTANT!!
You should SKIP the "Object-Orientated Design" section. It is out-of-date and confusing!

2) Learning How to Learn course

Continue to Week 4 of the Learning How to Learn course.
  1. 1.
    Work through the assignmets for Week 4 of the course. It should take around 4 hours to complete.
  2. 2.
    When you complete the exercises for the week go to the grades area and post a screenshot in your student area on Google Classroom which shows what you have done.
  3. 3.
    Optional Further readings and videos are not required. You may choose to do them to further your learning.
  4. 4.
    Honors Assignments are required!!! You will need to complete your:
    Final Project on Learning

4) Join your local coding community

  1. 1.
    In small groups, go to meetup.com and research tech-related meetups in your local community.
  2. 2.
    Discuss which ones are most relevant to you right now, then sign up to meetup.com
  3. 3.
    Attend one event in the next month.

5) Crowd source inspirational/ informative podcasts

  1. 1.
    Run a poll on the most popular free podcast platform that the group uses.
  2. 2.
    Research inspirational / informative podcasts
  3. 3.
    As a class make one collaborative playlist on the most popular platform you use and add at least 2 podcasts to the list.

6) (Optional) Continuing with JavaScript Drawing and Animation

If you enjoyed using JavaScript to make drawings and animations, we recommend further study and play with the p5.js library, using the OpenProcessing platform or CodePen.

Some places to get inspiration with p5.js

Here is an essay by Jason Bailey about "generative art". It has lots of interesting examples which might inspire you: "Why Love Generative Art?". If you use Twitter, here is a recommended "generative" artist: https://twitter.com/manoloidee.

7) Lesson Feedback

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

8) Course Feedback

We'd love your feedback on what to improve with this course. Please spend two minutes filling in this form.

End with a game or two

Suggestions:
  • More Zip-Zap-Boing (face to face class)
  • Happy Salmon (face to face)
  • ​
Previous
Week 3
Next
After the course
Last modified 3mo ago
Export as PDF
Copy link
Contents
Introductions (30 minutes)
Warm up game
Shout out your questions (10 minutes)
Getting unstuck (30 minutes)
Live Coding (60 minutes)
Present Your Favourite Project (30 minutes)
Improve your Khan Academy Projects with Arrays and Objects (80 minutes)
Pair-programming (2 students)
1-to-1 programming problem with an instructor
Ship It! (60 minutes)
Step by step
Kahoot - again! (15 minutes)
Reflection: How is all this relevant in the real world? (30 minutes)
Different JavaScript environments
Other Free Resources
Coursework
1) Khan Academy: Intro to JS
2) Learning How to Learn course
4) Join your local coding community
5) Crowd source inspirational/ informative podcasts
6) (Optional) Continuing with JavaScript Drawing and Animation
7) Lesson Feedback
8) Course Feedback
End with a game or two