Getting STarted

This page will help students and teachers do three things: 

(1) make a Code.org account for creating, storing, and organizing App Lab projects

• Teachers and students must have accounts to make apps

• Teachers and students use accounts to store projects

• Teachers can use accounts to assign or suggest lessons to groups of students

• Teachers can use accounts to track student progress through lessons

• Students can use accounts to access lessons and other resources

(2) learn how to use this CS Pathways Curriculum website

• Follow the Tech pathway

• Follow the Civics & CS pathway

• Find Examples & Resources to support pathways you choose

(3) learn how to make three apps that use three fundamental coding concepts.

• An apps that tells an interactive story or shares information (events)

• A quiz apps that keeps score (variables)

• A quiz apps that delivers a win (or lose) message (conditionals) 

Resource Links - Unit Resources

Overview: Different Pathways

How you decide to teach or learn app design depends on why. If you are looking for a fun way to code or if you like making things using digital technology, you probably want to use the Tech Pathway. If you want to make an app to use in an action civics project -- as a tool to collect and share information, activate people, and/or teach about issues -- you might want to follow the Civics & CS Pathway. Both pathways lead to making meaningful apps. You might do some of the same activities and learn the same skills. But they take different routes to their destinations.  

The Tech Pathway 

The Tech pathway was designed for teaching and learning app design and computer science skills and concepts in a more or less, traditional order -- designing the user interface, programming events, using variables, using conditionals, and experimenting with other features. One teacher described the pathway as learning how to use the tools and then figuring out what you can make.  

Civics & CS Pathway

The Civics & CS Pathway follows the stages of an actions civics curriculum, students learn to identify and focus on an important community issues, research it, and take civic action to address the issue. Apps can be great tools for researching, planning, educating, and mobilizing. The pathway helps students make the kinds of tools they need, and provides supports for their level of skill.

Examples & Resources

Whether you take the Tech Pathway, the Civics & CS Pathway, or forge your own pathway, you can find examples of apps and coding resources to help you think of ideas and learn coding skills and knowledge on our Examples & Resources page.  

Links

Tech Pathway

Civics & CS Pathway

Examples & Resources

Video: WALTHROUGH OF THE WEBSITE 

Resources

Video - About Code.org

Reference - App Lab Basics Guide 

Resource Links - Unit Resources

Overview

Basic app development skills and knowledge can be used to create meaningful student projects. The VAPR project developed through CS Pathways won the “Grassroots Change” award. Read about it here. 

The coding for the project is simple, but as a well-designed app, the project effectively communicates its message and information. 

Purpose

• Learn about App Lab features

• Learn to make and support making a basic App

• Learn about event driven programming and the onEvent block

• Review key modules for making and supporting a basic app

• Become familiar with useful App Lab references and resources

• A useful heuristic: Design Element -  Event - Action 

Core

Video: App Lab: Introduction from Code.org  

Video: CS Principles: Intro to Design Mode in App Lab

Video: Demonstration: Make a Simple App 

The Intro to App Lab and Meow App lesson in Unit 2 can be used to introduce students and TEACHERS to a basic app and connect the App Lab tutorial to class and student projects.

Become familiar with Intro to App Lab. Students explore and learn to make basic apps in Units 1 and 2. These units use Code.org's Intro to App Lab (Level 5) to provide instructions that can be applied to coding the Meow App. Teachers should be sure they are comfortable with concepts in Intro to App Lab up to Level 5. They should then follow directions for Level 5 through Level 15.

Slide Deck - App Lab Getting Started 

Activities - Intro to App Lab, level 5 (review previous levels if necessary)

Reproduce the Meow App or your own version using the Lesson Plan below.

Lesson Plan -  Meow App

Model - The Meow App

Modify or remix the Meow App according to what interests you. This is a key step to developing your understanding of CS and computational thinking -- figuring out what can you communicate with an app, to whom, and then working out how to do it. 

Video Tutorial - Programming a Simple App: Things you can do with buttons, events, images, and text boxes

More

Reference - Responding to User-Input: This page explains how to code an event, a fundamental concept for app development.

Reference - App Lab Basics Guide 

Lesson Plan - Guide to Intro to App by Jackie Rowen 

Lesson Plan - Introduction to App Lab (CS Pathways) 

Activity -  Intro to App Lab Tutorial: Level 1

Reference - Code.org's Teachers' Guide intro to App Lab 

Reference - App Lab Basics Guide 

Overview
Buttons, events, and screens can get you pretty far if you want to present information based on events triggered by users. For example:

• when button1 is clicked, setScreen to UsefulContactsScreen.

• when buttonYou'reWelcome is clicked, playSound "De Nada" 

But sometimes you want to present information based on past events, like

• when you want an app to keep track of the number of times a button is pushed

• when you want an app to keep track of the number or times a user picks the right answer

• when you want an app to print a message containing user-entered information

For those times, you need a variable to hold a value or state. Programs can update variable values or states to keep score, customize messages, and other . Check out the links below for explanations and tutorials.

Purpose

Learn

• When you need a variable

• How to declare a variable

• How to assign a value to a variable

• How to call or view or use a variable

• How to update or modify a variable

Links

Core

Model - President App with Thomas Jefferson Trivia 

Review the student module

Unit 3 module 2: Introduction to Variables

Watch these videos on variables. Consider how you might use them for whole group instruction and/or references for students.  

