Getting Started with Replit

 

Setting Up the Files You Need

Warning: This document was written in Fall 2020, but replit.com changed the interface to their service quite extensively last spring, so some aspects of this document may be out-of-date. Please let me know if you find errors or inconsistencies.

Accessing replit.com

Replit.com is cloud-based software, meaning you go to the replit.com web site and develop and run your program on their server, rather than running it on your own computer. As a result, there's no need to download any software to your own computer. Instead you need to sign up for an account at replit.com. (There is a "Sign up" button when you first go to the site.) Provide a username, password (not your K password!), and email address; they will send you a verification link.

Once you have an account on replit.com you can specify the languages you are interested in or create a new repl (their word for a project). For this course, you will create a single repl using "HTML, CSS, JS" as the language choice. The system will give your repl an interesting (or possibly ridiculous) name made up of a random adverb, adjective, and noun, such as "BlissfulAttractiveUnderstanding" or "SimilarSimpleHypothesis." You may want to rename it to something simpler, such as "CS_102" or "IntroCS".

When you go into your new repl, you will see that the screen has 3 main panes. The repl will automatically be populated with a few template files that will show up in the left-most of the three panes. If you click on one of the filenames (index.html, for example), you will see the page source for the file in the middle pane. The page source contains the contents of the page, plus additional "mark-up" information that indicates how the page should be laid out and formatted. If you click on the Run button it will display the formatted index.html page in the right-most pane. To begin with, the pane will remain blank because there is no interesting content in the index.html file.

Find the lines in the index.html file containing 
  <body>
    <script src="script.js"></script>
  </body>
Add a new line containing your name between the script and </body> lines, as in the example below: 
  <body>
    <script src="script.js"></script>
    Buzz Hornet
  </body>
Now when you click on the Run button, the pane on the right side of your browser window should contain a very simple web page containing your name.

Copy Sample Files to Your Repl

In this class, we will sometimes provide links to files you can use to get started with your projects. Unfortunately, there isn't a simple, straight-forward way to import a file on the internet directly into your repl, but there are two slightly round-about ways to do it. You can download the files to your own computer and then upload them to your repl, or you can look at the "under the covers" source code for the file and copy that into an empty new file.

The Download/Upload Option

The Copy/Paste Page Source Option

Tip 1: Here are some handy keyboard shortcuts:
    Select-All: Command-A (Mac), Control-A (Windows)
    Copy: Command-C (Mac), Control-C (Windows)
    Paste: Command-V (Mac), Control-V (Windows)

Using one of the approaches above, copy the following files to your repl. (You could even use different approaches for the first two files to decide which method you prefer.) These files are templates you can copy and modify repeatedly throughout this course as you start new projects.

After you have copied the files, copy the following code into your index.html file after your name and then click on Run again. This will create a short list of links to the two new sample pages. You can click on them to see the copied files in the context of your repl. Use your browser's back button to return to the index.html file. 

  <ul>
    <li>
        <a href="SimpleHTMLPage.html">SimpleHTMLPage</a>
    </li>
    <li>
        <a href="StudentTemplate.html">StudentTemplate</a>
    </li>
  </ul>

Creating Your Home Page for this Course

Look over the page source for the SimpleHTMLPage.html and StudentTemplate.html files by clicking on each one in turn. You will see that the SimpleHTMLPage.html file is simpler, containing a heading, two paragraphs, and two short lists. The StudentTemplate.html is more involved, including a table, bulleted and numbered lists, and examples of including an image and links to local and external files or web sites.

Choose one of these files as the starting point for your "home" page for this course. Copy and paste the contents of the file you chose into the index.html file, replacing the previous contents. (You may want to check out the handy keyboard shortcuts in Tip 1 above to select the entire contents of the file, copy the selection, and paste it.)

Tip 2: Web Page Filenames

By default, web browsers look for files called index.html, which is why the starting point, or "home" page of any repl in replit.com is index.html. As you create other files in this directory, you will need to give them names as well, such as project1.html. It is best to avoid spaces and special characters in your filename, so COMP Lab #1 is not a good filename for a web page.

Customize Your Page

Return to the main instructions for Creating a Course Web Page to customize your page.

Before You Go: A Note about "Publishing" Your Web Page

Lab 1 will refer several times to "publishing" your web page. The Detailed Schedule will also refer to that or to "uploading your page to the server." These comments are aimed at people who are developing their web pages on their own computers and must then upload, or publish, the pages to a K College server so that others can see them. You don't need to do that! You will be developing your pages on the replit.com server, where they are publicly available from the start.

What you will need to do, though, is to submit the web address of your repl to Kit, so that the graders and instructor can get to it. You can find the web address at the top of the formatted version of your page in the right-most pane.