Intro to Programming Pre-Work

Below is the pre-work for Code the Dream’s Intro to Programming class.

• It will take around 15-20 hours total time.
• You have two weeks to complete the work, but the work is similar to the amount of time you should plan to spend on our class during ONE typical week.
• Please complete the pre-work submission form by 11:59pm on Sunday night of the deadline to be considered for the class.
• If you have any questions on the material, please don’t hesitate to reach out. We’re here to help! Email your questions to classes@codethedream.org
• The Pre-Work Assignment is split into three parts:

1. Preparation ( .5 – 1 hour),
2. Tutorial (10-20 hours), and
3. Demonstration (2-10 hours). This is the most important part.

• Please follow all instructions carefully before submitting your work.
• Feel free to use this checklist as you work through this assignment: Intro to Programming Pre-Work Checklist

---

Watch this video first to get a preview of the whole pre-work process!

---

Part 1: Preparation (approx. 45-60 mins)

For Part 1: Preparation, you will complete four tasks:

1. Watch the Intro Video.
2. Read the article about growth versus fixed mindsets and answer the 2 discussion questions.
3. Read the article about web developer career paths and answer the discussion question.
4. Watch the video about GitHub (a tool you will use in our classes and in your career as a
developer) and answer the discussion question.

You will put the answers to your questions in the pre-work submission form once you have completed all three parts of the pre-work and are ready to submit. For now, type up your answers in a notepad text document, a word document, a google document, or some other convenient place. Once you complete all three parts of the pre-work assignment and are ready to submit you can copy and paste your answers into the submission form.

Preparation: Task 1 of 4

Watch this 3 minute Intro Video:

Preparation: Task 2 of 4

Read this article on growth versus fixed mindsets (about a 15-20 minute read): Fixed vs. Growth: The Two Basic Mindsets that Shape Our Lives

Now type up your answers to the following questions in a convenient place:

1. What is the value of having a growth mindset when learning new and complex material?
2. How would a person with growth mindset respond when they fail or are stuck and don’t know what to do next?

Reminder: you’ll paste the answers to those questions in the submission form once you’ve completed all three parts of the pre-work assignment.

Preparation: Task 3 of 4

Read this article on web developer career paths (about a 10-15 minute read): What Do Web Developers Do?

Now type up your answer to the following questions in a convenient place:

3. What are your career goals? In what type of work environment can you see yourself working? Why?

Reminder: you’ll paste the answers to those questions in the submission form once you’ve completed all three parts of the pre-work assignment.

Preparation: Task 4 of 4

Watch this 4 minute video about GitHub (a tool you will use in our classes and in your career as a developer):

Now type up your answer to the following question in a convenient place:

4. What is GitHub?

Reminder: you’ll paste the answers to those questions in the submission form once you’ve completed all three parts of the pre-work assignment.

Part 2: Tutorial (approx. 10-20 hours)

Much or our class lesson materials use tutorials that you will either read, watch, and/or listen to to learn concepts. Each week of class you read/watch/listen to these lesson materials then write your code using what you learned. This part of the pre-work assignment will give you an idea of what that is like. Follow the steps below to create a free account with Khan Academy. Then work through the Intro to JavaScript: Drawing and Animation lesson. The lesson is broken down into 18 lessons which are made up of one or more “talk-throughs” (a video that demonstrates writing code while talking through what is happening on the screen), challenges that test your understanding of what was just covered, and/or a mini-project that helps you put the pieces you learned together. Plan your time accordingly!

The tutorial has three tasks:

1. Sign up for a free Khan Academy account,
2. Work through the 18 lessons in the Unit: Intro to JS: Drawing & Animation, and
3. Answer 4 questions about what you learned in the tutorial. (NOTE: The 4 questions will appear on the submission form once you select the Intro class at the top of the form)

Tutorial: Task 1 of 3

Sign up for a free Khan Academy account (this will allow you to save your progress throughout the lesson)

• Click here to go to the Khan Academy sign up page, keep “Learner” selected and enter your date of birth.
  You DO NOT need a class code.
  The sign up page will look like this:
  

• Once you enter your birthday you’ll have the option to sign in using a google, facebook, or apple account, or you can select Sign Up with Email if you don’t have any of those types of account or don’t want to use them.
  The sign in options page will look like this:
  

NOTE: If you sign up with an email you’ll need to create a password. If you sign up with your google, facebook, or apple account, follow the instructions in the pop up login window.

Tutorial: Task 2 of 3

Work through the 18 lessons. See the screenshots below for help in finding your way around the Khan Academy site and lessons.

• After signing up, you’ll be redirected to the unit menu on Intro to JS: Drawing & Animation.
  It should look like this:
  

• The 18 lessons are provided in the unit menu on the left (area circled in orange):
  

• All the lesson details are listed on the right side.
  

• Work your way through each item within each lesson. Example: The first lesson, “Intro to programming”, has two items: a “talk-through”/video titled “What is Programming?” and an item to read titled “Learning programming on Khan Academy”
  

• The icon next to the item will tell you what it is:
  

• Click on a lesson item to access it. Example: when you click on the video “What is programming?” this screen appears:
  