Video -  CS Discoveries Introduction to Variables I: an explanation of variables; the video translates blocks into text. Don't panic. The last part of the video shows blocks. Video tutorials below show the block format.

Video - Introduction to Variables II: Blocks are translated to text.

Video Tutorial -  Working with Integer Variables: Demonstrates concepts using blocks

Video Tutorial - Working with String (text) Variables  

Video Tutorial - Keeping Score Part 1: This is probably the case for most students.  

Video Tutorial - Keeping Score Part 2

Video Tutorial - Common Mistakes Working with Variables 

More (general information and specific cases)

Video Tutorial- Code Org App Lab Tutorial 2 - Variables (Local)

Video Tutorial - Use a Text Input Box to Assign a Variable    

Video Tutorial -  Dropdown Menus and Variables

Video Tutorial- Variables

Video Tutorial - Putting variables into text boxes (concatenation)

Video Tutorial - More Concatenation 

Reference - Comparison of Code.org App Lab, AP CSP Pseudocode, and Java Code: Java is like the code used for the text format of App Lab's blocks. App Lab's text based language is javascript. 

Overview:

Conditionals are program blocks or expressions that can tell programs what to do based on whether some condition in the program is true or false. For example whether a variable like score is greater than 0. If the condition is true (score > 0 ) the program does one thing. If the condition is false, then the program does something else.   

Purpose:

• See examples of conditionals in action

• Understand what a conditional is

• Understand when to use them

• Practice using them

Examples of Apps with conditionals

Hogwarts House Sorter

CSTA Workshop 2024 Sample App

Advantages of Conditionals:

You can use pull down menus, text entry, and sliders to control what your app does.

You can use updated variables to control what your app does.

You can write programs that consider more than one condition at a time, like age and favorite color, or age, grade, favorite color, and hair color.

You can use timers

Intro to conditionals and how to use them

Video Tutorial - Intro to Conditionals

Video Tutorial -  Conditionals and Integers/Variables 

Overview
Code.org provides so many resources that it can be hard to know how to find them and how to use them. This module has links to useful Code.org and App Lab tips.

Resources

A Collections of Video Playlists containing videos made by teachers and kids

Code.org App Lab Codes and Tips from Kara Haas

BRVGS Computer Science- App Lab Help 

Coding Resource Tips

Copying and pasting code saves typing time and is a way to quickly learn how code works. It is also a way share or transfer code between projects.  

The following tip is from BRVGS Computer Science- App Lab Help 

• To Copy and Paste your code, use Control-C and Control-V (Command- for Mac):

  • In Block View: start outside of a block, click, then drag until you see your block(s) highlight. Copied blocks can be pasted into the same project but not other projects.

  • It's easier in Text View; highlight just like with regular text. Copied text can be pasted into the same project AND other projects.

  • If your program is running, it's hard to highlight stuff, so hit Reset first.

REMEMBER. Please give credit to programmers when you copy "original" code or code that is not common knowledge.

Using YouTube and Google

Coders often use Google and YouTube to learn programming techniques for different programming languages. The trick is learning what to put in the search. When searching for App Lab tips and tutorials, include the following in your searches:

1) "code.org" and "app lab"

2) the design element(s) and/or block(s) you are working with. For example "text area," or "radio button? or "createRecord." Specific and detailed is better.

3) what you want the design elements to do or what you want to do with the design elements.

EXAMPLE: How do I make an image move in code.org app lab?

or

move image and "code.org" and "app lab"

Try it.

Once your get results, TAKE SOME TIME to browse through the links to find an explanation that MAKES SENSE to YOU. If one explanation seems too confusing, try another, simpler one. 

In computer science, there are many ways to program a computer to do what you want. Experiment! That's why it's called computer SCIENCE.

CS Pathways can be part of a Culturally Responsive Computing (CRC) approach. By guiding students to create apps that serve their communities STUDENTS authentically define them, CS Pathways activities and instruction can be part of a process in which students build positive, productive, and empowered identities in computing. 

CS Pathways CRC Purpose

CS Pathways teachers and students

• Learn to code; citizens can and should learn coding as fundamental to informed civic life 

• Connect computing and computer science to their interests, communities, and ways of knowing; learn about each others' interest, communities, and ways of knowing 

• Use computer science to communicate ideas and make meaningful objects

• Advocate for teaching computer science in schools as part of providing socially just educational opportunities and outcomes.

  • • Information about CS teaching in the US.

Links:

Slide Deck - 

Lesson Plan - 

Resource - Unit 1 Module 3 CRC Prompt-Hour of Code 

Resource -  Massachusetts Civics Guidance

Overview

Planning how long an app design project takes depends on the teachers' and students' prior knowledge of coding, App Lab, and app design. In the spreadsheet below, we have tried to estimate the time it takes to learn skills and knowledge to make different kinds of apps depending of prior knowledge.

Here are resources that can help you get started and keep you going in App Lab.  

What makes an app different from other computing objects or artifacts?

Getting oriented with the App Lab programming "language" 

Reference - App Lab Basics Guide

Video - App Lab: Introduction

Coding Tutorial Videos

CS Pathways Youtube Playlist   

App Lab on Code.org Playlist:  by Computer Science and Coding 

Videos Not in Playlist

Remixing: Finding, reading, and borrowing useful code

CS Pathways Apps and Examples: Apps made in CS Pathways and using programming methods useful for CS Pathways projects. You can study and remix examples of code here. 

Computing Concepts Coming soon