Student activity guide

STEP 1: PREVIEW YOUR MISSION

In today’s coding activity, you will become an app designer and build a GOAT product screen
using AppLab.

PROJECT PREVIEW Mission Checklist

Here’s an example of the starter page and the ❏ I used the starter code to create my
completed project page you’ll code today: product screen
❏ I modified the elements in the starter
code to match the example solution
❏ I added buttons to match the example
solution.
Extra Challenges
❏ If you have time, read more about some
innovative apps and their stories using
this worksheet.
2 Student Activity Guide

STEP 2: READY, SET…Go!

Use a starter template to program one page of an app: the Air Jordan 5 Retro Grape 2013 product
screen.

A — OPEN STARTER CODE

1. Access AppLab by signing into
your Code.org account.
2. Open up the Starter Code.
3. Click the “View code” button
to the right of the screen.
4. Click on the “Remix” button in
the top bar of the screen. Now,
your screen should show your
workspace, toolbox, and three
buttons on top of your product
screen.
5. Click the “Design” button on
top of your product screen to switch to Design Mode.

B — MODIFY PAGE ELEMENTS

1. Click on the title text that shows the name of the shoe.
2. In the properties tab in your workspace, find the field that says “text color” and change
the color of the text to black by typing #000000 into the field.
○ You can also click the square next to the field to change
the color.

LESSON 1.1 | Real-world app design with goat

3 Student Activity Guide

3. Now, on your app screen, click the title text and drag it to roughly the center of your
screen.
4. Then, click and drag the little gray arrow in the bottom right corner of the text element to
make your text box wider
5. Then, click and drag the image of the shoe to be centered above the title text.
6. Make the image of the shoe larger by either dragging the gray arrow on the product
screen.
7. Now, click on the gray product details box on your app screen.
8. Using the properties tab in your workspace, change the color of the text to black by typing
in #000000 into the “text color” field.
9. Then, change the background color of the box to white by typing in #ffffff into the
“background color” field.
10. Now, find the “font size” field and change the font to size 14.
11. Now, find the “Duplicate” button in your workspace on the right hand side of the screen
and click it. This will make a copy of your Product details text box on your product screen.
12. Drag the new text box directly underneath the original Product details text box.
13. Open this 1.1 Activity Product Details page to find the text details for this shoe, or see the
table below:

Air Jordan 5 Retro ‘Grape’ Product Details

The Air Jordan 5 Retro ‘Grape’ returned to Jordan Brand retailers in May of 2013. One of
the original four colorways released in 1990, the sneaker was worn by MJ during a
Wheaties box cover shoot and by Will Smith on the Fresh Prince of Bel-Air. Previously
retro’d in 2006, the design combines a White leather upper with Black, New Emerald, and
Grape accents on a translucent blue outsole.

14. Copy the text details, then paste them into the “text” field in the properties tab.
15. Find the “font size” field in the properties tab and change it to 13.
16. Then, drag the gray arrow on your product screen to resize the text box to be larger.

LESSON 1.1 | Real-world app design with goat

4 Student Activity Guide

C — PROGRAM BUTTONS
1. In the Toolbox menu in the center of the screen, find the “Button” icon and drag it into the
top left corner of your product screen. This will be our “Back” button.

2. Change the background color of the button to white by finding the “background color”
field in the properties tab and typing in #ffffff.
3. Then, in the “text” field, delete the “Button” text.
4. Find the “border width” field and change the width from 1 to 0 to get rid of the gray
border.
5. Now, scroll down in the properties tab to find the “image” field and click “Choose…” to the
right of the field.
6. A “Choose Assets” window will pop up with three tabs. Click the “Icons” tab on the right
to find the list of icons.
7. Choose an icon of an arrow facing the left to use for your Back button, then click on it.

8. Now, drag another button onto the app screen and place it in the top right hand corner.
9. Change the background color of the button to white by finding the “background color”
field in the properties tab and typing in #ffffff.
10. Change the text color to black by finding the “text color” field in the properties tab and

LESSON 1.1 | Real-world app design with goat

5 Student Activity Guide

typing in #000000.
11. Then, in the “text” field, type in “WANT” in all caps.
12. Now, drag another button onto the app screen and center it on the very bottom of the
screen.
13. Change the background color of the button to black by finding the “background color”
field in the properties tab and typing in #000000.
14. Find the “font family” field (directly under background color) and use the dropdown
menu to change the font to Arial.
15. Then, in the “text” field, type in “Order Now”.

D — review your checklist

❏ I used the starter code to create my product screen
❏ I modified the elements in the starter code to match the example solution
❏ I added buttons to match the example solution.

e — Still have time? Continue on to the Extra challenges (step 3) below.

If you need help while working on your activity, you

Need Help? can watch the video walkthrough by clicking the
button here. Pause the video at any time and
return to your activity to try out each step for
yourself!

STEP 3: Ready for more? Extra challenges

Once you’ve finished your mission, try working on these extra challenges!

Spicy challenges
● If you have time, read more about some innovative apps and their stories using
this worksheet.

LESSON 1.1 | Real-world app design with goat

6 Student Activity Guide

Appendix: VOCABULARY
Find this lesson's vocabulary below.

entrepreneur (n):
A person who starts and operates any type of business.
innovation (n):
Recognizing a problem that needs to be solved and building a tool to solve it.
innovator (n):
Someone who recognizes a problem and uses technology to solve it.

Appendix: Helpful Links

Use the links in this section if you are stuck or simply want to know more about a concept.

Project Links Additional Links

● Starter Code ● App Lab Documentation
● Coding Activity Walkthrough Video ● App Lab Tutorials

My cse3 journal
Extra space for notes, thoughts, and other things!

notes

LESSON 1.1 | Real-world app design with goat