When you’re in a lesson item (see below), you can:

• get back to the main unit menu by clicking on the lesson title (underlined in orange),
• get to the next lesson item by clicking on it in the lesson menu (lesson items have an orange dot to the left)
  NOTE: You can re-watch/read/practice any of the lesson items as many times as you want.
• access a transcript of the video, if the lesson item is a video (circled in orange)
  NOTE: For lesson project items, they also have a tab (like transcript) called “Documentation” which will let you reference how code needs to be written for it to work.

Tutorial: Task 3 of 3

Once you’ve completed all 18 lessons in the Khan Academy Intro to JS: Drawing & Animation tutorial, you will have learned some core JavaScript concepts. These concepts will be reviewed and taught more thoroughly in the first five weeks of class. Based on what you learned in the tutorial, type up your answers to the following questions in a convenient place:

5. Write an example of declaring a variable and assigning it a value.
6. Write an example of a function that adds two numbers and returns the result.
7. Create an array with the names of four fruits in it. Set the array equal to the variable “fruits”.
8. Create an object that stores the following data about you: your age, three of your favorite movies or books, your hometown, and today’s date.

NOTE: These four questions will appear AFTER you check the box at the top of the submission form to show that you are applying for the Intro class
Reminder: you’ll paste the answers to those questions in the submission form once you’ve completed all three parts of the pre-work assignment.

Part 3: Demonstration (approx. 2-10 hours)

Each week of class you will be writing code using what you learned. This part of the pre-work assignment will give you an idea of what that is like. Follow the steps below to create a free account with codesandbox, then use our provided starter code to create a drawing or animation that includes a conditional, a loop, and a function.  

The demonstration part has three tasks:

1. Sign up for a free codesandbox account,
2. Write your code or copy and paste your Khan Academy code into the starter code, and
3. SAVE YOUR WORK!!!

Demonstration: Task 1 of 3

Click here to be redirected to codesandbox. On that page, sign up for a free account by clicking on the blue bar at the top of the screen. It should look like this:
NOTE: You will only have the option to sign up using a GitHub account or a google account. If you have neither and don’t wish to create a GitHub or google account, skip this step.

Demonstration: Task 2 of 3

Now for the fun part! Write some code! We want to see what you’ve learned from your tutorial. Your drawing/animation can be anything you imagine. Your code must include ALL of the following:

• a conditional (example: an if statement),
• a loop (example: a for or while loop),
• a function (example: the twoCircles() function in the starter code, which is a function written outside the draw() function and called inside the draw() function; you cannot leave the twoCircles function in the code, you will need to write your own function)

Follow these three steps carefully:

Step 1: Read the comments written in the code for directions (sections in orange brackets)

The comments instruct:

• variables should be written before the function setup() line.
• the canvas/drawing area is defined in the setup function with createCanvas(500, 500);
  You can change the size of the canvas if you wish.
• the starter code should be deleted and replaced with your code.
  This means you can delete lines 13 through 16 that include the following lines of code:
  background(10);
fill(255, 255, 255, 255);
ellipse(30, 30, 30, 30);
twoCircles();
• functions should be written outside of the draw() function, but called within it (example: in the starter code function twoCircles =() => { . . . } is written starting on line 20, and is called within the draw() function on line 16)

Step 2: Write your code, or copy and paste your code from Khan Academy, in and after the draw function as instructed in the previous step. NOTE: Khan Academy and codesandbox use different drawing libraries, so you may find your code acts differently in codesandbox than in Khan Academy. If your drawing or animation looks or behaves differently in codesandbox than how it did in Khan Academy, you can look at these reference materials to help you edit some of your Khan Academy code to work properly with the codesandbox drawing library.

Step 3: Check you work. Be sure the animation/drawing appears in the “Browser” tab section on the right side of the codesandbox page, and that it looks/acts how you expect/want it to. Your work MUST include:

• A conditional (example: an if statement),
• A loop (example: a for or while statement),
• A function (example: the twoCircles() function in the starter code that is written outside of the draw() function and called inside the draw() function.)

You will not be admitted to the class if your work does not include these three items.

Demonstration: Task 3 of 3

Save Your Work!

It is impossible to emphasize this step enough!

Your drawing/animation will not show up on the preview browser (seen in the diagram below where the black square with the three circles is) until you save your code.

To save your work (which you should do often!), click once on the menu at the top of the left corner of the screen. Then, hover your mouse over “File” and select “Save.” See the diagram below:

Submission and Next Steps

You should be ready to submit your answers to the questions from parts 1 and 2 (Preparation and Tutorial) and the link to your work from part 3 (Demonstration).

In the form, you’ll select the Intro to Programming class which will show all 8 questions you need to answer. Copy and paste your answers into the answer fields. In the field that asks for the link to your coding project, copy and paste one of these two addresses (underlined in orange in the example below) from your project in CodeSandbox.

Use this embedded form to submit your answers and work:

You may also use this link to open the submission form: Code the Dream Pre-Work Submission Form

We’ll review and score each submission after the deadline and contact you with our application decisions.