Guide to Using the IDE

1. Introduction to Replit

When it comes to programming, there are different ways to write your code and run it. For many languages, you have the option to use an Integrated Development Environment (IDE) to write your code. An IDE can be viewed as a text editor that has additional functionality to allow developers to perform some additional tasks to simplify the workflow of the development process. Different individuals and organizations have their preferences of what IDE they prefer.

Throughout this course, we’ll be using Replit for Python. It has some unique features in that it’s a tool that is completely run through a browser. This means you can use it from any computer, tablet, or mobile device to write, build, and run your code.

Within Replit, you can deploy any of the code that you create externally with just a click. There’s no need to copy code or make changes to the underlying environment. In addition, Replit can fully manage your environment that you use to build and run your code. This means that you don’t have to worry about having the right version of Python or the right library, which is prewritten code collections that you can use.

Even though you don’t need an account to use Replit, you should still create one. By doing so, you will be able to use all the features that are required for this course.

Creating a Replit User Account

Step 1: To get started, you can access the following site: https://replit.com/signup

Step 2: Follow the prompts to create a Replit user account.

Step 3: Once you’re done creating your account, click on the “+ Create” button in the top right. This will allow you to create a new Python project.

Note: Replit is a free professional and educational application, and is constantly evolving with updates based on members' suggestions and language changes. As such, you may see different colors and/or icons other than what is depicted in the following images. The functionality of the application remains consistent—just know that a color or icon may be different.

Step 4: The “Create a repl” window appears. Select “Python” from the dropdown languages. If you have used Replit for Python coding previously, Python may appear at the top under “Favorites.”

Step 5: By default, a random project name will be generated in the “Title” field. Please change that to anything you wish the project name to be.

• It’s important to note that by default, your repl will be public. This means that your project can be accessed by anyone on the internet. Although this can be very useful when it comes to collaboration and sharing of code, you should be careful not to use any personal identifiable information or passwords in any of your projects.

Step 6: Finally, select “+ Create Repl” to create your project.

The Replit IDE

Once your project is created, the Replit IDE layout will appear.

The IDE consists of three (3) main panes and a “Run” button. Let’s cover these main elements in a left to right order.

Left Pane: Menu Bar and Files and Configuration Pane

The left pane consists of the menu bar and the files and configuration pane. Each menu bar item will change what you see in the pane. Although the menu bar has quite a few features, you don’t need to know what they all do. In most cases, when you use an IDE, you will only use some its features rather than all of them.

Let’s cover each of the menu bar features.

Icon	Feature	Description
	Files	This will display all of the files in your project and allow you to add new files or folders into your project. This item is the default menu bar item.
	Version Control	This isn’t one that you’ll need now, but if you need to track your changes and roll back to prior versions (similar to “Track Changes” in MS Word), using this feature will allow you to do so.
	Debugger	This feature can be very helpful to create breakpoints in the code and allow you to step through the code one line at a time, but more on that in a future lesson!
	Packages	These packages allow you to import in code and functionality that you haven’t built but would like to add to your program. For example, if you were building an image gallery and wanted to create an image carousel that rotates, you can simply import a package that already has that feature which will make it much easier for you to implement your program.
	Secrets (Environmental Variables)	Even if your Replit is set up to be accessible by the public, you can store variables that are hidden away from everyone else but still make use of them in the Replit.
	Settings	This feature can be very useful as it allows you to customize the layout, color scheme, font size, and other features to your liking.
	Database	This feature allows quick database key commands. We won’t get into those in this course.
	Unit Tests	This feature allows you to run tests. We won’t get into those in this course.

Note on the Settings function: Throughout the course, we will typically be using the Settings default options, but if you would like to change those, you certainly can do so. The one in particular that can be very useful, especially if you’re coding on a mobile device, is changing the side-by-side option in the layout to stacked (this is changed under the Layout setting). This changes the layout so that the code editor and output sandbox are on top of each other instead of side-by-side (see image below).

To the right of the menu bar is the files and configuration pane. By default, this pane displays the “Files” menu bar information, which displays the files that make up the project. Depending on what menu bar feature is selected, this pane will update accordingly.

Middle Pane: Code Editor

The middle pane is the code editor. This is the pane that you will spend the most time with, as this is where you’ll be writing your Python code. The code editor has some unique features that we’ll get into. You may notice that in the files and configuration pane, you have a main.py file listed. By default, when you create a Python project, Replit creates that main.py file. The code that you enter is saved to that main.py file.

Right Pane: Output Sandbox

The last pane on the right is the output sandbox. This is the section where you can see your code run. All the output that your code creates will display in that output sandbox. This pane also acts as a sandbox to run small pieces of code that we’ll take a look at later.

Above the Panes: Run Button

Above the main panes, you’ll see some added functionality, but the important one to be aware of is the run button in the middle at the top. When you click on that green “Run” button, the code in the code editor pane will be built and will run in the output sandbox pane.

NOTE: Replit has the ability to change from a light to a dark theme. For ease of visibility, this course will depict the editor panel from here on with the dark theme applied. To change themes, select the menu icon (it looks like a hamburger, three vertical lines) in the top left-hand corner in Replit.

Once the menu opens, near the bottom you should see a "moon" icon. Selecting the icon will change the theme to dark. You can switch back to the light theme here too.

Now the Replit application is on dark theme. Instead of just the output sandbox panel, all panels now display with a dark background.

Again, moving forward, you will notice any code shown in the code editor pane on future lessons will have a dark background.

Integrated Development Environment (IDE)
A text editor that has additional functionality to allow developers to perform some additional tasks to simplify the workflow of the development process.

Libraries/Library
Prewritten code collections that you can use when developing a program.

2. Running a Program

Now that you’ve had a tour of the Replit application, let’s get right into your first program. To get started, we can enter in some code to test it and see what happens.

Directions: In the Replit code editor, enter the code below. When finished, select the “Run” button.

print("Hello World")

Notice that on the left of the command, a number is displayed. This is not part of the code and just indicates a line number. This will be useful, as you’ll see in the next lesson.

Select the “Run” button at the top and you should see “Hello World” output in the right output sandbox pane.

Hello World

What happened? The program was compiled and executed in Replit. In doing so—since our code didn’t have any errors—it displayed the result of the print command on screen.

Congratulate yourself as you’ve written your first Python program, built it, and run it. That is how easy it is to run it!