├── .gitbook └── assets │ ├── cyf_cofc.pptx │ ├── cyf_cofc_exercise.pdf │ ├── image (1).png │ ├── image.png │ ├── screenshot-2021-05-12-at-11.20.25.png │ └── screenshot-2021-05-18-at-13.20.34.png ├── CONTRIBUTING.md ├── README.md ├── SUMMARY.md ├── about-this-course.md ├── about-this-course ├── README.md ├── before-the-course-begins.md ├── class-preparation.md └── graduation │ ├── README.md │ ├── criteria.md │ └── selection-process.md ├── after-the-course ├── README.md ├── from-khan-academy-processingjs-to-p5js.md └── p5js-and-openprocessing-workshop.md ├── lessons ├── README.md ├── after-the-course │ ├── README.md │ ├── from-khan-academy-processingjs-to-p5js.md │ └── p5js-and-openprocessing-workshop.md ├── lesson-1.md ├── lesson-2.md ├── lesson-3.md └── lesson.md ├── other-resources ├── README.md ├── brain-games.md ├── free-resources.md ├── post-khan-academy-challenges.md ├── roadmap-of-concepts.md └── tips-for-success.md ├── questions-week3-neill.md ├── teacher-resources ├── README.md ├── assessments.md ├── energisers.md ├── instructor-notes-1.md ├── instructor-notes-2.md ├── instructor-notes-3.md ├── instructor-notes-overview.md ├── instructor-notes.md └── preparation.md └── unused.md /.gitbook/assets/cyf_cofc.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/fundamentals-course/349a4142f3ed946fcf2e516dd12332a31075cf6b/.gitbook/assets/cyf_cofc.pptx -------------------------------------------------------------------------------- /.gitbook/assets/cyf_cofc_exercise.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/fundamentals-course/349a4142f3ed946fcf2e516dd12332a31075cf6b/.gitbook/assets/cyf_cofc_exercise.pdf -------------------------------------------------------------------------------- /.gitbook/assets/image (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/fundamentals-course/349a4142f3ed946fcf2e516dd12332a31075cf6b/.gitbook/assets/image (1).png -------------------------------------------------------------------------------- /.gitbook/assets/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/fundamentals-course/349a4142f3ed946fcf2e516dd12332a31075cf6b/.gitbook/assets/image.png -------------------------------------------------------------------------------- /.gitbook/assets/screenshot-2021-05-12-at-11.20.25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/fundamentals-course/349a4142f3ed946fcf2e516dd12332a31075cf6b/.gitbook/assets/screenshot-2021-05-12-at-11.20.25.png -------------------------------------------------------------------------------- /.gitbook/assets/screenshot-2021-05-18-at-13.20.34.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/fundamentals-course/349a4142f3ed946fcf2e516dd12332a31075cf6b/.gitbook/assets/screenshot-2021-05-18-at-13.20.34.png -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guide 2 | 3 | Thanks for your interest in contributing! All of our lessons are a "Work in Progress" and we welcome new people willing to help out. 4 | 5 | ## Consider the scope 6 | 7 | To help us out, please consider the scope of your change(s). If the change is a typo or other minor change, please [make a Pull Request](#making-a-pull-request). 8 | 9 | If you would like to change significant parts of a lesson, please first [discuss it with us](#discussing-your-change). The section of content you wish to change might be in need of significant work and we would happy accept a contribution. Other sections may be more settled and require more discussion. 10 | 11 | ## Discussing your change 12 | 13 | When making a significant change we ask that you discuss it with us first. This is because we do have previous experience teaching our students with the existing content. It is important for us to retain this because we have learnt which strategies tend to work better than others. 14 | 15 | Please create an issue describing your change and the reasoning behind it. 16 | 17 | ## Making a Pull Request 18 | 19 | If you know how to clone a GitHub repo and write Markdown, please follow the [Git instructions](#git). If not, don't worry! You can still contribute by following the [Web editor instructions](#web-editor). 20 | 21 | ### Web editor 22 | 23 | GitHub supports editing via a web interface. 24 | 25 | 1. Find the relevant file that you want to change. If you are struggling to find it, please ask via an issue or Slack! 26 | 2. Click the pencil "Edit this file" button in the top left header 27 | 3. Edit the file! Please see the [Markdown section](#markdown) below. You can preview the change by clicking the "Preview changes" tab at the top of the editor 28 | 4. Once you have made your change, please fill out the 2 text boxes below the editor. The first one is a short description of what you changed, and the second is a longer description of why you made the change 29 | 5. Click the "Propose file change" button 30 | 31 | This will create a _Pull Request_ that is sent to us to review. If we have any feedback we will comment on the Pull Request and you will be notified via email. 32 | 33 | ### Git 34 | 35 | 1. Click the Fork button to make a copy on your own account 36 | 2. Clone the repo to your computer (e.g. `git clone git@github.com:YOUR_GITHUB_USERNAME/fundamentals-course.git`) 37 | 3. Edit the relevant Markdown files. All typical Markdown syntax is supported. 38 | 4. Commit and push your changes to your fork 39 | 5. Visit `https://github.com/YOUR_GITHUB_USERNAME/fundamentals-course/pull/new/YOUR_BRANCH_NAME` 40 | 6. Fill out the Pull Request title (what changed) and description (why you made the change) 41 | 42 | ### Markdown 43 | 44 | Lesson content is written in [Markdown](https://en.wikipedia.org/wiki/Markdown), and compiled into a web page using [Gitbook](https://www.gitbook.com/). 45 | 46 | You may find [this Markdown guide](https://guides.github.com/features/mastering-markdown/) helpful if you are unfamiliar with Markdown. 47 | 48 | ### Adding a new page 49 | 50 | Due to the way Gitbook works, if you want to add a new page that you want to appear in the web site, it must be added to `SUMMARY.md`. Add a link to the new file using a relative file path, for example: 51 | 52 | ```md 53 | * [My amazing page](path/to/my-page.md) 54 | ``` 55 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | {% hint style="info" %} 4 | This course has been archived. The current Fundamentals is at [https://syllabus.codeyourfuture.io/fundamentals/](https://syllabus.codeyourfuture.io/fundamentals/preparation/) 5 | {% endhint %} 6 | 7 | 8 | 9 | This is the syllabus for Code Your Future's Fundamentals course. During the course you will get a gentle introduction to what programming is, why we want to learn and how to start learning. 10 | 11 | [More about this course](about-this-course/). 12 | 13 | The course will last 4 weeks. For each week, there is a web page which you can access on the sidebar to the left. 14 | 15 | ## Classes 16 | 17 | Classes will take place every Saturday/Sunday (check in your city!) and will _usually_ start at 11:30am and should finish at around 5:30pm, but look out for time changes in emails and on Slack. 18 | 19 | Please arrive on time so that we can finish on time. 20 | 21 | ## Editing this Website 22 | 23 | This website is hosted on [Gitbook](https://www.gitbook.com). To get edit access, please speak to a CodeYourFuture Coordinator. 24 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Table of contents 2 | 3 | * [Introduction](README.md) 4 | * [About This Course](about-this-course/README.md) 5 | * [Before the course begins](about-this-course/before-the-course-begins.md) 6 | * [Class Preparation](about-this-course/class-preparation.md) 7 | * [Graduation](about-this-course/graduation/README.md) 8 | * [Criteria](about-this-course/graduation/criteria.md) 9 | * [Selection Process](about-this-course/graduation/selection-process.md) 10 | * [Sessions](lessons/README.md) 11 | * [Week 1](lessons/lesson.md) 12 | * [Week 2](lessons/lesson-1.md) 13 | * [Week 3](lessons/lesson-2.md) 14 | * [Week 4](lessons/lesson-3.md) 15 | * [After the course](lessons/after-the-course/README.md) 16 | * [Migrating from Processing.js to p5.js](lessons/after-the-course/from-khan-academy-processingjs-to-p5js.md) 17 | * [Workshop on migrating to p5.js](lessons/after-the-course/p5js-and-openprocessing-workshop.md) 18 | * [Teacher Resources](teacher-resources/README.md) 19 | * [Overview](teacher-resources/instructor-notes-overview.md) 20 | * [Preparation](teacher-resources/preparation.md) 21 | * [Assessments](teacher-resources/assessments.md) 22 | * [Energisers](teacher-resources/energisers.md) 23 | * [Lesson 1](teacher-resources/instructor-notes.md) 24 | * [Lesson 2](teacher-resources/instructor-notes-1.md) 25 | * [Lesson 3](teacher-resources/instructor-notes-2.md) 26 | * [Lesson 4](teacher-resources/instructor-notes-3.md) 27 | * [Other resources](other-resources/README.md) 28 | * [Brain Games](other-resources/brain-games.md) 29 | * [Free Resources](other-resources/free-resources.md) 30 | * [Tips For Success](other-resources/tips-for-success.md) 31 | * [Roadmap of Concepts](other-resources/roadmap-of-concepts.md) 32 | * [Challenges with Objects and Arrays](other-resources/post-khan-academy-challenges.md) 33 | 34 | -------------------------------------------------------------------------------- /about-this-course.md: -------------------------------------------------------------------------------- 1 | # About this course 2 | 3 | ## What this course IS 4 | 5 | A one-month short course from [Code Your Future](https://codeyourfuture.io/) 6 | 7 | * You get a taste of programming with JavaScript - one of the most popular and in-demand programming languages today. 8 | * You'll learn fundamentals of programming that can be applied to JavaScript and other languages. 9 | * You'll get to find out if you actually LIKE programming! 10 | * You'll become familiar with some free on-line resources that we recommend to help in future study. 11 | 12 | We'll also look at what you can make with programming and what kind of jobs are available to programmers. 13 | 14 | ### Concept Roadmap 15 | 16 | If you want more detail about the topics that we're covering, take a look at the [concept roadmap](other-resources/roadmap-of-concepts.md) 17 | 18 | ### About further study on CYF's web-development course: 19 | 20 | At the end of this short course, 21 | 22 | * if you decide programming is definitely for you 23 | * and if we think you're ready 24 | 25 | there will be the possibility to apply for further study on the next full-stack web development course. 26 | 27 | Whether you take that path or not, we want this course to be useful to you. 28 | 29 | ## What this course is NOT 30 | 31 | ### It's _not_ a web development course 32 | 33 | Although we'll certainly learn some JavaScript - the most popular language in web development - we won't do _any_ web development with it! 34 | 35 | ### It's _not_ a teacher-led course 36 | 37 | We're not going to lecture you. 38 | 39 | You will work through some online courses, and we \(or the people sitting around you\) will help you when you're really stuck. 40 | 41 | ### … and we're _not_ starting with JavaScript! 42 | 43 | We'll start to look at JavaScript in week 2. First we're going to use a simpler language to learn and practice fundamentals. 44 | 45 | ## What you will need for this course 46 | 47 | * A laptop and charger 48 | * A phone would be useful 49 | * Pen and paper \(ideally a simple notebook for the course duration\) 50 | * Headphones, if you have them - the course contains a lot of video content 51 | 52 | ## Software you'll need to install 53 | 54 | * Slack 55 | * [https://slack.com/download](https://slack.com/download) 56 | * Google Classroom 57 | * For Android - [Download](https://play.google.com/store/apps/details?) 58 | * For iOS - [Download](https://apps.apple.com/us/app/google-classroom/id924620788%20) 59 | 60 | That's it! Most of the software we'll be using is web-based 61 | 62 | -------------------------------------------------------------------------------- /about-this-course/README.md: -------------------------------------------------------------------------------- 1 | # About This Course 2 | 3 | ## What this course is: 4 | 5 | A one-month short course from [Code Your Future](https://codeyourfuture.io/) 6 | 7 | * You get a taste of programming with JavaScript - one of the most popular and in-demand programming languages today. 8 | * You'll learn fundamentals of programming that can be applied to JavaScript and other languages. 9 | * You'll get to find out if you actually LIKE programming! 10 | * You'll become familiar with some free on-line resources that we recommend to help in future study. 11 | 12 | We'll also look at what you can make with programming and what kind of jobs are available to programmers. 13 | 14 | ### Concept Roadmap 15 | 16 | If you want more detail about the topics that we're covering, take a look at the [concept roadmap](../other-resources/roadmap-of-concepts.md) 17 | 18 | ## What this course is NOT 19 | 20 | ### It's _not_ a web development course 21 | 22 | Although we'll certainly learn some JavaScript - the most popular language in web development - we won't do _any_ web development with it! 23 | 24 | ### It's _not_ a teacher-led course 25 | 26 | We're not going to lecture you. 27 | 28 | You will work through some online courses, and we \(or the people sitting around you\) will help you when you're really stuck. 29 | 30 | ### … and we're _not_ starting with JavaScript! 31 | 32 | We'll start to look at JavaScript in week 2. First we're going to use a simpler language to learn and practice fundamentals. 33 | 34 | ## What you will need for this course 35 | 36 | * A laptop and charger 37 | * A phone would be useful 38 | * Pen and paper \(ideally a simple notebook for the course duration\) 39 | * Headphones, if you have them - the course contains a lot of video content 40 | 41 | ### Software you'll need to install 42 | 43 | * Slack 44 | * [https://slack.com/download](https://slack.com/download) 45 | * Google Classroom 46 | * For Android - [Download](https://play.google.com/store/apps/details?) 47 | * For iOS - [Download](https://apps.apple.com/us/app/google-classroom/id924620788%20) 48 | 49 | Be sure to complete the rest of the preparation requried before you start the course. You can find the full list [here](class-preparation.md). 50 | 51 | ## Graduation Criteria 52 | 53 | By the end of this course you must have completed all of the criteria found [here](graduation/). 54 | 55 | ### Further Study 56 | 57 | #### Full Stack Web Development Course 58 | 59 | At the end of this short course, 60 | 61 | * if you decide programming is definitely for you 62 | * and if we think you're ready 63 | 64 | there will be the possibility to apply for further study on the next full-stack web development course. 65 | 66 | Whether you take that path or not, we want this course to be useful to you. 67 | 68 | -------------------------------------------------------------------------------- /about-this-course/before-the-course-begins.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: There is often a waiting period before the course begins. Don't waste it. 3 | --- 4 | 5 | # Before the course begins 6 | 7 | You can do so much to improve your chances of success with Code Your Future and you can start right now. Before the course begins, work through these resources to get yourself prepared, powerful, and ready to work. You can do this. 8 | 9 | ### Prep 1 : Grasshopper 10 | 11 | You may have done Fundamentals 1 on Grasshopper, but what other courses can you unlock? The _Using a Code Editor_ course __could be handy for Prep 2. 12 | 13 | {% embed url="https://learn.grasshopper.app/" caption="Work through Grasshopper - this will make it easier to grasp the fundamentals" %} 14 | 15 | ### Prep 2 : Developer Tools 16 | 17 | Download [VSCode](https://code.visualstudio.com/download) and practice using a real developer environment. You don't need to write any code in your new IDE. Just find out where the buttons are and what some of them do. 18 | 19 | {% embed url="https://www.youtube.com/watch?v=S320N3sxinE" %} 20 | 21 | {% hint style="success" %} 22 | Stretch goal: can you write and save a [markdown document ](https://www.markdowntutorial.com/)in VSCode? 23 | {% endhint %} 24 | 25 | ### Prep 3 : Developer Thinking 26 | 27 | People in tech work with logic, so how do people improve their logical reasoning? Happily, with games! Practice your developer thinking by playing our brain games: 28 | 29 | {% page-ref page="../other-resources/brain-games.md" %} 30 | 31 | -------------------------------------------------------------------------------- /about-this-course/class-preparation.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: How to get ready. What to do next. 3 | --- 4 | 5 | # Class Preparation 6 | 7 | Congratulations on being selected to join CodeYourFuture Fundamentals of Tech course! 8 | 9 | We know you are excited for the classes to start! 10 | 11 | You need to do some preparation now so you are ready and able to participate fully in this course. You might find it helpful to print this page. Check off each task as you complete it, so you know you are ready to come to work on day one. 12 | 13 | ## 1. Working Agreement \(15 minutes\) 14 | 15 | Please **read** the CodeYourFuture [Student Agreement](https://docs.codeyourfuture.io/organisation/agreements-and-rules/student-agreement). 16 | 17 | Make a note of anything you don’t understand or don’t agree with. We will be discussing it in class so everyone knows what they are agreeing to. 18 | 19 | {% hint style="info" %} 20 | If you have any questions, please contact your city coordinator. 21 | {% endhint %} 22 | 23 | * [x] I have read the [Student Agreement](https://docs.codeyourfuture.io/organisation/agreements-and-rules/student-agreement). 24 | 25 | ## 2. Hardware Check \(20 minutes\) 26 | 27 | * [x] I have a working laptop or desktop **computer.** 28 | * [x] I have a stable **internet** connection. 29 | * [x] I have a **webcam**. 30 | * [x] I have a **headset** with microphone. 31 | * [x] I know how to use all of these things. 32 | 33 | Check each of these things. If you don't have one or more of these things, contact your city coordinator. 34 | 35 | {% hint style="info" %} 36 | Your coordinator will lend you a computer and internet if you don't have them. This is **free**. You will not be charged. 37 | {% endhint %} 38 | 39 | ## 3. Professional Accounts \(2 hours\) 40 | 41 | Download and install the following software or register for the apps. 42 | 43 | Click on the links to go to the registration pages. **Keep your login details for all sites/apps consistent and always use your real name.** 44 | 45 | {% hint style="success" %} 46 | CYF recognises **you may need to keep your birth name private**. When we say real name, we mean the name you go by. It does not have to match your birth certificate or any other legal document. It has to be consistent and professional. 47 | {% endhint %} 48 | 49 | {% hint style="success" %} 50 | CYF understands you may need to keep your picture off the internet. In this case, generate [a robohash picture](https://robohash.org/GermanBencci?set=set3) from your name, and use that for all these accounts. Use your [robohash](https://robohash.org/) consistently and it will help us recognise each other. 51 | {% endhint %} 52 | 53 | ### 3.1 Gmail, Google Account 54 | 55 | Make a new Google account. Use your real name. Don’t use any numbers or words that are not your name. Never put the year of your birth in your professional email address. Your email address should look something like this: 56 | 57 | {% hint style="info" %} 58 | GBencci@example.com 59 | {% endhint %} 60 | 61 | **This is your public professional email address.** Use it to sign up for all your professional accounts ****unless you can use your Github. Put it in your Slack profile. 62 | 63 | * [x] I have made a professional Google account and Gmail address. 64 | * [x] I have put this in my Slack Profile 65 | 66 | ### 3.2 Google Chrome 67 | 68 | **Google Chrome** is the first browser we will all use together. 69 | 70 | * [x] I have downloaded and installed [Google Chrome. ](https://www.google.com/chrome/) 71 | * [x] I have created my professional [profile on Chrome](https://support.google.com/chrome/answer/2364824). 72 | 73 | Use your professional Chrome profile for all your CYF work. You will often have to share your screen during class, so keep your **personal internet use private** and away from your professional profile. 74 | 75 | ### 3.3 Slack 76 | 77 | **Slack** is our community space and how we communicate with each other. Download and install it now. 78 | 79 | * [x] I have downloaded the [Slack app](https://slack.com/intl/en-gb/) on my computer _and_ phone 80 | * [x] I have logged in to the [Code Your Future Intro to Coding Workspace](https://cyf-introtocoding.slack.com/) 81 | * [x] I have found and joined my class channels 82 | * [x] I have updated my profile with my picture and class 83 | 84 | ### 3.4 Zoom 85 | 86 | We use **Zoom** for remote weekend classes. Install it now. 87 | 88 | * [x] I have downloaded and installed [Zoom](https://zoom.us/signup) onto my computer. 89 | 90 | ### 3.5 Google Classroom 91 | 92 | Google Classroom is where you will find all of your coursework assignments. You will need a Gmail account in order to access Google classroom. Your class code will be posted on Slack. 93 | 94 | * [x] I have logged using the Class Code I was given on Slack. 95 | * [x] I have looked around to get to know the interface. 96 | 97 | ### 3.6 Miro 98 | 99 | [Miro](https://miro.com/signup/) is an online whiteboard we use to share ideas. Register an account now. 100 | 101 | * [x] I have signed up for Miro. 102 | 103 | ### 3.7 Code.org 104 | 105 | [Code.org](https://studio.code.org/users/sign_up) is a website aimed at helping people learn computer science. You will be doing one of their courses. Register an account now. 106 | 107 | * [x] I have signed up for code.org. 108 | 109 | ### 3.8 Khan Academy 110 | 111 | [Khan Academy](https://www.khanacademy.org) is an online learning platform. We will be doing one of their courses. Register an account now. 112 | 113 | * [x] I have signed up for Khan Academy. 114 | 115 | ### 3.9 Kahoot 116 | 117 | We use the [Kahoot! App](https://kahoot.com/home/mobile-app/) to play games and do quizzes. It works on Android and iOS. Register an account now. 118 | 119 | * [x] I have downloaded and installed Kahoot. 120 | 121 | ### **3.10 Github** 122 | 123 | Github is for developers. It's how you will work on code with other developers and where you will build a portfolio of work to show employers. Register an account now. 124 | 125 | * [x] I have made a[ Github account](https://github.com/). 126 | * [x] I have used my real name. 127 | * [x] I have not put my birth year in my user name. 128 | 129 | Your Github account name should look something like this: [https://github.com/SallyMcGrath](https://github.com/SallyMcGrath) 130 | 131 | ****When prospective employers are looking at your Github portfolio, you need them to know who you are: not your online identity, but the _name you put on your job application_. Don’t use cute handles on your Github, even though some mentors do. They are not applying for entry level developer roles**.** 132 | 133 | ### 3.11 LinkedIn 134 | 135 | Sign up for [Linked In](https://www.linkedin.com/). LinkedIn is the largest professional social network. You will use it to help you get a job and to advance your career. Make a [LinkedIn account](https://www.linkedin.com/). Use your real name. Sign in with Google. Connect with your cohort. 136 | 137 | Your cohort is your first network, and this is one of the most valuable things you can develop at Code Your Future. A strong, tightly linked, professional network is a powerful asset, so begin building it today. 138 | 139 | * [x] I have made a LinkedIn account using my professional email address 140 | * [x] I have used my real name. 141 | * [x] I have connected with my cohort 142 | 143 | 144 | 145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /about-this-course/graduation/README.md: -------------------------------------------------------------------------------- 1 | # Graduation 2 | 3 | -------------------------------------------------------------------------------- /about-this-course/graduation/criteria.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: What is our expected benchmark to progress to the full course? 3 | --- 4 | 5 | # Criteria 6 | 7 | This page contains the base level that we expect from you in order to graduate from this course and be eligible for the Full Stack course. 8 | 9 | ## Overview 10 | 11 | * The student is ready to learn to code and pursue a career in tech 12 | * The student has the motivation and commitment to complete all the activities of the training 13 | * The student does not have the financial means to acquire the technical and professional skills with another organisation 14 | * The student has the required English skills to follow verbal and written instructions 15 | * The student is ready to work together with other people 16 | 17 | ## Motivation 18 | 19 | * The student has actively expressed an interest in having a career as a developer or other role in tech. 20 | * The student must have completed all of the coursework that has been set to show they are invested in their education 21 | 22 | ## English Skill 23 | 24 | * The student can speak in English using complex sentences and it is easy to understand what the student is trying to communicate 25 | * When speaking, the student’s pronunciation is clear and understandable. 26 | * The student has written clearly and succinctly on Slack 27 | * If necessary, the student is actively working to improve their speaking, reading, writing and comprehension skills. 28 | 29 | ## Time 30 | 31 | * The student has shown they have made time for the course by attending every lesson \(unless an excuse was given before the lesson starts\) 32 | * The student has shown they have made time for the course submitting every coursework on time \(unless an excuse was given before the lesson starts\) 33 | 34 | ## Personal Development 35 | 36 | ### Coursework 37 | 38 | * The student must have completed the “Learning How To Learn” course 39 | * The student must have organised a study group with other students 40 | * The student must have created and presented a presentation 41 | * The student must have completed the Communicating and Collaborating 42 | 43 | ### Collaboration & Teamwork 44 | 45 | * The student is willing to help others. 46 | * The student is willing to accept help from others 47 | * The student notices when others are struggling and offers assistance. 48 | * The student wants to work with others with different skills, abilities and ideas. 49 | 50 | ### Autonomy 51 | 52 | * The student is able to organise their study time effectively. 53 | * The student has written SMART goals and used them to achieve results 54 | * The student is invested in their learning and seeks new opportunities to advance their understanding. 55 | * The student is able to work through exercises independently, asking for help when needed 56 | 57 | ### Communication 58 | 59 | * The student is able to confidently communicate verbally in small groups. 60 | * The student is able to confidently communicate verbally in a large group or is working toward improving this skill. 61 | * The student is able to understand written instructions 62 | * The student can seek clarification when needed. 63 | * The student has good listening skills. 64 | 65 | ## Technical & Coding 66 | 67 | ### Programming 68 | 69 | * The student has completed the Khan Academy: Intro to JS course 70 | * The student has completed the Code.org Course 3 71 | * The student can write an “if statement” with minimal help 72 | * The student can declare a variable and assign a value to it 73 | * The student can define what a loop is and when it is useful 74 | 75 | ### Computer Skills 76 | 77 | * The student can install software on their laptop with little to no instruction. 78 | * The student can navigate through the internet and access online content with little to no instruction 79 | * The student can search the internet to find answers with little to no instruction. 80 | 81 | -------------------------------------------------------------------------------- /about-this-course/graduation/selection-process.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: How do we decide who moves onto the Full Course? 3 | --- 4 | 5 | # Selection Process 6 | 7 | In this document you will find the selection process that can be followed to choose who should move from the Fundamentals to the Full Stack course. 8 | 9 | As with everything at CodeYourFuture **you are welcome to edit, remix and change this as necessary to fit your specific circumstance**. You are fully in control of this process. 10 | 11 | ## Fundamental Course Aims 12 | 13 | It's worth restating the aims of the Fundamentals Course from our point of view. 14 | 15 | At its core, this course has been created to bring the majority of our students up to the same level before they progress to the main course. However it is also great to dig deeper into 16 | 17 | * How **committed** people are to the course 18 | * How well people **self teach** 19 | * How people **ask for help** when they need it 20 | * How well they fit into our **community** 21 | 22 | ## Selection Process 23 | 24 | ### Goal 25 | 26 | The goal of this process is as follows 27 | 28 | > **Above all else, we want to give people a chance. 29 | > 30 | > Our aim is to remove people who we believe to have a very low chance of succeeding or who are not as committed to the course as we need them to be.** 31 | 32 | ### Selection Spreadsheet 33 | 34 | To begin, **create a copy** of this template spreadsheet 35 | 36 | [https://docs.google.com/spreadsheets/d/1xoDbP8P4hD3iuovHkd\_zmFkKMHLhsXa3U6Pa7YUjZyc/edit\#gid=0](https://docs.google.com/spreadsheets/d/1xoDbP8P4hD3iuovHkd_zmFkKMHLhsXa3U6Pa7YUjZyc/edit#gid=0) 37 | 38 | Spend some time investigating each of the categories and filling in the spreadsheet with as much visibility as you have. The most details you can add to that sheet the better. 39 | 40 | You are welcome to add and remove columns **as you see fit** from your copy of the spreadsheet. 41 | 42 | Each section is as follows 43 | 44 | * **Attendance** 45 | * As a percentage, how many of the lessons did the student attend 46 | * Do not include lessons that the student missed with a valid excuse \(e.g. sickness, technical issues\) 47 | * **Punctuality** 48 | * As a percentage, how many of the lessons did the student attend 49 | * Do not include lessons that the student missed with a valid excuse \(e.g. sickness, technical issues\) 50 | * **Code.org Completed** 51 | * How much of the Code.org has this student completed. 52 | * This is the coursework for Week 1 53 | * Grading: [See below](selection-process.md#coursework-grading-criteria). 54 | * **KhanAcademy Completed** 55 | * How much of the "KhanAcademy Intro to JS" course has this student completed. 56 | * This is the coursework for Week 2,3,4 57 | * Grading: [See below](selection-process.md#coursework-grading-criteria). 58 | * **Learning Online Completed** 59 | * How much of the Learning Online tutorial has the student completed 60 | * This is the coursework for Week 2, 3, 4 61 | * Grading: [See below](selection-process.md#coursework-grading-criteria). 62 | * **Slack Interaction** 63 | * How much did the student interact on Slack over the course 64 | * This includes starting calls, joining calls, asking questions, answering questions and general conversation 65 | * Grading 66 | * Above Expected - The student hosted calls and helped other students 67 | * Expected - The student sent messages and joined at least one call 68 | * Below Expected - The student sent the occasional message 69 | * None - The student did not interact on Slack 70 | * Could not judge - Couldn't work out their interaction from Slack 71 | * **Week 2 Challenge** 72 | * How well did the student do on the [Three Giraffes](../../teacher-resources/instructor-notes-1.md#1-to-1-assessment) challenge 73 | * Grading: [See below](selection-process.md#challenge-grading-criteria). 74 | * **Week 3 Challenge** 75 | * How well did the student do on the [Three Cars](../../teacher-resources/instructor-notes-2.md#1-to-1-assessment) challenge 76 | * Grading: [See below](selection-process.md#challenge-grading-criteria). 77 | * **Week 4 Challenge** 78 | * How well did the student do on the [Box & Ribbons](../../teacher-resources/instructor-notes-2.md#1-to-1-assessment) challenge 79 | * Grading: [See below](selection-process.md#challenge-grading-criteria). 80 | 81 | #### Coursework Grading Criteria 82 | 83 | * **Completed** - The student has completed all of the coursework 84 | * **Nearly Completed** - The student has completed 90% or more of the coursework 85 | * **Only Started** - The student has completed less than 90% of the coursework 86 | * **Not Started** - The student has not started the coursework 87 | 88 | #### Assessment Grading Criteria 89 | 90 | * **Very Good** - The student excelled at the assessment achieving all goals in the most optimal way with little to no help or issues 91 | * **Good** - The student achieved all of the goals in a sub-optimal way with a little help 92 | * **Average** - The student achieved all of the goals in a sub-optimal way and with some help 93 | * **Poor** - The student achieved the goals but only with significant help **or** the student could not achieve some of the goals 94 | * **Very Poor** - The student could not complete the goals of the assessment 95 | * **n/a** - The student did not do the assessment 96 | 97 | ### Groups 98 | 99 | Make sure you split into small groups and go through a smaller set of students each. Do **not** attempt to go through all of the students as a large group. This will take a very long time. 100 | 101 | ### Process 102 | 103 | The aim of the selection is to find the people who are obviously not ready to join the course. Broadly, if it a student has completed all of the coursework and been responsive to working then they will likely be a good fit for the course. 104 | 105 | #### Coursework & Attendance Pass 106 | 107 | As a first pass, find the people that we are sure are not ready for the course. This is people who 108 | 109 | * Have not shown any commitment to the course 110 | * Have not completed most of the coursework 111 | 112 | #### Technical Pass 113 | 114 | The second pass is about finding trainees who didn't make progress. The full course moves quickly and trainees need to be able to improve their work and apply their learning. Look for people who scored poorly in their 1-to-1s. 115 | 116 | Scoring poorly means 117 | 118 | * They did not show they had learnt over the four week course 119 | * They could not apply the learning from KhanAcademy to the 1-to-1s 120 | 121 | Read over the [Technical & Coding Graduation Criteria](criteria.md#technical-and-coding). We are looking for students who fulfil the majority of these criteria but not necessarily all of them. Look for development and growth in these areas. That is what Fundamentals is about. 122 | 123 | #### Soft Skills Development Pass 124 | 125 | Finally, the Soft Skills pass should try to work out if a trainee will be a good fit for the course. 126 | 127 | This is people who 128 | 129 | * Were actively disruptive in lessons 130 | * Were actively rude or dismissive of volunteers or other students 131 | 132 | Read over the [Personal Development Graduation Criteria](criteria.md#personal-development). We are looking for students who fulfil the majority of these criteria but not necessarily all of them. Look for development and growth in these areas. That is what Fundamentals is about. 133 | 134 | 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /after-the-course/README.md: -------------------------------------------------------------------------------- 1 | # After the course 2 | 3 | -------------------------------------------------------------------------------- /after-the-course/from-khan-academy-processingjs-to-p5js.md: -------------------------------------------------------------------------------- 1 | # Migrating from Processing.js to p5.js 2 | 3 | If you enjoyed using JavaScript to make drawings and animations, we recommend further study and play with the almost identical p5.js library. It's better. 4 | 5 | ## Where to start coding with p5.js 6 | 7 | * We recommend the site called [OpenProcessing](https://www.openprocessing.org/) - it makes it easy to click ["new sketch"](https://www.openprocessing.org/sketch/create) and start immediately 8 | * Alternatively, [here's a starting sketch](https://www.openprocessing.org/sketch/812085) that defines functions the way you have learned so far 9 | * If you want to use CodePen, here's a [p5.js starting "pen"](https://codepen.io/enz0/pen/vYEXyZr?editors=1010) 10 | * If you want to see the whole picture of how you could use this on a website, [here's a website project on Glitch](https://glitch.com/~cyf-p5js-start) with HTML, CSS, and JavaScript files 11 | * [A tutorial for a random words poster](https://www.openprocessing.org/sketch/812093) which works through a project using p5.js 12 | 13 | ## Why change? 14 | 15 | * Khan Academy platform is not stable for complicated programs 16 | * Khan Academy doesn't "feel professional" or "polished" 17 | * The Processing.js library used by Khan Academy has been retired 18 | * p5.js is much more widely used than Processing.js 19 | * p5.js has more and better documentation and tutorials 20 | * p5.js is more advanced and more powerful than Processing.js. You can make sketches that: 21 | * Process video from the webcam 22 | * [Process audio from your microphone](https://www.openprocessing.org/sketch/812282) 23 | * [Simplest example](https://www.openprocessing.org/sketch/812284/) 24 | * Load and show 3d models 25 | * Interact with all sorts of other interesting JavaScript libraries 26 | * Random example: [p5.js pose-detection with using PoseNet](https://codepen.io/enz0/full/wvBzoMN) 27 | * You can use _modern_ javascript language features, which make things nicer 28 | 29 | ### Pick one element at random from an array 30 | 31 | However, some of my favourite differences are very, very small. Here's one: If you have an array, you can pick one element of it at random, simply by passing the array as a parameter to the `random()` function. 32 | 33 | Example: 34 | 35 | ```javascript 36 | // (inside your draw() function...) 37 | 38 | var colorNames = ["maroon", "skyblue", "whitesmoke"]; 39 | var chosenColor = random(colorNames); 40 | fill(chosenColor); 41 | 42 | var words = ["code", "your", "future"]; 43 | var chosenWord = random(words); 44 | text(chosenWord, 100, 100); 45 | ``` 46 | 47 | ## Best place to learn p5.js 48 | 49 | We recommend Daniel Shiffman's Youtube course: ["Code! Programming with p5.js"](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA). 50 | 51 | ## What's OpenProcessing.org? 52 | 53 | The above course introduces a website called "p5.js web editor" which allows you to quickly write your projects and test them out. It's ok, but we recommend a different website which does the same thing: [https://www.openprocessing.org/](https://www.openprocessing.org/). 54 | 55 | It has [a huge gallery of work by other artists](https://www.openprocessing.org/browse/), and you can see all of their code to learn from! 56 | 57 | ### When you read others' code and it makes no sense... 58 | 59 | **Don't Panic!** Do not be worried when you find a project that looks amazing but then you look at the code and can't understand it - this is normal. 60 | 61 | * These projects can become VERY complex and the artists often aren't very concerned about how easy their code is to read 62 | * Code reading is a skill you have to work on 63 | * Take it slow. Study simpler projects to start with 64 | 65 | ## Other courses 66 | 67 | In addition to ["Code! Programming with p5.js"](from-khan-academy-processingjs-to-p5js.md#best-place-to-learn-p5.js)... 68 | 69 | * The creators of processing have [a p5.js course on kadenze.com - "Introduction to Programming for the Visual Arts with p5.js"](https://www.kadenze.com/courses/introduction-to-programming-for-the-visual-arts-with-p5-js-vi/info) 70 | * Joshua Davis has some courses on processing on skillshare, which is free for 2 months. 71 | 72 | [Programming Graphics I: Introduction to Generative Art](https://www.skillshare.com/classes/Programming-Graphics-I-Introduction-to-Generative-Art/782118657). This does _not_ teach in javascript but in Processing, which uses the Java language instead. However, if you LOVE the topic, you could skim these videos and still learn a lot. Normally I would recommend getting strong in ONE language \(JavaScript\) for the first year or two of your programming journey. 73 | 74 | * Mostly aimed at teachers: [Introduction to Computational Media with p5.js](https://nycdoe-cs4all.github.io/) has material for teachers to run a course. Students can find some interesting project ideas. 75 | * If you want to stick with processing.js and Khan Academy longer, there is [Advanced JS: Games and Visualizations](https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations). I haven't worked through this course, yet. 76 | 77 | ## Some more differences between Processing.js and p5.js 78 | 79 | As discussed above, there are some differences between Processing.js \(used in the Khan Academy environment\) and p5.js. Here are some more details of the differences. 80 | 81 | ### You must always define the `draw()` function 82 | 83 | * The `draw` function is not optional. 84 | * All drawing operations \(`fill()`, `ellipse()`, `rect()`, etc\) should go inside the `draw()` function. 85 | 86 | ### You can provide a `setup()` function for set-up 87 | 88 | It will be called before the first call to your `draw()` function. 89 | 90 | ### If you _don't_ want animation, you must call `noLoop()` 91 | 92 | Unlike Khan Academy's Processing.js, you must always define a `draw()` function, even if you don't want animation. `noLoop()` and `loop()` can be used to prevent or enable animation by repeated calls to the `draw()` function. The default is to animate. 93 | 94 | [Live Demo](https://www.openprocessing.org/sketch/812071): 95 | 96 | ```javascript 97 | var setup = function() { 98 | noLoop(); 99 | } 100 | 101 | var draw = function() { 102 | fill(random(255), random(255), random(255)); 103 | rect(50, 50, 400, 400); 104 | } 105 | ``` 106 | 107 | ### You can't call Processing.js functions at the top level 108 | 109 | You can't call functions like `random()`, `fill()`, `color()`, `rect()` at the top-level \(i.e. outside of the p5.js functions such `setup()`, `draw()`, `mousePressed()`, etc\). If you try to do this, you'll get an error such as `Uncaught ReferenceError: random is not defined` 110 | 111 | The editor at OpenProcessing.org is kind enough to add the following good advice - read your error messages! `Did you just try to use p5.js's random() function? If so, you may want to move it into your sketch's setup() function.` 112 | 113 | ### Global variables must be initialised in `setup()`, if they need p5.js functions 114 | 115 | If you want a _global_ variable to be initialised at random, using p5.js's `random()` function, you must do it in two parts: 116 | 117 | 1. Declare the variable `var xPos;` outside of the `setup()` function 118 | 2. Initialise the variable inside the `setup()` function. Example: `xPos = random(0, 400);` 119 | 120 | **GOOD CODE example** - do this if you need to initialise a global variable using `random()` or `color()` or `width` or `height`... 121 | 122 | ```javascript 123 | var xPos; 124 | 125 | var setup = function(){ 126 | xPos = random(0, 400); 127 | }; 128 | ``` 129 | 130 | **BAD CODE example** - this won't work 131 | 132 | ```javascript 133 | // Start of program 134 | var xPos = random(0, 400); // can't call random() outside of setup() or draw(), etc. 135 | 136 | var draw = function(){ 137 | rect(xPos, 100, 50, 50); 138 | }; 139 | ``` 140 | 141 | ### The default canvas is only 100, 100... 142 | 143 | However, you can make it bigger calling `createCanvas()` in `setup()`. 144 | 145 | [Live Demo of specifying canvas size](https://www.openprocessing.org/sketch/create): 146 | 147 | ```javascript 148 | var setup = function(){ 149 | createCanvas(windowWidth, windowHeight); 150 | } 151 | ``` 152 | 153 | p5.js provides global variables `windowWidth` and `windowHeight`, AND `width` and `height` which will hold the size of the canvas. 154 | 155 | ## Where's the documentation? 156 | 157 | The p5.js documentation is at [https://p5js.org/reference/](https://p5js.org/reference/). Each function has multiple examples of how it can be used. 158 | 159 | ## Other migration guides 160 | 161 | If you want to stick with Processing.js, Khan Academy have [this guide to using Processing.js outside Khan Academy](https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/advanced-development-tools/a/using-processingjs-outside-khan-academy). 162 | 163 | -------------------------------------------------------------------------------- /after-the-course/p5js-and-openprocessing-workshop.md: -------------------------------------------------------------------------------- 1 | # Workshop on migrating to p5.js 2 | 3 | ## \(Rough\) workshop outline - migrating to p5.js and openprocessing.org 4 | 5 | Bookmark [Neill's longer notes on migrating from khan academy's processing.js to p5.js](from-khan-academy-processingjs-to-p5js.md). You can read them at home. 6 | 7 | Make an account on [openprocessing.org](https://openprocessing.org) 8 | 9 | Create a "sketch" 10 | 11 | Run it, edit it 12 | 13 | Change colours, sizes, etc, for a couple of minutes 14 | 15 | rename it, save it 16 | 17 | [Browse the gallery](https://www.openprocessing.org/browse/#) 18 | 19 | Find two sketches you like, show them to your classroom neighbour. 20 | 21 | Follow [neill](https://www.openprocessing.org/user/135249/) and [ali](p5js-and-openprocessing-workshop.md) \(TODO: ali what user number?\) 22 | 23 | Join the class so we can share future work: [https://www.openprocessing.org/class/61910](https://www.openprocessing.org/class/61910) \(Ask Neill or Ali for the access code.\) 24 | 25 | Play with [this starting sketch](https://www.openprocessing.org/sketch/812085) 26 | 27 | * read the code - do you understand every line? 28 | * change something about it! 29 | * press fork/"create a fork" \(the equivalent of "spin-off"\) and save it. 30 | * Change the title to reflect your work. 31 | 32 | ### audio analysis demos 33 | 34 | Play with [this sketch processing audio from your microphone](https://www.openprocessing.org/sketch/812282) 35 | 36 | Play with and edit this \([simpler example of audio analysis](https://www.openprocessing.org/sketch/812284/)\). What could you animate from your khan academy projects, with the different energies of bass, mid, and treble? Size, speed, rotation, colour, words, position, direction... 37 | 38 | ### web cam demos 39 | 40 | Play with [this webcam-processing sketch](https://www.openprocessing.org/sketch/812361) and [this one, too](https://www.openprocessing.org/sketch/812359). The first has hardly any code. 41 | 42 | Play with [this posenet p5.js sketch on codepen](https://codepen.io/enz0/pen/wvBzoMN) - stand far back from the camera for best results! It is complicated, you don't need to understand it. 43 | 44 | #### Pose-recognition from webcam - demo 45 | 46 | \(This pose-recognition can't be done on openprocessing as it needs some other libraries \(ml5\) and openprocessing limits which libraries you can load.\) 47 | 48 | ### Bookmark Daniel Shiffman 49 | 50 | Subscribe to Daniel Shiffman's "coding train" channel! 51 | 52 | Add the recommended course ["Code! Programming with p5.js"](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA) to your list of stuff to watch. 53 | 54 | ### Documentation 55 | 56 | Find the documentation [https://p5js.org/reference/](https://p5js.org/reference/) 57 | 58 | Check out some examples - each function has multiple examples of how it can be used. 59 | 60 | ### Migrate one of your khan academy projects 61 | 62 | Create a new sketch, and bring your favourite project across from khan academy. 63 | 64 | You will need to consider [these notes about migrating from khan academy processing.js to p5.js](from-khan-academy-processingjs-to-p5js.md#differences-between-khan-academy-processingjs-and-p5js) 65 | 66 | ## Other starting points 67 | 68 | * If you really want to use codepen, here's a [p5.js starting "pen" in codepen](https://codepen.io/enz0/pen/vYEXyZr?editors=1010) 69 | * If you want to see the whole picture of html and javascript together, [here's a website project on glitch](https://glitch.com/~cyf-p5js-start) with html, css, and javascript files. 70 | 71 | -------------------------------------------------------------------------------- /lessons/README.md: -------------------------------------------------------------------------------- 1 | # Sessions 2 | 3 | -------------------------------------------------------------------------------- /lessons/after-the-course/README.md: -------------------------------------------------------------------------------- 1 | # After the course 2 | 3 | -------------------------------------------------------------------------------- /lessons/after-the-course/from-khan-academy-processingjs-to-p5js.md: -------------------------------------------------------------------------------- 1 | # Migrating from Processing.js to p5.js 2 | 3 | If you enjoyed using JavaScript to make drawings and animations, we recommend further study and play with the almost identical p5.js library. It's better. 4 | 5 | ## Where to start coding with p5.js 6 | 7 | * We recommend the site called [OpenProcessing](https://www.openprocessing.org/) - it makes it easy to click ["new sketch"](https://www.openprocessing.org/sketch/create) and start immediately 8 | * Alternatively, [here's a starting sketch](https://www.openprocessing.org/sketch/812085) that defines functions the way you have learned so far 9 | * If you want to use CodePen, here's a [p5.js starting "pen"](https://codepen.io/enz0/pen/vYEXyZr?editors=1010) 10 | * If you want to see the whole picture of how you could use this on a website, [here's a website project on Glitch](https://glitch.com/~cyf-p5js-start) with HTML, CSS, and JavaScript files 11 | * [A tutorial for a random words poster](https://www.openprocessing.org/sketch/812093) which works through a project using p5.js 12 | 13 | ## Why change? 14 | 15 | * Khan Academy platform is not stable for complicated programs 16 | * Khan Academy doesn't "feel professional" or "polished" 17 | * The Processing.js library used by Khan Academy has been retired 18 | * p5.js is much more widely used than Processing.js 19 | * p5.js has more and better documentation and tutorials 20 | * p5.js is more advanced and more powerful than Processing.js. You can make sketches that: 21 | * Process video from the webcam 22 | * [Process audio from your microphone](https://www.openprocessing.org/sketch/812282) 23 | * [Simplest example](https://www.openprocessing.org/sketch/812284/) 24 | * Load and show 3d models 25 | * Interact with all sorts of other interesting JavaScript libraries 26 | * Random example: [p5.js pose-detection with using PoseNet](https://codepen.io/enz0/full/wvBzoMN) 27 | * You can use _modern_ javascript language features, which make things nicer 28 | 29 | ### Pick one element at random from an array 30 | 31 | However, some of my favourite differences are very, very small. Here's one: If you have an array, you can pick one element of it at random, simply by passing the array as a parameter to the `random()` function. 32 | 33 | Example: 34 | 35 | ```javascript 36 | // (inside your draw() function...) 37 | 38 | var colorNames = ["maroon", "skyblue", "whitesmoke"]; 39 | var chosenColor = random(colorNames); 40 | fill(chosenColor); 41 | 42 | var words = ["code", "your", "future"]; 43 | var chosenWord = random(words); 44 | text(chosenWord, 100, 100); 45 | ``` 46 | 47 | ## Best place to learn p5.js 48 | 49 | We recommend Daniel Shiffman's Youtube course: ["Code! Programming with p5.js"](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA). 50 | 51 | ## What's OpenProcessing.org? 52 | 53 | The above course introduces a website called "p5.js web editor" which allows you to quickly write your projects and test them out. It's ok, but we recommend a different website which does the same thing: [https://www.openprocessing.org/](https://www.openprocessing.org/). 54 | 55 | It has [a huge gallery of work by other artists](https://www.openprocessing.org/browse/), and you can see all of their code to learn from! 56 | 57 | ### When you read others' code and it makes no sense... 58 | 59 | **Don't Panic!** Do not be worried when you find a project that looks amazing but then you look at the code and can't understand it - this is normal. 60 | 61 | * These projects can become VERY complex and the artists often aren't very concerned about how easy their code is to read 62 | * Code reading is a skill you have to work on 63 | * Take it slow. Study simpler projects to start with 64 | 65 | ## Other courses 66 | 67 | In addition to ["Code! Programming with p5.js"](from-khan-academy-processingjs-to-p5js.md#best-place-to-learn-p5.js)... 68 | 69 | * The creators of processing have [a p5.js course on kadenze.com - "Introduction to Programming for the Visual Arts with p5.js"](https://www.kadenze.com/courses/introduction-to-programming-for-the-visual-arts-with-p5-js-vi/info) 70 | * Joshua Davis has some courses on processing on skillshare, which is free for 2 months. 71 | 72 | [Programming Graphics I: Introduction to Generative Art](https://www.skillshare.com/classes/Programming-Graphics-I-Introduction-to-Generative-Art/782118657). This does _not_ teach in javascript but in Processing, which uses the Java language instead. However, if you LOVE the topic, you could skim these videos and still learn a lot. Normally I would recommend getting strong in ONE language \(JavaScript\) for the first year or two of your programming journey. 73 | 74 | * Mostly aimed at teachers: [Introduction to Computational Media with p5.js](https://nycdoe-cs4all.github.io/) has material for teachers to run a course. Students can find some interesting project ideas. 75 | * If you want to stick with processing.js and Khan Academy longer, there is [Advanced JS: Games and Visualizations](https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations). I haven't worked through this course, yet. 76 | 77 | ## Some more differences between Processing.js and p5.js 78 | 79 | As discussed above, there are some differences between Processing.js \(used in the Khan Academy environment\) and p5.js. Here are some more details of the differences. 80 | 81 | ### You must always define the `draw()` function 82 | 83 | * The `draw` function is not optional. 84 | * All drawing operations \(`fill()`, `ellipse()`, `rect()`, etc\) should go inside the `draw()` function. 85 | 86 | ### You can provide a `setup()` function for set-up 87 | 88 | It will be called before the first call to your `draw()` function. 89 | 90 | ### If you _don't_ want animation, you must call `noLoop()` 91 | 92 | Unlike Khan Academy's Processing.js, you must always define a `draw()` function, even if you don't want animation. `noLoop()` and `loop()` can be used to prevent or enable animation by repeated calls to the `draw()` function. The default is to animate. 93 | 94 | [Live Demo](https://www.openprocessing.org/sketch/812071): 95 | 96 | ```javascript 97 | var setup = function() { 98 | noLoop(); 99 | } 100 | 101 | var draw = function() { 102 | fill(random(255), random(255), random(255)); 103 | rect(50, 50, 400, 400); 104 | } 105 | ``` 106 | 107 | ### You can't call Processing.js functions at the top level 108 | 109 | You can't call functions like `random()`, `fill()`, `color()`, `rect()` at the top-level \(i.e. outside of the p5.js functions such `setup()`, `draw()`, `mousePressed()`, etc\). If you try to do this, you'll get an error such as `Uncaught ReferenceError: random is not defined` 110 | 111 | The editor at OpenProcessing.org is kind enough to add the following good advice - read your error messages! `Did you just try to use p5.js's random() function? If so, you may want to move it into your sketch's setup() function.` 112 | 113 | ### Global variables must be initialised in `setup()`, if they need p5.js functions 114 | 115 | If you want a _global_ variable to be initialised at random, using p5.js's `random()` function, you must do it in two parts: 116 | 117 | 1. Declare the variable `var xPos;` outside of the `setup()` function 118 | 2. Initialise the variable inside the `setup()` function. Example: `xPos = random(0, 400);` 119 | 120 | **GOOD CODE example** - do this if you need to initialise a global variable using `random()` or `color()` or `width` or `height`... 121 | 122 | ```javascript 123 | var xPos; 124 | 125 | var setup = function(){ 126 | xPos = random(0, 400); 127 | }; 128 | ``` 129 | 130 | **BAD CODE example** - this won't work 131 | 132 | ```javascript 133 | // Start of program 134 | var xPos = random(0, 400); // can't call random() outside of setup() or draw(), etc. 135 | 136 | var draw = function(){ 137 | rect(xPos, 100, 50, 50); 138 | }; 139 | ``` 140 | 141 | ### The default canvas is only 100, 100... 142 | 143 | However, you can make it bigger calling `createCanvas()` in `setup()`. 144 | 145 | [Live Demo of specifying canvas size](https://www.openprocessing.org/sketch/create): 146 | 147 | ```javascript 148 | var setup = function(){ 149 | createCanvas(windowWidth, windowHeight); 150 | } 151 | ``` 152 | 153 | p5.js provides global variables `windowWidth` and `windowHeight`, AND `width` and `height` which will hold the size of the canvas. 154 | 155 | ## Where's the documentation? 156 | 157 | The p5.js documentation is at [https://p5js.org/reference/](https://p5js.org/reference/). Each function has multiple examples of how it can be used. 158 | 159 | ## Other migration guides 160 | 161 | If you want to stick with Processing.js, Khan Academy have [this guide to using Processing.js outside Khan Academy](https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/advanced-development-tools/a/using-processingjs-outside-khan-academy). 162 | 163 | -------------------------------------------------------------------------------- /lessons/after-the-course/p5js-and-openprocessing-workshop.md: -------------------------------------------------------------------------------- 1 | # Workshop on migrating to p5.js 2 | 3 | ## \(Rough\) workshop outline - migrating to p5.js and openprocessing.org 4 | 5 | Bookmark [Neill's longer notes on migrating from khan academy's processing.js to p5.js](from-khan-academy-processingjs-to-p5js.md). You can read them at home. 6 | 7 | Make an account on [openprocessing.org](https://openprocessing.org) 8 | 9 | Create a "sketch" 10 | 11 | Run it, edit it 12 | 13 | Change colours, sizes, etc, for a couple of minutes 14 | 15 | rename it, save it 16 | 17 | [Browse the gallery](https://www.openprocessing.org/browse/#) 18 | 19 | Find two sketches you like, show them to your classroom neighbour. 20 | 21 | Follow [neill](https://www.openprocessing.org/user/135249/) and [ali](p5js-and-openprocessing-workshop.md) \(TODO: ali what user number?\) 22 | 23 | Join the class so we can share future work: [https://www.openprocessing.org/class/61910](https://www.openprocessing.org/class/61910) \(Ask Neill or Ali for the access code.\) 24 | 25 | Play with [this starting sketch](https://www.openprocessing.org/sketch/812085) 26 | 27 | * read the code - do you understand every line? 28 | * change something about it! 29 | * press fork/"create a fork" \(the equivalent of "spin-off"\) and save it. 30 | * Change the title to reflect your work. 31 | 32 | ### audio analysis demos 33 | 34 | Play with [this sketch processing audio from your microphone](https://www.openprocessing.org/sketch/812282) 35 | 36 | Play with and edit this \([simpler example of audio analysis](https://www.openprocessing.org/sketch/812284/)\). What could you animate from your khan academy projects, with the different energies of bass, mid, and treble? Size, speed, rotation, colour, words, position, direction... 37 | 38 | ### web cam demos 39 | 40 | Play with [this webcam-processing sketch](https://www.openprocessing.org/sketch/812361) and [this one, too](https://www.openprocessing.org/sketch/812359). The first has hardly any code. 41 | 42 | Play with [this posenet p5.js sketch on codepen](https://codepen.io/enz0/pen/wvBzoMN) - stand far back from the camera for best results! It is complicated, you don't need to understand it. 43 | 44 | #### Pose-recognition from webcam - demo 45 | 46 | \(This pose-recognition can't be done on openprocessing as it needs some other libraries \(ml5\) and openprocessing limits which libraries you can load.\) 47 | 48 | ### Bookmark Daniel Shiffman 49 | 50 | Subscribe to Daniel Shiffman's "coding train" channel! 51 | 52 | Add the recommended course ["Code! Programming with p5.js"](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA) to your list of stuff to watch. 53 | 54 | ### Documentation 55 | 56 | Find the documentation [https://p5js.org/reference/](https://p5js.org/reference/) 57 | 58 | Check out some examples - each function has multiple examples of how it can be used. 59 | 60 | ### Migrate one of your khan academy projects 61 | 62 | Create a new sketch, and bring your favourite project across from khan academy. 63 | 64 | You will need to consider [these notes about migrating from khan academy processing.js to p5.js](from-khan-academy-processingjs-to-p5js.md#differences-between-khan-academy-processingjs-and-p5js) 65 | 66 | ## Other starting points 67 | 68 | * If you really want to use codepen, here's a [p5.js starting "pen" in codepen](https://codepen.io/enz0/pen/vYEXyZr?editors=1010) 69 | * If you want to see the whole picture of html and javascript together, [here's a website project on glitch](https://glitch.com/~cyf-p5js-start) with html, css, and javascript files. 70 | 71 | -------------------------------------------------------------------------------- /lessons/lesson-1.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Algorithms & Intro to JavaScript 3 | --- 4 | 5 | # Week 2 6 | 7 | ## Warm up activity \(30 minutes\) 8 | 9 | A picture tells a story: Let's start our introductions with an image 10 | 11 | 1. Find an image online of an object that represents you or why are are on the course. 12 | 2. Add the image to our Slack thread and an explanation of why you chose that particular object. 13 | 3. Once you have completed your post, look at what other people have posted. 14 | 4. When you find any interesting images and ask that person a follow up question about it. 15 | 5. If someone asks a question about your picture. Make sure you reply to their question with an answer 16 | 17 | ## What's your name? 18 | 19 | Let's make sure we know each other! Make sure your name is visible on Zoom. You can change your name by clicking the three dots on the right hand corner and clicking 'rename' . 20 | 21 | If you are a CYF volunteer please add 'Vol or Volunteer' after your name. 22 | 23 | ## Shout out your questions \(10 minutes\) 24 | 25 | \_\_[_Instructors see here for instructions_](../teacher-resources/instructor-notes-1.md#shout-out-questions)\_\_ 26 | 27 | Let's make a list of all of the programming questions we'd like to get answered today, and put them on our virtual whiteboard. 28 | 29 | We like to use [Miro](https://miro.com/login/). 30 | 31 | 1. Log into Miro \(your instructor will give you the link for your Miro Board\) 32 | 2. Find the sticky notes on the board. 33 | 3. Find the note you wrote your name on for your coursework assignment. 34 | 4. Write your question on your note \(you must ask a question\) 35 | 5. 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. 36 | 37 | ## Solving problems \(60 minutes\) 38 | 39 | {% hint style="warning" %} 40 | Volunteers, please [**read the setup**](../teacher-resources/instructor-notes-1.md#solving-problems-workshop) and resources for this workshop in [Teacher Resource](../teacher-resources/)s so your trainees can get the most out of it. Try playing it beforehand too! 41 | {% endhint %} 42 | 43 | Problem solving is a critical skill for programmers, including for experts. Often programmers spend most of their day solving problems in their code. Learning how to solve problems efficiently is an extremely useful skill. 44 | 45 | To help develop your problem solving skills, we'll play a fun game in small groups called... 46 | 47 | ### **Blockers!** 48 | 49 | [**Online Version of this game**](https://www.dr-mikes-math-games-for-kids.com/online-traffic-jam-game.html) **** 50 | 51 | #### **Objectives** 52 | 53 | * Share your screen 54 | * Identify the blocker 55 | * Use driver and navigator pattern 56 | * Break down a problem into steps 57 | * Negotiate a strategy with your team 58 | * Follow directions 59 | 60 | ### **Exercise - 30 minutes** 61 | 62 | In groups or breakout rooms of 4 trainees maximum. 63 | 64 | One person will share their screen and be the **driver**. The driver can only move the pieces where you are told by the navigators. The driver cannot make any decisions! 65 | 66 | The others will be the **navigators**. Together, the navigators must figure out a strategy to unblock the car, and tell the driver how to do it! 67 | 68 | **Each person must drive,** so set a timer for ****[**5 minutes per round**](https://www.google.com/search?q=set+a+timer+for+5+minutes) ****and then swap. 69 | 70 | {% hint style="info" %} 71 | TAs can only be passengers. No driving or navigating. TAs may ask questions but not answer them. TAs will make sure the driver and navigators are following their roles correctly. 72 | {% endhint %} 73 | 74 | ### **Back in the main room - 15 minutes** 75 | 76 | What did people think about this game? Let’s go around and each group share **one thing** they noticed about it. 77 | 78 | ## "Algorithm Recipe" Review \(30 Minutes\) 79 | 80 | Last week you should have written a "algorithm recipe". The instructor will pick out a few of the best to read with the rest of the class. We'll see if there are any missing steps! 81 | 82 | ## Effective Communication \(1 Hour\) 83 | 84 | Working remotely \(online\) is different from working together face to face. We will look at how communication works online and get some tips on how to be more effective on this course. 85 | 86 | {% embed url="https://drive.google.com/file/d/1oaseUqyttdETn\_wJiB6SLuu115aLwN5f/view?usp=sharing" %} 87 | 88 | 89 | 90 | ## Presentations \(30 minutes\) 91 | 92 | For last week's coursework, you and a partner will have made a presentation about something you learned in the last week. Now is your chance to present it! We'll break into small groups take turns to present to the rest of your group for **8 minutes**. 93 | 94 | Remember that communicating information to others is a really important skill for programmers. Here are some tips for your presentation: 95 | 96 | * Look at your camera. Not the squares of faces on your screen. It will look like you are talking directly to your audience 97 | * Make sure you are not on mute 98 | * Speak clearly - check if everyone can hear you 99 | * Try to make it fun! 100 | * Stick to the time. Make sure each of you speak equally. The volunteer will cut you off at 8 minutes! 101 | 102 | ## Coursework In Perspective \(20 minutes\) 103 | 104 | \_\_[_Instructors see here for instructions_](../teacher-resources/instructor-notes-1.md#coursework-in-perspective)\_\_ 105 | 106 | Although the block-based coding you practised at home solved only simple problems with a simple language, we'll look briefly at four concepts you used which are also at the heart of professional coding. 107 | 108 | ## Coursework Time \(120 minutes\) 109 | 110 | ### Help with Coursework Exercises 111 | 112 | This is your opportunity to ask questions about last week's assignments. If you would like some assistance on any of the exercises, the teaching assistants will be available to help. 113 | 114 | ### 1-to-1 programming problem with an instructor 115 | 116 | Whilst you are getting help with your Coursework exercises, each student will have a work with one of the instructors to solve a programming problem using the Code.org block-programming environment. 117 | 118 | ## Feedback 119 | 120 | To make our course better we love to hear your feedback. Please spend two minutes completing this form. 121 | 122 | [Class Feedback Form](https://docs.google.com/forms/d/e/1FAIpQLScq8Zgr0pz7aMDj0D768eCpW798XgtDsKfpA6BquqK5Hdtj4A/viewform?embedded=true&entry.1672476057=Fundamentals&entry.74981796=Week+2) 123 | 124 | ## Coursework Assignments 125 | 126 | ### 1. Khan Academy: Intro to JS 127 | 128 | We will be studying the [Khan Academy](https://www.khanacademy.org) Intro to JS course. This will give you an introduction to the JavaScript programming language which we will be using for the rest of the syllabus. To get set up follow these instructions: 129 | 130 | 1. Follow the instructions for registering a Khan Academy account provided by the instructors 131 | 2. Click on Courses under `My Stuff` 132 | 3. Choose `Adult learner` and go to the next step 133 | 4. Choose `Computer Programming` and continue 134 | 5. To the right of `Intro to JS: Drawing and Animation`, press Start 135 | 6. Click the "Start" button for the "What is Programming?" lesson 136 | 7. Read the instructions carefully and try to complete the exercises 137 | 8. Complete as many lessons as you can **AT LEAST UP TO** the ["Text and Strings" section](https://www.khanacademy.org/computing/computer-programming/programming#text-basics). You can **SKIP** the "Becoming a community coder" section. 138 | 9. As soon as you complete any "project", make sure you submit it for evaluation immediately, to get feedback. 139 | 140 | There will be some time in class to start the first exercises. Let the instructors know if you get stuck. 141 | 142 | #### No headphones? Read the subtitles or video transcript 143 | 144 | If you do not have headphones to watch the videos you can click on "CC" \(subtitles/closed captions\) in the video window, or underneath the video on "Transcript". 145 | 146 | ### 2. Learning How to Learn course \(3 hours\) 147 | 148 | Continue to **Week 2** of the [Learning How to Learn course](https://www.coursera.org/learn/learning-how-to-learn). What kind of communicator are you? 149 | 150 | 1. Work through the assignments for **Week 2** of the course. It should take around 3 hours to complete. 151 | 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. 152 | 153 | ![](../.gitbook/assets/screenshot-2021-05-18-at-13.20.34.png) 154 | 155 | ### OR this if you have already completed the Learning How to Learn course 156 | 157 | ### 2a. Learning Online: Communicating and Collaborating 158 | 159 | [Learning Online: Communicating and Collaborating](https://www.futurelearn.com/courses/learning-and-collaborating/) is an online course on Future Learn site that teaches you how to become an effective online learner and develop your online communication skills when working with others. 160 | 161 | 1. Click the "Join course for Free" button and sign up for an account. 162 | 2. You can do this with your Google account if you want 163 | 3. Work through **Week 1** of the course. It should take around **2 hours** to complete. 164 | 4. In each of the Have your say sections, write your comments in a thread on Slack _**not**_ in the comments section on Future Learn. 165 | 166 | 167 | 168 | > #### Have your say on How can communication help you learn?: 169 | > 170 | > What’s your experience? Think about the times you’ve worked together with others and communicated with others to help in your learning. 171 | > 172 | > * Do you agree with the points above? 173 | > * Can you think of any other reasons why online conversations help you as a learner? 174 | > 175 | > Share your thoughts in a thread on Slack. 176 | > 177 | > 178 | > 179 | > #### Have your say on What is Netiqette?: 180 | > 181 | > Think about what you’ve seen in this video. How do your views compare? 182 | > 183 | > * What is your understanding of netiquette? 184 | > * Do you have an example to share? 185 | > 186 | > Share your thoughts in a thread on Slack. 187 | > 188 | > #### Have your say on Communicating online: 189 | > 190 | > Have you experienced anything like these situations in your own online interactions? 191 | > 192 | > What kind of situations will come up during this Fundamentals course? 193 | > 194 | > Share your thoughts in a thread on Slack. 195 | > 196 | > 197 | > #### Apply your learning 198 | > 199 | > The topic of the discussion is: 200 | > 201 | > > **Do you think it is right that people can post anonymously online?** 202 | > 203 | > Think carefully about your views on this topic. You may want to share the question with people in your social networks, to get their views. You can use the course tag to see what other people are saying. 204 | > 205 | > If you are posting on Twitter, tag your posts with [\#FLCommunicatingOnline](https://twitter.com/search?q=%23FLcommunicatingOnline) and [@uoldigital](https://twitter.com/uoldigital?lang=en). 206 | > 207 | > Remember to apply your learning from this course when talking to others on your social networks. 208 | > 209 | > When contributing to the conversation, you might want to consider points such as: 210 | > 211 | > * Should people be held accountable for comments left online? 212 | > * When \(if ever\) might it be important to be able to post anonymously? 213 | > * Is it appropriate that many posts remain online forever? 214 | > * Should an online post be treated the same as a face-to-face comment? 215 | > 216 | > > **Taking part in the discussion** 217 | > > 218 | > > Once you have thought about your answer, and potentially heard from others, summarise your views on a thread in Slack. 219 | > > 220 | > > Remember that this is a discussion, so as well as making your own comment, read and respond to other people’s views: 221 | > > 222 | > > * You can use reactions on posts you find interesting or useful. 223 | > > * Try to reply meaningfully to at least two other comments. 224 | 225 | ![](../.gitbook/assets/screenshot-2021-05-12-at-11.20.25.png) 226 | 227 | ### 3. How to improve your workplace communication 228 | 229 | As we work together online it can be even more tricky to communicate effectively. Learn three ways you can improve how you send and receive messages here at CodeYourFuture and in your other workplaces. 230 | 231 | 1. Read this [article on communication](https://www.loom.com/blog/improve-your-workplace-communication) 232 | 2. Watch the embedded video Karina's Communication and Work Style 233 | 3. After reading and watching the video, go back to **Step two: Determine how you communicate.** 234 | 4. Think about the scenarios they present in this section 235 | 5. Write down how you would approach each scenario 236 | 6. Think about your preferred ways of communicating, the communication tools you rely on, and the things that annoy you about other's communication. 237 | 7. Using your answers for the above, try to write your own guide to your Communication style \(just this section, not your whole user manual! \). Post your guide in your studetn area on Google Classroom You can also have a go at recording a Loom video if you choose. 238 | 239 | ### 4. Organise a study session 240 | 241 | Working together is the best way for you to learn. Teaching someone else helps to strengthen your knowledge. And getting help from your fellow students saves you time and keeps you from becoming a passive learner. 242 | 243 | You will be randomly assigned a group using [random list team generator](https://www.randomlists.com/team-generator) 244 | 245 | In small groups of 3, organise a study session to work on one piece of coursework. 246 | 247 | As a group you must decide on: 248 | 249 | 1. The topic of the call 250 | 2. The time of call \(give people a few hours to get ready. Remember Slack is asynchronous communication!\) 251 | 3. Who will create the link to Google Meet where you will have the call. 252 | 4. Who will open \(start\) the call in Google Meet. 253 | 254 | Once you have decided the above: 255 | 256 | 1. Make an announcement in Slack with your topic, time and link to call \(anyone in can join even if they are not in your group. Just keep to just one topic and max 5 -6 people in a call\) 257 | 2. Ask people to react if they want to attend 258 | 3. If there are too many people - what should you do? Decide on a plan of action 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | -------------------------------------------------------------------------------- /lessons/lesson-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Live Coding & Visual Coding 3 | --- 4 | 5 | # Week 3 6 | 7 | ## Introductions \(30 minutes\) 8 | 9 | Let's make sure we know each other! 10 | 11 | ### Warm up game 12 | 13 | Online icebreaker 14 | 15 | ## Shout out your questions \(10 minutes\) 16 | 17 | \_\_[_Instructors see here for instructions_](https://fundamentals.codeyourfuture.io/teacher-resources/instructor-notes-1#shout-out-questions) 18 | 19 | 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. 20 | 21 | 1. Log into Miro \(your instructor will give you the link for your Miro Board\) 22 | 2. Find the sticky notes on the board. 23 | 3. Write your question on a sticky note \(you must ask a question\) 24 | 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. 25 | 26 | ## Getting Unstuck \(30 minutes\) 27 | 28 | \_\_[_Instructors see here for instructions_](https://fundamentals.codeyourfuture.io/teacher-resources/instructor-notes-2#getting-unstuck) 29 | 30 | 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. 31 | 32 | 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. 33 | 34 | ## Live Coding \(60 minutes\) 35 | 36 | \_\_[_Instructors see here for instructions_](https://fundamentals.codeyourfuture.io/teacher-resources/instructor-notes-2#live-coding) 37 | 38 | 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. 39 | 40 | Can you spot the instructor's coding mistakes before they do? \(There will definitely be some, that is normal!\) 41 | 42 | 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! 43 | 44 | _Tip_: A quiet class with no questions or suggestions is a difficult class to teach 45 | 46 | ## Present Your Favourite Project \(30 minutes\) 47 | 48 | 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: 49 | 50 | * What you added to it 51 | * What was difficult 52 | * What you like and don't like about it 53 | * What you would add if you had time 54 | * Any parts of the code you still don't understand and might want help with 55 | 56 | With your group, find a quiet space, and set a stopwatch for 2 minutes and present. Here are some tips: 57 | 58 | * Present to your classmates, not just to the volunteer 59 | * Cover the above points 60 | * Speak clearly 61 | * Face the people you're talking to, as much as possible. Don't just face the screen 62 | * Try to make it fun! 63 | * Stick to the time. The volunteer will cut you off at 2 minutes! 64 | * Don't go into too much detail on one point - 2 minutes is NOT much time at all 65 | 66 | ## Improve Your Favourite Khan Academy Project \(80 minutes\) 67 | 68 | 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! 69 | 70 | ### Paired Programming 71 | 72 | [_Instructors see here for instructions_](https://fundamentals.codeyourfuture.io/teacher-resources/instructor-notes-2#pairing)\_\_ 73 | 74 | 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. 75 | 76 | 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: 77 | 78 | * 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\) 79 | * _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: 80 | * "Well, I'd like to add a column of bubbles above each fish." 81 | * "Yes, I like that idea" 82 | * "But let's not try to animate them, at least not in this first task?" 83 | * "Yep, let's keep it simple! Once we've got them showing up correctly, we can decide what's next!" 84 | * "So, just like.. 5 bubbles spaced out in a vertical line above the front of each fish?" 85 | * "Let's do it! :\)" 86 | * ... they are successful 87 | * "hmm, maybe let's add a little randomness to their position so it looks more natural" 88 | * "ooh, sounds good. i don't know how to do that" 89 | * "well, it's your turn on the keyboard now, anyway. i'll talk you through it. do you know what the random\(\) function does?" 90 | * ... 91 | * Switch between _driver_ and _navigator_ roles every 10 minutes 92 | * The "driver" is the person typing on the keyboard, just thinking about what needs to be written 93 | * The "navigator" reviews what the driver is doing and is thinking about to write next 94 | * Don't dominate - this is teamwork 95 | * Even when you're in charge of the keyboard you are not in charge of all the decisions 96 | * Try to find agreement with your partner 97 | * 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 98 | * Defend yourself - some partners will try to dominate and rule the keyboard or dictate every decision 99 | * Make sure you get your turn at the keyboard, and speak up when you have ideas 100 | * 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 101 | * Take responsibility for gaining that understanding, and ask for help from your partner in getting there 102 | 103 | #### I'm stressing out! 104 | 105 | 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. 106 | 107 | 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. 108 | 109 | #### Reflect on pair-programming 110 | 111 | * two minutes 112 | * easy/hard? 113 | * advantages? disadvantages? 114 | * any tips? 115 | * in perspective: this happens in industry and in coding interviews. we'll keep practicing. 116 | 117 | 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. 118 | 119 | #### Super important rule for the future 120 | 121 | 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. 122 | 123 | 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. 124 | 125 | ### 1-to-1 programming problem with an instructor 126 | 127 | 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! 128 | 129 | ## Feedback 130 | 131 | To make our course better we love to hear your feedback. Please spend two minutes completing this form. 132 | 133 | [Class Feedback Form](https://docs.google.com/forms/d/e/1FAIpQLScq8Zgr0pz7aMDj0D768eCpW798XgtDsKfpA6BquqK5Hdtj4A/viewform?embedded=true&entry.1672476057=Fundamentals&entry.74981796=Week+3) 134 | 135 | ## Coursework 136 | 137 | 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. 138 | 139 | ### 1\) Khan Academy: Intro to JS 140 | 141 | Continue to work on the [Khan Academy: Intro to JS course](https://www.khanacademy.org/computing/computer-programming/programming). 142 | 143 | First, make sure that you have completed everything up to the "Text and Strings" section. 144 | 145 | If you have already done that, then you should continue **AT LEAST UP TO** the ["Writing Clean Code" section](https://www.khanacademy.org/computing/computer-programming/programming#writing-clean-code). 146 | 147 | ### 2\) Learning How to Learn course \(4 hours\) 148 | 149 | Continue to **Week 3** of the [Learning How to Learn course](https://www.coursera.org/learn/learning-how-to-learn). It should take around 4 hours to complete. 150 | 151 | ### OR this if you have already completed the Learning How to Learn course 152 | 153 | ### 2a\) Learning Online: Communicating and Collaborating \(2 hours\) 154 | 155 | Work through **Week 2** of the [Learning Online: Communicating and Collaborating](https://www.futurelearn.com/courses/learning-and-collaborating/) course. It should take around 2 hours to complete. 156 | 157 | In each of the Have your say sections, write your comments in a thread on Slack _**not**_ in the comments section on Future Learn. 158 | 159 | 160 | > #### Have your say on How can communication help you learn?: 161 | > 162 | > What’s your experience? Think about the times you’ve worked together with others and communicated with others to help in your learning. 163 | > 164 | > * Do you agree with the points above? 165 | > * Can you think of any other reasons why online conversations help you as a learner? 166 | > 167 | > Share your thoughts in a thread on Slack. 168 | > 169 | > 170 | > 171 | > #### Have your say on What is Netiqette?: 172 | > 173 | > Think about what you’ve seen in this video. How do your views compare? Share your responses to these questions in the Comments section: 174 | > 175 | > * What is your understanding of netiquette? 176 | > * Do you have an example to share? 177 | > 178 | > Share your thoughts in a thread on Slack. 179 | 180 | ![](../.gitbook/assets/screenshot-2021-05-12-at-11.20.25.png) 181 | 182 | -------------------------------------------------------------------------------- /lessons/lesson-3.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'More JavaScript, Reflection & Wrapping Up' 3 | --- 4 | 5 | # Week 4 6 | 7 | ## Introductions \(30 minutes\) 8 | 9 | Let's make sure we know each other! Ask for a name tag if you don't already have one. 10 | 11 | ### Warm up game 12 | 13 | Some students will teach Zip-Zap-Boing to the others \(face to face class\). 14 | 15 | ## Shout out your questions \(10 minutes\) 16 | 17 | 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. 18 | 19 | ## Getting unstuck \(30 minutes\) 20 | 21 | 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. 22 | 23 | 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. 24 | 25 | ## Live Coding \(60 minutes\) 26 | 27 | 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. 28 | 29 | Can you spot the instructor's coding mistakes before they do? \(There will definitely be some, that is normal!\) 30 | 31 | 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! 32 | 33 | _Tip_: A quiet class with no questions or suggestions is a difficult class to teach 34 | 35 | ## Present Your Favourite Project \(30 minutes\) 36 | 37 | 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: 38 | 39 | * What you added to it 40 | * What was difficult 41 | * What you like and don't like about it 42 | * What you would add if you had time 43 | * Any parts of the code you still don't understand and might want help with 44 | 45 | With your group, find a quiet space, and set a stopwatch for 2 minutes and present. 46 | 47 | If you need a reminder of how to give a good presentation, see [the tips from lesson 3](https://github.com/CodeYourFuture/fundamentals-course/tree/223d67a828fe3554aa7bcceb3bbc6f125a390e49/lesson-4/lesson-3.md#present-your-favourite-project-to-your-classmates.md) 48 | 49 | ## Improve your Khan Academy Projects with Arrays and Objects \(80 minutes\) 50 | 51 | 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! 52 | 53 | 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](https://github.com/CodeYourFuture/fundamentals-course/tree/223d67a828fe3554aa7bcceb3bbc6f125a390e49/lesson-4/post-khan-academy-challenges.md). 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! 54 | 55 | ### Pair-programming \(2 students\) 56 | 57 | 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. 58 | 59 | If you need a reminder on how to pair-program effectively, see the [the notes from lesson 3](https://github.com/CodeYourFuture/fundamentals-course/tree/223d67a828fe3554aa7bcceb3bbc6f125a390e49/lesson-4/lesson-3.md#pair-programming). 60 | 61 | ### 1-to-1 programming problem with an instructor 62 | 63 | \_\_[_Instructors see here for instructions_](../teacher-resources/instructor-notes-3.md#1-to-1-assessment)\_\_ 64 | 65 | 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! 66 | 67 | ## Kahoot - again! \(15 minutes\) 68 | 69 | \_\_[_Instructors see here for instructions_](../teacher-resources/instructor-notes-3.md#kahoot)\_\_ 70 | 71 | Let's do the first Kahoot quiz again, to find out if you feel any differently about programming now. 72 | 73 | ## Reflection: How is all this relevant in the real world? \(30 minutes\) 74 | 75 | \_\_[_Instructors see here for instructions_](../teacher-resources/instructor-notes-3.md#course-reflection)\_\_ 76 | 77 | Looking back at the [concept roadmap](../other-resources/roadmap-of-concepts.md), believe it or not, you've been learning the basics of programming, relevant to a whole range of coding jobs. 78 | 79 | Now the instructors will look at specific elements you've learned about and how they're relevant elsewhere. 80 | 81 | ### Different JavaScript environments 82 | 83 | Outside of the Khan Academy course platform, you'll see some differences in JavaScript: 84 | 85 | * `let` and `const` used instead of `var` 86 | * Functions can be created many ways \(the Khan Academy way is uncommon\) 87 | * More features to learn about 88 | * ... 89 | 90 | ## Other Free Resources 91 | 92 | 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. 93 | 94 | See [Free Resources](../other-resources/free-resources.md) for this content 95 | 96 | ## Coursework 97 | 98 | 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. 99 | 100 | ### 1\) Khan Academy: Intro to JS 101 | 102 | Finish the [Khan Academy: Intro to JS course](https://www.khanacademy.org/computing/computer-programming/programming). 103 | 104 | **IMPORTANT!!** 105 | 106 | You should **SKIP** the "Object-Orientated Design" section. It is out-of-date and confusing! 107 | 108 | ### 2\) Learning How to Learn course 109 | 110 | Continue to **Week 4** of the [Learning How to Learn course](https://www.coursera.org/learn/learning-how-to-learn). 111 | 112 | 1. Work through the assignmets for **Week 4** of the course. It should take around 4 hours to complete. 113 | 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. 114 | 3. Optional Further readings and videos are not required. You may choose to do them to further your learning. 115 | 4. Honors Assignments are required!!! You will need to complete your: 116 | 117 | **Final Project on Learning** 118 | 119 | * \*\*\*\*[**Final Project**: Learn by teaching others how to learn. ](https://www.coursera.org/learn/learning-how-to-learn/peer/vLE3U/final-project-learn-by-teaching-others-how-to-learn) 120 | * [**Review 3 of Your Peers**](https://www.coursera.org/learn/learning-how-to-learn/peer/vLE3U/final-project-learn-by-teaching-others-how-to-learn/give-feedback) 121 | 122 | ### 4\) Join your local coding community 123 | 124 | 1. In small groups, go to meetup.com and research tech-related meetups in your local community. 125 | 2. Discuss which ones are most relevant to you right now, then sign up to meetup.com 126 | 3. Attend one event in the next month. 127 | 128 | ### 5\) Crowd source inspirational/ informative podcasts 129 | 130 | 1. Run a poll on the most popular free podcast platform that the group uses. 131 | 2. Research inspirational / informative podcasts 132 | 3. As a class make one collaborative playlist on the most popular platform you use and add at least 2 podcasts to the list. 133 | 134 | ### 6\) \(Optional\) Continuing with JavaScript Drawing and Animation 135 | 136 | If you enjoyed using JavaScript to make drawings and animations, we recommend further study and play with the p5.js library, using the [OpenProcessing](https://openprocessing.org) platform or CodePen. 137 | 138 | Here are some [notes on moving to p5.js](after-the-course/from-khan-academy-processingjs-to-p5js.md). 139 | 140 | If we have time, we will do [a short workshop on moving your work to to p5.js](after-the-course/p5js-and-openprocessing-workshop.md). 141 | 142 | #### Some places to get inspiration with p5.js 143 | 144 | Here is an essay by Jason Bailey about "generative art". It has lots of interesting examples which might inspire you: ["Why Love Generative Art?"](https://www.artnome.com/news/2018/8/8/why-love-generative-art). If you use Twitter, here is a recommended "generative" artist: [https://twitter.com/manoloidee](https://twitter.com/manoloidee). 145 | 146 | ### 7\) Lesson Feedback 147 | 148 | To make our course better we love to hear your feedback. Please spend two minutes completing this form. 149 | 150 | [Class Feedback Form](https://docs.google.com/forms/d/e/1FAIpQLScq8Zgr0pz7aMDj0D768eCpW798XgtDsKfpA6BquqK5Hdtj4A/viewform?embedded=true&entry.1672476057=Fundamentals&entry.74981796=Week+4) 151 | 152 | ### 8\) Course Feedback 153 | 154 | We'd love your feedback on what to improve with this course. Please spend two minutes filling in this form. 155 | 156 | [Course Feedback Form](https://docs.google.com/forms/u/1/d/e/1FAIpQLSdhfO5pSH1UszfJ08w2W4MgkIXE7QdGSc71YGa4rsTSPK3lyQ/viewform?usp=sf_link) 157 | 158 | ## End with a game or two 159 | 160 | Suggestions: 161 | 162 | * More Zip-Zap-Boing \(face to face class\) 163 | * Happy Salmon \(face to face\) 164 | * 165 | -------------------------------------------------------------------------------- /lessons/lesson.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Welcome, Agreements & Block Based Coding' 3 | --- 4 | 5 | # Week 1 6 | 7 | ## Welcome \(30 minutes\) 8 | 9 | Welcome to Code Your Future and to the world of programming! 10 | 11 | This course was designed for people new to coding as well as more experienced people. Now that you have built a website in CodePen, we'll look at the basics of how programming works. We will start writing our own programs and what you can make with programming. We will also explore what kind of jobs are available to programmers. 12 | 13 | ## Introduction to Code Your Future \(30 minutes\) 14 | 15 | \_\_[_Instructors see here for instructions_](../teacher-resources/instructor-notes.md#past-slides) 16 | 17 | Before we get started with programming we want to learn a bit about you, and you can learn a bit about us. 18 | 19 | We'll start with some introductions so that we can get to know each other. We'll also play some games. 20 | 21 | When we've done that we have a short introduction to CodeYourFuture and this module. 22 | 23 | ## Student Agreement, Code of Conduct & House Rules \(45 minutes\) 24 | 25 | \_\_[_Instructors see here for instructions_](../teacher-resources/instructor-notes.md#code-of-conduct-student-agreement-and-rules)\_\_ 26 | 27 | While you're at Code Your Future, we expect you to follow some rules. This is so that **everyone** has a fun, productive and enjoyable experience. 28 | 29 | We'll read through the [Student Agreement](https://docs.codeyourfuture.io/organisation/agreements-and-rules/student-agreement), [Code of Conduct](https://codeyourfuture.github.io/syllabus-master/CODE_OF_CONDUCT.html) and [House Rules](https://codeyourfuture.github.io/syllabus-master/others/house-rules.html) together and answer any questions you have about them. 30 | 31 | ## Getting into Technology: Why & How \(35 minutes\) 32 | 33 | \_\_[_Instructors see here for instructions_](../teacher-resources/instructor-notes.md#getting-into-technology-why-and-how-35-minutes)\_\_ 34 | 35 | Next we'll have a presentation about why you would want to be a programmer. 36 | 37 | ## What level is the class starting at? \(15 minutes\) 38 | 39 | [_Instructors see here for instructions_](../teacher-resources/instructor-notes.md#kahoot)\_\_ 40 | 41 | This course is designed for complete beginners. If you've never programmed before, don't worry - you're definitely on the right course! 42 | 43 | We'll do a 5-minute quiz to help us find out the class's level, using the fun app called ["Kahoot"](https://play.kahoot.it/v2/?quizId=62bd599b-af55-41c3-b335-c28c9060c023). 44 | 45 | ## Software Check \(60 minutes\) 46 | 47 | \_\_[_Instructors see here for instructions_](../teacher-resources/instructor-notes.md#slack)\_\_ 48 | 49 | Let's look at some of the tools we use to communicate with you during the course. You should have installed the following but let's check to make sure we all know what we are doing. 50 | 51 | ### Slack 52 | 53 | 1. Install Slack on your laptop \(and phone, if possible\) 54 | 2. Log in to the [Code Your Future Intro to Coding Workspace](https://cyf-introtocoding.slack.com) 55 | 3. Make sure your Slack name is your real name 56 | 4. Add a clear face photo of yourself 57 | 5. Post 5 interesting things about yourself in a thread 58 | 59 | ### The Golden Rule of video calls on Zoom, Slack & Google Meet 60 | 61 | Whenever you are not talking, your microphone should be muted! This prevents distracting noise for the other participants. 62 | 63 | Keep engaged with what is happening by using the thumbs up and clapping reaction buttons and the chat feature. 64 | 65 | ### Google Classroom 66 | 67 | To keep track of your course assignments we use Google Classroom. To set up your account: 68 | 69 | 1. Go to [classroom.google.com](https://classroom.google.com) 70 | 2. Log in to \(or create\) your Google account 71 | 3. Click the "+" button in the top right, then "Join class" 72 | 4. Paste in this classroom code that your instructor gives you and click "Join" 73 | 74 | #### Submitting homework on Google Classroom 75 | 76 | Once you have joined the class, click the "Classwork" button at the top. You will see the list of Week 1 homework. To submit homework: 77 | 78 | 1. Click on the piece of homework you have completed 79 | 2. Click the "View Assignment" button 80 | 3. Click the "Add or Create" button on the right hand side 81 | 4. Here you can provide a link to homework that you have completed, or upload a file 82 | 83 | Go ahead and submit the first assignment now, "first assignment: what's your favourite music?", so that we can see Google Classroom is working for you! 84 | 85 | ## Tips for success 86 | 87 | [Here is a list of some tips for success on the course](../other-resources/tips-for-success.md). We'll discuss some of these next week, and add to these as we progress. 88 | 89 | Make sure you understand the first tip now \("don't hide when you don't know"\). If you have questions, let the volunteers know. You can use the raise hand button in the chat tools, or ask a question in the chat thread. 90 | 91 | ## Feedback 92 | 93 | To make our course better we love to hear your feedback. Please spend two minutes completing this form. 94 | 95 | [Class Feedback Form](https://docs.google.com/forms/d/e/1FAIpQLScq8Zgr0pz7aMDj0D768eCpW798XgtDsKfpA6BquqK5Hdtj4A/viewform?embedded=true&entry.1672476057=Fundamentals&entry.74981796=Week+1) 96 | 97 | ## Coursework 98 | 99 | As part of your learning journey with CYF you will be expected to work at home on projects that we set for you. This will help you practice what you learn in class and get prepared for next week. 100 | 101 | You will always be able to see a list of your coursework assignments on Google Classroom. 102 | 103 | Your first week assignments will mostly be: 104 | 105 | * working on a introduction to programming course 106 | * preparing a very short presentation for the rest of the class 107 | * working on your learning plan 108 | 109 | ### 1. Code.org Course 3 110 | 111 | [Code.org](https://code.org) is a website which teaches beginners how to code and gives them lots of practice. 112 | 113 | It uses block-based coding \(we'll start JavaScript next week\). Don't be put off by the simplicity - even top universities teach block-based coding \(e.g. Berkeley & Harvard\). 114 | 115 | We will be completing the course called "Course 3". 116 | 117 | To get set up, follow these instructions: 118 | 119 | 1. Follow the instructions for registering a Code.org account provided by the instructors 120 | 2. Start by clicking on [item 1 from lesson "2. Maze"](https://studio.code.org/s/course3/stage/2/puzzle/1). \(Yes, you should skip lesson 1\). Let the instructors know if you get stuck - it is easiest for us to help you during class 121 | 3. Read the instructions carefully and try to complete all stages of ALL lessons **EXCEPT** the ones below 122 | 123 | **SKIP** all of the lessons starting with these numbers: 124 | 125 | * 1 126 | * 4 127 | * 9 128 | * 10 129 | * 18 130 | * 19 131 | * 20 132 | 133 | \(All of the lessons starting with "Unplugged Activity"\) 134 | 135 | Once you're finished, press submit in Google Classroom, and please add a comment mentioning your Code.org username. 136 | 137 | ### 2. Prepare a presentation for the next class 138 | 139 | Part of being a programmer is communicating your ideas to other people on your team. 140 | 141 | To help you practice this very important skill, we want you to **pair up with someone** else in the class and prepare a short **\(8 minute\)** presentation about something you learned during the week. 142 | 143 | You will work with each other to create your talk. You must divide the time equally between you. 144 | 145 | You can use [Google Slides](https://www.google.com/slides/about/) or [Canva](https://www.canva.com/q/pro/presentations/) if you want to prepare slides \(this is optional\). 146 | 147 | Here is a list of topic ideas which you could present about: 148 | 149 | * Why are the "Repeat" and "Repeat Until" blocks useful? 150 | * Why are "Functions" useful? 151 | * Why is the "Conditional" block useful? 152 | 153 | If you want to present a different idea, that is fine as well. Then next week, you'll each present what you learned to a few students in the group. 154 | 155 | ### 3. Learning How to Learn course \(4 hours\) 156 | 157 | [Learning How to Learn](https://www.coursera.org/learn/learning-how-to-learn) is a video course on the Coursera site that teaches you how to be the most effective at learning. 158 | 159 | 1. Click the "Join for Free" button and sign up for an account \(**Do not pay for the course!** But this means you won't get a certificate at the end.\) 160 | 2. Work through the assignments for **Week 1** of the course. It should take around 4 hours to complete. 161 | 3. The optional assignments are not required. You can do them to extend your learning. 162 | 4. 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. 163 | 164 | ![Example Coursera screenshot to upload](../.gitbook/assets/screenshot-2021-05-18-at-13.20.34.png) 165 | 166 | ### 4. Get started with reflective journaling 167 | 168 | Through out the Fundamentals Course and the Full Stack, we will ass you to reflect on your learning in a journal. This means you will write about what yu learned and how you will apply that learning. 169 | 170 | Please read this [Introduction to Reflecting on Experience](https://www.ed.ac.uk/reflection/reflectors-toolkit/reflecting-on-experience) from the University of Edinburgh 171 | Next read about the [What? So what? Now what?](https://www.ed.ac.uk/reflection/reflectors-toolkit/reflecting-on-experience/what-so-what-now-what) model of reflection. 172 | You will be using this model in another assinment this week. 173 | 174 | ### 5. Get ready for remote learning 175 | 176 | We will be working remotely while government regulations prevent large gatherings. As you will be learning at home, it's important to make sure you have what you need to study effectively. 177 | 178 | 1. Read this article on [Tips for Studying Online](https://www.timeshighereducation.com/student/advice/tips-studying-online-and-home-university-students#) 179 | 2. Write a refection using the [What? So what? Now what?](https://www.ed.ac.uk/reflection/reflectors-toolkit/reflecting-on-experience/what-so-what-now-what) model of reflection. Ask yourself if you have everything you need to do the actions in the article. If you don't, what do you need? Who do you need to talk to? What do you need to do? Make a plan of what you need to do. Post your reflection in your workspace on Google Classroom. 180 | 3. Choose a space in your home where you will be studying. let everyone you live with know this is your study space. 181 | 4. Set it up with the supplies you will need to study and attend class. \(If you need a laptop, webcam, internet or childcare please speak to your city coordinator\) 182 | 5. Take a photo of your workspace and post it to your workspace on Google Classroom. 183 | 184 | ### 6. Write an "algorithm recipe" 185 | 186 | Programming is all about writing _algorithms_. What is an algorithm? 187 | 188 | 1. Read this [section of the book](https://github.com/thejsway/thejsway/blob/master/manuscript/intro02.md#introduction-to-algorithms) the JS Way 189 | 2. Watch [this video](http://youtube.com/watch?v=cDA3_5982h8) on The Exact Instructions Challenge😄 190 | 191 | These show "algorithm recipes", and the video shows that you have to think carefully when writing them! 192 | 193 | Write your own "algorithm recipe" for your favourite food and submit it to Google Classroom. Next week we'll read some of the best algorithms to see if they have any missing steps! 194 | 195 | -------------------------------------------------------------------------------- /other-resources/README.md: -------------------------------------------------------------------------------- 1 | # Other resources 2 | 3 | -------------------------------------------------------------------------------- /other-resources/brain-games.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Logic and reasoning games for programmers 3 | --- 4 | 5 | # Brain Games 6 | 7 | ## Strategy and logic 8 | 9 | ### First steps 10 | 11 | {% embed url="https://0hh1.com/" caption="Boolean logic" %} 12 | 13 | {% embed url="https://www.webgamesonline.com/mastermind/index.php" caption="Six colours, four pegs - what is the best strategy?" %} 14 | 15 | {% embed url="https://setwithfriends.com/" caption="Patterns and sets" %} 16 | 17 | ### Azul 18 | 19 | {% embed url="https://www.youtube.com/watch?v=byHjDCxF5WU" %} 20 | 21 | You can get Azul as a board game to play with friends and this is the best way to understand how it works. It's always easier to _play_ games than to watch a video where someone else explains the rules! 22 | 23 | Here's a version you can play with friends or against the computer. \(Azul means blue, Rojo means red.\) 24 | 25 | {% embed url="http://boardwebgames.com/rojo/" caption="Logic, patterns and strategy" %} 26 | 27 | ### Rush Hour 28 | 29 | {% embed url="https://www.crazygames.com/game/rush-hour-online" caption="Planning, planning, planning" %} 30 | 31 | ### Dominion 32 | 33 | {% embed url="https://dominion.games/" caption="Deckbuilding, probability, strategy" %} 34 | 35 | ## Interpreting Requirements 36 | 37 | {% embed url="https://www.lenstore.co.uk/vc/the-stroop-effect/" caption="Experience the attention level you need to interpret requirements" %} 38 | 39 | Longer team games for study groups to play together: practice interpreting requirements and communicating in code. 40 | 41 | #### Codenames 42 | 43 | {% embed url="https://codenames.game/" %} 44 | 45 | This is a \(safely\) stressful game that requires the Spymaster to take responsibility for the team’s success or failure. To succeed the Spymaster must put themselves in the shoes of their team of Operatives, and the Operatives team must work together to do the same with the Spymaster. 46 | 47 | #### Telephone 48 | 49 | {% embed url="https://garticphone.com/" %} 50 | 51 | This empathy-building game requires you to interpret and express someone else’s words and then see how your own words and pictures are interpreted. To be played in a group of 5, maximum, which takes 8-10 minutes \(I talked to the developers and this is what they said\). 52 | 53 | {% hint style="info" %} 54 | A Telephone game in Normal Mode with 5 people takes approximately 10 minutes with the drawing/answering part. Don't have groups of more than 5. 55 | {% endhint %} 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /other-resources/free-resources.md: -------------------------------------------------------------------------------- 1 | # Free Resources 2 | 3 | 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. 4 | 5 | ## 1\) In-person events 6 | 7 | * Coding "meetups" 8 | * Free evening events, with 2 - 3 talks from other developers 9 | * There is very often free pizza! 10 | * Don't be scared of these, just go! 11 | * Googling for "JavaScript meetup" or "Learn to code meetup" in your city is a good way to find these 12 | * [Codebar](https://codebar.io/) 13 | * Meetup for people learning to code 14 | * Professional developers will help with your coding problems 15 | 16 | ## 2\) Online 17 | 18 | * [freeCodeCamp](https://www.freecodecamp.org/) 19 | * [The Odin Project](https://www.theodinproject.com/) 20 | * Youtube: Some favourite channels of the recent graduates include [Traversy Media](https://www.youtube.com/playlist?list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX) and [Wes Bos](https://www.youtube.com/user/wesbos). 21 | * Find the teaching and learning style you like, but... [be cautious that you are not following tutorials blindly](https://www.youtube.com/watch?v=g_aMpyMvQ9k) 22 | * [Free programming books](https://github.com/EbookFoundation/free-programming-books/blob/master/books/free-programming-books.md#javascript) 23 | * [Stack Overflow](https://stackoverflow.com/) 24 | * A forum for posting programming questions 25 | * It can be a little intimidating, but it has a huge community so someone is likely to know the answer to your question 26 | 27 | ## 3\) Podcasts 28 | 29 | * [CodeNewbie](https://www.codenewbie.org/podcast) 30 | 31 | ## Editors and hosting 32 | 33 | * [CodePen](https://codepen.io/) 34 | * [Glitch](https://glitch.com/) 35 | * [CodeSandbox.io](https://codesandbox.io/) 36 | * [repl.it](https://repl.it/) 37 | 38 | ## Program stepped visualisation 39 | 40 | * [pythontutor.com](http://pythontutor.com/javascript.html) - it does JavaScript, too. 41 | 42 | -------------------------------------------------------------------------------- /other-resources/post-khan-academy-challenges.md: -------------------------------------------------------------------------------- 1 | # Challenges with Objects and Arrays 2 | 3 | ## Challenge: Make it rain... objects! 4 | 5 | Make a spin-off of your ["Make it rain" project](https://www.khanacademy.org/computing/computer-programming/programming/arrays/pp/project-make-it-rain), and change it to use 1 array of **objects** instead of many arrays. So instead of `xPositions`, `yPositions`, `speeds`, etc arrays you'll simply have 1 `raindrops` array, and each raindrop will have: 6 | 7 | * An `x` property 8 | * A `y` property 9 | * ... 10 | 11 | More ideas: 12 | 13 | * Try adding more properties to each object: 14 | * A `speed` property 15 | * A `size` property to each object and randomise it at the start. 16 | * A `color` property to each object - you can make a random colour like this: `color(random(255), random(255), random(255))` 17 | * Try using squares or rectangles instead of ellipses 18 | * Try using images instead of ellipses 19 | 20 | ## Challenge: Fishtank v2 - using objects 21 | 22 | Go back to your [https://www.khanacademy.org/computing/computer-programming/programming/functions/pp/project-fish-tank](https://github.com/CodeYourFuture/intro-to-programming-module/tree/444e160bfd54fc9fe6a786b5b7643c30f0694c76/Fish%20tank%20project/README.md), and make a spin-off. 23 | 24 | In the spin-off, change your code so that each fish is represented by an object. Fish objects might have these properties: 25 | 26 | * `x` 27 | * `y` 28 | * `speed` 29 | * `colour` 30 | * `size` 31 | 32 | Add bubbles \(if you have not already\). Make these bubbles objects, too, with these properties: 33 | 34 | * `x` 35 | * `y` 36 | * `size` 37 | * `speed` \(if you want some to move at different speeds\) 38 | 39 | Add a sea-bed with pebbles which could be objects too. What properties do you think the pebble objects should have? 40 | 41 | Add some _seaweed_. 42 | 43 | * Try to use the `random()` function for the x position, but with a fixed y position 44 | * Try to make the height random 45 | * Try a random color _variation_ 46 | 47 | ### Advanced challenge 1 48 | 49 | Make each bubble clickable - when you click it it changes in colour. To track which bubbles have been clicked, you should add a `clicked` property to each bubble object. 50 | 51 | Use the function `dist(x1, x2, x2, y2)` to find the distance between two points. 52 | 53 | ### Advanced challenge 2 54 | 55 | Try to make the fish swim the other way. 56 | 57 | ## Challenge: many snowmen, with objects! 58 | 59 | Go back to the ["Simple snowman" challenge](https://www.khanacademy.org/computing/computer-programming/programming/drawing-basics/pc/challenge-simple-snowman) and make a spin-off. 60 | 61 | You don't need to animate this one, so you don't need a `draw()` function. 62 | 63 | * Change the code so that you draw 100 snowmen in random places 64 | * Use an object to keep track of the position of each snowman 65 | * Optional: try to have each snowman be a different size 66 | * Optional \(very advanced\): can you have each snowman choose from 3 different faces? One way to do this would be to have three functions: `drawFace1(x, y, size)`, `drawFace2(x, y, size)`, `drawFace3(x, y, size)` and somehow choose between them for each snowman/snow-woman 67 | * Optional: it would be nice to give the snow-people a colourful hat and scarf 68 | 69 | ## Challenge: shooting stars, with objects 70 | 71 | Go back to the ["Shooting stars" project](https://www.khanacademy.org/computing/computer-programming/programming/animation-basics/pp/project-shooting-star) and make a spin-off. 72 | 73 | * Change your code so that shooting stars are represented by objects. Each star would have an `x` and `y` property, and a `xSpeed` and `ySpeed` property. \(To move the star increment `x` by `xSpeed`, and `y` by `ySpeed`\) 74 | * If you didn't already, add some buildings for a skyline 75 | * Each building should be an object with x, y, and height 76 | * You don't need to draw the windows if you haven't already done that 77 | 78 | ## p5.js Challenge - font outline 79 | 80 | Only attempt this challenge if you've already learned about p5.js and OpenProcessing. 81 | 82 | * In this challenge you'll draw circles \(or other shapes\) at points around the outline of some text to display it in a novel way. \(An array of points from the text outline will be provided.\) 83 | * Fork \(spin-off\) [this "Font as points" challenge project](https://www.openprocessing.org/sketch/812356) 84 | * Read the code comments for details of the challenge. 85 | 86 | ## p5.js Challenge 2 - Random Words poster 87 | 88 | Only attempt this challenge if you've already learned about p5.js and OpenProcessing. 89 | 90 | This is a tutorial but it is made up of many small challenges and there is plenty of room for creativity. In it you will make a "poster" of random words in random colours at random positions, in one or more custom fonts of your choice \(advanced: rotated to random angles\). 91 | 92 | * Fork \(spin-off\) [this "Random Words Tutorial" sketch](https://www.openprocessing.org/sketch/812093) 93 | * Page through it and attempt the challenges within 94 | 95 | -------------------------------------------------------------------------------- /other-resources/roadmap-of-concepts.md: -------------------------------------------------------------------------------- 1 | # Roadmap of Concepts 2 | 3 | Here is a list of the main concepts we cover in the fundamentals course, and whether you'll see them in the Code.org course or in the Khan Academy course. You **don't** have to remember the name of the concepts! Some students like to understand where they are, and how much further there is to go. 4 | 5 | | Concept | In Code.org course 3? | In Khan Academy Intro to JS? | 6 | | :--- | :--- | :--- | 7 | | **Simple sequence of instructions** | Yes | Yes | 8 | | Order matters | Yes: turn left then forwards, or forward then turn left? | Yes | 9 | | **If/else** \("conditional execution"\) | Yes | Yes | 10 | | **Repetition with "loops"** | Yes: \(repeat n times, repeat until, [while nectar > 0](https://studio.code.org/s/course3/stage/13/puzzle/7)\) | Yes | 11 | | Nested loops | Yes: [example: 11.5](https://studio.code.org/s/course3/stage/11/puzzle/5) | No | 12 | | **Functions** | Yes | Yes | 13 | | Using \("calling"\) a function | Yes: [move forwards](https://studio.code.org/s/course3/stage/2/puzzle/1) | Yes | 14 | | Passing information to a function | Yes: [move forward by 100 pixels](https://studio.code.org/s/course3/stage/21/puzzle/2) | Yes | 15 | | Defining your own functions | Yes: [e.g. "get 7 make 7"](https://studio.code.org/s/course3/stage/6/puzzle/8?section_id=2217957) | Yes | 16 | | Returning information from a function | No | No | 17 | | **Variables** | Not much: [Set color red](https://studio.code.org/s/course3/stage/3/puzzle/4?section_id=2217957) | Yes: `var xPos = 200; xPos++;` | 18 | | **Data Types** | No | Partially | 19 | | **Arrays and Objects** | No | Yes | 20 | | **Event handlers** | Yes: ["When up pressed"](https://studio.code.org/s/course3/stage/15/puzzle/8?section_id=2217957) | Yes: `mouseClicked()` function | 21 | 22 | -------------------------------------------------------------------------------- /other-resources/tips-for-success.md: -------------------------------------------------------------------------------- 1 | # Tips For Success 2 | 3 | ## Don't hide when you don't know. 4 | 5 | * It is _normal_ not to know things as programmers 6 | * The volunteers can't help you if we don't know you are lost 7 | * Someone else in the class probably has the same question as you, and is too scared to ask 8 | * If the teacher asks if everyone understands, SPEAK UP if you are not sure about something 9 | 10 | ## The goal is NOT to complete the exercises. The goal is to learn. 11 | 12 | Completion of all exercises is _not_ success... if you do not truly understand. 13 | 14 | If you learn so that you can complete any _future exercises_ without help \(e.g. in a job interview\), _that_ is success. 15 | 16 | ## When getting help, stay in control \(of the computer and the process\) 17 | 18 | Each exercise is an _opportunity to learn_ - don't let anyone steal that from you by solving your problem. Completing the exercise without understanding is a _waste of your time and ours_. 19 | 20 | ## In group-work, seek to understand everything 21 | 22 | If you've done something in group-work that you don't fully understand: 23 | 24 | * Slow things down 25 | * Get it explained 26 | * Go back to the work by yourself afterwards, and challenge yourself to understand it 27 | 28 | _Don't let it go_ because the next time you don't understand something, it will be harder to get things explained. 29 | 30 | So if you solve 10 exercises together in a group-work exercise, it is a great idea to go back over and try to solve them on your own the next day. 31 | 32 | ## Take notes about what you don't understand 33 | 34 | At a minimum, take note of the exercise numbers that you have problems with, even if you solve them eventually. Then you should revisit them some time afterwards and complete them again from scratch until you're positive you understand. 35 | 36 | ## Try _prediction_, to get all the juice out of each exercise! 37 | 38 | With simple programming challenges, it is easy to just repeatedly modify and re-run your program until it works, but you won't learn much unless you are _thinking_ \(and this playful approach doesn't work with more complicated problems\), so instead... 39 | 40 | Always try to _predict_ what your code will do before you run it. Write your prediction down, or tell your a friend - you can make it a game. After you run the program, if your guess was wrong, discuss why, then FIND OUT why. 41 | 42 | ## Don't be frustrated when a volunteer does not solve your problem for you 43 | 44 | The instructors have told them not to! Can you say why? 45 | 46 | -------------------------------------------------------------------------------- /questions-week3-neill.md: -------------------------------------------------------------------------------- 1 | # Questions from week 3 (neill's class) 2 | 3 | This is a rough resource for instructors. 4 | 5 | Any question that the student raised at the start of the day went up on the whiteboard and was later transcribed here (Thanks Jon and Jacobo!). Most were answered by volunteers in 1-to-1 discussion. 6 | 7 | I've added some VERY rough answers here. 8 | 9 | This may give us insight into what to cover in direct instruction and live-coding in subsequent runs of the course. 10 | 11 | # When and how to use functions 12 | Interested: R.M, Ajmal 13 | 14 | * Re-watch Khan Academy section on functions [starts here](https://www.khanacademy.org/computing/computer-programming/programming/functions/pt/functions) 15 | 16 | * "It gives us a way to structure larger programs, to reduce repetition, to associate names with subprograms, and to isolate these subprograms from each other." - [Eloquent JavaScript](https://eloquentjavascript.net/03_functions.html) - (not recommended reading at this stage). 17 | 18 | You can read the first couple of paragraphs from some of these texts: 19 | * [The Odin Project - on functions]https://www.theodinproject.com/courses/web-development-101/lessons/fundamentals-part-3 20 | * [The JS Way - Chapter 5 on Functions](https://github.com/thejsway/thejsway/blob/master/manuscript/chapter05.md) 21 | * [javascript.info on functions](https://javascript.info/function-basics) 22 | * [Long MDN Article on Functions](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions) * 23 | 24 | # Very specific: How to cover the sun with clouds 25 | Interested: Tam, Hamid, S.C 26 | 27 | Very specific question hopefully answered 1-to-1 in class. 28 | 29 | # Conditionals 30 | Interested: Ajmal, Meisam 31 | 32 | TODO: return to this in week 4 - I didn't get a specific question. 33 | 34 | [This section of The Odin Project on Conditionals](https://www.theodinproject.com/courses/web-development-101/lessons/fundamentals-part-2#conditionals) links to many good articles on conditionals (if/else, etc) 35 | 36 | # Inclusive vs. Exclusive Ranges 37 | Interested: Cd 38 | 39 | `randomInteger(0, 3)` - does this function ever generate 0? or 3? Or does it start from 1? Or max at 2? How would you find out? Always read the documentation for the specific function. In the above case, if it picks values from 0, 1, 2, 3, we'd say it generates from 0 to 3 *inclusive*, rather than *exclusive*. 40 | 41 | Whether the arguments to a function are used as inclusive or exclusive range limits *depends entirely on that specific function* and how it has been designed and, ultimately, coded. 42 | 43 | # Docs for Processing.js 44 | Interested: Cd, Tayfun 45 | 46 | * The official processing.js documentation for the most recent version is at http://processingjs.org/reference/ 47 | * [Khan Academy also has processing.js reference documentation](https://www.khanacademy.org/computing/computer-programming/pjs-documentation) - this may differ from the above documentation, as khan academy doesn't use the latest version of processing.js (for the sake of course stability). 48 | 49 | # Very specific: Nested loops - multiplication vs. increment 50 | Interested: S.C, Hamid, Abdullah, Ajmal, R.M, (Illegible) 51 | 52 | # Very specific: Changing animation speed for a single function 53 | Interested: R.M, CoreA, S.C, Hamid, Ajmal 54 | 55 | If you want to make something move slower (or faster) change the size of increment that's being made to its position, rather than changing the rate of animation. 56 | 57 | ### I REALLY want to call a function less often! 58 | 59 | If the `draw()` is getting called 60 times per second and you want drawFish() to get called only one in every three frames, you can do: 60 | 61 | ``` 62 | var draw = function(){ 63 | drawOctopus(); 64 | if (frameCount % 3 === 0){ 65 | drawFish(); 66 | } 67 | } 68 | ``` 69 | 70 | The `%` is called the [**remainder** operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder). (Many call it the **modulo** operator.) `frameCount % 3` will be 0 when frameCount is 0, 3, 6, 9, 12, ... etc, and false the other times. Here's [a video tutorial about the % operator](https://www.youtube.com/watch?v=r5Iy3v1co0A) in a creative coding context. 71 | 72 | 73 | # Changing (animating) drawing size & position. 74 | Interested: Yusuf, Ryan, Sonj, Constantine 75 | 76 | Answered in class. The game loop & updating a global variable. 77 | 78 | # Making groups of shapes resize 79 | 80 | Interested: - 81 | 82 | The best way to do this is to use [`scale()`](http://processingjs.org/reference/scale_/) along with `translate()`. It takes a while to learn it, however. [Here's khan academy's discussion of scale()](https://www.khanacademy.org/computer-programming/scalex-y/6712922034143232). 83 | 84 | # Background image upload? 85 | Interested: R.M, S.C 86 | 87 | Not possible in the Khan Academy platform, to avoid potential offensive content upload. 88 | 89 | In week 4 we'll look at the similar p5.js library and the platform https://openprocessing.org/ which makes this easy. 90 | 91 | # Origin of rotation function 92 | Interested: Tayfun 93 | 94 | (Advanced. Not needed for this course.) 95 | 96 | [Here's the rotate() documentation](http://processingjs.org/reference/rotate_/). 97 | 98 | * It will rotate around the current origin. 99 | * The origin can be moved beforehand with `translate()` 100 | * to restore the origin and rotation, use a pair of pushMatrix() before and popMatrix() after. 101 | * the documentation above has an example which is rotated about the middle of the canvas. (because of the translation to width/2, height/2). 102 | 103 | # Fill in a shape incrementally 104 | Interested: - 105 | 106 | (I don't know what this is.) 107 | 108 | # When do we need the draw function? 109 | Interested: Kyaw, Tam, Sonj 110 | 111 | # Flow control - functions calling functions? 112 | Interested: S.C, Ajmal, Hamid 113 | -------------------------------------------------------------------------------- /teacher-resources/README.md: -------------------------------------------------------------------------------- 1 | # Teacher Resources 2 | 3 | -------------------------------------------------------------------------------- /teacher-resources/assessments.md: -------------------------------------------------------------------------------- 1 | # Assessments 2 | 3 | ## Assessments 4 | 5 | Several assessments have been designed for this course. They should be completed during the weekly class or in the weeks in between class. 6 | 7 | ### Before Starting 8 | 9 | Make sure you have got access to [this Github repository](https://github.com/CodeYourFuture/fundamentals-course-assessments) before starting. It contains instructions for the assessment pieces. 10 | 11 | ### Goals 12 | 13 | The goal of these assessments is to assess how well the student is progressing. Based on the outcome of the assessment, the instructor\(s\) can decide whether the student has a good understanding of the subject. 14 | 15 | A volunteer should be assigned to work with 1 student at a time to "pair" on a small task. It is however not quite like normal pairing: the volunteer should aim to not "give away" the answer. If the student is struggling the volunteer can ask open questions to provide a suggestion. 16 | 17 | Note that they are framed as "1-to-1 programming problems" instead of assessments for students so they are less intimidated by them. 18 | 19 | ### Feedback from Volunteers 20 | 21 | Even for small but significant interactions, volunteers should be encouraged to fill out [this feedback form](https://forms.gle/GgpFkgKCRPVtTtrJ7). It's fine to skip bits of it - there's a free text section at the end. 22 | 23 | For form administrators, that's [here](https://docs.google.com/forms/d/13F6J1HiBvmxZy-cSrgDwVxpVAZPdjU3Rv2wsXIpmo_M/edit) 24 | 25 | ## Week Breakdown 26 | 27 | ### Week 2 - Code.org - Three giraffes 28 | 29 | For this lesson we have prepared the "Three giraffes" assessment. 30 | 31 | For Students 32 | 33 | * [Task description \(for students\)](https://github.com/CodeYourFuture/fundamentals-course-assessments/tree/master/codeorg_three_giraffes/assessment_task.md) 34 | 35 | For Instructors 36 | 37 | * [Readme page \(for instructors\)](https://github.com/CodeYourFuture/fundamentals-course-assessments/tree/master/codeorg_three_giraffes) 38 | * [Volunteer notes](https://github.com/CodeYourFuture/fundamentals-course-assessments/tree/master/codeorg_three_giraffes/mentor_notes.md) 39 | * [Feedback form \(for volunteer\)](https://docs.google.com/forms/d/e/1FAIpQLSf5RN_jYq6Jvh4LdDdjuNL3TyUOcwncSpikTr-WVbBkm3JBCQ/viewform) 40 | * [Edit the form \(for instructors\)](https://docs.google.com/forms/d/15UtSv_A089jYxdZ7Guusf440FtckUaPLHvJAfv4dOY0/edit) 41 | 42 | ### Week 3 - Khan Academy - Three Cars 43 | 44 | For this week we have prepared the Three Cars assessment 45 | 46 | For students: 47 | 48 | * [Task description \(for students\)](https://github.com/CodeYourFuture/fundamentals-course-assessments/tree/master/khan_academy_cars/assessment_task.md) 49 | 50 | For Instructors 51 | 52 | * [Readme page \(for instructors\)](https://github.com/CodeYourFuture/fundamentals-course-assessments/tree/master/khan_academy_cars) 53 | * [Volunteer notes](https://github.com/CodeYourFuture/fundamentals-course-assessments/tree/master/khan_academy_cars/mentor_notes.md) 54 | * [Feedback form \(for volunteer\)](https://docs.google.com/forms/d/e/1FAIpQLSfPlYydoYxlsYtR3ObIzAByOjNd10gQvtUd715b8ntYaFzwbw/viewform) 55 | * [Edit the form \(for instructors\)](https://docs.google.com/forms/d/1DW-WwKuQhVGlgcUgB8GzFRK6m3Yty0nJGqtxgYQq_EI/edit) 56 | 57 | ### Week 4 - Khan Academy - Three Boxes 58 | 59 | For students 60 | 61 | * [Task description \(for students\)](https://github.com/CodeYourFuture/fundamentals-course-assessments/blob/master/khan-academy-boxes-and-ribbons/assessment-tasks-for-students.md) 62 | 63 | For Instructors 64 | 65 | * [Readme page \(for instructors\)](https://github.com/CodeYourFuture/fundamentals-course-assessments/tree/master/khan-academy-boxes-and-ribbons) 66 | * [Example solutions](https://github.com/CodeYourFuture/fundamentals-course-assessments/tree/master/khan-academy-boxes-and-ribbons) 67 | * [Feedback form \(for volunteer\)](https://docs.google.com/forms/d/e/1FAIpQLSdkyYCIltW9bhoDhpJIDEmCEKWKD7NGVOk-vj3Bc9fJbqkmAA/viewform) 68 | * [Edit the form \(for instructors\)](https://docs.google.com/forms/d/18vDgm2_Wk4NEcJ66COyoeUt-dytTLR7q8axNmv-8nH4/edit?usp=sharing) 69 | 70 | -------------------------------------------------------------------------------- /teacher-resources/energisers.md: -------------------------------------------------------------------------------- 1 | # Energisers 2 | 3 | ## Acrostic Poem 4 | 5 | In the morning \(Week 1\), students and volunteers use their own first name to create a short poem. Writing their name vertically, use each letter to start a line, or be the main word in a line, that describes something about themselves. 6 | 7 | In the afternoon, peers review all poems and try to remember details about each classmate. The instructor then creates a short quiz \(can use Kahoot\) using the statements posted in different poems. Classmates take this fun quiz to show their knowledge of their peers. 8 | 9 | ### Example 10 | 11 | **N** - **N**ot a fan of pie. 12 | **I** - I love cookie dough **I**ce cream. 13 | **C** - I prefer **C**ooking over eating out. 14 | **O** - My family has an **O**live **O**il ranch. 15 | **L** - **L**earning is fun for me. 16 | **E** - I’ve ridden an **E**lephant in Thailand. 17 | 18 | ## My Weekend in Emojis 19 | 20 | Students are tasked with talking about what they did at the weekend using only Emojis. These should then be shared in a thread of Slack or in the Zoom chat. You should encourage the students to be as inventive as possible and to try to share something unique. 21 | 22 | If you have time, break the students out into small breakout rooms and have them guess what each others were. 23 | 24 | If you are more limited for time, choose a few students at random and ask people to guess what their emojis mean. 25 | 26 | ### Example 27 | 28 | 🚶‍♂️🌲🌲🌦 = I went for a walk in a forest and then it rained 29 | 30 | ## A picture tells a story 31 | 32 | 33 | Change up the text by starting student introductions with an image. Students find an image of an object that represents them or why are are taking the course. Students share in a thread in Slack and add the image and an explanation of why they chose that particular object. Start this activity by posting your picture and explanation. Once students have completed their initial post, their job is to respond to interesting images and reply with a question. Original students reply to the question with an answer. 34 | 35 | ### Example 36 | 37 | ## **Lost in Space** 38 | 39 | 40 | Sometimes we learn more about people through seeing their priorities. In this icebreaker, students pretend they are living on a space station for a year. Suddenly, the station is malfunctioning and they have fifteen minutes to gather only five items to take with them on the evacuating space shuttle. This is not a time for deep thought. Students are instructed to quickly type out the five items they are taking with them. Once all participants have enter their items on their initial posts, peers read through the entries to find similarities and/or curiosities. Students post replies to comment and ask questions about the reasoning behind choosing the items. Give students categories of technology, personal, and survival to start their explanation. 41 | 42 | **Example** 43 | 44 | Technology - radio 45 | 46 | Personal - family photo, book 47 | 48 | Survival - knife, water 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /teacher-resources/instructor-notes-1.md: -------------------------------------------------------------------------------- 1 | # Lesson 2 2 | 3 | ## Rough Schedule 4 | 5 | | Time | Activity | 6 | | :--- | :--- | 7 | | 10:45 - 11:00 | Preparation of space | 8 | | 11:00 - 11:30 | Warm up game/Intros | 9 | | 11:30 - 11:40 | Shout out questions | 10 | | 11:40 - 12:40 | Solving problems workshop | 11 | | 12:40 - 12:50 | Break/Prayers | 12 | | 12:50 - 13:30 | Coursework presentation | 13 | | 13:30 - 14:00 | Coursework in perspective | 14 | | 14:00 - 14:45 | Lunch | 15 | | 14:45 - 16:45 | Help with homework exercises/1-to-1 assessments | 16 | | 16:45 - 17:00 | Set up Khan Academy homework | 17 | | 17:00 - 17:30 | Start on Khan Academy homework | 18 | 19 | ## Shout Out Questions 20 | 21 | At the beginning of the lesson, get the students thinking about questions that they had during the week. To avoid getting distracted with answering a question for too long, run a short session where you write down all the questions on a whiteboard. 22 | 23 | You can then prioritise answering the questions on your own time, or split into groups to answer several questions at once. 24 | 25 | It is also useful to get a volunteer write up the questions in a more permanent place \(e.g. [as a Gist](https://gist.github.com/)\) and share on Slack. 26 | 27 | ## Coursework In Perspective 28 | 29 | Quick presentation to discuss how block-based programming is relevant in the "real world", as it can appear a little "childish" to adults. 30 | 31 | Sequence, repetition with loops, conditional execution with if/else, and breaking bigger problems into smaller problems, with functions. 32 | 33 | Possibly showing representations in JS, by clicking the "Show code" button on Code.org. 34 | 35 | ## Start Khan Academy coursework in class 36 | 37 | It is a good idea to spend some time in the class working through the first few lessons. You can help with problems getting signed in, with the interface, etc. 38 | 39 | However, note that most of the Khan Academy lessons start with a \(short\) video. Encourage students to bring a pair of headphones or to turn on subtitles. 40 | 41 | ### 1-to-1 assessment 42 | 43 | While the class is working on their coursework, volunteers should begin the first round of assessments with students. They should be completing the "Code.org - Three Giraffes" 44 | 45 | Details for this assessment can be found here. 46 | 47 | [Three Giraffes Assessment](assessments.md#week-2-code-org-three-giraffes) 48 | 49 | ## Assigning Homework 50 | 51 | At the end of Class, assign the homework for this week through Google Classroom. 52 | 53 | -------------------------------------------------------------------------------- /teacher-resources/instructor-notes-2.md: -------------------------------------------------------------------------------- 1 | # Lesson 3 2 | 3 | ## Rough Schedule 4 | 5 | | Time | Activity | 6 | | :--- | :--- | 7 | | 10:45 - 11:00 | Preparation of space | 8 | | 11:00 - 11:30 | Warm up game/Intros | 9 | | 11:30 - 11:40 | Shout out questions | 10 | | 11:40 - 12:10 | Getting unstuck | 11 | | 12:10 - 12:20 | Break/Prayers | 12 | | 12:20 - 13:30 | Live coding | 13 | | 13:30 - 14:00 | Favourite Khan Academy project presentation | 14 | | 14:00 - 14:45 | Lunch | 15 | | 14:45 - 14:50 | Introduce pairing | 16 | | 14:50 - 17:15 | Pairing/1-to-1 assessments | 17 | | 17:15 - 17:30 | Set up coursework | 18 | 19 | ## Shout out questions 20 | 21 | See [last lesson's instructor notes](instructor-notes-1.md#shout-out-questions) 22 | 23 | ## Getting unstuck 24 | 25 | The purpose of this session is to unblock progress through the Khan Academy course, so that the students will all be able to see all of the content. 26 | 27 | Try to prioritise questions that block progress, not simply that they are curious about something. The questions gathered earlier may be helpful in prioritising. To avoid disappointment, let the students know that there will be time to cover other questions later in the day. 28 | 29 | ## Live coding 30 | 31 | Teaching via live coding is a skill. Practice makes better! 32 | 33 | Some tips: 34 | 35 | * Use Khan Academy platform: the student's haven't seen other editors so stick with what they know 36 | * Make sure that the code can be comfortably read from the back of the room 37 | * Every time you add/move/delete a line of code, say what you are doing out loud for every step. Then point it out again and show it's effect on the output 38 | * This slows you down so that students can keep up and check they understand correct 39 | * Ask the students for predictions of what they think will happen after you make a change 40 | * A good approach might be to write down the first few suggestions, then let them vote on what they think is correct 41 | 42 | Potential ideas for live coding: 43 | 44 | * Pick one of the projects from the course and implement one of their suggestions 45 | * E.g. adding more stars to the Shooting stars project 46 | * Deliberately introduce a bug into a project, then debug the problem with suggestions from the class 47 | 48 | ## Favourite Khan Academy project presentations 49 | 50 | Start by explaining the goal, and showing the tips from the lesson plan. 51 | 52 | Then give 5 minutes for the students to prepare which project they want to present about and what they want to say. 53 | 54 | Finally split into small groups \(per-table usually works well\) and take it turns to present. If possible, have a volunteer sit with each group to listen in and time-keep. 55 | 56 | ## Improve Your Favourite Khan Academy Project 57 | 58 | ### Pairing 59 | 60 | This is very likely to be the first time they have ever paired on a programming problem. Here are some tips on running a good pairing session: 61 | 62 | * Assign a volunteer to call out to switch navigator and driver roles every 10 minutes loosely 63 | * Make sure the students actually switch! 64 | * Monitor closely to check that one side isn't dominating 65 | * Don't run the session too long - it is stressful for some 66 | * Switch partners at least once \(e.g. different partners before and after lunch\) 67 | 68 | #### Previous Slides 69 | 70 | {% embed url="https://docs.google.com/presentation/d/11XKf7yVRh6Z6pcfgXeM9WxDLvmDT7hUEb5QkLOuHlDo/edit" %} 71 | 72 | ### 1-to-1 Assessments 73 | 74 | While the class is working on their coursework, volunteers should begin the second round of assessments with students. They should be completing the "Khan Academy - Three Cars" 75 | 76 | Details for this assessment can be found here. 77 | 78 | [Khan Academy - Three Cars](assessments.md#week-3-khan-academy-three-cars) 79 | 80 | ## Assigning Coursework 81 | 82 | At the end of Class, assign the coursework for this week through Google Classroom. 83 | 84 | -------------------------------------------------------------------------------- /teacher-resources/instructor-notes-3.md: -------------------------------------------------------------------------------- 1 | # Lesson 4 2 | 3 | ## Rough Schedule 4 | 5 | | Time | Activity | 6 | | :--- | :--- | 7 | | 10:45 - 11:00 | Preparation of space | 8 | | 11:00 - 11:30 | Warm up game/Intros | 9 | | 11:30 - 11:40 | Shout out questions | 10 | | 11:40 - 12:10 | Getting unstuck | 11 | | 12:10 - 12:20 | Break/Prayers | 12 | | 12:20 - 13:30 | Live coding | 13 | | 13:30 - 14:00 | Favourite Khan Academy project presentation | 14 | | 14:00 - 14:45 | Lunch | 15 | | 14:45 - 14:50 | Introduce pairing | 16 | | 14:50 - 16:15 | Pairing/1-to-1 assessments | 17 | | 16:15 - 16:30 | Kahoot quiz | 18 | | 16:30 - 17:00 | Course reflection | 19 | | 17:00 - 17:20 | Other free resources | 20 | | 17:20 - 17:30 | Game | 21 | 22 | ## Shout out questions 23 | 24 | See [last lesson's instructor notes](instructor-notes-1.md#shout-out-questions) 25 | 26 | ## Getting unstuck 27 | 28 | See [last lesson's instructor notes](instructor-notes-2.md#getting-unstuck) 29 | 30 | ## Live coding 31 | 32 | See [last lesson's instructor notes](instructor-notes-2.md#live-coding) 33 | 34 | ## Favourite Khan Academy project presentations 35 | 36 | See [last lesson's instructor notes](instructor-notes-2.md#favourite-khan-academy-project-presentations) 37 | 38 | ## Pairing 39 | 40 | See [last lesson's instructor notes](instructor-notes-2.md#pairing) 41 | 42 | We recommend that the students focus on using arrays and objects as they should covered this in the coursework. There are some good examples of improvements listed [here](https://github.com/CodeYourFuture/fundamentals-course/tree/b9ad64a78202f4e8151b2b7a4c9fbc0be7f05925/post-khan-academy-challenges.md). Most of them involve refactoring an existing project to use an array of objects. Note that objects within arrays is challenging for some students so this may need some explanation - perhaps a good live coding topic. 43 | 44 | ## 1-to-1 assessment 45 | 46 | This lesson's assessment is quite similar to last lesson's. We recommend focusing on students that most need assessment \(i.e. you know less about their level\), so that you can make decisions about their progress. 47 | 48 | The assessment is also structured a little differently to the previous two, as it can be run as a in-class test as well as a 1-to-1 session. If you have many students that you need to prioritise, then an in-class test may the best choice, however it sometimes can be difficult to make decisions without observation of the student \(they could be along the right lines, just missing a crucial detail\). 49 | 50 | Details for this assessment can be found here. 51 | 52 | [Khan Academy - Three Boxes](assessments.md#week-4-khan-academy-three-boxes) 53 | 54 | ## Kahoot 55 | 56 | You can run the [same Kahoot quiz from the first lesson](https://play.kahoot.it/v2/?quizId=62bd599b-af55-41c3-b335-c28c9060c023). It is interesting to compare the results, hopefully the students feel more confident at the end of the course. 57 | 58 | ## Course reflection 59 | 60 | Look through the [concept roadmap](../other-resources/roadmap-of-concepts.md) and demonstrate the programming principles that they learned. 61 | 62 | ## Other free resources 63 | 64 | Recommend some resources for the students to continue learning. Remember that not all students will continue onto the web development course and so this may be useful for them to keep studying. 65 | 66 | The list provided is just a jumping-off point: if you have some recommendations, please add them! 67 | 68 | ## Migration to p5.js \(Optional\) 69 | 70 | If you have extra time or are keen to continue using concepts from the Khan Academy course, then it recommended to migrate to a different Processing-based JS library [p5.js](https://p5js.org/). The Processing.js library used by Khan Academy is unmaintained whereas p5.js is actively maintained and has an almost identical API. 71 | 72 | There are some notes provided about how to migrate the student's projects to p5.js/the OpenProcessing platform. Although the migration workshop is not very fleshed out currently. 73 | 74 | ## Feedback 75 | 76 | Please ask your students to complete [this form](https://docs.google.com/forms/d/e/1FAIpQLSdhfO5pSH1UszfJ08w2W4MgkIXE7QdGSc71YGa4rsTSPK3lyQ/viewform?usp=sf_link) so we can get feedback on how students found the course. 77 | 78 | ## Assigning Coursework 79 | 80 | At the end of Class, assign the Coursework for this week through Google Classroom. 81 | 82 | -------------------------------------------------------------------------------- /teacher-resources/instructor-notes-overview.md: -------------------------------------------------------------------------------- 1 | # Overview 2 | 3 | General notes for the instructors of this course. 4 | 5 | There are instructor notes for each lesson: 6 | 7 | * [Lesson 1](instructor-notes.md) 8 | * [Lesson 2](instructor-notes-1.md) 9 | * [Lesson 3](instructor-notes-2.md) 10 | * [Lesson 4](instructor-notes-3.md) 11 | 12 | ## Goals 13 | 14 | There 2 main goals of this course: 15 | 16 | > 1. **Help** students with little or **no prior programming experience** to learn some fundamental concepts of programming 17 | > 2. **Assess** the students to help work out if they would **struggle** on the web development course 18 | 19 | ## Course Overview 20 | 21 | ### 1\) Code.org 22 | 23 | At the start of the course we use Code.org and Block Based coding to start the process of learning about algorithmic thinking. It might seem easy but it helps to lay the foundation that build the rest of the course off! 24 | 25 | ![](../.gitbook/assets/image.png) 26 | 27 | ### 2\) Khan Academy 28 | 29 | ![](../.gitbook/assets/image%20%281%29.png) 30 | 31 | Next, we use KhanAcademy to guide the students along a visual course using JavaScript. This is the majority of the course. 32 | 33 | ### 3\) Games & Energisers 34 | 35 | In the morning and afternoon we play games an energisers to get to know each other. 36 | 37 | You can find a resources for these [here](energisers.md). 38 | 39 | ### 4\) Assessments 40 | 41 | A really important part of this course is the assessment section which happens either during classes or in the time in between. The question we are trying to answer during Fundamentals is 42 | 43 | > Does this student have the commitment and show the qualities we need for them to complete the Full Stack Course? 44 | 45 | The assessments take place in weeks 2, 3 and 4. See the [Assessments ](assessments.md)page for more details. 46 | 47 | -------------------------------------------------------------------------------- /teacher-resources/instructor-notes.md: -------------------------------------------------------------------------------- 1 | # Lesson 1 2 | 3 | ## Rough Schedule 4 | 5 | | Time | Activity | 6 | | :--- | :--- | 7 | | 00:00 - 00:30 | Preparation of space \(30 mins\) \(Before students arrive\) | 8 | | 00:30 - 01:30 | Welcome \(1 hour\) | 9 | | 01:30 - 02:15 | Code of Conduct & House Rules \(45 mins\) | 10 | | 02:15 - 02:25 | Break/Prayers \(10 mins\) | 11 | | 02:25 - 03:00 | Getting into Technology presentation \(35 mins\) | 12 | | 03:00 - 03:55 | Lunch \(45 mins\) | 13 | | 03:55 - 04:10 | Kahoot quiz \(15 mins\) | 14 | | 04:10 - 05:10 | Software setup \(1 hour\) | 15 | | 05:10 - 05:25 | Homework setup \(15 mins\) | 16 | | 05:25 - End | Start on Code.org homework \(Rest of day\) | 17 | 18 | ## Overview 19 | 20 | This lesson is mostly about welcoming students to the course, letting them know the rules and the course and getting them started with Block Based coding. 21 | 22 | Be sure to take attendance at the start of class - this will be an important data point for the Selection for the Full Class. 23 | 24 | As this is the first class, make sure you chase up students who are having trouble finding the space or connecting online. There will always be problems for the first class! 25 | 26 | ## Welcome 27 | 28 | The aim of this session is to welcome students to the space and get them settled. You should choose an [Energiser ](energisers.md)and work through it with your students. 29 | 30 | Be sure to cover 31 | 32 | * A short introduction to CYF and what we do 33 | * What the students will be learning on the course 34 | * The roles of people in the classroom, including 35 | * Teacher 36 | * Teaching Assistant 37 | * Personal Development 38 | * Any CYF Staff Present \(e.g. City Coordinators\) 39 | 40 | ### Past Slides 41 | 42 | {% embed url="https://docs.google.com/presentation/d/1-KRbxYoP0rWcVnOec-o95rhtTeBGUpzjwq\_3CUW3J9Q/edit?usp=sharing" caption="Presentation created by Chris Owen \(20/10/2020\)" %} 43 | 44 | ## Code of Conduct, Student Agreement & Rules 45 | 46 | This section is important to cover early in the course so we set our expectations and requirements of our students early. 47 | 48 | In this session we're covering these three topics 49 | 50 | * The [Code of Conduct](https://codeyourfuture.io/about/code-of-conduct/) 51 | * The [Student Agreement](https://docs.codeyourfuture.io/organisation/agreements-and-rules/student-agreement) 52 | * Our [House Rules](https://docs.codeyourfuture.io/organisation/agreements-and-rules/house-rules) \(or/and any other rules you have for your classroom\) 53 | 54 | The aim of these sessions is to have the student engage with the content in an active way. It may not be enough for them to simply read the agreement and sign it - they should understand what each of the rules mean in practice. 55 | 56 | We spend a good amount of time on this on the first day to set the expected behaviour of our students in our community. 57 | 58 | Go through each of them in details and define how they differ from each other. Example talking points are: 59 | 60 | * Our code of conduct is followed by ALL members of our community. All good communities should have one. 99% of people will never do anything against it. 61 | * Our student agreement is what we need of you - we're all volunteers so we need you to meet us halfway. We're going to spending alot of time with you to make sure you succeed. 62 | * Our House Rules are just so everything runs smoothly - we've learnt from exerperience! 63 | 64 | ### Past Slides 65 | 66 | The slides below were created by London Volunteers and delivered on 18/10/2020. You are welcome to use them if they suit your purpose. 67 | 68 | {% embed url="https://docs.google.com/presentation/d/14KBCv1VslZaMri068MogOb36zSo1a8fgUSjKBzUnxbU/edit?usp=sharing" caption="The slides below were created by London Volunteers and delivered on 18/10/2020. " %} 69 | 70 | ### Past Exercises 71 | 72 | If you like, you can use the exercises below to help teach this section. You are also encouraged to create your own exercises that are tailored to your students. 73 | 74 | #### "What do these words mean?" Exercise \(5-10 minutes\) 75 | 76 | Give this list of words and phrases to the students. 77 | 78 | 1. Advocating 79 | 2. Non-binary Gender 80 | 3. Banter 81 | 4. Innuendo 82 | 5. Derogatory Comments 83 | 6. Instilling Fear 84 | 7. Malicious Rumours 85 | 8. Consent 86 | 9. Perpetrators 87 | 10. Exclusion 88 | 11. Ostracising People 89 | 12. Belittling 90 | 91 | To run this exercise 92 | 93 | 1. Create a post in Slack with each of the above words listed. 94 | 2. Assign an emoji response to each word 95 | 3. Instruct students to click the emoji for all of the areas that they completely understand 96 | 97 | When the students have voted either have a group discussion with all the students about the top unknown words or split into smaller groups and and have small discussions. 98 | 99 | #### "Uber Code of Conduct" Exercise \(3 minutes\) 100 | 101 | Ask the class - What code of conduct rule would this article violate? 102 | 103 | [Uber couldn’t get through its meeting about sexism without a board member making a sexist joke](https://www.theverge.com/2017/6/13/15795610/uber-sexist-joke-board-member-david-bonderman-arianna-huffington) 104 | 105 | #### "Code of Conduct" Exercise \(5 minutes\) 106 | 107 | In the exercise below students should put their understanding of the Code of Conduct into 108 | 109 | {% file src="../.gitbook/assets/cyf\_cofc\_exercise.pdf" caption="Code of Conduct Exercise Sheet" %} 110 | 111 | ## Getting into Technology: Why & How \(35 minutes\) 112 | 113 | {% embed url="https://docs.google.com/presentation/d/1XVVq6acZwMb7r1OAx2b54nS5WOguO3V7m7Pspledi60/edit\#slide=id.g253640fe83\_0\_202" %} 114 | 115 | 116 | 117 | ## Kahoot 118 | 119 | Kahoot is a web app for running quick, fun quizzes with the whole class. 120 | 121 | A prepared quiz is [available here](https://play.kahoot.it/v2/?quizId=62bd599b-af55-41c3-b335-c28c9060c023) \(editor view [here](https://create.kahoot.it/details/62bd599b-af55-41c3-b335-c28c9060c023)\). It is intended to get a general level of confidence in their programming ability from the class. To be able to compare we suggest running it in the first and last classes. 122 | 123 | The aim of this quiz is to get to know your students a little and to find out their background. Its important to find out exactly how much your students know before you start teaching. 124 | 125 | 126 | 127 | ## Slack 128 | 129 | Create a private channel for the class and invite the whole class to it. 130 | 131 | Please use the convention \#CITY-Fundamentals-class number \(eg: \#WestMids-Fund-2\) 132 | 133 | ## Start Code.org coursework in class 134 | 135 | It is a good idea to spend some time in the class working through the first few lessons. You can help with problems getting signed in, with the interface, etc. 136 | 137 | ### Assigning coursework 138 | 139 | At the end of Class, assign the coursework for this week through Google Classroom. 140 | 141 | -------------------------------------------------------------------------------- /teacher-resources/preparation.md: -------------------------------------------------------------------------------- 1 | # Preparation 2 | 3 | There are a series of tasks that you need to complete to be ready to deliver this course 4 | 5 | ## 1\) Equipment for running the course 6 | 7 | ### Physical Classes 8 | 9 | * Wifi 10 | * Screencasting 11 | * Some set-up for presenting your screen and live coding 12 | * Bring a spare if there's space for 2 rooms 13 | * A good, cheap solution is a Chromecast 14 | * Power extensions/strips 15 | * Student laptops tend to have poor battery life 16 | * Spare headphones 17 | * Useful video courses for week 2 onwards 18 | * Blank stickers for name tags 19 | * Attendance sheets 20 | * Clipboard might be useful too 21 | * Whiteboard markers 22 | * Post-its 23 | * Paper/pens for making notes 24 | * Spare laptops 25 | * Access to the [Fundamentals Assessment Repository](https://github.com/CodeYourFuture/fundamentals-course-assessments) 26 | 27 | ### Online Classes 28 | 29 | * Access to the [Fundamentals Assessment Repository](https://github.com/CodeYourFuture/fundamentals-course-assessments) 30 | * Wifi 31 | * Zoom Account 32 | * A good microphone and website 33 | 34 | ## 2\) Tool Setup 35 | 36 | ### 2.1\) Google Classroom 37 | 38 | In the past we've used Google Classroom to manage coursework assignment and submission. 39 | 40 | The easiest way to do this is to copy a class from previous years. Ask your class coordinator how to do this. 41 | 42 | Be sure to invite all of the students to the classroom before the course starts. 43 | 44 | ### 2.2\) Code.org Class 45 | 46 | Assigning all students to a Code.org classroom will make it much easier to track their progress. You can follow the instruction [here](https://support.code.org/hc/en-us/articles/115000488132-Creating-a-classroom-section) to get setup. 47 | 48 | Be sure to invite all of the students to the class before the course starts. 49 | 50 | ### 2.3\) Khan Academy Class 51 | 52 | Follow the instructions [here ](https://www.khanacademy.org/khan-for-educators/resources/teacher-essentials/getting-started-on-khan-academy/a/teacher-quick-start-checklist)for to setup a Khan Academy Classroom. This will make it easier to track the students progress through the course. 53 | 54 | Be sure to invite all of the students to the class before the course starts. 55 | 56 | In order to monitor student progress on the course, it is recommended that several teacher and TA volunteers set themselves up a 'class' in KhanAcademy right at the very start of the course, and then get ALL students to join ALL classes. This gives visibility of the student rota, their exercise progress, and perhaps most importantly, their project attempts. 57 | 58 | Student progress often won't be updated on your dashboard until as much as 5-10 minutes have passed. 59 | 60 | Khan Academy has created some '[How to teach remotely'](https://www.khanacademy.org/khan-for-educators/k4e-us-demo/xb78db74671c953a7:khan-for-educators#xb78db74671c953a7:teaching-remotely-with-khan-academy) training materials. 61 | 62 | ## 3\) Student Setup 63 | 64 | ### 3.1\) Laptops & Hardware 65 | 66 | Be sure that all of the students have completed the [Student Preparation](../about-this-course/class-preparation.md) steps before they start the course. 67 | 68 | If you have time, a short phone call with each of them to run through the checklist is helpful to save time during your first class. **This is especially important if you are running your class online only.** 69 | 70 | ### **3.2\) Student Invites** 71 | 72 | At least a week before the first class make sure that all students know when and where they are meant to be attending. 73 | 74 | It is wise to tell them to be there 5-10 minutes before you plan to start to allow for late comers. 75 | 76 | ## **4\) Volunteer Setup** 77 | 78 | ### **4.1\) Teaching Assistants** 79 | 80 | This course benefits from their being a few Teaching Assistants to provide one-to-one support to students throughout the day. You should make sure that they know the following. 81 | 82 | * The aims of the course 83 | * The structure of the days 84 | * What their specific role is - [outlined here ](https://docs.codeyourfuture.io/teams/education/education-roles/teaching-assitant) 85 | * When and where they should be attending 86 | 87 | ### **4.2\) Content Knowledge** 88 | 89 | Be sure that you have familiarised yourself with all of the content that is taught over the four weeks of the course. 90 | 91 | It is advised that you attempt the coursework yourself to make sure you understand exactly what is expected of the students. 92 | 93 | ## 5\) Prepare for Assessments 94 | 95 | On Week 2-4 there are assessments that should be done with students to measure their progress through the course. Depending on the number of students you have attending the class you'll need extra technical people to run. 96 | 97 | Be sure to find people to run these assessments and understand how they will be run. 98 | 99 | More information about these assessment can be found here 100 | 101 | * [Overview](instructor-notes-overview.md#1-to-1-assessments) 102 | * [Week 2](instructor-notes-1.md#1-to-1-assessment) 103 | * [Week 3](instructor-notes-2.md#1-to-1-assessment) 104 | * [Week 4](instructor-notes-3.md#1-to-1-assessment) 105 | 106 | -------------------------------------------------------------------------------- /unused.md: -------------------------------------------------------------------------------- 1 | ## How to ask a good question 2 | 3 | When learning to program (AND as a professional developer) you'll have lots of technical questions. If you prepare those questions well, you'll get much better help. We'll look briefly at what that involves, and some resources such as [how do i ask a good question](https://stackoverflow.com/help/how-to-ask) 4 | 5 | (Mentor notes: 20 minutes. cut if no time.) 6 | --------------------------------------------------------------------------------