Hello! My name is Mei’lani, and I’m an intern at code.org. I’m also a computer science student. I love computer science because it’s a creative field where I can solve problems and make things work just the way I want. Plus, I get to design things and make them look cool!
Making your own apps is super fun and easy with App Lab! Whether you’re just starting with coding or have some experience, App Lab is a fantastic tool for building apps and sharing them with your friends.
In App Lab, the left side of the screen shows your app, and the right side displays the code that makes it work. You build your program by dragging blocks from the toolbox. To begin, you’ll use a block called “setProperty.” This block helps you change how things look on your screen, like buttons, labels, or even the screen itself.
First, decide which part of your app you want to change. If you hover over an element in your app, you’ll see its name or ID. Select that ID from the first dropdown menu. Elements have different properties you can change, like text color, background color, or font size. You can see all the options and pick which property you want to change in the second dropdown. The last dropdown is where you type the value you want, like a color or a number. The block might suggest a value, but you can always choose your own.
Once you’re done, the block will read like a sentence: “Set button1’s background color to green.” Click “run” to see the changes you’ve made. If you want to make more changes, you can reset and drag in more blocks to modify other parts of your app, like the text!
In this tutorial, we’ll use block mode, but App Lab also has a text mode. Either way, you’ll be using JavaScript, which is the language of the web. Each level in App Lab has a goal, instructions, and a picture of what you’re trying to create. If you get stuck, you can click on the picture for help, but try to solve it on your own first!
Once you’ve completed the goal for a level, click “finish” to move on. That’s all there is to it! Click the orange “continue” button to go to the next level and start your exciting adventure with App Lab!
Start by brainstorming an idea for a simple app you would like to create. Think about what problem it might solve or how it could entertain users. Use App Lab to design the layout of your app, adding buttons, labels, and other elements. Experiment with the “setProperty” block to change the appearance of these elements. Share your design with a classmate and explain your choices.
Take a virtual tour of the App Lab interface. Identify the different sections, such as the app display area and the code workspace. Practice dragging and dropping blocks from the toolbox to see how they affect your app. Write a short paragraph describing how the interface helps you build and test your app.
Challenge yourself to use the “setProperty” block to change multiple properties of an element. For example, change the text color, background color, and font size of a button. Create a list of the properties you changed and the values you used. Share your results with the class and see who can come up with the most creative combination!
Work in pairs to complete a scavenger hunt in App Lab. Your task is to find and use specific blocks to achieve certain effects, such as changing a label’s text or making a button disappear. Keep track of the blocks you use and the effects they create. Discuss with your partner how each block contributes to the app’s functionality.
Once you’re comfortable with block mode, try switching to text mode to see the JavaScript code behind your app. Compare the blocks you used with the corresponding JavaScript code. Write a short reflection on what you learned about JavaScript and how it relates to the blocks in App Lab. Share your insights with the class.
Here’s a sanitized version of the YouTube transcript:
—
My name is Mei’lani. I’m an intern at code.org and I’m also a computer science student. I enjoy computer science because it’s very creative. I get to be a problem solver and make everything function as I want it to. Additionally, I can be a designer and choose everything on the creative side.
Creating your own apps is easy with App Lab! Whether you’re new to coding or have some experience, App Lab is a great tool for building new apps and sharing them with friends.
In App Lab, the left side displays your app, while the right side shows the code that makes it run. You build your program by dragging in blocks from the toolbox. To start, you’ll have one block called “setProperty.” The setProperty block changes the appearance of the elements on your screen, such as buttons, labels, or even the screen itself.
First, decide which element you want to change. If you hover over an element in your app, you can see its name or ID. Then, select that ID from the first dropdown. Elements have various properties you can change, like text color, background color, or font size. You can see the full list and choose which property you want to modify in the second dropdown. The last dropdown is where you’ll write the value you want to use. The block will suggest a value, but you can always type in different colors or numbers yourself.
Once you’re done, the block reads like a sentence: “Set button1’s background color to green.” Hit run to see the changes you’re making in code. If you reset, you can drag in more blocks to change other aspects of your app, like the text!
For this tutorial, we’ll be working in block mode, but App Lab also supports text mode. Either way, you’ll be programming in JavaScript, the language of the web. Each level has a goal, instructions, and an image of what you’re aiming to create. If you ever get stuck, click on the picture, and it will show you how to complete the level. But see if you can do it on your own first!
Once you’ve completed the goal for this level, click finish to move on. That’s all there is to it! Hit the orange “continue” button to go to the next level and start your adventure with App Lab!
—
This version maintains the original meaning while ensuring clarity and professionalism.
App – A software application that you can use on a computer or mobile device to perform specific tasks. – Example sentence: I downloaded a new app on my tablet to help me learn math.
Lab – A place where you can experiment and learn about computers and coding. – Example sentence: In our computer lab, we learned how to build a simple website.
Coding – The process of writing instructions for a computer to follow. – Example sentence: We spent the afternoon coding a game in our computer class.
Blocks – Visual elements used in some programming languages to represent code instructions. – Example sentence: Using blocks, I was able to create a fun animation in Scratch.
Program – A set of instructions that a computer follows to perform a task. – Example sentence: I wrote a program that can calculate the area of a rectangle.
Change – To modify or alter something in a computer program. – Example sentence: I had to change the code to make the character move faster in the game.
Color – A property that can be used in coding to change the appearance of text or graphics. – Example sentence: I used code to change the color of the background to blue.
Text – Words or letters that are displayed on a screen or used in coding. – Example sentence: I added text to my webpage to explain what my project is about.
JavaScript – A programming language used to make web pages interactive. – Example sentence: We used JavaScript to create a button that changes color when clicked.
Create – To make something new using a computer or code. – Example sentence: I used a coding app to create my own digital storybook.
