Getting Started With Replit

Replit is the software we are going to be using in this sushi card! If you already have an account that you're comfortable with using, feel free to move on to Setting Up Your Dev Environment.

What is Replit?

Replit is an online code editor, where you can run code directly in your browser. Replit supports a ton of programming languages, and is suitable for this sushi card. The upside to using Replit is that any device can participate in this activity (including Chromebooks!).

"Replit" doesn't really roll off the tongue. You may hear mentors say "Repl" rather than "Replit." Please note that we are referring to the same thing.

How do I get to Replit?

Open a tab in your browser and type in replit.com.

How do I make an account and start coding?

Click "Sign up" in the top right corner. Use either an email or one of the "Continue with ..." options. Please use credentials that are memorable.

Setting Up Your Coding Environment

• Sign in to Replit. Click the "+" in the top right of the homepage

• For the programming language, select HTML, CSS, JS

• For the name of the project, type "Introduction to HTML"

Here is how your page should look like:

Click "Create repl."

Don't get overwhelmed by all the text! Here is a diagram of all the panels:

1. Files Panel: Shows all of the files you will be working with.

2. Editing Panel: Shows the code within a selected file.

3. Website Preview: Shows a preview of your website. To refresh the preview, click the "Run" button at the top of the screen.

4. Terminal: For some advanced users, typing commands into the terminal could be useful. Leave this panel alone for now.

Cleaning Your Repl

Replit pre-fills some common code used by web developers whenever you load a new Repl project. While this is useful when you are already well-versed in website design, it is not necessary for our purposes. Please perform the following steps to clean up your Repl before we begin:

1. Delete all code in the index.html file.

2. Delete the entire script.js file.

Your window should now look like this: