Code the Dream Labs Logo

Code the Dream

At Code the Dream, we envision a world in which tech innovation comes from all of us and benefits all of us.

Intro to Programming Pre-Work Assignment

Assignment Instructions

Review these four steps and complete your assignment.
Find additional resources and assistance here.

NOTE: We do NOT permit the use of AI for writing code or answering questions in the pre-work form.
If you’d like more guidance or additional information about AI policies for CTD students, look here.

  1. 1 Sign up for p5.js
  2. 2 Plan your project
  3. 3 Write your code
  4. 4 Submit your work
✏️
Step 2

Plan your project

You must write original code in the p5.js editor; you are not allowed to use AI to write this code. To be considered for the class, your code must include:
– a comment (using comment notation) at the top of your file explaining what your drawing or animation should look like or do,
– a variable,
– a conditional (example: an if statement),
– a loop (example: a for or while loop), and
– a unique function. The default draw() and setup() functions do not count as the unique function.

This may take you several hours to complete. Need help planning? Refer to the optional Khan Academy resource below.
✅
Step 3

Write your code

– Add your code inside the draw() function and/or below the draw() function. You must use the draw() function for the code to run – but remember, this cannot count as your unique function.
– Leave the setup() function as is, though you can make the Canvas larger than the default 400 by 400 size.
– Be sure you have checked and tested your work to verify that it meets the requirements and looks and behaves how you expect.
– Use the console section (under the code section) to troubleshoot any problems.
– Refer to the p5.js documentation here if needed.
📘
Step 4

Submit your work

Use the form below to submit. Make sure you meet all the requirements and submit by the deadline. Deadlines for each term can be found on the Apply page.

In the submission form, Intro applicants will also answer two questions in each of three sections: Problem Solving, Computer Setup & File Navigation, and Asking for Help. Completing the form may take 20-30 minutes. Read instructions carefully and answer the questions as best as you are able.

Optional Khan Academy Tutorial
(Recommended for beginners)

If you are new to coding, we suggest you complete the Khan Academy’s Unit 1: Intro to JS section of the Computer Programming course before attempting the pre-work assignment. Code the Dream uses the flipped classroom model, where you learn most new material at home, then practice it in live group mentor sessions. The following tutorial from Khan Academy is a good way to get used to the self-study-first approach.

To get started with the tutorial:

The Unit 1: Intro to JS: Drawing and Animation tutorial covers all skills required to complete the pre-work assignment (you will learn all these skills in more detail in the Intro course). As you work, focus especially on concepts tied to the pre-work deliverables: variables, conditionals, loops, and functions. We estimate that going through this tutorial will take anywhere between 15-25 hours (or more, if you spend extra time on the coding projects in each module).

As a reminder, this step is optional – we will not see your progress, and if you already feel confident with JavaScript, feel free to complete the pre-work coding assignment on your own, per the instructions above. Note: you don’t need to move beyond Khan Academy’s JS Unit 1 – we cover those additional concepts in Intro to Programming.

Optional Khan Academy Tutorial (recommended for beginners)

Submission Instructions & Tips

Scroll down to access the submission form.

Submission deadlines (& results dates) for each class term can be found here

The Submission Form, below, includes four total sections, including a section to paste in your coding assignment link. In the other sections, we want to get a feel for how comfortable you are in the areas of Problem Solving, Computer Setup, and Asking for Help: these are essential skills to succeed in our classes. Each section includes guidance and resources, in case you are new to coding. Read the instructions carefully and answer the questions as best as you are able. Below is a brief description of what to expect in each section.

Section 1: Pre-Work Coding Assignment Link

  • See above for details about the optional Khan Academy tutorial for new coders.
  • Make sure the code in your assignment contains all of the following:
    • A comment (using comment notation) at the top of your file explaining what your drawing or animation should look like or do,
    • A variable
    • A conditional statement (ex. an “if” statement)
    • A loop (ex. a “for” or “while” loop)
    • A unique function (a block of code you’ve name and called in the draw( ) function). REMINDER: The default draw() and setup() functions do not count as the unique function.
  • Additional tips
    • Test your code before submitting it to be sure that the preview (right) side of the p5.js page is showing the drawing or animation you have created.
    • Make sure that you have copied the correct link to your coding assignment. The link should look like this: https://editor.p5js.org/yourUsername/sketches/someLettersOrNumbers.
  • Paste in your p5.js link into the submission form where indicated.

Section 2: Problem Solving
You have two tasks in the Problem Solving section. First, demonstrate that you know how to access developer tools in your browser by sharing a screenshot. Second, you are provided with a simple flowchart and given a starting point. You’ll describe step-by-step how to get from that starting point to the end of the flowchart.

Section 3: Computer Setup & File Navigation
You have two tasks in the Computer Setup section. First, you’ll need to identify which computer and operating system you are using. Second, you’ll be asked to create a folder on your desktop and download a file into that folder then share a screenshot to show you completed the task.

Section 4: Asking for Help
You have two tasks in the Asking for Help section. First, you’ll be asked to look at a screenshot of an error and describe what you learn from looking at that information. We don’t expect you to fully understand the error; just share your observations. Second, you’ll need to write an example message, based on a template, of how you would reach out to a mentor for help with a coding problem.

To submit your pre-work, complete the following form.
Good luck; you’ve got this! We look forward to seeing you in class!