> For the complete documentation index, see [llms.txt](https://sbdojo.gitbook.io/sushi-cards/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sbdojo.gitbook.io/sushi-cards/2021-2022/session-1/make-a-website/day-1/getting-started-with-replit.md).

# Getting Started With Replit

[Replit](https://replit.com) 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](/sushi-cards/2021-2022/session-1/make-a-website/day-1/getting-started-with-replit.md#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!).

{% hint style="info" %}
"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.
{% endhint %}

### How do I get to Replit?

Open a tab in your browser and type in [replit.com](https://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:

![](https://5148195-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgIjc7Q-SbTUf-t61Rv%2F-Mi2WZu26EIdw7KaczAf%2F-Mi2_NcHYYpVy0UbVcux%2Fimage.png?alt=media\&token=657dd251-f54f-421e-9929-b5118a32f5c1)

Click "**Create repl**."

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

![](https://5148195-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgIjc7Q-SbTUf-t61Rv%2F-Mi-ecbSIzyUHpTw_dAR%2F-Mi-hp1_dLcd01VAxo9W%2FDev%20Environment.png?alt=media\&token=9e589264-d697-44ea-8e8a-9202f27fc0f6)

{% hint style="info" %}

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.
   {% endhint %}

### 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:

![](https://5148195-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MgIjc7Q-SbTUf-t61Rv%2F-Mi-ilxRRclchcQmOSVT%2F-Mi-ldpkrtTjE2b3HrhR%2Fimage.png?alt=media\&token=b6d159d8-565a-41b4-b649-287439bddb79)