Setting up a Sandbox to Practice Programming

Using cPanel, File Manager, and FTP

cPanel icon + File Manager icon + FileZilla icon = Sandbox icon
Several screenshots combined with plus icon by Icons8, equals icon by Icons8, and sandbox icon by Icons8

Yesterday, I realized I didn’t like CSS coding very much. After reviewing HTML, it was repetitive. It seemed like yet another way to do the same things I learned how to do in HTML. It also seemed very complicated, once I got deeper into it.

Since this is all review, anyway, I realized I could blitz through the rest of the book. I observed how the code worked and how it displayed. The nuts and bolts of how everything works can be looked at another day—if I need it at all. In my research, I learned about Bootstrap. It is a way to standardize CSS. I can learn how to write that code if I really need to code in CSS.

Now I’ll move on to the next book, JavaScript and JQuery, by Jon Duckett (no affiliation).

I made a sandbox on my web server to practice HTML, CSS, and now programming.

I’m a beginning programmer. You might be a beginning programmer. You might not know what a sandbox is and how to create one.

A sandbox is a place on a web server to upload and play with code. This location has no ties to your actual web site, so you are free to write broken code without danger of messing up a main site. Ideally, this will have a domain name, so you can practice “live.”

These instructions assume that you are paying for a web site, and that you have a web host running cPanel. Most sites are.

You can set up a local sandbox, on your personal computer, but I don’t really know how to do that one.

Go fish, if that’s the case.

How to set up a sandbox on your web server

Most hosted web sites come with a control panel for managing the back end. This is where you install programs (like blogs), manage email addresses, and check stats.

Usually, this control panel is using cPanel software. Different versions look slightly different.

If you don’t know how to get to your control panel, look at the documentation that came from your web host when you first signed up.

I host my personal web site with a company called A2 (not an affiliate link).

Step One: Go to your cPanel

Screenshot of cPanel window
Screenshot by author

The instructions for doing this on your web server might be different. Check your documentation or contact your web host. On my last two web hosts, the address of cPanel was http://yourWebSite.com/cpanel. Then you enter your user name and password to get inside.

Once inside, you will see a collection of icons that represent different parts of your control panel. Again, there are many different versions, so don’t worry if my screenshot looks different (above).

Step Two: Open File Manager and create your sandbox

Screenshot of File Manager showing "public_html"
Screenshot by author

The icons may be different, but look for the name “File Manager.” Open it.

Your screen should show a lot of files and folders. It should look very similar to my screenshot above. Double-click on the “public_html” icon. This is where all of your website files live (also known as “document root”).

Step Three: Create a new folder called “sandbox”

Screenshot of File Manager (creating a new folder called "sandbox")
Screenshot by author

Click on the “+ Folder” icon. A window will pop up and ask you for a name. Put in the name “sandbox” and click the button “create new folder.”

Success (kind of!)

Now, you have an empty sandbox. Your new space is set up at the web address:

http://yourWebSite.com/sandbox

If you go to this page, you might find an empty file list or you might get an error from your server (Forbidden!). Don’t worry. That just means you don’t have anything in your folder to look at.

Step Four: Create a blank file to be your web page

File Manager screenshot (creating a new file)
Screenshot by author

Back in File Manager, double-click on your new “sandbox” folder to open it. It will be empty, of course. Click the “+ File” button at the top. In the new window, create the file “index.html”. When a web address opens, you are looking at either the index.html page, or the index.htm (or if you are a programmer it could be index.SomethingElse).

Finally, open this blank file so you can edit it and practice.

Step Five: Edit your new “web” file

Right-clicking (or Ctrl-Clicking) our new file in File Manager and selecting "Edit"
Screenshot by author

Right-click (Windows) or Ctrl-Click (Mac) on your new file and click “Edit.” You will now have a window where you can type computer code.

Open the actual web address in a new window (or new tab). Remember, the address of this new location is:

http://yourWebSite.com/sandbox

You can include or leave off the /index.html part. A web server assumes that’s what you mean.

Every time you write some code you would like to test, put it into the “index.html” file, save it, and then refresh to browser window.

Try it out! Put in some dummy code to test out your new sandbox:

<html>
<head>
<title>My Sandbox!</title></head>
<body>
<h1>My first headline!</h1>
<p>I’ve even got some body copy. Radical!</p>
</body>
</html>

Step Six: Set up FTP for transferring folders

Screenshot of FTP accounts area of cPanel
Screenshot by author

This is great for working with files one at a time. You can create single files or folders with ease. You will soon find out that File Manager will only work with single files or folders. Once you start programming, you will be working with multiple files and complex folder structures.

For this job, we’ll need FTP. That’s File Transfer Protocol, for those of you that don’t know. It doesn’t matter much here. We could call it the Thing that puts the Thing on the Thing (TTT).

Open your main cPanel window. The icons will look different, but find the FTP Accounts section.

Use this area to make an FTP account. This will be a name and password combination like an email address.

After you have created the account, it may tell you the “FTP settings” to connect. Mine were available under “Configure FTP Client.” It will be a combination of:

Step Seven: Download and fire up FileZilla

FileZilla screenshot
Screenshot by author

I’m using Windows, so the free program you use may be different. I am using FileZilla (no affiliation). Once you download it and open it, you can enter your above server details and connect to your server. I have an option called “Quick Connect.”

All of my local files (on my computer) show up in the left window. All of the remote server files (on your web host) are in the right window. Browse to the file/folder you would like to upload in the left window. Browse to where you want that to go in your right window. Double-click a file/folder in the left window to move it to the remote server. This also works in reverse, if you want to download a file/folder from your server.

Step Eight: Crack a beer, you’re done!

Two root beer bottles clinking in front of a sunsut
Photo by Wil Stewart on Unsplash

I’m sorry there’s so many steps, but you only have to set this up once. Now that it’s set up, I can open two tabs in my web browser. One shows the edit page of my code. The other shows my resulting web page.

If I need to move around a folder, I can do that through FTP.

When I started working with CSS, there were three tabs to open. One tab for my index.html text, one for my CSS text, and the output on a web page. There might be even more when I start to program, but we’ll get there when we get there.

How did you do? Are you all ready to join us? Tomorrow we start to learn JavaScript!

Bunny Trail: Password-Protect Your Sandbox

We are experimenting here. Our code might be broken and insecure. We should password protect our sandbox from lurking eyes (like search engines and hackers).

The instructions aren’t given here, but I found a great tutorial online that steps you through the whole process. You can see the front gate of my sandbox (asking for a password).


Matt is on a noble quest to grow into the next level of web developer. Let the battle begin! Sign up for the M.W. McCabe newsletter.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.